/* ============================================================================= Era Immersion Overlays & Post-Processing ADR-0119 Extension: Deep Immersion Effects These styles apply global post-processing effects (filters, overlays, vignettes) to the entire application body based on the active era theme. These are applied to the or a global wrapper. ============================================================================= */ /* ----------------------------------------------------------------------------- Common Overlay Setup ----------------------------------------------------------------------------- */ body[class*="theme-"]::after { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; /* Top of everything */ opacity: 0; transition: opacity 1s ease; } /* ----------------------------------------------------------------------------- Terminal / Computer Age (Era V) Replaces the specific .crt-effects class with a global theme application ----------------------------------------------------------------------------- */ body.theme-terminal::after { opacity: 1; /* Scanlines */ background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 2px); /* Green tint overlay */ box-shadow: inset 0 0 100px rgba(0, 50, 0, 0.5); } /* Flicker animation for terminal */ body.theme-terminal .page { animation: terminal-flicker 0.15s infinite; } @keyframes terminal-flicker { 0% { opacity: 0.99; } 50% { opacity: 1; } 100% { opacity: 0.995; } } /* ----------------------------------------------------------------------------- Victorian / Pioneer (Era I) Sepia tone, vignette, and paper texture ----------------------------------------------------------------------------- */ body.theme-victorian::before { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9998; /* Under the vignette */ /* Paper Texture Noise */ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"); opacity: 0.6; } body.theme-victorian::after { opacity: 1; /* Heavy vignette */ background: radial-gradient(circle, transparent 60%, rgba(44, 24, 16, 0.2) 100%); box-shadow: inset 0 0 150px rgba(44, 24, 16, 0.3); /* Sepia filter simulation via overlay mix-blend-mode could be done, but backdrop-filter is expensive. We'll use pure CSS gradients. */ } body.theme-victorian { /* Subtle sepia on the content itself */ filter: sepia(0.2) contrast(0.95); } /* ----------------------------------------------------------------------------- Gilded Age (Era II) Golden glow, slight film grain, warmer contrast ----------------------------------------------------------------------------- */ body.theme-gilded::after { opacity: 1; /* Gold-tinted vignette */ background: radial-gradient(circle, transparent 50%, rgba(212, 175, 55, 0.05) 90%, rgba(0, 0, 0, 0.4) 110%); box-shadow: inset 0 0 50px rgba(255, 215, 0, 0.05); } body.theme-gilded { filter: contrast(1.05) saturate(1.1); } /* ----------------------------------------------------------------------------- Art Deco / Steam (Era III) Cool noir film effect, subtle noise ----------------------------------------------------------------------------- */ body.theme-artdeco::after { opacity: 1; /* Film grain simulation */ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"); } /* ----------------------------------------------------------------------------- Mid-Century (Era IV) Technicolor saturation boost, slight yellow shift for aged film look ----------------------------------------------------------------------------- */ body.theme-midcentury { filter: saturate(1.1) sepia(0.1); } /* ----------------------------------------------------------------------------- Windows 98 / Digital (Era VI) Not scanlines, but "monitor glow" or dithering if possible. For now, we strictly enforce sharp edges and no anti-aliasing on fonts where possible. ----------------------------------------------------------------------------- */ body.theme-win98, body.theme-winxp { -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale; } /* ----------------------------------------------------------------------------- NES / 8-Bit Scanlines (thicker than terminal) + Saturation ----------------------------------------------------------------------------- */ body.theme-nes::after { opacity: 1; background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.25) 50%); background-size: 100% 4px; /* Thicker scanlines */ pointer-events: none; }