sticky, one window tall: the picture
...layers (vortex, glow)...
starts at the top of the stage and scrolls over it;
its height (--oc-track) is the scroll the scene plays for
newsletter + footer
rides up over the held scene, "and that's the end"
The stage stays stuck from the moment its top reaches the top of the window
until the end of .oc-scene, which is the end of the page, so the scene never
scrolls away. Before that it rises with the page like any section.
========================================================================== */
/* Two window heights (7 Oct). A phone's browser bars collapse as the reader scrolls, so the
window has a small height (bars showing) and a large one (bars away). The stage, the picture,
fills the LARGE one: sized by the small one it left a flat strip under the picture for the
whole scene once the bars had gone (the owner, 7 Oct: the section "not quite right" on a
phone). Words and buttons that must stay clear of the bars sit by --oc-vh-ui, the SMALL one
(Home's .oa-text). On a desktop the two are the same height. */
.oc-scene { position: relative; --oc-vh: 100vh; --oc-vh-ui: 100vh; }
@supports (height: 100lvh) { .oc-scene { --oc-vh: 100lvh; --oc-vh-ui: 100svh; } }
.oc-stage { position: sticky; top: 0; z-index: 0; height: var(--oc-vh); overflow: hidden;
background: var(--oc-ground, #000); }
/* the block after the stage starts at the stage's top, so it scrolls over it */
.oc-stage + * { margin-top: calc(-1 * var(--oc-vh)); }
.oc-track { position: relative; z-index: 1; height: var(--oc-track, 200vh); pointer-events: none; }
.oc-track a, .oc-track button, .oc-track input { pointer-events: auto; }
.oc-over { position: relative; z-index: 2; }
/* the picture: a placeholder (average colour + the 64 px blurred still) until the
canvas has drawn its first frame, then the canvas fades in over it. The player
draws that first frame as soon as the section is near, so the fade is normally
over before it scrolls into view; .is-instant skips it when the canvas draws the
moment it arrives on screen (a jump to the section, a reload there). */
.oc-media { position: absolute; inset: 0; overflow: hidden;
background: #383638 url("oracle-portal-f0-placeholder.webp") center / cover no-repeat; }
.oc-canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 400ms ease; }
.oc-canvas.is-drawn { opacity: 1; }
.oc-canvas.is-instant { transition: none; }
/* an