/* ========================================
   CRT Monitor Effects
   Subtle scanlines, glow, and flicker
   ======================================== */

/* Scanlines overlay */
.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  opacity: 0.5;
}

/* Subtle screen flicker */
.crt-flicker {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 11;
  animation: flicker 0.15s infinite;
  opacity: 0;
}

@keyframes flicker {
  0% { opacity: 0.02; }
  5% { opacity: 0; }
  10% { opacity: 0.01; }
  15% { opacity: 0; }
  20% { opacity: 0.02; }
  25% { opacity: 0; }
  30% { opacity: 0.01; }
  100% { opacity: 0; }
}

/* Text glow effect */
.terminal {
  text-shadow: 0 0 2px var(--green-glow);
}

/* Phosphor glow on text */
.output,
.boot-text {
  text-shadow:
    0 0 1px var(--green-bright),
    0 0 2px var(--green-glow),
    0 0 5px rgba(0, 255, 0, 0.2);
}

/* Stronger glow for headings and important text */
.glow-strong {
  text-shadow:
    0 0 2px var(--green-bright),
    0 0 5px var(--green-glow),
    0 0 10px rgba(0, 255, 0, 0.3),
    0 0 20px rgba(0, 255, 0, 0.1);
}

/* Screen edge vignette */
.terminal::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0, 0, 0, 0.4) 100%
  );
}

/* Optional: slight screen curvature (very subtle) */
.terminal-container {
  /* Slight perspective for depth */
  transform: perspective(1000px) rotateX(0.5deg);
  transform-origin: center center;
}

/* Interlace effect on hover (optional, subtle) */
.project-card:hover {
  animation: interlace 0.1s steps(2) infinite;
}

@keyframes interlace {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 2px;
  }
}

/* RGB separation on glitch (used by easter eggs) */
.glitch {
  animation: glitch-anim 0.3s ease-in-out;
}

@keyframes glitch-anim {
  0% {
    text-shadow:
      0 0 2px var(--green-glow),
      2px 0 #ff0000,
      -2px 0 #00ffff;
    transform: translate(0);
  }
  20% {
    text-shadow:
      0 0 2px var(--green-glow),
      -3px 0 #ff0000,
      3px 0 #00ffff;
    transform: translate(-2px, 1px);
  }
  40% {
    text-shadow:
      0 0 2px var(--green-glow),
      3px 0 #ff0000,
      -3px 0 #00ffff;
    transform: translate(2px, -1px);
  }
  60% {
    text-shadow:
      0 0 2px var(--green-glow),
      -2px 0 #ff0000,
      2px 0 #00ffff;
    transform: translate(-1px, 2px);
  }
  80% {
    text-shadow:
      0 0 2px var(--green-glow),
      2px 0 #ff0000,
      -2px 0 #00ffff;
    transform: translate(1px, -2px);
  }
  100% {
    text-shadow: 0 0 2px var(--green-glow);
    transform: translate(0);
  }
}

/* Power on effect */
.power-on {
  animation: power-on 0.5s ease-out;
}

@keyframes power-on {
  0% {
    filter: brightness(0) blur(10px);
    transform: scaleY(0.01);
  }
  50% {
    filter: brightness(2) blur(2px);
    transform: scaleY(1);
  }
  100% {
    filter: brightness(1) blur(0);
    transform: scaleY(1);
  }
}

/* Screen noise (optional, for boot sequence) */
.noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 12;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  animation: noise 0.2s steps(10) infinite;
}

@keyframes noise {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -5%); }
  20% { transform: translate(5%, 5%); }
  30% { transform: translate(-5%, 5%); }
  40% { transform: translate(5%, -5%); }
  50% { transform: translate(-2%, 2%); }
  60% { transform: translate(2%, -2%); }
  70% { transform: translate(-3%, -3%); }
  80% { transform: translate(3%, 3%); }
  90% { transform: translate(-1%, 1%); }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .crt-flicker,
  .scanlines {
    animation: none;
    opacity: 0.3;
  }

  .glitch {
    animation: none;
  }

  .noise {
    display: none;
  }
}