/* /assets/fx.css — shared artifact / glitch layer (all pages) */ :root{ --fx-accent: rgba(107,133,255,.75); --fx-glow: rgba(107,133,255,.22); --fx-scan-opacity: .14; --fx-noise-opacity: .042; --fx-band-opacity: .18; --fx-vignette-opacity: .95; } /* Attach overlays via */ body.fx-on{ position: relative; } /* Layer stack */ .fx-vignette, .fx-scan, .fx-noise, .fx-bands, .fx-blips{ position: fixed; inset: 0; pointer-events: none; z-index: 2; } /* Vignette */ .fx-vignette{ inset: -22%; opacity: var(--fx-vignette-opacity); background: radial-gradient( ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,.58) 80%, rgba(0,0,0,.90) 100% ); transform: translateZ(0); } /* Scanlines + drift */ .fx-scan{ opacity: var(--fx-scan-opacity); mix-blend-mode: overlay; background: repeating-linear-gradient( to bottom, rgba(255,255,255,.024), rgba(255,255,255,.024) 1px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 8px ); transform: translateZ(0); animation: fx-scan-drift 11s linear infinite; } /* Noise (CSS-only SVG turbulence) */ .fx-noise{ inset: -30%; opacity: var(--fx-noise-opacity); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E"); background-size: 240px 240px; animation: fx-noise-shift 1.6s steps(6) infinite; transform: translateZ(0); } /* RF bands */ .fx-bands{ opacity: var(--fx-band-opacity); mix-blend-mode: overlay; filter: blur(.3px); transform: translateZ(0); background: linear-gradient( to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 16%, rgba(107,133,255,.06) 22%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 48%, rgba(255,255,255,.05) 54%, rgba(255,255,255,0) 64%, rgba(255,255,255,0) 78%, rgba(107,133,255,.05) 84%, rgba(255,255,255,0) 92%, rgba(255,255,255,0) 100% ); animation: fx-rf-drift 7.2s linear infinite; } /* Glitch blips (JS toggles .blip/.blip2) */ .fx-blips{ opacity: 0; mix-blend-mode: screen; filter: blur(.4px); transform: translateZ(0); background: repeating-linear-gradient( to right, rgba(107,133,255,0), rgba(107,133,255,0) 12px, rgba(107,133,255,.12) 12px, rgba(107,133,255,.12) 13px ), linear-gradient( to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.12) 50%, rgba(255,255,255,0) 100% ); } .fx-blips.blip{ opacity: .16; animation: fx-blip 140ms steps(2) 1; } .fx-blips.blip2{ opacity: .11; animation: fx-blip2 120ms steps(2) 1; } /* Optional: micro-jitter on main content */ body.fx-jitter main{ animation: fx-jitter 120ms steps(2) 1; } /* Optional: tiny chromatic “edge” on h1 if present */ .fx-chroma h1{ position: relative; } .fx-chroma h1::before, .fx-chroma h1::after{ content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: .14; filter: blur(.2px); } .fx-chroma h1::before{ transform: translate(.7px,0); color: var(--fx-accent); } .fx-chroma h1::after{ transform: translate(-.7px,0); color: rgba(255,255,255,.55); } /* Optional: glitch slice on main (JS toggles .fx-slice) */ body.fx-slice main{ position: relative; } body.fx-slice main::after{ content:""; position:absolute; left:-2%; right:-2%; top: calc(10% + var(--slice-y, 30%)); height: var(--slice-h, 18px); background: linear-gradient(90deg, rgba(107,133,255,.08), rgba(255,255,255,.05)); opacity: .45; mix-blend-mode: overlay; filter: blur(.3px); transform: translateX(var(--slice-x, 0px)); } /* Animations */ @keyframes fx-scan-drift{ 0%{ transform: translateY(0) } 100%{ transform: translateY(16px) } } @keyframes fx-noise-shift{ 0%{ transform: translate3d(0,0,0) } 20%{ transform: translate3d(-1.5%,1%,0) } 40%{ transform: translate3d(1.5%,-1%,0) } 60%{ transform: translate3d(-1%,-1.5%,0) } 80%{ transform: translate3d(1%,1.5%,0) } 100%{ transform: translate3d(0,0,0) } } @keyframes fx-rf-drift{ 0%{ transform: translateY(-10%); filter: blur(.25px) } 50%{ transform: translateY(10%); filter: blur(.55px) } 100%{ transform: translateY(-10%); filter: blur(.25px) } } @keyframes fx-blip{ 0%{ transform: translate3d(0,0,0) } 100%{ transform: translate3d(0,0,0) } } @keyframes fx-blip2{ 0%{ transform: translate3d(0,0,0) } 100%{ transform: translate3d(0,0,0) } } @keyframes fx-jitter{ 0%{ transform: translate3d(0,0,0) } 25%{ transform: translate3d(.8px,-.6px,0) } 50%{ transform: translate3d(-.8px,.6px,0) } 75%{ transform: translate3d(.6px,.4px,0) } 100%{ transform: translate3d(0,0,0) } } @media (prefers-reduced-motion: reduce){ .fx-scan,.fx-noise,.fx-bands{ animation: none !important; } }