/* LaunchV3 motion layer. Everything here applies only under html.is-live (set by motion.js when
   the reader allows motion). Only transform and opacity animate, plus SVG stroke-dashoffset for line drawing. */
:root { interpolate-size: allow-keywords; }

/* Story: pinned stage, hero over the scene */
.is-live .story { height: 360vh; padding-top: 0; }
.is-live .story-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.is-live .story-hero { position: absolute; left: 50%; top: 50%; width: min(920px, 100% - 2 * var(--gutter)); transform-origin: 50% 40%; margin: 0; translate: -50% -50%; will-change: transform, opacity; }
.is-live .story-hero a { pointer-events: auto; }
.is-live .story-canvas { display: block; position: absolute; inset: 0; }
.is-live .story-captions { position: absolute; left: 0; right: 0; top: calc(var(--header-top) + 76px); margin: 0; height: 2.6em; z-index: 4; display: block; color: var(--ink); font-size: clamp(22px, 2.6vw, 34px); pointer-events: none; }
.is-live .story-captions li { position: absolute; left: var(--gutter); right: var(--gutter); text-align: center; opacity: 0; transform: translateY(10px); transition: opacity 480ms var(--e-in), transform 600ms var(--e-in); }
.is-live .story-captions li.on { opacity: 1; transform: none; }
.is-live .story-scroll { display: inline-flex; position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 26px); translate: -50% 0; z-index: 4; font-size: 13px; color: var(--muted); }
.is-live .story-scroll span { animation: nudge 1.8s var(--e-std) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (max-width: 800px) { .is-live .story { height: 280vh; } }

/* Hero entrance on first paint */
.is-live .story-hero > * { animation: rise 900ms var(--e-in) both; }
.is-live .story-hero > h1, .is-live .story-hero > .intro { animation-name: lift; } /* no fade: the largest paint stays immediate */
.is-live .story-hero > :nth-child(2) { animation-delay: 80ms; }
.is-live .story-hero > :nth-child(3) { animation-delay: 160ms; }
.is-live .story-hero > :nth-child(4) { animation-delay: 240ms; }
.is-live .story-hero > :nth-child(5) { animation-delay: 320ms; }
.is-live .story-tiles { animation: fade 1200ms var(--e-std) 200ms both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes lift { from { transform: translateY(14px); } }
@keyframes fade { from { opacity: 0; } }

/* Generic reveal: content starts visible; only live pages start it lowered */
.rv { transition: opacity 800ms var(--e-in) var(--d, 0ms), transform 1000ms var(--e-in) var(--d, 0ms); }
.motion-ready .rv:not(.in) { opacity: 0; transform: translateY(22px); }
.motion-ready .thread.rv:not(.in) { opacity: 0; transform: scaleY(0); }
.is-live .thread.rv { transition: opacity 600ms var(--e-std), transform 1200ms var(--e-in); }

/* Branch lines draw, then each panel's floating card springs in once */
.branch-lines path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.is-live .branch-lines path { transition: stroke-dashoffset 1400ms var(--e-in) 150ms; }
.motion-ready .branch-lines:not(.in) path { stroke-dashoffset: 1; }
.motion-ready .branch:not(.in) .toast { opacity: 0; transform: translate(-50%, 16px) scale(0.96); }
.motion-ready .branch:not(.in) .float-card { opacity: 0; transform: translateY(16px) scale(0.96); }
.is-live .branch .toast, .is-live .branch .float-card { transition: opacity 500ms var(--e-std) calc(var(--d, 0ms) + 500ms), transform 700ms var(--e-spring) calc(var(--d, 0ms) + 500ms); }
.motion-ready .branch:not(.in) .mini-ring .arc { stroke-dasharray: 0 100; }
.is-live .branch .mini-ring .arc { transition: stroke-dasharray 1400ms var(--e-in) calc(var(--d, 0ms) + 400ms); }

/* Comparison: connected items straighten onto the thread */
.is-live .connected li { transition: transform 900ms var(--e-spring), opacity 600ms var(--e-std); }
.is-live .connected li:nth-child(2) { transition-delay: 90ms; }
.is-live .connected li:nth-child(3) { transition-delay: 180ms; }
.motion-ready .connected:not(.in) li:nth-child(1) { transform: rotate(-2deg) translateX(-12px); opacity: 0.4; }
.motion-ready .connected:not(.in) li:nth-child(2) { transform: rotate(1.6deg) translateX(16px); opacity: 0.4; }
.motion-ready .connected:not(.in) li:nth-child(3) { transform: rotate(-1deg) translateX(8px); opacity: 0.4; }
.is-live .connected ul::before { transition: transform 1100ms var(--e-in) 200ms; }
.motion-ready .connected:not(.in) ul::before { transform: scaleY(0); }

/* Large mark at the end of the thread */
.motion-ready .large-mark.rv:not(.in) { opacity: 0; transform: scale(0.8); }
.is-live .large-mark.rv { transition: opacity 700ms var(--e-std) 300ms, transform 900ms var(--e-spring) 300ms; }

/* Scroll-linked where the browser supports it; static elsewhere */
@supports (animation-timeline: view()) {
  .is-live .film-frame { animation: film-grow linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
  @keyframes film-grow { from { transform: scale(0.9); opacity: 0.55; } to { transform: none; opacity: 1; } }
  .is-live .founder-quote .ql { animation: ql-in linear both; animation-timeline: view(); animation-range: entry 30% cover 48%; }
  @keyframes ql-in { from { opacity: 0.16; } to { opacity: 1; } }
  .is-live .footer-word { animation: word-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  @keyframes word-rise { from { transform: translateY(30%); } to { transform: none; } }
}

/* FAQ: smooth open where ::details-content is supported */
@supports selector(::details-content) {
  .questions details::details-content { block-size: 0; overflow: clip; transition: block-size 380ms var(--e-std), content-visibility 380ms allow-discrete; }
  .questions details[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}