/* The story scrolls natively; the stage stays pinned while it plays. */
.story{position:relative;height:620vh;height:620svh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.callouts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.callouts text{fill:#bdbbb6;font:italic 17px var(--serif)}
.callouts path{fill:none;stroke:#7b7975;stroke-width:.7}
.callouts circle{fill:#b3b0aa}

/* The one warm point left in the dark: the key's end face in the keyway. */
.glint{position:absolute;left:0;top:0;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(255,176,104,.55),rgba(255,110,30,.18) 45%,rgba(255,90,20,0));mix-blend-mode:screen;will-change:transform}

.vignette{position:absolute;inset:0;pointer-events:none;opacity:var(--solid);
  background:radial-gradient(ellipse 75% 70% at 50% 48%,transparent 55%,rgba(0,0,0,.55))}
.grain{position:absolute;inset:-50%;pointer-events:none;opacity:calc(var(--solid)*.055);mix-blend-mode:overlay}
@media (prefers-reduced-motion:no-preference){.grain{animation:grain .9s steps(6) infinite}}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-7%,4%)}40%{transform:translate(5%,-6%)}60%{transform:translate(-3%,8%)}80%{transform:translate(8%,2%)}100%{transform:translate(0,0)}}

.welding-sparks{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}

/* Without WebGL the page is simply the text. */
.no-webgl .story{height:auto}
.no-webgl .stage{position:static;height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:48px;padding:64px 24px}
.no-webgl .stage canvas,.no-webgl .callouts,.no-webgl .cue{display:none}
.no-webgl .captions{position:static}
.no-webgl .definition{position:static;opacity:1!important}