/*! * fx-runtime v1 — portable per-site visual-effects layer. SHARED CORE. * * Byte-identical across every adopting site; zero site-specific values. * Inert until carries data-fx-theme (set by effects.js). Every * selector is .fx- / [data-fx-*] prefixed; every tunable color is a * --fx-* custom property with a neutral default, overridable per site * via config.json theme "tokens". Intensity arrives as --fx-intensity * (0..1) on . * * The overlay never intercepts input (pointer-events: none), never * affects layout (position: fixed + contain), and never touches host * elements — themes are pure overlay / color-grade. */ .fx-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; contain: strict; isolation: isolate; } html[data-fx-theme] #wordmark, html[data-fx-theme] .byline, html[data-fx-theme] .chrome, html[data-fx-theme] .terminal, html[data-fx-theme] .program, html[data-fx-theme] .music-overlay, html[data-fx-theme] .brut, html[data-fx-theme] .contact-panel { position: relative; z-index: 2; } .fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* ============ THEME: broadcast — subtle VHS / off-air polish ============ */ html[data-fx-theme="broadcast"] .fx-overlay { /* scanlines */ background: repeating-linear-gradient( to bottom, transparent 0 2px, var(--fx-broadcast-line, rgba(0, 0, 0, 0.3)) 2px 3px, transparent 3px 4px ); opacity: calc(var(--fx-intensity, 0.25) * 0.85); } /* slow vertical roll band */ html[data-fx-theme="broadcast"] .fx-overlay::before { content: ""; position: absolute; left: 0; right: 0; top: -22vh; height: 18vh; background: linear-gradient( to bottom, transparent, var(--fx-broadcast-band, rgba(255, 255, 255, 0.06)) 35% 65%, transparent ); animation: fx-roll 11s linear infinite; } /* tube vignette + faint flicker */ html[data-fx-theme="broadcast"] .fx-overlay::after { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse at 50% 50%, transparent 62%, var(--fx-broadcast-vignette, rgba(0, 0, 0, 0.5)) 130% ); animation: fx-flicker 5s steps(10, jump-none) infinite; } @keyframes fx-roll { from { transform: translateY(0); } to { transform: translateY(146vh); } } @keyframes fx-flicker { 0%, 100% { opacity: 1; } 12% { opacity: 0.82; } 34% { opacity: 0.95; } 56% { opacity: 0.78; } 78% { opacity: 0.9; } } /* ============ THEME: halloween — seasonal color-grade + fog ============ */ html[data-fx-theme="halloween"] .fx-overlay { /* ember glow rising from below + heavy corner vignette */ background: radial-gradient(ellipse at 50% 118%, var(--fx-halloween-glow, rgba(255, 122, 24, 0.22)) 0%, transparent 55%), radial-gradient(ellipse at 50% 42%, transparent 52%, var(--fx-halloween-vignette, rgba(16, 3, 28, 0.62)) 115%); opacity: calc(0.35 + var(--fx-intensity, 0.6) * 0.65); } /* warm grade multiplied over the page */ html[data-fx-theme="halloween"] .fx-overlay::before { content: ""; position: absolute; inset: 0; background: var(--fx-halloween-tint, rgba(255, 130, 30, 0.12)); mix-blend-mode: multiply; } /* two drifting fog banks */ html[data-fx-theme="halloween"] .fx-overlay::after { content: ""; position: absolute; inset: -30%; background: radial-gradient(closest-side at 28% 68%, var(--fx-halloween-fog, rgba(190, 170, 210, 0.10)) 0%, transparent 100%), radial-gradient(closest-side at 76% 34%, var(--fx-halloween-fog, rgba(190, 170, 210, 0.10)) 0%, transparent 100%); animation: fx-fog 46s ease-in-out infinite alternate; } @keyframes fx-fog { from { transform: translate3d(-4%, 2%, 0) scale(1); } to { transform: translate3d(5%, -3%, 0) scale(1.18); } } /* ============ CONTENT-AWARE EVENT THEMES (canvas + atmosphere) ============ */ html[data-fx-theme="new-year"] .fx-overlay { background: radial-gradient(circle at 50% 45%, rgba(255, 245, 168, 0.16), transparent 34%), radial-gradient(circle at 15% 18%, rgba(255, 45, 135, 0.16), transparent 26%), radial-gradient(circle at 85% 82%, rgba(0, 200, 255, 0.13), transparent 28%); opacity: calc(0.48 + var(--fx-intensity, 0.55) * 0.42); } html[data-fx-theme="valentine"] .fx-overlay, html[data-fx-theme="drip"] .fx-overlay { background: radial-gradient(ellipse at 50% 42%, rgba(255, 139, 180, 0.18), transparent 42%), radial-gradient(ellipse at 50% 115%, rgba(176, 0, 62, 0.20), transparent 50%); mix-blend-mode: multiply; opacity: calc(0.42 + var(--fx-intensity, 0.55) * 0.44); } html[data-fx-theme="st-patrick"] .fx-overlay { background: radial-gradient(circle at 50% 18%, rgba(172, 255, 186, 0.18), transparent 28%), radial-gradient(ellipse at 50% 108%, rgba(0, 214, 94, 0.22), transparent 56%); opacity: calc(0.42 + var(--fx-intensity, 0.55) * 0.38); } html[data-fx-theme="april-fools"] .fx-overlay, html[data-fx-theme="friday-13"] .fx-overlay { background: repeating-linear-gradient(90deg, rgba(255, 45, 135, 0.08) 0 2px, transparent 2px 18px), repeating-linear-gradient(0deg, rgba(0, 200, 255, 0.07) 0 1px, transparent 1px 9px); opacity: calc(0.36 + var(--fx-intensity, 0.55) * 0.44); } html[data-fx-theme="earth-day"] .fx-overlay, html[data-fx-theme="spring"] .fx-overlay { background: radial-gradient(circle at 48% 35%, rgba(255, 226, 112, 0.14), transparent 30%), radial-gradient(ellipse at 50% 105%, rgba(41, 156, 86, 0.24), transparent 58%); mix-blend-mode: multiply; opacity: calc(0.38 + var(--fx-intensity, 0.55) * 0.42); } html[data-fx-theme="pride"] .fx-overlay { background: linear-gradient(110deg, rgba(228, 3, 3, 0.12), rgba(255, 140, 0, 0.12), rgba(255, 237, 0, 0.10), rgba(0, 128, 38, 0.12), rgba(36, 64, 142, 0.12), rgba(115, 41, 130, 0.12)); mix-blend-mode: screen; opacity: calc(0.46 + var(--fx-intensity, 0.55) * 0.34); } html[data-fx-theme="fourth-july"] .fx-overlay { background: radial-gradient(circle at 18% 22%, rgba(255, 48, 48, 0.40), transparent 31%), radial-gradient(circle at 82% 26%, rgba(74, 140, 255, 0.38), transparent 33%), radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.24), transparent 39%), radial-gradient(ellipse at 50% 112%, rgba(255, 206, 92, 0.20), transparent 56%), radial-gradient(ellipse at 50% -18%, rgba(10, 24, 58, 0.12), transparent 48%); mix-blend-mode: normal; opacity: calc(0.62 + var(--fx-intensity, 0.55) * 0.30); } html[data-fx-theme="winter-holiday"] .fx-overlay, html[data-fx-theme="winter-solstice"] .fx-overlay { background: radial-gradient(circle at 50% 22%, rgba(235, 248, 255, 0.18), transparent 34%), radial-gradient(ellipse at 50% -12%, rgba(144, 211, 255, 0.20), transparent 46%), radial-gradient(ellipse at 50% 112%, rgba(255, 255, 255, 0.10), transparent 44%); mix-blend-mode: screen; opacity: calc(0.44 + var(--fx-intensity, 0.55) * 0.40); } html[data-fx-theme="summer"] .fx-overlay { background: radial-gradient(circle at 50% 20%, rgba(255, 244, 168, 0.22), transparent 30%), radial-gradient(ellipse at 50% 116%, rgba(255, 112, 67, 0.15), transparent 54%); mix-blend-mode: screen; opacity: calc(0.36 + var(--fx-intensity, 0.55) * 0.34); } html[data-fx-theme="autumn"] .fx-overlay, html[data-fx-theme="thanksgiving"] .fx-overlay { background: radial-gradient(circle at 46% 32%, rgba(246, 176, 72, 0.16), transparent 34%), radial-gradient(ellipse at 50% 110%, rgba(126, 56, 23, 0.24), transparent 58%); mix-blend-mode: multiply; opacity: calc(0.42 + var(--fx-intensity, 0.55) * 0.38); } html[data-fx-theme="leap-day"] .fx-overlay { background: radial-gradient(circle at 50% 50%, rgba(0, 200, 255, 0.12), transparent 24%), repeating-radial-gradient(circle at 50% 50%, rgba(180, 125, 255, 0.13) 0 1px, transparent 1px 28px); mix-blend-mode: screen; opacity: calc(0.38 + var(--fx-intensity, 0.55) * 0.38); } html[data-fx-theme="pi-day"] .fx-overlay { background: linear-gradient(rgba(0, 255, 102, 0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 229, 0, 0.08) 1px, transparent 1px); background-size: 31px 31px; mix-blend-mode: screen; opacity: calc(0.34 + var(--fx-intensity, 0.55) * 0.34); } html[data-fx-theme="back-to-school"] .fx-overlay { background: linear-gradient(90deg, rgba(238, 76, 76, 0.16) 0 1px, transparent 1px), repeating-linear-gradient(0deg, transparent 0 32px, rgba(46, 100, 210, 0.13) 32px 33px); background-position: 82px 0, 0 0; mix-blend-mode: multiply; opacity: calc(0.32 + var(--fx-intensity, 0.55) * 0.34); } html[data-fx-theme="site-anniversary"] .fx-overlay, html[data-fx-theme="launch"] .fx-overlay { background: radial-gradient(circle at 50% 46%, rgba(255, 45, 135, 0.18), transparent 34%), radial-gradient(circle at 20% 20%, rgba(0, 200, 255, 0.16), transparent 28%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.14), transparent 28%); mix-blend-mode: screen; opacity: calc(0.42 + var(--fx-intensity, 0.55) * 0.40); } /* ============ THEME: drip — idle canvas overlay (drawn by effects.js) ==== */ html[data-fx-theme="drip"] .fx-overlay { opacity: calc(0.3 + var(--fx-intensity, 0.5) * 0.7); } /* ============ REDUCED MOTION: calm variants (data-fx-motion="calm") ====== */ /* effects.js sets the attribute when prefers-reduced-motion: reduce; the media query below is a belt-and-braces catch in case JS state lags. */ html[data-fx-motion="calm"] .fx-overlay, html[data-fx-motion="calm"] .fx-overlay::before, html[data-fx-motion="calm"] .fx-overlay::after { animation: none !important; } html[data-fx-motion="calm"][data-fx-theme="broadcast"] .fx-overlay::before { display: none; /* no roll band, keep static scanlines + vignette */ } @media (prefers-reduced-motion: reduce) { .fx-overlay, .fx-overlay::before, .fx-overlay::after { animation: none !important; } html[data-fx-theme="broadcast"] .fx-overlay::before { display: none; } }