.intro-sequence{position:relative;height:700svh;background:#000;color:#fff;}
.intro-sequence__stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#000;}
.intro-sequence__canvas,.intro-sequence__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.intro-sequence__canvas{opacity:0;}
[data-scroll-sequence][data-ready="true"] .intro-sequence__canvas{opacity:1;}
[data-scroll-sequence][data-ready="true"] .intro-sequence__poster{visibility:hidden;}
.intro-sequence[data-frame="0"] .intro-sequence__canvas{opacity:0;}
.intro-sequence[data-frame="0"] .intro-sequence__poster{visibility:visible;}
.intro-sequence__anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none;}
.intro-sequence #objects{top:58svh}.intro-sequence #archive-origin{top:197svh}.intro-sequence #archive-living{top:307svh}
.intro-sequence .archive-meta{mix-blend-mode:difference;color:#fff;opacity:var(--intro-meta-opacity,1);}
@media(max-width:700px){.intro-sequence__poster{object-fit:contain;background:#0a0a0c;}}
@media(prefers-reduced-motion:reduce){.intro-sequence{height:200svh}.intro-sequence #objects{top:25svh}.intro-sequence #archive-origin{top:50svh}.intro-sequence #archive-living{top:75svh}}

.prologue {
  --finale-run: 235svh;
  position: relative;
  height: calc(100svh + var(--finale-run));
  background: #fff;
}
.prologue__stage { background: #fff; }
.prologue__meta { opacity: var(--archive-opacity, 0); color: #fff; mix-blend-mode: difference; }
.prologue__loop-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}
.prologue[data-loop-ready="true"] .prologue__loop-frame { opacity: 1; }
.prologue__next { background: #00000014; }
.prologue[data-chapter="burrow"] .prologue__next { background: #fff; }
.prologue__anchor { position: absolute; left: 0; width: 1px; height: 1px; }
#prologue-silk { top: calc(.51 * var(--finale-run)); }
#prologue-burrow { top: calc(.785 * var(--finale-run)); }
html:has(.prologue) { overscroll-behavior-y: none; }
@media (max-width: 700px) {
  .prologue__poster { background: #fff; }
  .prologue__loop-frame { object-fit: contain; background: #0a0a0c; }
}
@media (prefers-reduced-motion: reduce) {
  .prologue { --finale-run: 120svh; }
}