.almanac-static { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; mix-blend-mode: screen; contain: strict; /* Long, slow signal-strength arc across the whole overlay so the page reads as progressing through reception states instead of flashing at a fixed Hz. */ animation: almanac-signal-arc 64s ease-in-out infinite; will-change: opacity; } .almanac-static__grain { position: absolute; inset: -12%; will-change: background-position, opacity, transform; } .almanac-static__grain--a { background-image: url("data:image/svg+xml;utf8,"); background-size: 260px 260px; opacity: 0.62; animation: almanac-grain-shift 0.18s steps(8) infinite, almanac-grain-flicker-a 17s ease-in-out infinite; } .almanac-static__grain--b { background-image: url("data:image/svg+xml;utf8,"); background-size: 260px 260px; opacity: 0.45; transform: scale(1.4) rotate(13deg); animation: almanac-grain-shift 0.24s steps(6) infinite reverse, almanac-grain-flicker-b 14s ease-in-out -3s infinite; } .almanac-static__grain--c { background-image: url("data:image/svg+xml;utf8,"); background-size: 180px 180px; opacity: 0.34; transform: scale(0.8) rotate(-7deg); animation: almanac-grain-shift 0.2s steps(7) infinite, almanac-grain-flicker-c 22s ease-in-out -7s infinite; } /* Sparse dotted "carrier sparkle" layers — they refresh on a slower cadence than the main grain (300–360ms vs ~200ms) so the dots feel like signal artifacts riding on top of the noise floor rather than more of the same texture. Two octaves: large drifting blobs + fine pin-prick speckle. */ .almanac-static__dots { position: absolute; inset: -10%; mix-blend-mode: screen; will-change: background-position, opacity; } .almanac-static__dots--coarse { background-image: url("data:image/svg+xml;utf8,"); background-size: 320px 320px; opacity: 0.32; animation: almanac-dots-shift-coarse 0.36s steps(5) infinite, almanac-dots-breathe-coarse 19s ease-in-out infinite; } .almanac-static__dots--fine { background-image: url("data:image/svg+xml;utf8,"); background-size: 220px 220px; opacity: 0.42; transform: rotate(11deg); animation: almanac-dots-shift-fine 0.3s steps(6) infinite, almanac-dots-breathe-fine 13s ease-in-out -4s infinite; } /* Faint horizontal interference bars drifting slowly downward — classic CRT weak-signal hold artifacts. Multiple stripe widths layered into a single repeating gradient. */ .almanac-static__bands { position: absolute; inset: -20% 0; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 46px, rgba(245, 217, 170, 0.05) 47px, rgba(245, 217, 170, 0.05) 51px, rgba(0, 0, 0, 0) 52px, rgba(0, 0, 0, 0) 113px, rgba(245, 217, 170, 0.035) 114px, rgba(245, 217, 170, 0.035) 116px, rgba(0, 0, 0, 0) 117px, rgba(0, 0, 0, 0) 188px, rgba(245, 217, 170, 0.045) 189px, rgba(245, 217, 170, 0.045) 192px ); mix-blend-mode: screen; animation: almanac-bands 42s linear infinite; will-change: transform; } /* Tear band — a denser noise strip that crawls across the screen every ~28s. Reads as the picture briefly losing vertical hold. */ .almanac-static__tear { position: absolute; left: -10%; right: -10%; height: 110px; top: -180px; background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(245, 217, 170, 0.10) 18%, rgba(245, 217, 170, 0.22) 50%, rgba(245, 217, 170, 0.10) 82%, rgba(0, 0, 0, 0) 100% ), url("data:image/svg+xml;utf8,"); background-size: 100% 100%, 200px 200px; background-blend-mode: screen; mix-blend-mode: screen; filter: blur(0.4px); animation: almanac-tear 28s linear infinite, almanac-grain-shift 0.13s steps(5) infinite; will-change: transform, background-position; } .almanac-static__scan { position: absolute; inset: 0; mix-blend-mode: multiply; opacity: 0.6; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgba(28, 18, 8, 0.42) 3px, rgba(28, 18, 8, 0.42) 4px ); } .almanac-static__sweep { position: absolute; left: -10%; right: -10%; height: 22vh; top: -25vh; background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(212, 163, 115, 0.04) 45%, rgba(245, 217, 170, 0.10) 50%, rgba(212, 163, 115, 0.04) 55%, rgba(0, 0, 0, 0) 100% ); filter: blur(1px); mix-blend-mode: screen; animation: almanac-sweep 18s linear infinite; } .almanac-static__vignette { position: absolute; inset: 0; mix-blend-mode: multiply; background: radial-gradient( ellipse at center, rgba(0, 0, 0, 0) 32%, rgba(14, 12, 9, 0.62) 75%, rgba(14, 12, 9, 0.95) 100% ); } /* Pseudo-random background-position jitter — feels like noise refresh. */ @keyframes almanac-grain-shift { 0% { background-position: 0px 0px; } 12.5% { background-position: -38px 24px; } 25% { background-position: 67px -12px; } 37.5% { background-position: -22px -55px; } 50% { background-position: 41px 47px; } 62.5% { background-position: -71px 11px; } 75% { background-position: 16px -33px; } 87.5% { background-position: -48px 60px; } 100% { background-position: 0px 0px; } } /* Gentle signal-strength swell. Narrower opacity ranges than before so the composite breathes instead of flashing — the long arc on .almanac-static handles the bigger weak/strong reception read. */ @keyframes almanac-grain-flicker-a { 0%, 100% { opacity: 0.62; } 22% { opacity: 0.7; } 46% { opacity: 0.56; } 68% { opacity: 0.72; } 86% { opacity: 0.6; } } @keyframes almanac-grain-flicker-b { 0%, 100% { opacity: 0.45; } 26% { opacity: 0.52; } 52% { opacity: 0.4; } 74% { opacity: 0.5; } } @keyframes almanac-grain-flicker-c { 0%, 100% { opacity: 0.34; } 32% { opacity: 0.4; } 62% { opacity: 0.3; } 84% { opacity: 0.38; } } /* Dot layer position jitter — two distinct shift patterns so the coarse and fine layers don't look like one tile being sampled. */ @keyframes almanac-dots-shift-coarse { 0% { background-position: 0px 0px; } 25% { background-position: -84px 62px; } 50% { background-position: 55px -103px; } 75% { background-position: -118px -41px; } 100% { background-position: 0px 0px; } } @keyframes almanac-dots-shift-fine { 0% { background-position: 0px 0px; } 20% { background-position: 47px -29px; } 40% { background-position: -38px 61px; } 60% { background-position: 72px 18px; } 80% { background-position: -54px -47px; } 100% { background-position: 0px 0px; } } @keyframes almanac-dots-breathe-coarse { 0%, 100% { opacity: 0.32; } 30% { opacity: 0.46; } 65% { opacity: 0.22; } } @keyframes almanac-dots-breathe-fine { 0%, 100% { opacity: 0.42; } 25% { opacity: 0.56; } 55% { opacity: 0.32; } 80% { opacity: 0.5; } } /* Long-arc signal strength — slow enough to read as "the transmission drifts in and out" rather than as flicker. */ @keyframes almanac-signal-arc { 0%, 100% { opacity: 0.92; } 28% { opacity: 1; } 58% { opacity: 0.74; } 82% { opacity: 0.96; } } /* Slow vertical roll-bar, like an old CRT failing to lock. */ @keyframes almanac-sweep { 0% { transform: translateY(0vh); } 100% { transform: translateY(140vh); } } /* Tear band crawl. Single full-screen pass per cycle. */ @keyframes almanac-tear { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 0.85; } 50% { opacity: 1; } 92% { opacity: 0.85; } 100% { transform: translateY(140vh); opacity: 0; } } @keyframes almanac-bands { 0% { transform: translateY(0); } 100% { transform: translateY(192px); } } @media (prefers-reduced-motion: reduce) { .almanac-static, .almanac-static__grain--a, .almanac-static__grain--b, .almanac-static__grain--c, .almanac-static__dots--coarse, .almanac-static__dots--fine, .almanac-static__bands, .almanac-static__tear, .almanac-static__sweep { animation: none; } .almanac-static { opacity: 0.88; } .almanac-static__grain--a { opacity: 0.42; } .almanac-static__grain--b { opacity: 0.28; } .almanac-static__grain--c { opacity: 0.2; } .almanac-static__dots--coarse { opacity: 0.22; } .almanac-static__dots--fine { opacity: 0.3; } .almanac-static__tear, .almanac-static__sweep { opacity: 0; } }

Come back in 2028