/* ------------------------------------------------------------------
   Motion: hero entrance, scroll reveals, ring draws, disc slides
   Everything here is disabled under prefers-reduced-motion.
   ------------------------------------------------------------------ */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* images: a plain, slow fade. No wipes, no zoom. */
.js .fade > picture {
  opacity: 0;
  transition: opacity 1500ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .fade.is-in > picture {
  opacity: 1;
}

/* rings draw themselves — the brand's signature move. Slow enough to be seen. */
.js .rings circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2600ms var(--ease-in-out);
}
.js .rings.is-in circle {
  stroke-dashoffset: 0;
}
.js .rings circle:nth-child(2) { transition-delay: 180ms; }
.js .rings circle:nth-child(3) { transition-delay: 360ms; }
.js .rings circle:nth-child(4) { transition-delay: 540ms; }
.js .rings circle:nth-child(5) { transition-delay: 720ms; }

/* solid discs slide in from their own edge */
.js .disc {
  transform: translateX(var(--disc-from, 100%));
  transition: transform 1600ms var(--ease-in-out);
}
.js .disc.is-in {
  transform: none;
}

/* hairline grows from the start edge */
.js .rule.reveal {
  transform: scaleX(0);
  transform-origin: right center;
  opacity: 1;
}
.js .rule.reveal.is-in {
  transform: scaleX(1);
}

/* parallax layer */
.js .parallax img {
  will-change: transform;
  transform: translate3d(0, var(--py, 0px), 0) scale(1.12);
}

/* ---------------- hero entrance ---------------- */
.js .hero__media img {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1400ms var(--ease-out), transform 3000ms var(--ease-out);
}
.js .hero__title-a,
.js .hero__title-b {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1000ms var(--ease-out), transform 1000ms var(--ease-out);
}
.js .hero__title-a { transition-delay: 500ms; }
.js .hero__title-b { transition-delay: 720ms; }
.js .hero__rings circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 3200ms var(--ease-in-out);
}
.js .hero__rings circle:nth-child(1) { transition-delay: 500ms; }
.js .hero__rings circle:nth-child(2) { transition-delay: 700ms; }
.js .hero__rings circle:nth-child(3) { transition-delay: 900ms; }
.js .hero__rings circle:nth-child(4) { transition-delay: 1100ms; }
.js .hero__cue,
.js .site-header .brand,
.js .site-header .nav,
.js .site-header__end {
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
.js .hero__cue { transition-delay: 1600ms; }
.js .site-header .brand { transition-delay: 300ms; }
.js .site-header .nav,
.js .site-header__end { transition-delay: 900ms; }

.js.is-loaded .hero__media img { opacity: 1; transform: none; }
.js.is-loaded .hero__title-a,
.js.is-loaded .hero__title-b { opacity: 1; transform: none; }
.js.is-loaded .hero__rings circle { stroke-dashoffset: 0; }
.js.is-loaded .hero__cue,
.js.is-loaded .site-header .brand,
.js.is-loaded .site-header .nav,
.js.is-loaded .site-header__end { opacity: 1; }

/* ---------------- reduced motion: everything visible, nothing moves ---------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js .reveal,
  .js .fade > picture,
  .js .disc,
  .js .rule.reveal,
  .js .hero__media img,
  .js .hero__title-a,
  .js .hero__title-b,
  .js .hero__cue,
  .js .site-header .brand,
  .js .site-header .nav,
  .js .site-header__end {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js .rings circle,
  .js .hero__rings circle {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .js .parallax img {
    transform: none !important;
  }
  .hero__cue::after {
    animation: none;
  }
}