/* ============================================================ CATBACK climate.css — world state presentation. Owned by js/climate.js. Owns: #weather-canvas placement, the phase tint layer (#climate-tint), the effect veil (#climate-veil), the artifact layer (#climate-fx) and the custom properties --phase-tint / --phase-tint-alpha / --world-glow. THE CANVAS IS THE DARK NEAR-BLACK GREEN WORLD (--ink). Tints are whispers over the darkness (opacity <= 0.08) — the identity stays neon green on near-black. Never a blue page. HARD RULE: nothing in this file may target anything inside .hero (no .hero, #atm-rig, .term-panel-*, #wallet-layer, .atm-* selectors — ever). ============================================================ */ :root { /* JS pulses this ~0.9..1.1 (x phase strength) over ~9s. Other modules may consume it: opacity: calc(0.5 * var(--world-glow)) */ --world-glow: 1; /* phase defaults (canonical day) — html[data-phase] refines below */ --phase-tint: #3bf07d; --phase-tint-alpha: 0.015; } /* ---- time phases (stamped by climate.js on ) ---------- morning: a faint warm breath in the darkness day: the canonical near-black green world (near-zero tint) night: deeper darkness, neon reads harder (glow via JS) latenight: deepest, max neon */ html[data-phase='morning'] { --phase-tint: #e6a63c; --phase-tint-alpha: 0.05; } html[data-phase='day'] { --phase-tint: #3bf07d; --phase-tint-alpha: 0.015; } html[data-phase='night'] { --phase-tint: #001408; --phase-tint-alpha: 0.07; } html[data-phase='latenight'] { --phase-tint: #000503; --phase-tint-alpha: 0.08; } /* ---- weather canvas (precip) — fixed, above bg/life canvases by DOM order, below content --------------------------------- */ #weather-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: var(--z-bg); pointer-events: none; } /* ---- the phase tint layer ----------------------------------- Inserted by climate.js right after #weather-canvas: same z stacking level (--z-bg), later in DOM = paints above the world canvases and UNDER all content — content is never washed out. */ /* The branch is a DAYLIGHT interior now — the bank room (js/bank.js) does its own lighting, and laying a night tint over it turned the cream stone cold and green after dark. The tint layer stays in the DOM (climate.js still drives phase/weather state for other modules) but paints nothing. */ #climate-tint { display: none !important; } #climate-tint { position: fixed; inset: -2%; /* covers the CRT-tear nudge */ z-index: var(--z-bg); pointer-events: none; background: var(--phase-tint); opacity: var(--phase-tint-alpha); transition: background-color 1200ms linear, opacity 1200ms linear; } /* CRT tear: one-blink horizontal band + a tiny lateral nudge. The band lives inside the tint layer, so its visible alpha is capped by the layer's own opacity (<= 0.08) — always subtle. */ #climate-tint.is-tear { transform: translateX(3px); } #climate-tint.is-tear::after { content: ''; position: absolute; left: 0; right: 0; top: var(--tear-y, 40%); height: 3px; background: var(--terminal); transform: translateX(-8px); } /* rainbowglitch event: 1.5s hue sweep on the tint layer ONLY */ #climate-tint.ev-rainbow { animation: cb-hue-sweep 1500ms linear 1; } @keyframes cb-hue-sweep { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } } /* overload event: 3s slightly reddened world light */ #climate-tint.ev-overload { background: var(--alert); opacity: 0.08; transition: background-color 400ms linear, opacity 400ms linear; } /* ---- effect veil -------------------------------------------- Full-screen flashes ABOVE content (flicker / lightning / warning wash). Always pointer-events:none, opacity-only, sub-second or 2s max, very low alpha — never darkness. */ #climate-veil { position: fixed; inset: 0; z-index: calc(var(--z-toast) + 1); /* under the intro (--z-intro) */ pointer-events: none; background: #000; opacity: 0; } /* power flicker: two 80ms dips at ~12% */ #climate-veil.ev-flicker { animation: cb-flicker 480ms steps(1, end) 1; } @keyframes cb-flicker { 0% { opacity: 0.12; } 17% { opacity: 0; } 50% { opacity: 0.12; } 67% { opacity: 0; } 100% { opacity: 0; } } /* lightning: two quick low-alpha white flashes */ #climate-veil.ev-lightning { background: var(--white-hi); animation: cb-lightning 640ms steps(1, end) 1; } @keyframes cb-lightning { 0% { opacity: 0.10; } 12% { opacity: 0; } 30% { opacity: 0.07; } 55% { opacity: 0; } 100% { opacity: 0; } } /* warning: a 2s amber caution wash at very low alpha */ #climate-veil.ev-warning { background: var(--amber); animation: cb-warnwash 2000ms var(--ease-mech) 1; } @keyframes cb-warnwash { 0% { opacity: 0; } 25% { opacity: 0.05; } 75% { opacity: 0.05; } 100% { opacity: 0; } } /* ---- artifact layer (glitches + the warning chip) ------------ */ #climate-fx { position: fixed; inset: 0; z-index: calc(var(--z-toast) + 1); pointer-events: none; overflow: hidden; } /* temporary dead pixel (~10s) */ .climate-dead { position: absolute; width: 2px; height: 2px; background: #010302; opacity: 0.85; } /* 300ms faint static patch (canvas painted by climate.js) */ .climate-static { position: absolute; width: 180px; height: 120px; opacity: 0.1; image-rendering: pixelated; image-rendering: crisp-edges; } /* "! SYSTEM NOTICE" chip — blinks twice at the top edge, then gone */ #climate-chip { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); display: none; padding: 6px 10px; background: var(--ink-3); border: var(--px) solid var(--amber); box-shadow: 0 0 8px rgba(230, 166, 60, 0.25); color: var(--amber); font-family: var(--font-pixel); font-size: 8px; letter-spacing: 1px; white-space: nowrap; } #climate-chip.is-on { display: block; animation: cb-chip-blink 800ms steps(1, end) 2; } @keyframes cb-chip-blink { 0% { opacity: 1; } 50% { opacity: 0.15; } 100% { opacity: 1; } } /* ---- reduced motion: static tint only, zero effects ---------- */ body[data-motion='reduce'] #climate-veil, body[data-motion='reduce'] #climate-fx > * { animation: none !important; opacity: 0 !important; } body[data-motion='reduce'] #climate-tint { transition: none; transform: none; animation: none !important; } body[data-motion='reduce'] #climate-tint::after { content: none; }