/* ==========================================================================
   Animations — subtle, elegant, purposeful
   ========================================================================== */

[data-animate]{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(0.16,1,0.3,1), transform .7s cubic-bezier(0.16,1,0.3,1);
}
[data-animate].is-visible{
  opacity: 1;
  transform: translateY(0);
}
[data-animate="fade"]{ transform: none; }
[data-animate-delay="1"]{ transition-delay: .08s; }
[data-animate-delay="2"]{ transition-delay: .16s; }
[data-animate-delay="3"]{ transition-delay: .24s; }
[data-animate-delay="4"]{ transition-delay: .32s; }
[data-animate-delay="5"]{ transition-delay: .4s; }
[data-animate-delay="6"]{ transition-delay: .48s; }

/* Hero load sequence */
.hero__eyebrow{ opacity: 0; animation: riseIn .6s .1s var(--ease) forwards; }
.hero__title{ opacity: 0; animation: riseIn .7s .22s var(--ease) forwards; }
.hero__desc{ opacity: 0; animation: riseIn .7s .34s var(--ease) forwards; }
.hero__actions{ opacity: 0; animation: riseIn .7s .46s var(--ease) forwards; }
.hero__trust{ opacity: 0; animation: riseIn .7s .58s var(--ease) forwards; }
.hero__media{ opacity: 0; animation: heroMedia .9s .3s var(--ease) forwards; }

@keyframes riseIn{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes heroMedia{
  from{ opacity: 0; transform: translateY(16px) scale(0.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

/* Route/path draw */
.route-path{
  stroke-dasharray: 6 8;
  animation: dashMove 12s linear infinite;
}
@keyframes dashMove{
  to{ stroke-dashoffset: -240; }
}

/* Floating decorative dot */
.float-dot{ animation: floatY 5s ease-in-out infinite; }
@keyframes floatY{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* Counters handled via JS but ensure smooth rendering */
.stat__number{ font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce){
  .hero__eyebrow, .hero__title, .hero__desc, .hero__actions, .hero__trust, .hero__media{
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .route-path{ animation: none; }
  .float-dot{ animation: none; }
}