/* The joins between chapters. Each pin takes over from the last on the same frame, so the page reads as one take.
   core/stage.js sets .staged only when it is running, and .arrived when a chapter's first frame is due. */
html.staged [data-join] { position: relative; z-index: 1; margin-top: -100vh; background: none; }
html.staged [data-join]:not(.arrived) > * { opacity: 0; }
html.staged [data-join]:not(.arrived), html.staged [data-join]:not(.arrived) * { pointer-events: none !important; }

/* The hall ends on bare ground, and the words start at the foot of the screen on that same frame. */
html.staged .close-joined { margin-top: -12vh; }

/* A dip to the ground colour between two scenes that share nothing. */
.dip, .flight-ground, .assembly-sketch { display: none; }
.tier-full .dip { position: absolute; inset: 0; z-index: 6; display: block; background: var(--ground); opacity: 0; pointer-events: none; }

/* Under the doors while they close, and over the last room while its screen becomes the next chapter's paper. */
.tier-full .flight-ground { position: absolute; inset: 0; z-index: 1; display: block; background: var(--ground); pointer-events: none; }

/* The phone before it exists: pencil on the ground, and the light turns it and the headline real. */
.tier-full .scene-on .assembly-sketch { position: absolute; inset: 0; z-index: 3; display: block; background: var(--ground); color: var(--pencil); pointer-events: none; will-change: clip-path; }
.assembly-sketch svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.assembly-sketch path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.assembly-sketch .faint { stroke-width: 1; opacity: 0.34; }