:root {
  --scanline-size: 2px;
  --scanline-intensity: 0.075;
  --screen-flicker-rate: 0.15s;
  --screen-glow-brightness: 0.9;
  --screen-glow-contrast: 1;
  --screen-glow-saturation: 1.1;
  --static-opacity: 0.075;
  --vignette-opacity: 0.2;
  --background-text-opacity: 0.2;
  --background-text-size: 0.6rem;
  --matrix-char-color: var(--matrix-green);
  --crt-curvature: 0.02;
  --crt-border-radius: 10px;
  --crt-border-width: 2px;
  --crt-border-color: #333;
  --matrix-green: #bff093;
  --matrix-dark-green: #8fbf69;
}

.crt-screen {
  background: #000;
  position: relative;
  overflow: hidden;
  border-radius: var(--crt-border-radius);
  border: var(--crt-border-width) solid var(--crt-border-color);

  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.2) 100%
  );
}

.crt-screen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, var(--scanline-intensity)),
    rgba(0, 0, 0, var(--scanline-intensity)) var(--scanline-size),
    transparent var(--scanline-size),
    transparent calc(var(--scanline-size) * 2)
  );
  pointer-events: none;
  animation: scanline 8s linear infinite;
}

.crt-screen::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    transparent 0%,
    rgba(0, 0, 0, var(--vignette-opacity)) 90%
  );
  pointer-events: none;
}

.screen-glow {
  filter: brightness(var(--screen-glow-brightness))
    contrast(var(--screen-glow-contrast))
    saturate(var(--screen-glow-saturation));
  animation: screenFlicker var(--screen-flicker-rate) infinite;
}

.background-text {
  font-size: var(--background-text-size);
  opacity: var(--background-text-opacity);
  font-family: monospace;
  line-height: 1;
  text-shadow: 0 0 2px var(--matrix-char-color);
  animation: matrixGlow 2s infinite;
}

.background-text pre {
  font-family: monospace;
}

@keyframes screenFlicker {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.995;
  }
  100% {
    opacity: 1;
  }
}

@keyframes matrixGlow {
  0% {
    text-shadow: 0 0 2px var(--matrix-char-color);
  }
  50% {
    text-shadow: 0 0 4px var(--matrix-char-color);
  }
  100% {
    text-shadow: 0 0 2px var(--matrix-char-color);
  }
}

@keyframes scanline {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(var(--scanline-size) * 2));
  }
}

.crt-screen > * {
  transform: scale(0.98);
  transform-origin: center;
}

/* Retro Hacker Photo Filter */
.hacker-filter {
  position: relative;
  filter: contrast(1.1) brightness(0.9) saturate(1.1) hue-rotate(10deg)
    sepia(0.1);
}

.hacker-filter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(191, 240, 147, 0.1),
    rgba(191, 240, 147, 0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hacker-filter::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 50% 50%,
      transparent 0%,
      rgba(0, 0, 0, 0.3) 100%
    ),
    repeating-conic-gradient(
      from 0deg,
      rgba(191, 240, 147, 0.05) 0deg 1deg,
      transparent 1deg 2deg
    );
  mix-blend-mode: overlay;
  pointer-events: none;
}

@keyframes colorShift {
  0% {
    filter: contrast(1.2) brightness(0.9) saturate(1.3) hue-rotate(10deg)
      sepia(0.3);
  }
  50% {
    filter: contrast(1.3) brightness(0.85) saturate(1.4) hue-rotate(15deg)
      sepia(0.4);
  }
  100% {
    filter: contrast(1.2) brightness(0.9) saturate(1.3) hue-rotate(10deg)
      sepia(0.3);
  }
}

@keyframes noise {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(1px, 1px);
  }
}

@keyframes glitch {
  0% {
    filter: contrast(1.2) brightness(0.9) saturate(1.3) hue-rotate(10deg)
      sepia(0.3);
  }
  25% {
    filter: contrast(1.3) brightness(1) saturate(1.4) hue-rotate(15deg)
      sepia(0.4);
  }
  50% {
    filter: contrast(1.25) brightness(0.95) saturate(1.35) hue-rotate(12deg)
      sepia(0.35);
  }
  75% {
    filter: contrast(1.3) brightness(1) saturate(1.4) hue-rotate(15deg)
      sepia(0.4);
  }
  100% {
    filter: contrast(1.2) brightness(0.9) saturate(1.3) hue-rotate(10deg)
      sepia(0.3);
  }
}

/* Pixel Art Filter */
.pixel-art-filter {
  position: relative;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  filter: contrast(1.2) brightness(0.9) saturate(1.3) hue-rotate(5deg);
  transform: scale(1);
  transform-origin: center;
}

.pixel-art-filter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.1) 0px,
      rgba(0, 0, 0, 0.1) 1px,
      transparent 1px,
      transparent 2px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.1) 0px,
      rgba(0, 0, 0, 0.1) 1px,
      transparent 1px,
      transparent 2px
    );
  mix-blend-mode: overlay;
  pointer-events: none;
}

.pixel-art-filter::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 50% 50%,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 100%
  );
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Pixel Art Hover Effect */
.pixel-art-filter:hover {
  animation: pixelShift 0.3s steps(2) infinite;
}

@keyframes pixelShift {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

/* Pixel Art Grid Overlay */
.pixel-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 8px 8px;
  mix-blend-mode: overlay;
  pointer-events: none;
  opacity: 0.5;
}

/* Pixel Art Color Palette Effect */
.pixel-palette {
  filter: contrast(1.2) brightness(0.9) saturate(1.3) hue-rotate(5deg)
    grayscale(0.2);
  animation: paletteShift 4s infinite;
}

@keyframes paletteShift {
  0% {
    filter: contrast(1.2) brightness(0.9) saturate(1.3) hue-rotate(5deg)
      grayscale(0.2);
  }
  50% {
    filter: contrast(1.3) brightness(0.85) saturate(1.4) hue-rotate(8deg)
      grayscale(0.3);
  }
  100% {
    filter: contrast(1.2) brightness(0.9) saturate(1.3) hue-rotate(5deg)
      grayscale(0.2);
  }
}

/* Matrix Green Monochrome Filter */
.matrix-green-filter {
  filter: grayscale(100%) sepia(100%) hue-rotate(90deg) saturate(200%)
    brightness(0.8) contrast(1.2);
  box-shadow: 0 0 10px rgba(191, 240, 147, 0.5);
  transition: all 0.3s ease;
}

.matrix-green-filter:hover {
  filter: grayscale(100%) sepia(100%) hue-rotate(90deg) saturate(300%)
    brightness(1) contrast(1.4);
  box-shadow: 0 0 15px rgba(191, 240, 147, 0.8);
}

/* CRT Scan effect for Matrix Green Filter */
.matrix-green-filter::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(191, 240, 147, 0.1) 50%,
    rgba(191, 240, 147, 0.05) 50%
  );
  background-size: 100% 4px;
  pointer-events: none;
  mix-blend-mode: overlay;
  animation: scanGreen 10s linear infinite;
}

@keyframes scanGreen {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

/* Navigation link styles */
.paragraph {
  position: relative;
  padding: 0 15px;
  transition: padding 0.2s ease;
}

/* Active state (square brackets) */
.paragraph.active::before {
  content: "[";
  position: absolute;
  left: -5px;
}

.paragraph.active::after {
  content: "]";
  position: absolute;
  right: -5px;
}

/* Hover state (angle brackets) */
.paragraph:not(.active):hover {
  padding: 0 15px;
}

.paragraph:not(.active):hover::before {
  content: ">";
  position: absolute;
  left: 0;
}

.paragraph:not(.active):hover::after {
  content: "<";
  position: absolute;
  right: 0;
}

/* Artist title hover effect */
.hacker-filter h2 {
  position: relative;
  padding: 0 15px;
  transition: padding 0.2s ease;
}

.hacker-filter:hover h2::before {
  content: ">";
  position: absolute;
  left: 0;
  color: var(--matrix-green);
}

.hacker-filter:hover h2::after {
  content: "<";
  position: absolute;
  right: 0;
  color: var(--matrix-green);
}