/* CRT Effects Library - VHS/Retro TV Aesthetic */

/* CSS Custom Properties for CRT theme */
:root {
  --crt-bg: #0c0c10;
  --crt-card: #141418;
  --crt-text: #c8d8c8;
  --crt-text-dim: #707878;
  --crt-cyan: #00ffcc;
  --crt-purple: #cc66ff;
  --crt-red: #ff3333;
  --crt-orange: #ff9933;
  --crt-border: rgba(255, 255, 255, 0.15);
  --crt-scanline: rgba(0, 0, 0, 0.08);
}

/* Main CRT container - applies scanlines and vignette */
.crt {
  position: relative;
}

.crt::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 1px,
    var(--crt-scanline) 1px,
    var(--crt-scanline) 2px
  );
  pointer-events: none;
  z-index: 9999;
}

.crt::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 70%,
    rgba(0, 0, 0, 0.25) 100%
  );
  pointer-events: none;
  z-index: 9998;
}

/* Scanlines only - for containers within pages */
.crt-scanlines {
  position: relative;
}

.crt-scanlines::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 1px,
    var(--crt-scanline) 1px,
    var(--crt-scanline) 2px
  );
  pointer-events: none;
  z-index: 10;
  border-radius: inherit;
}

/* Chromatic aberration on text - subtle */
.crt-text {
  text-shadow:
    -0.5px 0 rgba(255, 0, 0, 0.25),
    0.5px 0 rgba(0, 255, 255, 0.25);
}

.crt-text-strong {
  text-shadow:
    -1px 0 rgba(255, 0, 0, 0.3),
    1px 0 rgba(0, 255, 255, 0.3);
}

/* Chromatic aberration on hover (for interactive elements) */
.crt-aberration:hover {
  text-shadow:
    -1px 0 rgba(255, 0, 0, 0.4),
    1px 0 rgba(0, 255, 255, 0.4);
}

/* Phosphor glow effect - subtle */
.crt-glow {
  text-shadow:
    0 0 4px currentColor,
    0 0 8px rgba(255, 255, 255, 0.1);
}

.crt-glow-subtle {
  text-shadow:
    0 0 2px currentColor;
}

/* Box glow for elements - subtle */
.crt-box-glow {
  box-shadow:
    0 0 4px currentColor,
    inset 0 0 2px rgba(255, 255, 255, 0.03);
}

/* Flicker animation */
@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  41.99% { opacity: 1; }
  42% { opacity: 0.85; }
  43% { opacity: 1; }
  45.99% { opacity: 1; }
  46% { opacity: 0.9; }
  46.5% { opacity: 1; }
  92% { opacity: 1; }
  92.5% { opacity: 0.88; }
  93% { opacity: 1; }
}

.crt-flicker {
  animation: crt-flicker 4s infinite;
}

/* Subtle screen flicker for backgrounds */
@keyframes crt-screen-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.98; }
}

.crt-screen-flicker {
  animation: crt-screen-flicker 0.1s infinite;
}

/* Noise/grain overlay */
@keyframes crt-noise {
  0%, 100% { background-position: 0 0; }
  10% { background-position: -5% -10%; }
  20% { background-position: -15% 5%; }
  30% { background-position: 7% -25%; }
  40% { background-position: 20% 25%; }
  50% { background-position: -25% 10%; }
  60% { background-position: 15% 5%; }
  70% { background-position: 0% 15%; }
  80% { background-position: 25% 35%; }
  90% { background-position: -10% 10%; }
}

.crt-noise::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' 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");
  opacity: 0.015;
  pointer-events: none;
  z-index: 9997;
  animation: none; /* disabled - too distracting */
}

/* VHS tracking glitch */
@keyframes vhs-tracking {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-2px); }
  20% { transform: translateX(2px); }
  30% { transform: translateX(-1px); }
  40% { transform: translateX(1px); }
  50% { transform: translateX(0); }
}

.crt-tracking {
  animation: vhs-tracking 0.3s ease infinite;
  animation-play-state: paused;
}

.crt-tracking:hover {
  animation-play-state: running;
}

/* Sharp, boxy corners for CRT buttons/cards */
.crt-sharp {
  border-radius: 2px !important;
}

.crt-border {
  border: 2px solid var(--crt-border) !important;
}

.crt-border-glow:hover {
  border-color: var(--crt-cyan) !important;
  box-shadow: 0 0 10px var(--crt-cyan), inset 0 0 5px rgba(0, 255, 204, 0.1);
}

/* CRT color utilities */
.crt-cyan { color: var(--crt-cyan); }
.crt-purple { color: var(--crt-purple); }
.crt-red { color: var(--crt-red); }
.crt-orange { color: var(--crt-orange); }

/* Snappy transitions (no smooth easing) */
.crt-snap {
  transition-timing-function: steps(3) !important;
  transition-duration: 0.1s !important;
}

/* Mobile: reduce effects for performance */
@media (max-width: 768px) {
  .crt::before {
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      var(--crt-scanline) 2px,
      var(--crt-scanline) 4px
    );
  }

  .crt-noise::before {
    display: none;
  }

  .crt-text {
    text-shadow:
      -0.5px 0 rgba(255, 0, 0, 0.3),
      0.5px 0 rgba(0, 255, 255, 0.3);
  }
}

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

  .crt-noise::before {
    animation: none;
  }
}