/* sequence-hero.css: the structural CSS the player relies on. Colors, type and
   entrances come from the design package; keep these mechanics. */

.hero{position:relative;height:500vh}              /* scroll distance: ~500vh for 150 frames, ~800vh for a two-chapter journey */
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--canvas,#14181c)}
.stage canvas.seq{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s var(--ease-out,ease)}
.stage.seq-ready canvas.seq{opacity:1}
.stage.seq-failed canvas.seq,.stage.seq-static canvas.seq{display:none}
.stage .poster,.stage .poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.stage .ring{position:absolute;right:24px;bottom:24px;width:40px;height:40px;color:var(--accent-muted,#8aa);transition:opacity .5s}
.stage.seq-loaded .ring,.stage.seq-failed .ring,.stage.seq-static .ring{opacity:0}
.stage .ring circle{stroke-dashoffset:var(--ld,126);transform:rotate(-90deg);transform-origin:center}

.band{position:absolute;opacity:0;visibility:hidden;will-change:opacity,transform}
.band:first-of-type{opacity:1;visibility:visible}
/* a callout follows its part: --ax/--ay are written by the player from anchors.json */
.band.callout{left:0;top:0;transform:translate(var(--ax,-999px),var(--ay,-999px))}

/* reduced motion and failed frames: every caption shown settled over the poster */
.stage.seq-static .band{opacity:1!important;visibility:visible!important;position:relative}
.stage.seq-static .band.callout{display:none}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}