/* ============================================
   FRUSTRATION VISUAL EFFECTS (SOLOMON ARG)
   ============================================ */

/* Level 0: Normal state */
.frustration-0 .glow {
  background: radial-gradient(
    circle at center,
    #1bd459 0%,
    rgba(27, 212, 89, 0.88) 58%,
    rgba(21, 235, 92, 0.57) 80%,
    rgba(19, 94, 29, 0.27) 93%,
    rgba(10, 23, 12, 0) 100%
  );
}

/* Level 1: Subtle tension */
.frustration-1 .scanlines {
  opacity: 1.1;
}
.frustration-1 .glow {
  background: radial-gradient(
    circle at center,
    #20d050 0%,
    rgba(32, 208, 80, 0.88) 58%,
    rgba(30, 230, 90, 0.57) 80%,
    rgba(25, 100, 35, 0.27) 93%,
    rgba(10, 23, 12, 0) 100%
  );
}

/* Level 2: Slight unease */
.frustration-2 .scanlines {
  background-size: 100% 0.25rem;
  opacity: 1.2;
}
.frustration-2 .glow {
  background: radial-gradient(
    circle at center,
    #40c040 0%,
    rgba(64, 192, 64, 0.88) 58%,
    rgba(80, 200, 80, 0.57) 80%,
    rgba(40, 100, 40, 0.27) 93%,
    rgba(15, 25, 15, 0) 100%
  );
  animation: crt-glow-fast 30s infinite;
}

/* Level 3: Growing agitation - flicker begins */
.frustration-3 .output {
  animation: crt-output-flicker 8ms infinite;
}
.frustration-3 .scanlines {
  background-size: 100% 0.2rem;
  opacity: 1.3;
}
.frustration-3 .glow {
  background: radial-gradient(
    circle at center,
    #80a030 0%,
    rgba(128, 160, 48, 0.88) 58%,
    rgba(140, 180, 60, 0.57) 80%,
    rgba(80, 100, 30, 0.27) 93%,
    rgba(20, 25, 10, 0) 100%
  );
  animation: crt-glow-fast 15s infinite;
}

/* Level 4: Hostile - color shift to amber/red */
.frustration-4 .output {
  animation: crt-output-glitch 5ms infinite;
  text-shadow: 0rem 0.2rem 1rem #7b6b0c;
}
.frustration-4 .scanlines {
  background: linear-gradient(
    to bottom,
    rgba(255, 200, 100, 0),
    rgba(255, 200, 100, 0) 50%,
    rgba(50, 30, 0, 0.3) 70%,
    rgba(50, 20, 0, 0.7)
  );
  background-size: 100% 0.2rem;
}
.frustration-4 .glow {
  background: radial-gradient(
    circle at center,
    #d4a020 0%,
    rgba(212, 160, 32, 0.88) 58%,
    rgba(200, 150, 40, 0.57) 80%,
    rgba(120, 80, 20, 0.27) 93%,
    rgba(30, 20, 5, 0) 100%
  );
  animation: crt-glow-unstable 5s infinite;
}

/* Level 5: Full destabilization - red, shaking */
.frustration-5 .output {
  animation: crt-output-unstable 3ms infinite;
  text-shadow: 0rem 0.2rem 1rem #7b2020;
}
.frustration-5 .scanlines {
  background: linear-gradient(
    to bottom,
    rgba(255, 100, 100, 0),
    rgba(255, 100, 100, 0) 50%,
    rgba(80, 0, 0, 0.4) 70%,
    rgba(60, 0, 0, 0.8)
  );
  background-size: 100% 0.15rem;
  animation: scanline-shift 100ms infinite;
}
.frustration-5 .glow {
  background: radial-gradient(
    circle at center,
    #d43030 0%,
    rgba(212, 48, 48, 0.88) 58%,
    rgba(200, 60, 60, 0.57) 80%,
    rgba(120, 30, 30, 0.27) 93%,
    rgba(30, 10, 10, 0) 100%
  );
  animation: crt-glow-critical 2s infinite;
}
.frustration-5 {
  color: #fd4e4e;
}

/* Frustration animations */
@keyframes crt-glow-fast {
  0% { opacity: 0.12; }
  25% { opacity: 0.18; }
  50% { opacity: 0.22; }
  75% { opacity: 0.15; }
}

@keyframes crt-glow-unstable {
  0% { opacity: 0.15; }
  10% { opacity: 0.25; }
  20% { opacity: 0.12; }
  30% { opacity: 0.20; }
  50% { opacity: 0.18; }
  70% { opacity: 0.25; }
  90% { opacity: 0.10; }
}

@keyframes crt-glow-critical {
  0% { opacity: 0.15; transform: scale(1); }
  20% { opacity: 0.30; transform: scale(1.02); }
  40% { opacity: 0.10; transform: scale(0.98); }
  60% { opacity: 0.25; transform: scale(1.01); }
  80% { opacity: 0.12; transform: scale(0.99); }
}

@keyframes crt-output-flicker {
  0% { opacity: 0.92; }
  25% { opacity: 1; }
  50% { opacity: 0.95; }
  75% { opacity: 0.98; }
}

@keyframes crt-output-glitch {
  0% { opacity: 0.9; transform: translateX(0); }
  25% { opacity: 1; transform: translateX(0); }
  50% { opacity: 0.85; transform: translateX(1px); }
  75% { opacity: 0.95; transform: translateX(-1px); }
}

@keyframes crt-output-unstable {
  0% { opacity: 0.85; transform: translate(0, 0); }
  20% { opacity: 1; transform: translate(1px, 0); }
  40% { opacity: 0.80; transform: translate(-1px, 1px); }
  60% { opacity: 0.95; transform: translate(0, -1px); }
  80% { opacity: 0.88; transform: translate(1px, 1px); }
}

@keyframes scanline-shift {
  0% { background-position: 0 0; }
  100% { background-position: 0 3px; }
}

/* Screen shake effect */
.shake {
  animation: screen-shake 0.5s ease-in-out;
}

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

/* Glitch flash effect */
.glitch-flash {
  animation: glitch-flash 0.1s ease-in-out;
}

@keyframes glitch-flash {
  0% { filter: none; }
  50% { filter: invert(1) hue-rotate(180deg); }
  100% { filter: none; }
}