/* ============================================================ UNCANNY — glitch / VHS effect stack (analog + digital) All layers sit above the video, below the content. ============================================================ */ .fx{ position:fixed; inset:0; z-index:5; pointer-events:none; overflow:hidden; } /* --- analog: scanlines --- */ .fx-scanlines{ position:absolute; inset:-2px; background:repeating-linear-gradient( 0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.32) 3px, rgba(0,0,0,.32) 3px); mix-blend-mode:multiply; opacity:.55; animation:scanroll 8s linear infinite; } @keyframes scanroll{ from{background-position-y:0} to{background-position-y:60px} } /* --- analog: grain (animated noise via layered gradients) --- */ .fx-grain{ position:absolute; inset:-50%; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px), radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:3px 3px, 4px 4px; background-position:0 0, 1px 2px; opacity:.5; mix-blend-mode:screen; animation:grainshift .5s steps(4) infinite; } @keyframes grainshift{ 0%{ transform:translate(0,0) } 25%{ transform:translate(-2%,1%) } 50%{ transform:translate(1%,-2%) } 75%{ transform:translate(-1%,-1%) } 100%{ transform:translate(2%,2%) } } /* --- analog: rolling tracking bar + vertical hold jump --- */ .fx-tracking{ position:absolute; left:0; right:0; height:16vh; top:-20vh; background:linear-gradient(180deg, transparent, rgba(255,255,255,.05) 30%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.05) 70%, transparent); mix-blend-mode:overlay; opacity:.7; filter:blur(1px); animation:trackroll 7s linear infinite; } @keyframes trackroll{ 0%{top:-25vh} 100%{top:120vh} } /* --- vignette + subtle warp --- */ .fx-vignette{ position:absolute; inset:0; background:radial-gradient(130% 130% at 50% 50%, transparent 55%, rgba(0,0,0,.7) 100%); box-shadow:inset 0 0 220px 40px rgba(0,0,0,.6); } /* --- digital: datamosh flash frames (uses img/g*.jpg) --- */ .fx-digital{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; mix-blend-mode:screen; will-change:opacity, clip-path, transform; } .fx-digital.burst{ animation:datamosh .5s steps(6) 1; } @keyframes datamosh{ 0%{ opacity:0; clip-path:inset(0 0 92% 0); transform:translateX(0); } 15%{ opacity:.7; clip-path:inset(20% 0 40% 0); transform:translateX(-6px); } 30%{ opacity:.55; clip-path:inset(60% 0 10% 0); transform:translateX(8px); } 45%{ opacity:.8; clip-path:inset(0 0 55% 0); transform:translateX(-3px); } 60%{ opacity:.4; clip-path:inset(70% 0 0 0); transform:translateX(5px); } 100%{ opacity:0; clip-path:inset(0 0 100% 0); transform:translateX(0); } } /* --- global flicker on via class --- */ .flicker{ animation:flick .16s steps(2) 1; } @keyframes flick{ 0%{filter:brightness(1)} 50%{filter:brightness(1.5) contrast(1.2)} 100%{filter:brightness(1)} } /* --- wordmark RGB-split glitch (toggled by JS .glitching) --- */ .wordmark-text.glitching{ animation:rgbsplit .28s steps(2) infinite; } .wordmark-text.glitching::before, .wordmark-text.glitching::after{ content:attr(data-txt); position:absolute; left:0; top:0; width:100%; clip-path:inset(0 0 0 0); } .wordmark-text.glitching::before{ color:#ff2f6d; transform:translate(-3px,0); mix-blend-mode:screen; animation:jitterA .2s steps(2) infinite; } .wordmark-text.glitching::after{ color:#22e0ff; transform:translate(3px,0); mix-blend-mode:screen; animation:jitterB .2s steps(2) infinite; } @keyframes rgbsplit{ 0%{transform:translate(0,0)} 50%{transform:translate(1px,-1px)} 100%{transform:translate(-1px,1px)} } @keyframes jitterA{ 0%{clip-path:inset(10% 0 60% 0)} 50%{clip-path:inset(50% 0 20% 0)} 100%{clip-path:inset(30% 0 40% 0)} } @keyframes jitterB{ 0%{clip-path:inset(60% 0 10% 0)} 50%{clip-path:inset(20% 0 55% 0)} 100%{clip-path:inset(45% 0 25% 0)} } /* reduced motion: freeze the noise, keep the mood */ @media (prefers-reduced-motion:reduce){ .fx-scanlines,.fx-grain,.fx-tracking{ animation:none; } .fx-tracking{ display:none; } .fx-digital{ display:none; } .wordmark-text.glitching{ animation:none; } .wordmark-text.glitching::before,.wordmark-text.glitching::after{ display:none; } }