/* ================================================================
   KASHA — animations.css
   Keyframes, scroll-reveal, micro-interactions
   ================================================================ */

/* ── Scroll Reveal ────────────────────────────────────────────── */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .65s ease, transform .65s ease;
}
[data-reveal].revealed{opacity:1;transform:translateY(0)}
[data-reveal-delay="100"]{transition-delay:.1s}
[data-reveal-delay="150"]{transition-delay:.15s}
[data-reveal-delay="200"]{transition-delay:.2s}
[data-reveal-delay="300"]{transition-delay:.3s}

/* ── Phone Float ──────────────────────────────────────────────── */
@keyframes floatMain{
  0%,100%{transform:translateY(0) rotate(-1.5deg)}
  50%{transform:translateY(-18px) rotate(-1.5deg)}
}
@keyframes floatRight{
  0%,100%{transform:translateY(10px) rotate(2.5deg) scale(.87)}
  50%{transform:translateY(-6px) rotate(2.5deg) scale(.87)}
}

.phone-main  {animation:floatMain  5s ease-in-out infinite}
.phone-right {animation:floatRight 5s ease-in-out infinite 0.7s}

/* ── Glow Pulse ───────────────────────────────────────────────── */
@keyframes glowPulse{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:1;transform:scale(1.08)}
}
.hero-glow-1{animation:glowPulse 6s ease-in-out infinite}
.hero-glow-2{animation:glowPulse 8s ease-in-out infinite 2s}

/* ── Badge dot blink ──────────────────────────────────────────── */
@keyframes blink{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,196,140,.5)}
  50%{opacity:.5;box-shadow:0 0 0 5px rgba(0,196,140,0)}
}
.badge-dot{animation:blink 2s ease-in-out infinite}

/* ── Hero grid subtle pulse ───────────────────────────────────── */
@keyframes gridPulse{0%,100%{opacity:.025}50%{opacity:.06}}
.hero-grid{animation:gridPulse 8s ease-in-out infinite}

/* ── Voice rings ──────────────────────────────────────────────── */
@keyframes voiceRing{
  0%{transform:scale(1);opacity:.6}
  100%{transform:scale(2.6);opacity:0}
}
.voice-ring-1{animation:voiceRing 2s ease-out infinite}
.voice-ring-2{animation:voiceRing 2s ease-out infinite .6s}
.voice-ring-3{animation:voiceRing 2s ease-out infinite 1.2s}

/* Only play rings when active */
.voice-orb:not(.voice-active) .voice-ring-1,
.voice-orb:not(.voice-active) .voice-ring-2,
.voice-orb:not(.voice-active) .voice-ring-3{animation-play-state:paused}

/* ── Voice orb pulse ──────────────────────────────────────────── */
@keyframes orbPulse{0%,100%{box-shadow:0 0 30px rgba(46,91,255,.4)}50%{box-shadow:0 0 60px rgba(46,91,255,.8),0 0 100px rgba(127,90,240,.4)}}
.voice-orb.voice-active .voice-orb-inner{animation:orbPulse 1.5s ease-in-out infinite}

/* ── Transcript result fade-in ────────────────────────────────── */
.transcript-result{
  opacity:0;transform:translateY(12px);
  transition:opacity .5s ease .2s,transform .5s ease .2s;
}
.transcript-result.result-visible{opacity:1;transform:translateY(0)}

/* ── Debt sync icon spin ──────────────────────────────────────── */
@keyframes spinOnce{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.debt-sync-badge svg{animation:spinOnce 2s linear infinite}

/* ── Stat number count ────────────────────────────────────────── */
.stat-number{transition:color .3s ease}

/* ── Feature card hover ───────────────────────────────────────── */
.feature-card{transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease)}
.feature-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  border-color:var(--border-soft);
}
.feature-card:hover .feature-icon{transform:scale(1.1)}
.feature-icon{transition:transform var(--ease)}

/* ── Pricing card hover ───────────────────────────────────────── */
.pricing-card{transition:transform var(--ease),box-shadow var(--ease)}
.pricing-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.pricing-card-featured:hover{transform:translateY(-8px);box-shadow:0 30px 80px rgba(46,91,255,.4)}

/* ── Navbar link underline ────────────────────────────────────── */
.nav-links a{position:relative}
.nav-links a::after{
  content:'';position:absolute;bottom:-2px;left:0;
  width:0;height:1.5px;background:var(--primary);
  transition:width var(--ease);
}
.nav-links a:hover::after{width:100%}

/* ── Showcase phone hover ─────────────────────────────────────── */
.showcase-phone{transition:transform var(--ease-slow)}
.showcase-phone:hover{transform:translateY(-8px) scale(1.02)}
.showcase-phone-center:hover{transform:translateY(-12px) scale(1.03)}

/* ── No-ads feature card ──────────────────────────────────────── */
.feature-card-noads{transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease)}
.feature-card-noads:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 60px rgba(255,111,60,.18);
  border-color:rgba(255,111,60,.4);
}
.feature-card-noads:hover .feature-icon{transform:scale(1.1)}

/* ── Trust pills hover glow ───────────────────────────────────── */
.trust-pill{transition:background var(--ease),border-color var(--ease),color var(--ease),transform var(--ease)}
.trust-pill:hover{transform:translateY(-1px)}

/* ── Scroll-reveal delay 400ms ────────────────────────────────── */
[data-reveal-delay="400"]{transition-delay:.4s}

/* ── FAQ item open/close transition ──────────────────────────────  */
.faq-item{transition:border-color var(--ease),background var(--ease)}
.faq-answer{
  animation:faqFadeIn .25s ease;
}
@keyframes faqFadeIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Pricing noads banner pulse ───────────────────────────────── */
@keyframes noAdsPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,111,60,0)}
  50%{box-shadow:0 0 0 4px rgba(255,111,60,.12)}
}
.pricing-noads-banner{animation:noAdsPulse 3s ease-in-out infinite}