/* Story beats for the Mission 1–2 illustrations (src/quest/story.js). Elements keep their FINAL look in the normal
   scene CSS; these rules only cover the story's own parts: the camera wrapper, transients, typed text, reels, the
   pointer, the sleeping screen, the glass shine and the Replay button. Mission-specific parts live in story-m1.css,
   story-m2-share.css and story-m2-incident.css. */
.qs-cam { position: absolute; inset: 0; transform-style: preserve-3d; }
/* Story scenes animate their own entrances, so the old CSS entrances must not replay on every render. */
.qs-story .qs-push, .qs-story .qs-stack > div { animation: none; }

/* Transients: visible only while a `show`/`before` beat shows them (reduced motion never shows them). */
.st-tr { opacity: 0; }
.st-type { display: inline-block; max-width: 100%; white-space: nowrap; vertical-align: bottom; }
.st-words { display: inline; }
.st-word { display: inline-block; }
.st-reel { display: inline-block; height: 1.25em; line-height: 1.25em; overflow: hidden; vertical-align: bottom; }
.st-reel-in { display: grid; translate: 0 calc((1 - var(--n, 1)) * 1.25em); }
.st-reel-in b { height: 1.25em; font: inherit; font-variant-numeric: tabular-nums; }

/* Mouse pointer and click ripple (scene-kit cursor()). The tip of the arrow sits 4 px right / 3 px down of the box. */
.st-cursor { position: absolute; z-index: 6; width: 22px; height: 22px; pointer-events: none; filter: drop-shadow(0 3px 4px #00000073); }
.st-cursor svg { display: block; width: 100%; height: 100%; fill: #fff; stroke: #1f232e; stroke-width: 1.4; stroke-linejoin: round; }
.st-click { position: absolute; left: -11px; top: -12px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #ec3c84; }

/* A device screen before it wakes up, and the light sweep when it does. */
.st-sleep { position: absolute; inset: 0; z-index: 4; border-radius: inherit; background: radial-gradient(120% 60% at 50% 0%, #17141f, #050508 70%); }
.st-shine { position: absolute; inset: -10% -30%; z-index: 3; pointer-events: none; background: linear-gradient(105deg, transparent 36%, #ffffff3d 47%, #ffffff12 54%, transparent 64%); }

/* Replay sits on the illustration's corner, outside the aria-hidden stage. */
.q-visual { position: relative; }
.q-replay { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 13px 6px 10px; border: 0; border-radius: 999px; background: #ffffff1f; color: #fff; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; box-shadow: inset 0 0 0 1px #ffffff38, 0 8px 20px -10px #0009; backdrop-filter: blur(8px); transition-property: background-color, scale; transition-duration: .15s; transition-timing-function: ease-out; }
.q-replay:hover { background: #ffffff33; }
.q-replay:active { scale: .96; }
.q-replay .icon { width: 15px; height: 15px; }
@media (max-width: 560px) { .q-replay { right: 10px; bottom: 10px; } }
@media (prefers-reduced-motion: reduce) { .q-replay { display: none; } }