/* ==========================================================================
   Motion. Principles (see DESIGN_GUIDELINES.md › Motion):
   - Motion explains the product: the helmet turning as you scroll,
     the point cloud building, rows being checked.
   - Entrances happen once. No pulsing or bouncing decoration.
   - First-screen content is never hidden waiting for scroll.
   - Everything turns off under prefers-reduced-motion.
   ========================================================================== */

/* Load sequence: class="enter" style="--i:N" */
.enter { animation: enter-up var(--dur-reveal) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 110ms + 100ms); }
@keyframes enter-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.enter-scale { animation: enter-scale 1.4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
@keyframes enter-scale { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }

/* Split headline: main.js wraps each word in .sw > span. Words rise from a mask. */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.sw > span { display: inline-block; animation: word-up 1.1s var(--ease-out) both; animation-delay: calc(var(--w, 0) * 55ms + var(--d, 100ms)); }
@keyframes word-up { from { transform: translateY(105%); } to { transform: none; } }

/* Scroll reveal. main.js hides only elements that start below the first screen. */
[data-reveal].reveal-pre { opacity: 0; transform: translateY(36px); }
[data-reveal="fade"].reveal-pre { transform: none; }
[data-reveal="scale"].reveal-pre { transform: translateY(24px) scale(.96); }
[data-reveal="wipe"].reveal-pre { opacity: 1; clip-path: inset(0 0 100% 0 round var(--r-lg)); transform: none; }
[data-reveal="wipe"].reveal-pre img { transform: scale(1.15); }
[data-reveal].reveal-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out), clip-path 1.3s var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
[data-reveal="wipe"].reveal-in { clip-path: inset(0 0 0 0 round var(--r-lg)); }
[data-reveal="wipe"].reveal-in img { transition: transform 1.6s var(--ease-out); }

@keyframes panel-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }


/* Table rows "checked" one by one */
.check-rows.is-pending tbody tr { opacity: .15; }
.check-rows.is-checking tbody tr { opacity: 1; transition: opacity 500ms var(--ease-out); }
.check-rows.is-checking tbody tr:nth-child(1) { transition-delay: 100ms; }
.check-rows.is-checking tbody tr:nth-child(2) { transition-delay: 380ms; }
.check-rows.is-checking tbody tr:nth-child(3) { transition-delay: 660ms; }
.check-rows.is-checking tbody tr:nth-child(4) { transition-delay: 940ms; }
.check-rows.is-checking tbody tr:nth-child(5) { transition-delay: 1220ms; }

/* Slow zoom on inner-page hero photos */
.page-hero .bg img { animation: kenburns 18s var(--ease-out) both; }
@keyframes kenburns { from { transform: scale(1.14); } to { transform: scale(1.02); } }

/* Parallax targets are moved by main.js with --py */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  [data-reveal].reveal-pre { opacity: 1; transform: none; clip-path: none; }
  .marquee-track { animation: none !important; flex-wrap: wrap; width: auto; }
  .statement .w { opacity: 1; }
  .story-step { opacity: 1; }
  /* pinned mobile story: only the current step shows, just without the fade */
  @media (max-width: 960px) { .story-step { opacity: 0; } .story-step.is-active { opacity: 1; } }
  .scrub { height: auto; }
  .scrub-sticky { position: relative; top: 0; height: auto; padding-block: var(--sp-5); }
  .scrub.is-live .scrub-points li { opacity: 1; }
  [data-parallax] { transform: none; }
}

/* Scroll sequence: until the first frame loads, the poster image shows */
.sequence-frame canvas { opacity: 0; transition: opacity 400ms var(--ease-out); }
.sequence-frame canvas.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .sequence { height: auto; }
  .sequence-sticky { position: static; height: auto; }
  .sequence-frame { aspect-ratio: 16 / 9; }
  .seq-caps { position: static; width: auto; padding: var(--sp-5); color: inherit; }
  .seq-cap { position: static; opacity: 1; transform: none; margin-top: var(--sp-4); }
  .seq-progress { display: none; }
}