/* ============================================================
   ClassKhata — Custom CSS (animations & effects Tailwind can't do)
   ============================================================ */

/* ---------- Perspective container for 3D tilt ---------- */
.perspective-container {
  perspective: 900px;
}

/* ---------- Floating Badges ---------- */
@keyframes float-slow {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-10px); }
}
@keyframes float-fast {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-8px); }
}
.animate-float-slow { animation: float-slow 5s ease-in-out infinite; }
.animate-float-fast { animation: float-fast 3.5s ease-in-out infinite; }

/* ---------- Pulse Dot ---------- */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.5); }
}
.animate-pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

/* ---------- Scroll Reveal ---------- */
.scroll-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Radial Gradient Utility ---------- */
.bg-gradient-radial {
  background: radial-gradient(circle, var(--tw-gradient-from) 0%, var(--tw-gradient-to) 70%);
}

/* ---------- Phone Frame Glow ---------- */
.phone-frame::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 44px;
  background: linear-gradient(135deg, rgba(47,125,122,0.12), rgba(245,185,66,0.08));
  z-index: -1;
  filter: blur(20px);
  pointer-events: none;
}

/* ---------- 3D Tilt Style (managed via JS) ---------- */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---------- Feature Card 3D Inner Shine ---------- */
.feature-card-3d {
  transform-style: preserve-3d;
  position: relative;
}
.feature-card-3d::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.feature-card-3d:hover::before {
  opacity: 1;
}

/* ---------- Pricing Card 3D Shine ---------- */
.pricing-card-3d {
  transform-style: preserve-3d;
  position: relative;
}
.pricing-card-3d::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,0.5) 0%, transparent 40%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.pricing-card-3d:hover::before {
  opacity: 1;
}

/* ---------- Hamburger Animation ---------- */
#mobile-nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(1) {
  transform: rotate(45deg) translateY(1px);
}
#mobile-nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2) {
  opacity: 0;
}
#mobile-nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(3) {
  transform: rotate(-45deg) translateY(-1px);
}

/* ---------- Hero Particles ---------- */
#hero-particles canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Smooth Scrollbar ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #B7E0DB; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #2F7D7A; }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal { transition: none; opacity: 1; transform: none; }
  .animate-float-slow, .animate-float-fast, .animate-pulse-dot { animation: none; }
  [data-tilt] { transform: none !important; }
}