/* glassmorphism-atmosphere.css — the glassmorphism skin's page-level atmosphere + shared --glass-* token layer + software-GPU fallback. Served from public/ at /glassmorphism-atmosphere.css, linked after tokens.css (it reads --run-color-* tokens) and before first paint (no FOUC). This skin is dark-only (JUNE-245). The picker forces data-run-mode=dark when glassmorphism is active; there is no light-mode block. */ /* ── Glassmorphism page-level atmosphere ──────────────────────────────── A soft, brand-token-derived gradient field the glass components sit on. Pure CSS — GPU-cheap, smooth, and re-themes from the active brand's semantic colors for free. Scoped to [data-run-skin="glassmorphism"], which the picker sets on . */ html[data-run-skin="glassmorphism"] { /* Dark mode: glows read as light sources on the dark field. Chroma boosted hard so even low-chroma brands (e.g. ocean-depths) produce luminous blooms. Alpha keeps them translucent over the near-black base. */ --glass-atm-primary: oklch(from var(--run-color-intent-primary-base) l calc(c * 3.2 + 0.09) h / 0.50); --glass-atm-cool: oklch(from var(--run-color-intent-primary-base) l calc(c * 3.2 + 0.09) calc(h + 40) / 0.44); --glass-atm-warm: oklch(from var(--run-color-intent-secondary-base) l calc(c * 3.2 + 0.09) calc(h - 30) / 0.42); --glass-atm-soft: oklch(from var(--run-color-intent-primary-base) l calc(c * 2.6 + 0.05) h / 0.32); /* No centre blooms on dark — edge blooms only; the dark field reads best near-black at the content column. */ --glass-atm-center-cool: transparent; --glass-atm-center-warm: transparent; /* Deep field: 90% surface (near-black) + 10% brand hue. */ --glass-atm-base: color-mix(in oklch, var(--run-color-surface-default) 90%, var(--run-color-intent-primary-base)); /* Subtle overhead glow — reads as a luminous top source on dark. */ --glass-atm-glow: color-mix(in oklch, #ffffff 9%, transparent); /* ── Glass surface token layer ───────────────────────────────────── Consumed by every glassmorphism component skin. Dark = faint white veil (mostly shows the dark field through), bright white edge + top highlight, deep shadow. */ --glass-fill: color-mix(in oklch, #ffffff 8%, transparent); --glass-sheen: color-mix(in oklch, #ffffff 16%, transparent); --glass-border: color-mix(in oklch, #ffffff 26%, transparent); --glass-highlight: color-mix(in oklch, #ffffff 65%, transparent); --glass-glow: color-mix(in oklch, #ffffff 26%, transparent); --glass-shadow: color-mix(in oklch, #000000 55%, transparent); /* No lower dark inner edge on dark glass — the bright top edge alone defines it. */ --glass-edge-low: transparent; --glass-blur: blur(22px) saturate(185%); /* Null the shell's opaque canvas background so the atmosphere shows through the chrome — via the shell's own theming hook. */ --run-app-shell-background: transparent; /* The solid base tint stays on the root canvas (a flat colour never flickers). The gradient bloom field is painted on the ::before layer below — NOT as a `background-attachment: fixed` image on this scroll root. See that rule for why. */ background-color: var(--glass-atm-base); } /* Viewport-anchored bloom field. This used to be a `background-attachment: fixed` image on , but a fixed-attachment background sampled by a glass surface's `backdrop-filter` (every glassmorphism panel) triggers a Chromium compositing bug: the browser re-reconciles the viewport-pinned background against the scrolling content every frame and does it inconsistently at the panel's rounded edges, producing a flickering 1px bar along the bottom of the hero panel (reported on ?skin=synthshore&mode=dark). A `position: fixed` PAINTED layer is pinned to the viewport identically — same look, content scrolls over it — but is sampled cleanly by backdrop-filter, so the flicker is gone. z-index:-1 keeps it behind page content but in front of the root canvas base colour; pointer-events are nulled so it never intercepts input. */ html[data-run-skin="glassmorphism"]::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: transparent; background-image: radial-gradient(70rem 45rem at 50% 12%, var(--glass-atm-center-cool), transparent 60%), radial-gradient(60rem 40rem at 50% 52%, var(--glass-atm-center-warm), transparent 58%), radial-gradient(95rem 50rem at 50% -16%, var(--glass-atm-glow), transparent 58%), radial-gradient(60rem 52rem at 6% 8%, var(--glass-atm-primary), transparent 62%), radial-gradient(58rem 50rem at 100% 16%, var(--glass-atm-cool), transparent 60%), radial-gradient(66rem 56rem at 26% 60%, var(--glass-atm-warm), transparent 60%), radial-gradient(64rem 54rem at 82% 70%, var(--glass-atm-primary), transparent 60%), radial-gradient(58rem 50rem at 48% 108%, var(--glass-atm-cool), transparent 58%); background-repeat: no-repeat; } /* ── Software-GPU fallback (pairs with the WebGL guard