/* Motion layer (T5). Everything that hides or pins lives under html.motion-ok, which motion.js adds only when
   GSAP + ScrollTrigger are loaded and the visitor has not asked for reduced motion. Remove the class and the
   page is the complete, lit, static page. */

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Load sequence: start states (settled by ~1.1s; motion.js animates them on the same tick) ---------- */
.motion-ok .hero__title .line > span { transform: translateY(110%); }
.motion-ok .hero__sentence,
.motion-ok .hero__cta { opacity: 0; }
.motion-ok .hero .arch { opacity: 0; }

/* ---------- Lighting reveal: pinned stage (sticky = robust with Lenis) ---------- */
.motion-ok .reveal { height: 260vh; }
.motion-ok .reveal__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  align-items: center;
  padding-block: 88px clamp(72px, 9vh, 120px);
}
.motion-ok .reveal__inner { gap: clamp(28px, 4.5vh, 52px); }
.motion-ok .sims { transform-origin: 50% 100%; will-change: transform, opacity; }
.motion-ok .reveal__heading, .motion-ok .reveal__wash { will-change: opacity, transform; }
@media (min-width: 721px) {
  /* the mockup is sized by the stage's height so heading + mockup fit one pinned screen */
  .motion-ok .sims { width: min(92vw, max(780px, min(78vw, 1120px, calc((100svh - 380px) * 1.6)))); }
}
@media (max-width: 720px) {
  .motion-ok .reveal { height: 190vh; }
  .motion-ok .reveal__stage { padding-block: 76px 56px; }
  .motion-ok .reveal__inner { gap: 22px; }
  .motion-ok .reveal__sub { margin-top: 14px; font-size: 1rem; }
  /* the pinned phone screen has to hold heading + mockup: the mockup shows its head, stats and chart (the voucher
     table is in the static page and the accessible name) */
  .motion-ok .sims__vouchers, .motion-ok .sims__tile .sims__sub { display: none; }
  .motion-ok .sims__body { padding-top: 14px; gap: 12px; }
  .motion-ok .sims__plot { min-height: 150px; }
}

/* ---------- Feedback: press states that base/section CSS does not cover ---------- */
.nav__brand, .nav__links a, .footer__links a, .menu-sheet__links a:not(.btn) {
  transition: transform 300ms var(--ease-out), color 240ms ease, border-color 240ms ease;
}
.nav__brand:active, .nav__links a:active, .footer__links a:active, .menu-sheet__links a:not(.btn):active { transform: scale(0.97); }
.contact__fact a:active { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .nav__brand:active, .nav__links a:active, .footer__links a:active, .menu-sheet__links a:not(.btn):active { transform: none; }
}