/* SuperAwesome — shared media filters.
   Applied to the media CONTAINER (the element that carries the f-* class), so a single
   rule works for <img>, <video>, <canvas>, AND background-image demos alike. The host
   just needs position:relative + overflow:hidden (.media, .bigpfp, #hero all qualify). */

.f-8bit{filter:contrast(1.4) saturate(1.9);image-rendering:pixelated;}
.f-8bit::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.22) 1px,transparent 1px);background-size:9px 9px;mix-blend-mode:multiply;pointer-events:none;z-index:2;}

.f-xerox{filter:grayscale(1) contrast(2.9) brightness(1.15);}
.f-xerox::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.10) 1px,transparent 1px);background-size:3px 3px;mix-blend-mode:multiply;pointer-events:none;z-index:2;}

.f-halftone{filter:grayscale(1) contrast(1.9) brightness(1.08);}
.f-halftone::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,#000 26%,transparent 30%);background-size:6px 6px;mix-blend-mode:multiply;opacity:.6;pointer-events:none;z-index:2;}

.f-vapor{filter:saturate(1.5) contrast(1.05) brightness(1.05) hue-rotate(-10deg);}
.f-vapor::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,229,255,.30),transparent 60%);mix-blend-mode:lighten;pointer-events:none;z-index:2;}
.f-vapor::after{content:"";position:absolute;inset:0;background:linear-gradient(300deg,rgba(255,45,149,.35),transparent 60%);mix-blend-mode:screen;pointer-events:none;z-index:2;}

.f-gameboy{filter:grayscale(1) contrast(1.4) sepia(1) hue-rotate(58deg) saturate(3.2) brightness(1.05);}
.f-gameboy::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,40,0,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(0,40,0,.18) 1px,transparent 1px);background-size:6px 6px;pointer-events:none;z-index:2;}

.f-sepia{filter:sepia(.85) contrast(1.05) brightness(1.05) saturate(1.2);}
.f-sepia::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 55%,rgba(60,30,0,.45));pointer-events:none;z-index:2;}

.f-neon{filter:saturate(2.1) contrast(1.25) brightness(1.02);}
.f-neon::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 65%,rgba(255,45,149,.4),transparent 70%),linear-gradient(rgba(0,229,255,.12),transparent);mix-blend-mode:screen;pointer-events:none;z-index:2;}

/* VHS: base container filter (works for video + background), plus an animated scanline.
   The feed's triple-image markup (.base/.r/.b) still gets chromatic aberration. */
.f-vhs{filter:saturate(1.45) contrast(1.18) brightness(1.03);}
.f-vhs::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(rgba(0,0,0,.22) 0 2px,transparent 2px 4px);pointer-events:none;z-index:2;animation:sa-vhs 6s linear infinite;}
.f-vhs .r{mix-blend-mode:screen;filter:sepia(1) saturate(7) hue-rotate(-30deg) brightness(1.05);transform:translateX(-3px);opacity:.75;}
.f-vhs .b{mix-blend-mode:screen;filter:sepia(1) saturate(7) hue-rotate(150deg) brightness(1.05);transform:translateX(3px);opacity:.75;}
@keyframes sa-vhs{0%{background-position:0 0;}100%{background-position:0 100px;}}

/* keep child media sitting under the texture overlays */
.media>img,.media>video,.media>canvas{z-index:1;}