/* The stage (docs/STAGE.md): what every page built on site/stage.js shares. The fonts, colours
   and materials of the home page, the plain-page fallback, and the stage itself: the fixed
   screen, the scenes' camera, the cast of orbs, the light, the progress line, the chapter rail
   and the scroll cue. Each page adds its own scenes' choreography in its own <style>. */
@font-face { font-family: "SQ Sans"; src: url("/fonts/sans.woff2") format("woff2-variations"), url("/fonts/sans.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
:root {
  --bg: #F5F0E8; --ink: #1A1C22; --soft: #4E5260; --line: rgba(26,28,34,.1);
  --c1: #FF7A59; --c2: #3B7BFF; --c3: #22C49A; --c4: #FFC23D; --c5: #A58BFF; --c6: #FF7EB9;
  --pad: 20px; --top: calc(78px + env(safe-area-inset-top)); --bottom: calc(22px + env(safe-area-inset-bottom));
  --f: "Segoe UI", "SQ Sans", system-ui, -apple-system, Roboto, sans-serif; --wash: 165, 139, 255;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 300 1.0625rem/1.6 var(--f); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(26,28,34,.06); }
b, strong { font-weight: 600; }
a { color: inherit; text-underline-offset: 3px; text-decoration-color: rgba(26,28,34,.35); }
:focus-visible { outline: 2px solid var(--c2); outline-offset: 3px; border-radius: 10px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }
h2 { margin: 0; font-weight: 300; letter-spacing: -0.035em; line-height: 1.04; font-size: clamp(2rem, 8vw, 3.6rem); text-wrap: balance; }
.sub { margin: 10px 0 0; color: var(--soft); font-size: 1.0625rem; text-wrap: balance; }

/* Glass, marbles and buttons: the home page's materials */
.glass {
  background: linear-gradient(160deg, rgba(255,255,255,.66), rgba(255,255,255,.32));
  -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.8); border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 1px rgba(26,28,34,.04), 0 26px 48px -28px rgba(26,28,34,.32);
}
.marble, .orb {
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.9) 0, rgba(255,255,255,0) 32%), radial-gradient(circle at 70% 80%, rgba(0,0,0,.16), rgba(0,0,0,0) 55%), var(--c);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--ink); color: #fff; font: 600 1.0625rem/1 var(--f); text-decoration: none; cursor: pointer; touch-action: manipulation;
  box-shadow: 0 14px 28px -14px rgba(26,28,34,.7); transition: transform .15s ease;
}
.btn:active { transform: scale(.97); }
.btn .spot { width: 10px; height: 10px; border-radius: 50%; background: var(--c6); box-shadow: 0 0 0 3px rgba(255,126,185,.25); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: .9375rem; box-shadow: none; }
.linkish { padding: 0; border: 0; background: none; font: inherit; color: var(--soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.bar { position: fixed; z-index: 40; left: 0; right: 0; top: calc(10px + env(safe-area-inset-top)); width: min(1120px, calc(100% - 24px)); margin: 0 auto; height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 7px 0 16px; border-radius: 999px; }
.mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; text-decoration: none; }
.mark svg { width: 26px; height: 26px; }

/* ---------- Read as a page (and the fallback): plain sections, one after another ---------- */
main { position: relative; z-index: 1; }
.scene { position: relative; max-width: 980px; margin: 0 auto; padding: 64px var(--pad); }
.scene:first-child { padding-top: calc(var(--top) + 24px); }
.deco, .swarm, .wash, .rail, .progress, .cue { display: none; }
.flat-note { display: none; margin: 0; padding: calc(var(--top) + 6px) var(--pad) 0; text-align: center; font-size: .9375rem; color: var(--soft); }
.flat .flat-note { display: block; }
.flat .scene:first-of-type { padding-top: 24px; }

/* ---------- The stage: one screen, and everything comes to it ---------- */
.stage-on, .stage-on body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.stage-on .stage { position: fixed; inset: 0; overflow: hidden; overflow: clip; perspective: 1100px; perspective-origin: 50% 46%; touch-action: pinch-zoom; }
.stage-on .wash { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(75% 55% at 12% 6%, rgba(var(--wash), .24), rgba(var(--wash), 0) 70%), radial-gradient(65% 50% at 92% 96%, rgba(var(--wash), .18), rgba(var(--wash), 0) 70%); }
.stage-on .scene {
  --in: 0; --out: 0; --hold: 0; --step: 0; --ie: 0; --oe: 0; --vis: 0;
  position: absolute; inset: 0; max-width: none; margin: 0; padding: var(--top) var(--pad) var(--bottom);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  opacity: var(--vis); pointer-events: none;
  /* the camera: a scene comes towards you from the distance, rests, then passes you by */
  transform: translate3d(0, 0, calc((1 - var(--ie)) * var(--zin, -560px) + var(--oe) * var(--zout, 420px)));
}
.stage-on .scene.is-here { pointer-events: auto; }
.stage-on .scene.is-tall { overflow-y: auto; justify-content: flex-start; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; }
.calm.stage-on .scene { transform: none; transition: opacity .35s ease; }
.stage-on .deco { display: block; }
.stage-on .swarm { display: block; position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.stage-on .swarm.back { z-index: 0; }
.swarm .orb { position: absolute; left: 0; top: 0; width: 100px; height: 100px; margin: -50px 0 0 -50px; box-shadow: 0 22px 34px -18px var(--c); opacity: 0; will-change: transform; }
.stage-on .progress { display: block; position: fixed; z-index: 41; left: 0; top: 0; width: 100%; height: 3px; transform-origin: 0 50%; transform: scaleX(var(--progress, 0));
  background: linear-gradient(90deg, var(--c1), var(--c4), var(--c3), var(--c2), var(--c5), var(--c6)); pointer-events: none; }
.rail button { position: relative; display: grid; place-items: center; width: 28px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.rail button::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: rgba(26,28,34,.24); transition: height .3s ease, background .3s ease; }
.rail button[aria-current]::before { height: 18px; background: var(--ink); }
.rail button::after { content: attr(data-label); position: absolute; right: 32px; white-space: nowrap; font-size: .8125rem; color: var(--soft); opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; pointer-events: none; }
.rail button:hover::after, .rail button:focus-visible::after { opacity: 1; transform: none; }
@media (min-width: 900px) { .stage-on .rail { display: flex; flex-direction: column; position: fixed; z-index: 35; right: 18px; top: 50%; transform: translateY(-50%); } }

/* The scroll cue: a marble dropping down a slot */
.stage-on .cue { display: flex; position: absolute; left: 50%; bottom: calc(var(--bottom) + 2px); transform: translateX(-50%); flex-direction: column; align-items: center; gap: 6px;
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); opacity: calc(1 - var(--s1, 0) * 3); pointer-events: none; }
.cue i { position: relative; width: 22px; height: 34px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(26,28,34,.32); }
.cue i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--c6); animation: cue 1.7s ease-in-out infinite; }
@keyframes cue { 0% { transform: none; opacity: 0; } 25% { opacity: 1; } 75% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
.cue-touch { display: none; }
@media (pointer: coarse) { .cue-wheel { display: none; } .cue-touch { display: inline; } }
.calm .cue i::after { animation: none; opacity: 1; }
.stage-on [data-scene]:first-child { --in: 1; --ie: 1; --vis: 1; } /* showing before the script has run */