/* assets/css/effects.css */

/* =========================
   Scanlines & Flicker
========================= */
.scanlines::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.16) 3px
  );
  mix-blend-mode:multiply;
  opacity:.55;
  z-index:20;
}

.scanlines::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:rgba(255,255,255,.04);
  opacity:.0;
  animation:flicker 3.5s infinite;
  mix-blend-mode:overlay;
  z-index:21;
}

@keyframes flicker{
  0%,100%{opacity:.03}
  7%{opacity:.08}
  9%{opacity:.02}
  33%{opacity:.06}
  37%{opacity:.015}
  66%{opacity:.07}
  68%{opacity:.02}
  88%{opacity:.05}
}

/* =========================
   Glitch Text
========================= */
.glitch{
  position:relative;
  text-shadow:0 0 10px var(--glow);
}

.glitch::before,
.glitch::after{
  content:attr(data-text);
  position:absolute;
  left:0; top:0;
  opacity:.55;
  clip-path: inset(0 0 0 0);
}

.glitch::before{
  color:rgba(124,255,155,.9);
  transform:translate(1px,0);
  animation:gl1 2.6s infinite linear;
}

.glitch::after{
  color:rgba(255,77,109,.55);
  transform:translate(-1px,0);
  animation:gl2 3.1s infinite linear;
}

@keyframes gl1{
  0%{clip-path: inset(0 0 88% 0)}
  8%{clip-path: inset(38% 0 44% 0)}
  15%{clip-path: inset(72% 0 12% 0)}
  22%{clip-path: inset(10% 0 70% 0)}
  30%{clip-path: inset(0 0 88% 0)}
  100%{clip-path: inset(0 0 88% 0)}
}

@keyframes gl2{
  0%{clip-path: inset(80% 0 6% 0)}
  10%{clip-path: inset(12% 0 74% 0)}
  18%{clip-path: inset(45% 0 38% 0)}
  26%{clip-path: inset(3% 0 90% 0)}
  34%{clip-path: inset(80% 0 6% 0)}
  100%{clip-path: inset(80% 0 6% 0)}
}

/* =========================
   CRT Curvature / Vignette
========================= */
.crtWrap{
  position:fixed;
  inset:0;
  overflow:hidden;
  border-radius:22px;
  transform: perspective(1200px) rotateX(0.6deg) rotateY(-0.6deg) scale(1.02);
  filter: contrast(1.08) saturate(1.08);
}

/* vignette */
.crtWrap::before{
  content:"";
  position:absolute; inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.12) 55%,
      rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply;
  z-index:30;
}

/* chromatic aberration overlay */
.crtWrap::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(255,0,90,.06),
      rgba(0,0,0,0) 25%,
      rgba(0,255,200,.06) 50%,
      rgba(0,0,0,0) 75%,
      rgba(120,80,255,.06));
  mix-blend-mode:screen;
  opacity:.35;
  z-index:31;
}

/* scanline drift */
body.crt .scanlines::before{
  animation: scanDrift 8s linear infinite;
}
@keyframes scanDrift{
  0%{transform:translateY(0);}
  100%{transform:translateY(6px);}
}

/* subtle text fringing */
body.crt .hud,
body.crt .log{
  text-shadow:
    1px 0 0 rgba(255,80,120,.12),
   -1px 0 0 rgba(80,255,220,.10),
    0 0 10px rgba(124,255,155,.18);
}