/* * fx.css — cinematic veil: scanlines, film grain (SVG feTurbulence), vignette. * Ported in spirit from new.cybercussion.com (real fractalNoise grain + fine scanlines). * Keyed off [data-fx~="…"] on ; opt-in; designed to layer OVER a background * (data-bg). Sits on body::after BEHIND content (z-index:-1) so text stays crisp. * Each effect contributes one background layer via a custom property; the single * ::after composes them (unset layers default to `none`). * Token-only: no raw hex, no px — `black` keyword + color-mix / rem / % only. */ @layer fx { [data-fx]:not([data-fx=""]) body::after { content: ""; position: fixed; inset: 0; z-index: -1; /* above the bg (::before) veil, below content */ pointer-events: none; background-image: var(--fx-scanlines, none), var(--fx-grain, none), var(--fx-vignette, none); background-size: auto, 16rem 16rem, cover; background-repeat: repeat, repeat, no-repeat; } /* Fine horizontal scanlines (~0.18rem pitch) — subtle dark stripes, theme-agnostic. */ [data-fx~="scanlines"] body { --fx-scanlines: repeating-linear-gradient( 0deg, transparent 0 0.09rem, color-mix(in oklab, black 11%, transparent) 0.09rem 0.18rem ); } /* Real film grain — SVG fractalNoise (grayscale; opacity baked in; no color/hex/px). */ [data-fx~="grain"] body { --fx-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); } /* Soft edge vignette. */ [data-fx~="vignette"] body { --fx-vignette: radial-gradient(ellipse 140% 100% at 50% 0%, transparent 55%, color-mix(in oklab, black 45%, transparent) 100%); } } /* Accessibility: drop the veil for reduced-motion / reduced-transparency users. */ @media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce) { [data-fx] body::after { display: none; } }