/* CR8F8 glitch layer — RGB-split + scanline style, matched to the logo.
   Loaded on top of the site. Behavior lives in glitch.js. */

/* logo: its black is keyed to transparent in glitch.js so it melts into #000 on any bg */
.hero-logo{width:min(1100px,98%);height:auto;display:block;margin:0 auto;}

/* scanline overlay for "banner header" surfaces (hero logo, profile banner) */
.glitch-surface{position:relative;}
.glitch-surface::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;opacity:.5;
}

/* element being glitched (hover / random) — inline styles set by JS */
.gl-on{will-change:transform,filter;}

/* ---- WHOLE-PAGE glitch: top bar + content glitch together, in sync, like the logo ---- */
#screen{will-change:transform,filter;}
body.pg-on .top, body.pg-on #screen{animation:pageGlitch .11s steps(2) infinite;}
@keyframes pageGlitch{
  0%{transform:translate(0,0)}
  18%{transform:translate(-2px,0) skewX(-.3deg);filter:drop-shadow(3px 0 #0ff) drop-shadow(-3px 0 #f0f)}
  36%{transform:translate(2px,1px);filter:none}
  54%{transform:translate(-1px,-1px);filter:drop-shadow(-2px 0 #0ff) drop-shadow(2px 0 #f0f) contrast(1.12)}
  72%{transform:translate(1px,0) skewX(.28deg);filter:none}
  100%{transform:translate(0,0)}
}

/* ---- full-page easter-egg overlay ---- */
#glScreen{position:fixed;inset:0;z-index:2147483000;pointer-events:none;display:none;}
#glScreen.on{display:block;}
#glScreen .gs-layer{position:absolute;inset:0;}
#glScreen .gs-scan{background:repeating-linear-gradient(0deg,rgba(0,0,0,.42) 0 2px,rgba(255,255,255,.03) 2px 3px,transparent 3px 5px);animation:gsScan .18s steps(2) infinite;}
#glScreen .gs-tearA{mix-blend-mode:screen;background:linear-gradient(90deg,transparent,rgba(0,255,255,.10),transparent);animation:gsTear 2.3s linear infinite;}
#glScreen .gs-tearB{mix-blend-mode:screen;background:linear-gradient(90deg,transparent,rgba(255,0,255,.10),transparent);animation:gsTear 3.1s linear infinite reverse;}
#glScreen .gs-bars{background-image:repeating-linear-gradient(0deg,transparent 0 6%,rgba(255,255,255,.04) 6% 6.4%,transparent 6.4% 12%);animation:gsBars .9s steps(6) infinite;}
#glScreen .gs-flick{background:#fff;opacity:0;animation:gsFlick 2.7s steps(1) infinite;}
#glScreen .gs-msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--display,serif);font-weight:800;color:#fff;letter-spacing:.04em;text-shadow:2px 0 #0ff,-2px 0 #f0f;animation:gsMsg .12s steps(2) infinite;white-space:nowrap;font-size:clamp(1.4rem,5vw,3rem);opacity:0;}
#glScreen.on .gs-msg{opacity:1;}

@keyframes gsScan{0%{transform:translateY(0)}100%{transform:translateY(3px)}}
@keyframes gsTear{0%{transform:translateY(-30%) scaleY(6)}100%{transform:translateY(130%) scaleY(6)}}
@keyframes gsBars{0%{transform:translateX(0)}100%{transform:translateX(-3px)}}
@keyframes gsFlick{0%,92%,100%{opacity:0}94%{opacity:.06}96%{opacity:0}98%{opacity:.10}}
@keyframes gsMsg{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(calc(-50% + 2px),-50%)}}

body.egg-hard{animation:eggHard .09s steps(2) infinite;}
@keyframes eggHard{
  0%{transform:translate(0,0);filter:none}
  25%{transform:translate(-3px,1px);filter:drop-shadow(4px 0 #0ff) drop-shadow(-4px 0 #f0f) contrast(1.3)}
  50%{transform:translate(3px,-1px);filter:drop-shadow(-5px 0 #0ff) drop-shadow(5px 0 #f0f)}
  75%{transform:translate(-2px,0);filter:contrast(1.5) saturate(1.4)}
  100%{transform:translate(0,0)}
}
body.egg-frozen{animation:eggFrozen 4s steps(8) infinite;}
@keyframes eggFrozen{
  0%{transform:translate(0,0);filter:contrast(1.25) saturate(1.15)}
  33%{transform:translate(-2px,0);filter:contrast(1.25) saturate(1.15) drop-shadow(3px 0 #0ff) drop-shadow(-3px 0 #f0f)}
  66%{transform:translate(1px,1px);filter:contrast(1.3) saturate(1.2)}
  100%{transform:translate(0,0);filter:contrast(1.25) saturate(1.15) drop-shadow(-2px 0 #0ff) drop-shadow(2px 0 #f0f)}
}