/* MOTION LANGUAGE
CONCEPT: the page is a long exposure, a shutter left open on your own sky all night
SHOWS IN: hero: the real night, scroll is shutter time and true star trails draw · transition: one turn of the Earth, the sky wheels a full circle and lands exactly where it was · detail: words and marks draw out sideways like a trail (focus, nav underline, wordmark)
ANCHOR: direction-d1.md (scroll-scrubbed object or camera)
SIGNATURE: the exposure, trigger scroll
  beat: first line · scaleX · .62→1 · t0 267 · D 1500 · quart in-out · second line +183 ms
  beat: stars · reveal magnitude · -2→sky limit · t0 200 · D 2200 · quart in-out · brightest first, in true order
  beat: exposure · trail length · 0→whole night · linear in time · scrubbed over the night track · wheel smoothing tau 158 ms
  beat: turn · sky angle · 0→360° · D 760 · quart in-out · tail lags 150 ms · page swaps at 320 ms
HOUSE CURVES: shutter = cubic-bezier(.76,0,.24,1) (anything the camera does) · drift = linear (time) · hand = spring ω 16 ζ .78 (anything a finger moves) · 240 / 380 / 760 / 1500 ms
TRANSITIONS: sections do not enter. Time passes and the words change; they cross-dissolve and draw out. Pages change by one turn of the Earth.
REVEAL BUDGET: 2 of 8 generic reveals, used on: secondary line under the sentence, the clock
POINTER: the view turns a few degrees toward the pointer = look around · touch: none on Home, drag on the map
SMOOTHING: USE · tau 158 ms wheel only · touch: native, because a phone outdoors must feel direct; off on WORKING pages
PAGE TRANSITIONS: PUSH · one turn of the Earth on the persistent canvas · D 760 · shutter · canvas, nav, footer, place and night mode persist
WEBGL: PUSH · the real sky, every star and planet at its true position · persistent fixed canvas · drivers scroll, time, pointer · computed, no assets but catalogues · tiers DPR 2/1.5/1 and trail star count
PALETTE ROLES: ground = the dark below the horizon, computed and shared with the canvas · ink = cool starlight · accent = the colour of the sky at this moment, warm near the sun, cold in deep night, kept for the primary action and one live state
ARC: opens at dusk on the real sunset · peak deep night, the pole and the whole sky's trails, because it is the picture no other site can give you · rests on each chapter's sentence · ending dawn over the finished exposure, then the routes
SECTIONS:
  night track: the exposure
  handover: the sky tilts up out of frame, words stand on the ground, each route row draws out on hover
  footer: live sentence, calm
*/

@font-face { font-family: 'Mona Sans'; src: url(/fonts/mona-sans-latin.woff2) format('woff2'); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Mona Sans'; src: url(/fonts/mona-sans-latin-ext.woff2) format('woff2'); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* ground and ink. The ground value is the canvas ground (src/sky/index.js): the page and the earth are one surface */
  --ground: #040609;
  --ground-up: #0c111b;
  --ground-hi: #151c2b;
  --ink: #e8ebf2;
  --ink-soft: #b4bccb;
  --ink-faint: #8791a3;
  --accent: rgb(168 196 255);
  --accent-ink: #05070c;
  --veil: rgb(4 6 9 / 72%);

  /* the three kinds of movement */
  --shutter: cubic-bezier(.76, 0, .24, 1);
  --drift: linear;
  --hand: linear(0, 0.145 7.1%, 0.411 14.3%, 0.656 21.4%, 0.832 28.6%, 0.939 35.7%, 0.994 42.9%, 1.016 50.0%, 1.02 57.1%, 1.016 64.3%, 1.011 71.4%, 1.006 78.6%, 1.003 85.7%, 1.001 92.9%, 1);
  --touch: 240ms;
  --sheet: 380ms;
  --turn: 760ms;
  --draw: 1500ms;

  /* space */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 112px; --sp-10: 168px;
  --edge: clamp(20px, 4vw, 64px);
  --measure: 62ch;
  --bar-h: 72px;
  --tabs-h: 0px;

  /* type: one family, its width axis is the voice */
  --face: 'Mona Sans', system-ui, sans-serif;
  --wide: 122%;
  --text: 100%;
  --fs-body: clamp(17px, 1.05vw + 13px, 19px);
  --fs-lead: clamp(21px, 1.2vw + 16px, 28px);
  --fs-3: clamp(22px, 1.5vw + 15px, 32px);
  --fs-2: clamp(30px, 3.4vw + 15px, 62px);
  --fs-1: clamp(36px, 5.4vw + 12px, 100px);
  --lh-tight: 1.05;
  --lh-text: 1.5;
}

html[data-mode='red'] {
  --ground: #070000;
  --ground-up: #150202;
  --ground-hi: #220404;
  --ink: #ff5a44;
  --ink-soft: #ee4632;
  --ink-faint: #e24230;
  --accent: #ff5a44;
  --accent-ink: #120000;
  --veil: rgb(7 0 0 / 76%);
}

@media (max-width: 820px) { :root { --bar-h: 60px; --tabs-h: 64px; } }
@media (prefers-reduced-motion: reduce) { :root { --touch: 1ms; --sheet: 1ms; --turn: 1ms; --draw: 1ms; } }