/* scrollbg: one continuous colour field under the chapters (Rob 2026-10-08: "a huge vertical image that scrolls along
   the text"). Each chapter has one big soft colour area on its own ::before; every area reaches calc(45 * var(--svh, 1svh)) past its chapter
   at the top and the bottom and fades to zero at its own edge, so neighbours overlap and there is no seam at a
   chapter border. All layers sit at z-index -1 in main.story (under the text, over the fixed canvas). No animation:
   it moves only because the page scrolls. Rob 2026-10-08: "nice but too much", so every colour is 45 % of the first cut.
   A static grain tile (white, alpha 0 to 3) over the colour stops the 8-bit gradient banding. */

main.story { overflow-x: clip; } /* the areas are 100vw wide; a desktop scrollbar must not make a horizontal scroll */

.story > .ch { --bg-x: 30%; --bg-rx: 95%; --bg-c: rgb(7 14 24); }
.story > .ch::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: calc(50% - 50vw); width: 100vw; top: calc(-45 * var(--svh, 1svh)); bottom: calc(-45 * var(--svh, 1svh));
  /* (1 - t^2)^2 falloff: a broad soft core and a zero slope at the edge */
  background: radial-gradient(ellipse var(--bg-rx) 50% at var(--bg-x) 50%,
    var(--bg-c) 0%, color-mix(in srgb, var(--bg-c) 96.9%, transparent) 12.5%,
    color-mix(in srgb, var(--bg-c) 87.9%, transparent) 25%, color-mix(in srgb, var(--bg-c) 74.1%, transparent) 37.5%,
    color-mix(in srgb, var(--bg-c) 56.3%, transparent) 50%, color-mix(in srgb, var(--bg-c) 37.1%, transparent) 62.5%,
    color-mix(in srgb, var(--bg-c) 19.1%, transparent) 75%, color-mix(in srgb, var(--bg-c) 5.5%, transparent) 87.5%,
    transparent 100%);
}

/* the palette, top to bottom: steel blue, aubergine, a dark amber, from the shader probes c2 / c5 */
.story > .ch-cards    { --bg-x: 28%; --bg-c: rgb(7 14 24); }
.story > .ch-card     { --bg-x: 78%; --bg-c: rgb(18 10 24); }
.story > .ch-absent   { --bg-x: 22%; --bg-c: rgb(7 11 18); }
.story > .ch-material { --bg-x: 74%; --bg-c: rgb(20 12 4); }
.story > .ch-sd       { --bg-x: 72%; --bg-c: rgb(7 14 24); }
.story > .ch-power    { --bg-x: 26%; --bg-c: rgb(19 11 4); }
.story > .ch-steps    { --bg-x: 76%; --bg-c: rgb(17 9 23); }
.story > .ch-works    { --bg-x: 50%; --bg-c: rgb(17 10 4); }
.story > .ch-specs    { --bg-x: 30%; --bg-c: rgb(7 14 22); }

/* the 3D story stays pure black: the cards chapter overlaps its last calc(30 * var(--svh, 1svh)), so its colour starts below that */
.story > .ch-cards::before { top: calc(30 * var(--svh, 1svh)); }

/* the DIY chapter clips sideways (overflow-x: clip), so its area hangs from the chapter above it */
.story > .ch-diy::before { content: none; }
.story > .ch-material::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: calc(50% - 50vw); width: 100vw; top: calc(100% - calc(45 * var(--svh, 1svh))); height: calc(180 * var(--svh, 1svh)); /* about the DIY chapter plus calc(45 * var(--svh, 1svh)) above and below; soft, so its exact height does not matter */
  background: radial-gradient(ellipse 95% 50% at 30% 50%,
    rgb(16 9 22) 0%, rgb(16 9 22 / .969) 12.5%, rgb(16 9 22 / .879) 25%, rgb(16 9 22 / .741) 37.5%,
    rgb(16 9 22 / .563) 50%, rgb(16 9 22 / .371) 62.5%, rgb(16 9 22 / .191) 75%, rgb(16 9 22 / .055) 87.5%, transparent 100%);
}

/* the long signing chapter: blue in its first half, aubergine in its second */
.story > .ch-sign::before {
  background:
    radial-gradient(ellipse 95% 34% at 72% 34%,
      rgb(7 14 24) 0%, rgb(7 14 24 / .969) 12.5%, rgb(7 14 24 / .879) 25%, rgb(7 14 24 / .741) 37.5%,
      rgb(7 14 24 / .563) 50%, rgb(7 14 24 / .371) 62.5%, rgb(7 14 24 / .191) 75%, rgb(7 14 24 / .055) 87.5%, transparent 100%),
    radial-gradient(ellipse 95% 34% at 28% 66%,
      rgb(17 9 23) 0%, rgb(17 9 23 / .969) 12.5%, rgb(17 9 23 / .879) 25%, rgb(17 9 23 / .741) 37.5%,
      rgb(17 9 23 / .563) 50%, rgb(17 9 23 / .371) 62.5%, rgb(17 9 23 / .191) 75%, rgb(17 9 23 / .055) 87.5%, transparent 100%);
}

/* the last screen: the 3D device is drawn behind the page in its upper half, so no CSS colour may lie over it: the
   specs colour ends calc(15 * var(--svh, 1svh)) before the last screen (the device, still dim, reaches no higher while it pulls back), and
   the last screen's own colour (an aubergine area round the device, an amber glow under the copy) is drawn in WebGL
   behind the device (main.js finField) */
.story > .ch-specs::before { bottom: calc(15 * var(--svh, 1svh)); }
.story > .ch-buy::before { content: none; }

/* the grain, once, over all the colour from the end of the 3D story to the last screen (main.story starts where the
   cards chapter starts; the last screen (.ch-buy, its runway --fin-run plus one screen, site.css) has its WebGL colour, dithered). It fades out over its last
   calc(40 * var(--svh, 1svh)), where the specs colour is nearly gone, so it has no edge at the last screen's top */
.story::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 0; right: 0; top: calc(30 * var(--svh, 1svh)); bottom: calc(var(--fin-run) + 100 * var(--svh, 1svh));
  background: url("../img/grain.png") 0 0 / 64px 64px;
  -webkit-mask-image: linear-gradient(#000 calc(100% - calc(40 * var(--svh, 1svh))), transparent);
  mask-image: linear-gradient(#000 calc(100% - calc(40 * var(--svh, 1svh))), transparent);
}

/* static mode: no device on the last screen, so the CSS draws the colour that main.js (finField) draws there: the
   aubergine at 66 % / calc(42 * var(--svh, 1svh)) under the top, radii 95 % and calc(100 * var(--svh, 1svh)) (in the calc(160 * var(--svh, 1svh)) box: 62.5 % at 63.75 %), under the
   amber glow at the bottom (75 % and calc(55 * var(--svh, 1svh)): 34.4 % at 100 %); the grain runs on to the page end */
.no-gl .story > .ch-specs::before { bottom: calc(-45 * var(--svh, 1svh)); }
.no-gl .story::after { bottom: 0; -webkit-mask-image: none; mask-image: none; }
.no-gl .story > .ch-buy::before {
  content: ''; top: calc(-60 * var(--svh, 1svh)); bottom: 0; /* the calc(160 * var(--svh, 1svh)) box: the area's -45 svh below the page end made the page scroll on past the last screen */
  background:
    radial-gradient(ellipse 75% 34.4% at 50% 100%,
      rgb(17 10 4) 0%, rgb(17 10 4 / .969) 12.5%, rgb(17 10 4 / .879) 25%, rgb(17 10 4 / .741) 37.5%,
      rgb(17 10 4 / .563) 50%, rgb(17 10 4 / .371) 62.5%, rgb(17 10 4 / .191) 75%, rgb(17 10 4 / .055) 87.5%, transparent 100%),
    radial-gradient(ellipse 95% 62.5% at 66% 63.75%,
      rgb(17 9 23) 0%, rgb(17 9 23 / .969) 12.5%, rgb(17 9 23 / .879) 25%, rgb(17 9 23 / .741) 37.5%,
      rgb(17 9 23 / .563) 50%, rgb(17 9 23 / .371) 62.5%, rgb(17 9 23 / .191) 75%, rgb(17 9 23 / .055) 87.5%, transparent 100%);
}
/* static mode: no 3D story and no overlap, so the colour starts at the top of the cards chapter */
.no-gl .story > .ch-cards::before, .no-gl .story::after { top: 0; }