/* CRT OVERLAY START */
:root {
  --crt-opacity: 0.008; /* tweak intensity */
  --crt-line-width: 8px;
  --crt-line-gap: 10px;
  --crt-line-color: rgba(254, 197, 27, 0.336);
  --crt-repeat: calc(var(--crt-line-width) + var(--crt-line-gap)); /* 16px */
  --crt-grain-opacity: 0.45; /* tweak grain intensity */
}

.crt-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999; /* topmost */
  pointer-events: none; /* never blocks clicks */
  mix-blend-mode: color-dodge;
  opacity: var(--crt-opacity);

  /* horizontal scanlines, 8px on / 8px off */
  background-image: repeating-linear-gradient(
    0deg,
    var(--crt-line-color) 0 var(--crt-line-width),
    transparent var(--crt-line-width) var(--crt-repeat)
  );

  /* 4 FPS stepped motion up/down */
  animation:
    crtShift 1s steps(4) infinite,
    crtGlitch 6s linear infinite;
  will-change: background-position, transform, filter, opacity;
  transform: translateZ(0);
  filter: none;
}

/* Old-school TV grain layer — rendered as its own element (see app.js
   initCrtGrain), sibling to .crt-overlay, so it isn't crushed by the
   overlay's own very low opacity. */
.crt-grain {
  position: fixed;
  inset: 0;
  z-index: 99998; /* just below .crt-overlay, above page content */
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: var(--crt-grain-opacity);
  background-repeat: repeat;
  background-size: 64px 64px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' seed='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:
    grainFlicker 0.2s steps(2, end) infinite,
    grainDrift 1s steps(6) infinite;
  will-change: opacity, background-position;
  transform: translateZ(0);
}

/* RGB split layers that appear only during glitch */
.crt-overlay::before,
.crt-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 8%;
  mix-blend-mode: screen;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 181, 34, 0.394) 0 var(--crt-line-width),
    transparent var(--crt-line-width) var(--crt-repeat)
  );
  transform: translateZ(0);
  animation: crtChromaticGlitch 4s linear infinite;
}

.crt-overlay::after {
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 232, 60, 0.35) 0 var(--crt-line-width),
    transparent var(--crt-line-width) var(--crt-repeat)
  );
}

@keyframes crtShift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 calc(var(--crt-repeat) * -1);
  }
}
/* brief visual glitch every 6s */
@keyframes crtGlitch {
  0%,
  92% {
    transform: none;
    filter: none;
    opacity: var(--crt-opacity);
  }
  93% {
    transform: translateY(-8px) scaleX(1.025) skewY(-1deg);
    filter: contrast(60%) brightness(80%) saturate(140%);
    opacity: 0;
  }
  94% {
    transform: translateY(12px) scaleX(0.985) skewY(2deg);
    filter: contrast(50%) brightness(90%) hue-rotate(8deg) saturate(160%);
    opacity: 0.08;
  }
  95% {
    transform: translateY(-6px) scaleX(1.015) skewY(-1deg);
    filter: contrast(20%) brightness(85%) saturate(150%);
    opacity: 0.14;
  }
  96% {
    transform: translateY(4px);
    filter: contrast(30%);
    opacity: 0.12;
  }
  97%,
  100% {
    transform: none;
    filter: none;
    opacity: var(--crt-opacity);
  }
}

/* chromatic fringe flickers during the same window */
@keyframes crtChromaticGlitch {
  0%,
  92% {
    opacity: 0;
    transform: none;
  }
  93% {
    opacity: 1;
    transform: translateY(-6px);
  }
  94% {
    opacity: 1;
    transform: translateY(8px);
  }
  95% {
    opacity: 0.8;
    transform: translateY(-3px);
  }
  96%,
  100% {
    opacity: 0;
    transform: none;
  }
}

/* Grain animations */
@keyframes grainFlicker {
  0%,
  100% {
    opacity: var(--crt-grain-opacity);
  }
  50% {
    opacity: calc(var(--crt-grain-opacity) * 1.6);
  }
}

@keyframes grainDrift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 64px;
  }
}
/* CRT OVERLAY END */