/* night.css — placement of the night drawing (a fixed canvas js/night.js appends to ; the drawing is composed over the whole page and moved inside the canvas: side trees ride the scroll, the top / bottom edge trees only ever slide toward hiding, all with pointer parallax), the shortened crossfade the two-beat flicker rides (html.is-switching.is-switching-fast, 90ms; the standard 220ms html.is-switching lives in css/tokens.css) and the glitch beat on the display type only (html.is-glitch, ~380ms). The dark token scheme lives in css/tokens.css (html[data-mode="dark"]); the header moon button (.hdr-night[data-night-toggle]) is styled in site.css — night.js only mirrors aria-pressed on it. */ .night-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: var(--z-night, 95); pointer-events: none; display: block; } .night-canvas:not(.is-live) { display: none; } /* flicker beats 1–2: a quick 90ms crossfade (tokens.css sets the properties + the 220ms used by the settle beat) */ html.is-switching.is-switching-fast, html.is-switching.is-switching-fast * { transition-duration: 90ms !important; } /* glitch: the wordmark and the marquee are sliced (clip-path) + nudged (translate composes with any inline transform, e.g. the wordmark's scroll-bound collapse, so #wm-t glitches both in the hero and docked in the header) with a red/azure split shadow. Only the display type: the grid, plates and logowall stay still. Cheap: clip-path / translate / text-shadow. (Not .hdr-mark: its text is transparent.) */ html.is-glitch #wm-t, html.is-glitch .marquee-track span { animation: night-glitch 380ms steps(1) both; } @keyframes night-glitch { 0% { clip-path: inset(0 0 58% 0); translate: 3px 0; text-shadow: 2px 0 var(--sig-azure), -2px 0 var(--red); } 10% { clip-path: inset(40% 0 22% 0); translate: -3px 0; text-shadow: 2px 0 var(--sig-azure), -2px 0 var(--red); } 20% { clip-path: none; translate: 0 0; text-shadow: -2px 0 var(--sig-azure), 2px 0 var(--red); } 32% { clip-path: inset(66% 0 0 0); translate: -2px 0; text-shadow: none; } 44% { clip-path: inset(8% 0 52% 0); translate: 3px 0; text-shadow: 2px 0 var(--sig-azure), -2px 0 var(--red); } 56% { clip-path: none; translate: 0 0; text-shadow: 2px 0 var(--sig-azure), -2px 0 var(--red); } 70% { clip-path: inset(30% 0 46% 0); translate: 2px 0; text-shadow: none; } 82% { clip-path: inset(0 0 72% 0); translate: -3px 0; text-shadow: -2px 0 var(--sig-azure), 2px 0 var(--red); } 92% { clip-path: none; translate: 1px 0; text-shadow: 1px 0 var(--sig-azure), -1px 0 var(--red); } 100% { clip-path: none; translate: 0 0; text-shadow: none; } } @media (prefers-reduced-motion: reduce) { .night-canvas { display: none !important; } html.is-glitch * { animation: none !important; } }