/* Live story layout — only when story.js upgrades the page (html.story-live).
   Without it (reduced motion, no WebGL2, three failed) the page keeps its static layout. */
html.story-live .hero { --pin: 500svh; height: calc(100svh + var(--pin)); padding: 0; position: relative; }
html.story-live .stage {
  position: sticky; top: 0; height: 100svh; min-height: 0;
  transform-origin: 50% 30%; will-change: transform; border-radius: var(--radius-stage);
}
html.story-live #story { display: none; }
html.story-live .story-anchor { position: absolute; left: 0; width: 1px; height: 1px; }

.story-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 0; }
html.story-live .hero-inner { z-index: 3; will-change: opacity, transform; }
html.story-live .hero-inner .story-mark { display: none; }

/* the final V: the SVG the ribbon folds into (camera maps the ribbon onto this box) */
.stage > .story-mark.is-final {
  position: absolute; z-index: 2; left: 50%; top: 42%; translate: -50% -50%;
  width: min(44vw, 520px); margin: 0; opacity: 0; pointer-events: none; filter: none;
}

/* chapters overlay, bottom-left */
.chapters--live {
  position: absolute; z-index: 3; left: clamp(20px, 4vw, 56px); bottom: 104px;
  width: min(620px, calc(100% - 40px)); height: 220px; display: block; opacity: 0;
  text-align: left;   /* the stage centres the hero copy; chapters read left-aligned */
}
/* Specificity beats motion.css's `html.js [data-reveal].is-in` so only the current chapter shows. */
html.story-live .chapters--live .chapter[data-reveal] { position: absolute; left: 0; bottom: 0; opacity: 0; translate: 0 18px; transition: opacity 0.6s var(--ease-out-soft), translate 0.6s var(--ease-out-soft); }
html.story-live .chapters--live .chapter[data-reveal][aria-current="step"] { opacity: 1; translate: none; }

/* Story dim: the Mist steps back to atmosphere once the chapters begin, so the ribbon reads clearly. */
.story-dim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(0, 0, 0, 0.62); opacity: 0; }
.chapters--live .chapter h2 { font-size: 64px; filter: drop-shadow(0 0 28px rgba(0, 0, 0, 0.85)); }
.chapters--live .chapter p { text-shadow: 0 0 22px rgba(0, 0, 0, 0.9); }

/* story UI: progress line, dot pager, pause */
.story-ui { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.story-ui .progress { position: absolute; left: clamp(20px, 4vw, 56px); right: 84px; bottom: 44px; height: 1px; background: rgba(255, 255, 255, 0.10); }
.story-ui .progress span { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--silver-hi), var(--silver-md)); }
.story-ui .dots { position: absolute; right: 22px; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
.story-ui .dots button { width: 24px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.story-ui .dots button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(230, 228, 223, 0.35); transition: background 0.3s, transform 0.3s; }
.story-ui .dots button[aria-current="true"]::before { background: var(--text); transform: scale(1.35); }
.story-ui .pause {
  position: absolute; right: 22px; bottom: 26px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(13, 13, 13, 0.6); backdrop-filter: blur(12px);
  color: var(--text); cursor: pointer; pointer-events: auto; display: grid; place-items: center;
}
.story-ui .pause span { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.story-ui .pause[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }

/* the dimmed V behind Tools */
main > section { position: relative; z-index: 1; }
.backdrop-mark {
  position: fixed; z-index: 0; left: 50%; top: 50%; translate: -50% -50%;
  width: min(62vw, 760px); height: auto; fill: url(#satin); opacity: 0; pointer-events: none;
  transition: opacity 0.9s var(--ease-out-soft);
}
.backdrop-mark.is-on { opacity: 0.18; }

/* The fixed bottom blur steps aside while the story stage is on screen (it would blur the pause button + its focus ring). */
.edge-fade { transition: opacity 0.4s; }
html.story-on .edge-fade { opacity: 0; visibility: hidden; }

@media (max-width: 809.98px) {
  html.story-live .hero { --pin: 360svh; }   /* spec §8: a shorter pin distance on phones */
  .stage > .story-mark.is-final { top: 34%; width: min(70vw, 340px); }
  .chapters--live { bottom: 92px; height: 200px; }
  .chapters--live .chapter h2 { font-size: 44px; }
  .chapters--live .chapter p { font-size: 17px; }
  .story-ui .dots { right: 10px; }
}