/* Resilience: the page without JavaScript, static mode, and the boot failsafe. Loads last.

   html.js       main.js sets it the moment it runs; only then are the reveals hidden (to animate in).
   html.js-init  the first two frames after that: the reveals hide instantly instead of fading out.
   html.wait     a deep link (#slug or ?ch=N) is waiting for the story to open on its chapter: the words stay
                 out of sight until then, so the hero never flashes first (main.js removes it; 8 s at most).
   html.static   no WebGL2, a failed boot, a GPU context lost for good, or ?static: a poster behind
                 every section (posters/chNN.webp, NN = section index; chNN-m.webp on phones held upright), all text visible, native scrolling
                 with CSS scroll-snap, and the Chapters button and sheet. A page without JavaScript looks the same, minus the sheet (html:not(.js)).
   html.gl-on    the first WebGL frame has been drawn: the canvas fades in from black. There is no loader.

   Selectors are written out in full (no :is/:where) so the oldest browsers, the ones most likely
   to land here, still read them. */

/* ---------- Content is visible unless the running app is about to reveal it ---------- */
html:not(.js) .reveal,
html.static .reveal { opacity: 1; transform: none; filter: none; transition: none }
html.js-init .reveal { transition: none !important }

/* ---------- A deep link waits, unseen, until the story can open on its chapter ---------- */
html.wait main, html.wait #era, html.wait #hud-br { visibility: hidden }

/* ---------- The WebGL canvas fades in from black once it has something to show ---------- */
html.js #gl { transition: opacity .9s ease }
html.js:not(.gl-on) #gl { opacity: 0 }

/* ---------- Static mode (and no JavaScript): a plain, natively scrolling page ---------- */
html:not(.js),
html.static { scroll-snap-type: y mandatory; scroll-behavior: smooth }
html:not(.js) body,
html.static body { overflow-x: hidden; overflow-y: visible }
/* the page scrolls natively here, so it shows a thin native scrollbar (tokens.css hides it for the 3D story, which
   scrolls itself): the standard properties, and the WebKit pseudo-elements for Safari before 18.2 */
html:not(.js), html.static { scrollbar-width: thin; scrollbar-color: rgba(235,235,245,.3) transparent }
html:not(.js)::-webkit-scrollbar, html.static::-webkit-scrollbar { display: block; width: 8px; background: transparent }
html:not(.js)::-webkit-scrollbar-thumb, html.static::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(235,235,245,.3) }

/* the 3D story's chrome has nothing to point at here */
html:not(.js) #gl, html.static #gl,
html:not(.js) #labels, html.static #labels,
html:not(.js) #cut-veil, html.static #cut-veil,
html:not(.js) #era, html.static #era,
html:not(.js) .hint, html.static .hint,
html:not(.js) .q-count, html.static .q-count { display: none }
/* the Chapters button and sheet need JavaScript (nav.js), which static mode has: they stay, minus the progress bar,
   in the nav on wider screens and as the bottom pill on phones held upright (hud.css places them) */
html:not(.js) #nav-chapters, html:not(.js) #hud-br,
html.static #hud-br .track { display: none }
html.static #hud-br { justify-content: flex-end }
@media (min-width:735px) { html.static #hud-br { display: none } }

/* behind every section: its poster (below), over a faint glow where the art would be, so a missing poster still looks deliberate */
html:not(.js) main > section,
html.static main > section {
  --fb-veil: radial-gradient(95% 75% at 0% 100%, rgba(3,3,10,.74), rgba(3,3,10,0) 70%);
  --fb-glow: radial-gradient(34% 44% at 71% 46%, rgba(41,151,255,.10), rgba(41,151,255,0) 72%);
  scroll-snap-align: start;
  background-color: var(--bg, #03030a);
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
/* the hero and the finale centre their words, so the veil and glow do too */
html:not(.js) main > section:first-of-type, html.static main > section:first-of-type,
html:not(.js) main > section:last-of-type, html.static main > section:last-of-type {
  --fb-veil: radial-gradient(58% 46% at 50% 52%, rgba(3,3,10,.5), rgba(3,3,10,0));
  --fb-glow: radial-gradient(38% 48% at 50% 46%, rgba(41,151,255,.12), rgba(41,151,255,0) 72%);
}
/* the posters load only in static mode, or with JavaScript switched off; never in the moment before main.js
   runs, so the 3D story never downloads them. Elsewhere (a script that failed to arrive) the veil and glow remain.
   Each section names its own pair (NN = its index): --poster, and --poster-m for phones held upright (390×844 art,
   each sculpture where the phone layout puts it, above the card). They are declared in this file, so the url()s
   resolve from it, and a custom property fetches nothing until a rule below uses it. */
main > section:nth-of-type(1) { --poster: url(../posters/ch00.webp); --poster-m: url(../posters/ch00-m.webp) }
main > section:nth-of-type(2) { --poster: url(../posters/ch01.webp); --poster-m: url(../posters/ch01-m.webp) }
main > section:nth-of-type(3) { --poster: url(../posters/ch02.webp); --poster-m: url(../posters/ch02-m.webp) }
main > section:nth-of-type(4) { --poster: url(../posters/ch03.webp); --poster-m: url(../posters/ch03-m.webp) }
main > section:nth-of-type(5) { --poster: url(../posters/ch04.webp); --poster-m: url(../posters/ch04-m.webp) }
main > section:nth-of-type(6) { --poster: url(../posters/ch05.webp); --poster-m: url(../posters/ch05-m.webp) }
main > section:nth-of-type(7) { --poster: url(../posters/ch06.webp); --poster-m: url(../posters/ch06-m.webp) }
main > section:nth-of-type(8) { --poster: url(../posters/ch07.webp); --poster-m: url(../posters/ch07-m.webp) }
main > section:nth-of-type(9) { --poster: url(../posters/ch08.webp); --poster-m: url(../posters/ch08-m.webp) }
main > section:nth-of-type(10) { --poster: url(../posters/ch09.webp); --poster-m: url(../posters/ch09-m.webp) }
main > section:nth-of-type(11) { --poster: url(../posters/ch10.webp); --poster-m: url(../posters/ch10-m.webp) }
main > section:nth-of-type(12) { --poster: url(../posters/ch11.webp); --poster-m: url(../posters/ch11-m.webp) }
main > section:nth-of-type(13) { --poster: url(../posters/ch12.webp); --poster-m: url(../posters/ch12-m.webp) }
main > section:nth-of-type(14) { --poster: url(../posters/ch13.webp); --poster-m: url(../posters/ch13-m.webp) }
main > section:nth-of-type(15) { --poster: url(../posters/ch14.webp); --poster-m: url(../posters/ch14-m.webp) }
html:not(.js) main > section { background-image: var(--fb-veil), var(--fb-glow) }
html.static main > section { background-image: var(--fb-veil), var(--poster, none), var(--fb-glow) }
@media (scripting: none) {
  html:not(.js) main > section { background-image: var(--fb-veil), var(--poster, none), var(--fb-glow) }
}
/* phones and tablets held upright: the portrait posters, pinned to the top so the art stays clear of the words on
   taller and shorter screens alike (an upright tablet centres its card at the foot, as a phone does: layout.css) */
@media (max-width:1024px) and (orientation:portrait) {
  html.static main > section { background-position: center top; background-image: var(--fb-veil), var(--poster-m, none), var(--fb-glow) }
}
@media (scripting: none) and (max-width:1024px) and (orientation:portrait) {
  html:not(.js) main > section { background-position: center top; background-image: var(--fb-veil), var(--poster-m, none), var(--fb-glow) }
}

/* the email buttons need JavaScript (it builds the address on a click); with it switched off they step aside and
   the finale's noscript line asks for JavaScript instead (no form of the address is ever in the page) */
@media (scripting: none) { .contact-actions { display: none } }

/* the giant faint year: without JavaScript nothing can check it clears the card, so it stays out
   (static mode with JavaScript shows it where it fits, as the 3D story does) */
html:not(.js) .year-bg { display: none }

/* the hard questions: all of them, as a list (the carousel needs the app) */
html:not(.js) .q-drum, html.static .q-drum { display: block }
html:not(.js) .q-wheel .q, html.static .q-wheel .q {
  opacity: 1; visibility: visible; transform: none !important; transition: none; margin: 0 0 .5em;
}
html:not(.js) .q-wheel, html.static .q-wheel { font-size: clamp(20px,1.8vw,26px); line-height: 1.25 }

/* charts: drawn and still (charts.js draws them when JavaScript runs; the bars are plain HTML).
   Without JavaScript the SVG charts stay empty, so they step out: the task panel keeps its 3 sec → ≈ 17 hours
   row, and the hype panel (all chart) leaves with them; its key number is in the note above it. */
html:not(.js) .panel svg, html:not(.js) #winters .panel { display: none }
html:not(.js) #winters .copy { display: block }   /* with its panel gone, no two-column card (tablets, phones on their side) */
html:not(.js) #winters .note-long { display: inline }   /* the number the chart would have shown, on every screen */
html:not(.js) .panel .bar .tr i, html.static .panel .bar .tr i { transform: none; transition: none }
html:not(.js) .panel .draw, html.static .panel .draw { stroke-dashoffset: 0; transition: none }
html:not(.js) .panel .fade, html.static .panel .fade,
html:not(.js) .panel .pt, html.static .panel .pt { opacity: 1; transition: none }

/* phones: the art sits above the card; the giant year would crowd the words; snap gently (cards can be tall) */
@media (max-width:820px) {
  html:not(.js), html.static { scroll-snap-type: y proximity }
  html:not(.js) main > section, html.static main > section {
    --fb-veil: linear-gradient(rgba(3,3,10,0) 35%, rgba(3,3,10,.7) 85%);
    --fb-glow: radial-gradient(60% 34% at 50% 30%, rgba(41,151,255,.11), rgba(41,151,255,0) 72%);
  }
  html:not(.js) .year-bg, html.static .year-bg { display: none }
}
/* tablets held upright (to 1024px wide): the card centred at the foot and the art above it, as on a phone */
@media (min-width:821px) and (max-width:1024px) and (orientation:portrait) {
  html:not(.js) main > section, html.static main > section {
    --fb-veil: linear-gradient(rgba(3,3,10,0) 35%, rgba(3,3,10,.7) 85%);
    --fb-glow: radial-gradient(60% 34% at 50% 30%, rgba(41,151,255,.11), rgba(41,151,255,0) 72%);
  }
  html:not(.js) .year-bg, html.static .year-bg { display: none }
}
@media (prefers-reduced-motion:reduce) {
  html:not(.js), html.static { scroll-behavior: auto }
}