/* ==========================================================================
   Motion: scroll reveals and hero transitions.
   Hidden states only apply once JS has added .js to <html>, so content stays
   visible if scripts fail. Everything is disabled for reduced motion.
   ========================================================================== */

/* ---- Scroll reveal -------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal--image { transform: scale(.96); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---- Hero slider ---------------------------------------------------------- */
.js .hero-slide { pointer-events: none; }
.js .hero-slide.is-active { pointer-events: auto; }

/* Background crossfade with a slow zoom (the incoming slide sits on top). */
.js .hero-slide__bg { opacity: 0; transition: opacity 1.1s var(--ease); }
.js .hero-slide.is-active .hero-slide__bg { opacity: 1; }
.js .hero-slide__bg img { transform: scale(1.14); transition: transform 8s var(--ease-out); }
.js .hero-slide.is-active .hero-slide__bg img { transform: scale(1.04); }

.js .hero-slide__content > * {
  opacity: 0; transform: translate3d(0, 26px, 0);
  transition: opacity .45s var(--ease), transform .6s var(--ease-out);
}
.js .hero-slide.is-active .hero-slide__content > * {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease), transform 1s var(--ease-out);
}
.js .hero-slide.is-active .hero-slide__content > :nth-child(1) { transition-delay: .2s; }
.js .hero-slide.is-active .hero-slide__content > :nth-child(2) { transition-delay: .3s; }
.js .hero-slide.is-active .hero-slide__content > :nth-child(3) { transition-delay: .42s; }
.js .hero-slide.is-active .hero-slide__content > :nth-child(4) { transition-delay: .54s; }

/* Outgoing slide stays visible while it fades out underneath */
.js .hero-slide.is-leaving { visibility: visible; }

/* First paint: badge and controls float in once */
.js .hero-quick, .js .hero__controls { animation: hero-float-in .9s var(--ease-out) .6s both; }
@keyframes hero-float-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

/* ---- Mobile menu ---------------------------------------------------------- */
.mobile-menu { opacity: 0; transform: translateY(-8px); transition: opacity .35s var(--ease), transform .45s var(--ease-out); }
.mobile-menu.is-open { opacity: 1; transform: none; }
.mobile-menu li, .mobile-menu .btn { opacity: 0; transform: translateY(-10px); transition: opacity .4s var(--ease), transform .5s var(--ease-out); }
.mobile-menu.is-open li, .mobile-menu.is-open .btn { opacity: 1; transform: none; }
.mobile-menu.is-open li:nth-child(1) { transition-delay: .04s; }
.mobile-menu.is-open li:nth-child(2) { transition-delay: .08s; }
.mobile-menu.is-open li:nth-child(3) { transition-delay: .12s; }
.mobile-menu.is-open li:nth-child(4) { transition-delay: .16s; }
.mobile-menu.is-open li:nth-child(5) { transition-delay: .2s; }
.mobile-menu.is-open li:nth-child(6) { transition-delay: .24s; }
.mobile-menu.is-open li:nth-child(7) { transition-delay: .28s; }
.mobile-menu.is-open .btn { transition-delay: .32s; }

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal, .js .reveal--image { opacity: 1; transform: none; }
  .js .hero-slide__bg img { transform: none; }
  .hero-slide__bg, .hero-quick { transform: none; }
  .hero-pill__dot::after { display: none; }
}