/* ─── KEYFRAMES ──────────────────────────────────────────────────────── */
@keyframes fadein{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.45}}
@keyframes spotlightDrift{
  0%{transform:translateX(-50%) scale(1)}
  100%{transform:translateX(-47%) scale(1.06)}
}
@keyframes phoneRowPulse{0%,100%{opacity:1}50%{opacity:0.65}}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(32px,-18px) scale(1.05)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1.04)}50%{transform:translate(-22px,28px) scale(1)}}
@keyframes drift3{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-48%,-52%) scale(1.04)}
}

/* ─── HERO ENTRANCE ──────────────────────────────────────────────────── */
.hero-location-badge{animation:fadein 0.6s 0.2s both ease}
.hero-title         {animation:fadein 0.7s 0.35s both ease}
.hero-subtitle      {animation:fadein 0.6s 0.5s both ease}
.hero-typed-wrap    {animation:fadein 0.6s 0.6s both ease}
.hero-btns          {animation:fadein 0.6s 0.72s both ease}
.hero-globe-wrap    {animation:fadein 0.9s 0.25s both ease}

/* ─── REDUCED MOTION ─────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
  }
  .reveal{opacity:1!important;transform:none!important}
}