/* ============================================================
   NAUSTALGIAOS GLITCH SYSTEM v3.0
   Intentional CRT/VHS/Psychological Horror Effects
   
   Era: 1995-2003 analog horror aesthetic
   
   Design Principles:
   - Effects have MEANING (tied to game state)
   - Hierarchy: Ambient → Micro → Minor → Major → Catastrophic
   - Less is more — uncertainty over spectacle
   - The screen is a membrane — something presses through
   
   Layer this AFTER terminal-visuals.css
============================================================ */

/* ============================================================
   EFFECT LAYER CONTAINERS
============================================================ */

/* Screen-local effects (inside CRT bounds, mirrors #term position) */
#glitchScreenLayer {
  position: fixed;
  top: 50%;
  left: 48%;
  transform: translate(-50%, -50%) rotate(0.9deg);
  width: min(48vw, 60vh * 1.15);
  height: min(46vh, 52vw * 0.75);
  max-width: 820px;
  max-height: 560px;
  overflow: hidden;
  pointer-events: none;
  z-index: 6; /* Above term (5), below ghost layer */
}

/* Environmental effects (full viewport, affects "the room") */
#glitchEnvLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

/* Subliminal/psyche layer (highest z-index for flashes) */
#glitchPsycheLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100000;
  overflow: hidden;
}

/* ============================================================
   LEVEL 0: AMBIENT (Always-on, barely perceptible)
   "This screen is old, alive"
============================================================ */

/* Phosphor hum - subtle brightness oscillation */
@keyframes phosphorHum {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.985; }
}

.ambient-phosphor-hum {
  animation: phosphorHum 0.0167s linear infinite; /* 60Hz flicker */
}

/* Subtle horizontal jitter - old CRT instability */
@keyframes ambientJitter {
  0%, 100% { transform: translate(-50%, -50%) rotate(0.9deg) translateX(0); }
  25% { transform: translate(-50%, -50%) rotate(0.9deg) translateX(0.3px); }
  75% { transform: translate(-50%, -50%) rotate(0.9deg) translateX(-0.2px); }
}

.ambient-jitter {
  animation: ambientJitter 0.1s steps(2) infinite;
}

/* Interlace lines - every-other-line CRT effect */
.glitch-interlace {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 1px,
    rgba(0, 0, 0, 0.03) 1px,
    rgba(0, 0, 0, 0.03) 2px
  );
  pointer-events: none;
  opacity: 0.5;
}

/* ============================================================
   LEVEL 1: MICRO (Often, "Did I see that?")
   Single-frame disruptions, subliminal
============================================================ */

/* Single-frame brightness spike */
@keyframes microFlash {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}

.glitch-micro-flash {
  animation: microFlash 0.033s steps(1) forwards; /* 1-2 frames */
}

/* Horizontal line glitch - single scanline displacement */
.glitch-scanline-tear {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 255, 255, 0.8) 20%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(0, 255, 255, 0.8) 80%,
    transparent 100%
  );
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

@keyframes scanlineTear {
  0% { opacity: 0; transform: translateX(-100%); }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}

.glitch-scanline-tear.active {
  animation: scanlineTear 0.08s linear forwards;
}

/* Color fringe - brief RGB separation */
@keyframes microColorFringe {
  0%, 100% { 
    text-shadow: inherit;
    filter: none;
  }
  50% { 
    text-shadow: -1px 0 #ff0066, 1px 0 #00ffff;
    filter: blur(0.3px);
  }
}

.glitch-color-fringe {
  animation: microColorFringe 0.05s steps(1) forwards;
}

/* Micro blackout - single frame void */
@keyframes microBlackout {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.glitch-micro-blackout {
  animation: microBlackout 0.033s steps(1) forwards;
}

/* ============================================================
   LEVEL 2: MINOR (Sometimes, "Something's wrong")
   Noticeable but not alarming
============================================================ */

/* VHS Tracking - horizontal bands of displaced image */
.glitch-vhs-tracking {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(255, 255, 255, 0.03) 3px,
    rgba(255, 255, 255, 0.03) 4px
  );
  opacity: 0;
  pointer-events: none;
}

@keyframes vhsTracking {
  0% { 
    opacity: 0;
    background-position: 0 0;
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { 
    opacity: 0;
    background-position: 0 20px;
  }
}

.glitch-vhs-tracking.active {
  animation: vhsTracking 0.3s linear forwards;
}

/* Horizontal tear - frame split */
.glitch-h-tear {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  pointer-events: none;
}

.glitch-h-tear.top {
  top: 0;
  clip-path: inset(0 0 50% 0);
}

.glitch-h-tear.bottom {
  bottom: 0;
  clip-path: inset(50% 0 0 0);
}

@keyframes tearShiftTop {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-8px); }
  60% { transform: translateX(4px); }
}

@keyframes tearShiftBottom {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(6px); }
  60% { transform: translateX(-3px); }
}

.glitch-h-tear.top.active {
  animation: tearShiftTop 0.15s ease-out forwards;
}

.glitch-h-tear.bottom.active {
  animation: tearShiftBottom 0.15s ease-out forwards;
}

/* Degauss wobble - magnetic interference */
@keyframes degaussWobble {
  0% { transform: translate(-50%, -50%) rotate(0.9deg) scale(1); }
  20% { transform: translate(-50%, -50%) rotate(0.9deg) scale(1.01, 0.99); }
  40% { transform: translate(-50%, -50%) rotate(1.2deg) scale(0.99, 1.01); }
  60% { transform: translate(-50%, -50%) rotate(0.6deg) scale(1.005); }
  80% { transform: translate(-50%, -50%) rotate(0.9deg) scale(0.998); }
  100% { transform: translate(-50%, -50%) rotate(0.9deg) scale(1); }
}

.glitch-degauss {
  animation: degaussWobble 0.4s ease-out forwards;
}

/* Analog snow burst - brief static */
.glitch-snow {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  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");
  mix-blend-mode: overlay;
}

@keyframes snowBurst {
  0% { opacity: 0; }
  10% { opacity: 0.4; }
  20% { opacity: 0.1; }
  30% { opacity: 0.3; }
  50% { opacity: 0.2; }
  70% { opacity: 0.35; }
  90% { opacity: 0.15; }
  100% { opacity: 0; }
}

.glitch-snow.active {
  animation: snowBurst 0.2s steps(4) forwards;
}

/* Wrong color - momentary hue shift */
@keyframes wrongColor {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(30deg) saturate(1.3); }
}

.glitch-wrong-color {
  animation: wrongColor 0.1s steps(1) forwards;
}

/* ============================================================
   LEVEL 3: MAJOR (Rare, "The system is failing")
   Unmistakable disruption
============================================================ */

/* Vertical roll - screen sliding up */
.glitch-vertical-roll {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

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

.glitch-vertical-roll.active {
  animation: verticalRoll 0.8s linear forwards;
}

/* Signal loss - the void between channels */
.glitch-signal-loss {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 45%,
      rgba(255, 255, 255, 0.1) 48%,
      rgba(0, 0, 0, 0.9) 50%,
      rgba(255, 255, 255, 0.1) 52%,
      transparent 55%,
      transparent 100%
    );
  opacity: 0;
  pointer-events: none;
}

@keyframes signalLossSweep {
  0% { 
    opacity: 1;
    transform: translateY(-100%);
  }
  100% { 
    opacity: 0.5;
    transform: translateY(100%);
  }
}

.glitch-signal-loss.active {
  animation: signalLossSweep 0.5s ease-in-out forwards;
}

/* Phosphor burn - ghost afterimage */
.glitch-phosphor-burn {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 40% at 50% 50%,
    rgba(0, 255, 255, 0.08) 0%,
    transparent 60%
  );
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

@keyframes phosphorBurn {
  0% { opacity: 0; transform: scale(1); }
  20% { opacity: 0.6; }
  100% { opacity: 0; transform: scale(1.1); filter: blur(4px); }
}

.glitch-phosphor-burn.active {
  animation: phosphorBurn 2s ease-out forwards;
}

/* Heavy corruption - multiple stacked effects */
@keyframes heavyCorruption {
  0% { 
    filter: none;
    transform: translate(-50%, -50%) rotate(0.9deg);
  }
  10% { 
    filter: saturate(2) hue-rotate(20deg);
    transform: translate(-50%, -50%) rotate(0.9deg) translateX(-3px);
  }
  20% { 
    filter: saturate(0.5) contrast(1.5);
    transform: translate(-50%, -50%) rotate(0.9deg) translateX(2px);
  }
  30% { 
    filter: saturate(1.5) hue-rotate(-15deg);
    transform: translate(-50%, -50%) rotate(0.9deg) skewX(0.5deg);
  }
  40% {
    filter: brightness(1.3) contrast(0.8);
    transform: translate(-50%, -50%) rotate(0.9deg);
  }
  50% {
    filter: saturate(2) hue-rotate(40deg);
    transform: translate(-50%, -50%) rotate(0.9deg) translateY(-2px);
  }
  100% { 
    filter: none;
    transform: translate(-50%, -50%) rotate(0.9deg);
  }
}

.glitch-heavy-corruption {
  animation: heavyCorruption 0.5s ease-out forwards;
}

/* ============================================================
   LEVEL 4: CATASTROPHIC (Very Rare, "I'm losing them")
   System collapse, narrative peak
============================================================ */

/* Total signal death */
.glitch-signal-death {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

@keyframes signalDeath {
  0% { opacity: 0; }
  5% { opacity: 1; }
  8% { opacity: 0; }
  12% { opacity: 1; }
  20% { opacity: 1; }
  22% { opacity: 0; }
  25% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 1; }
}

.glitch-signal-death.active {
  animation: signalDeath 2s steps(1) forwards;
}

/* Screen collapse - CRT power-off effect */
@keyframes screenCollapse {
  0% { 
    transform: translate(-50%, -50%) rotate(0.9deg) scale(1, 1);
    filter: brightness(1);
  }
  30% { 
    transform: translate(-50%, -50%) rotate(0.9deg) scale(1, 0.8);
    filter: brightness(1.5);
  }
  60% { 
    transform: translate(-50%, -50%) rotate(0.9deg) scale(1, 0.01);
    filter: brightness(2);
  }
  80% { 
    transform: translate(-50%, -50%) rotate(0.9deg) scale(0.5, 0.01);
    filter: brightness(3);
  }
  100% { 
    transform: translate(-50%, -50%) rotate(0.9deg) scale(0, 0);
    filter: brightness(0);
  }
}

.glitch-screen-collapse {
  animation: screenCollapse 0.6s ease-in forwards;
}

/* Recovery flicker - coming back online */
@keyframes recoveryFlicker {
  0% { opacity: 0; filter: brightness(0); }
  10% { opacity: 0.3; filter: brightness(2); }
  15% { opacity: 0; filter: brightness(0); }
  30% { opacity: 0.5; filter: brightness(1.5); }
  35% { opacity: 0.2; filter: brightness(0.5); }
  50% { opacity: 0.7; filter: brightness(1.2); }
  60% { opacity: 0.4; filter: brightness(0.8); }
  75% { opacity: 0.9; filter: brightness(1.1); }
  85% { opacity: 0.7; filter: brightness(1); }
  100% { opacity: 1; filter: brightness(1); }
}

.glitch-recovery {
  animation: recoveryFlicker 1.5s ease-out forwards;
}

/* ============================================================
   ENVIRONMENTAL EFFECTS (Full viewport)
   Affects "the room", not just the screen
============================================================ */

/* Peripheral darkness - edges close in */
.glitch-peripheral-dark {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 50% at 50% 50%,
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.4) 70%,
    rgba(0, 0, 0, 0.8) 100%
  );
  opacity: 0;
  pointer-events: none;
}

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

.glitch-peripheral-dark.active {
  animation: peripheralClose 1s ease-in-out forwards;
}

/* Room flicker - ambient light disruption */
@keyframes roomFlicker {
  0%, 100% { background: transparent; }
  10% { background: rgba(0, 0, 0, 0.1); }
  20% { background: transparent; }
  30% { background: rgba(0, 0, 0, 0.15); }
  35% { background: transparent; }
  50% { background: rgba(0, 0, 0, 0.05); }
}

.glitch-room-flicker {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: roomFlicker 0.3s steps(1) forwards;
}

/* ============================================================
   PSYCHOLOGICAL EFFECTS (Subliminal layer)
   "Did I just see...?"
============================================================ */

/* Subliminal flash - 1-3 frame white burst */
.glitch-subliminal {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
}

@keyframes subliminalFlash {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.15; }
}

.glitch-subliminal.active {
  animation: subliminalFlash 0.033s steps(1) forwards;
}

/* Negative flash - brief inversion */
@keyframes negativeFlash {
  0%, 100% { filter: invert(0); }
  50% { filter: invert(1); }
}

.glitch-negative {
  animation: negativeFlash 0.066s steps(1) forwards;
}

/* Red flash - danger/pain */
.glitch-red-flash {
  position: absolute;
  inset: 0;
  background: rgba(255, 0, 50, 0.3);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}

@keyframes redFlash {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.glitch-red-flash.active {
  animation: redFlash 0.1s steps(1) forwards;
}

/* ============================================================
   TEXT CORRUPTION (Keep and enhance existing bleed text)
   Make more rare, more meaningful
============================================================ */

/* Enhanced bleed text positioning */
#bleedText {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Courier New', monospace;
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 0.4em;
  color: rgba(255, 0, 102, 0.9);
  text-shadow: 
    0 0 10px currentColor,
    0 0 30px currentColor,
    0 0 60px currentColor,
    2px 0 rgba(0, 255, 255, 0.5),
    -2px 0 rgba(255, 0, 255, 0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 100001;
  text-transform: uppercase;
  white-space: nowrap;
  /* Jitter effect */
  animation: none;
}

@keyframes bleedTextAppear {
  0% { 
    opacity: 0;
    filter: blur(4px);
    transform: translate(-50%, -50%) scale(1.1);
  }
  15% { 
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);
  }
  85% { 
    opacity: 1;
    filter: blur(0);
  }
  100% { 
    opacity: 0;
    filter: blur(2px);
    transform: translate(-50%, -50%) scale(0.98);
  }
}

#bleedText.active {
  animation: bleedTextAppear 0.2s ease-out forwards;
}

/* Text corruption injection - characters replaced */
.glitch-text-corrupt {
  position: relative;
}

.glitch-text-corrupt::after {
  content: attr(data-corrupt);
  position: absolute;
  left: 0;
  top: 0;
  color: #ff0066;
  opacity: 0;
  pointer-events: none;
}

@keyframes textCorrupt {
  0%, 100% { opacity: 0; }
  30%, 70% { opacity: 1; }
}

.glitch-text-corrupt.active::after {
  animation: textCorrupt 0.15s steps(1) forwards;
}

/* ============================================================
   CRASH EMOTIONAL STATES
   Visual feedback tied to CRASH's condition
============================================================ */

/* CRASH distress - corruption rising */
.crash-distress #term {
  animation: distressShake 0.1s ease-in-out infinite;
}

@keyframes distressShake {
  0%, 100% { transform: translate(-50%, -50%) rotate(0.9deg); }
  25% { transform: translate(calc(-50% - 1px), calc(-50% + 0.5px)) rotate(0.9deg); }
  75% { transform: translate(calc(-50% + 1px), calc(-50% - 0.5px)) rotate(0.9deg); }
}

/* CRASH fragmenting - high corruption */
.crash-fragmenting #term {
  animation: fragmentShake 0.08s ease-in-out infinite;
  filter: saturate(1.2) contrast(1.1);
}

@keyframes fragmentShake {
  0%, 100% { transform: translate(-50%, -50%) rotate(0.9deg); }
  20% { transform: translate(calc(-50% - 2px), calc(-50% + 1px)) rotate(1deg); }
  40% { transform: translate(calc(-50% + 1px), calc(-50% - 1px)) rotate(0.7deg); }
  60% { transform: translate(calc(-50% - 1px), calc(-50% - 0.5px)) rotate(1.1deg); }
  80% { transform: translate(calc(-50% + 2px), calc(-50% + 0.5px)) rotate(0.8deg); }
}

/* CRASH calm - stable signal */
.crash-calm #term {
  animation: none;
  filter: none;
}

/* ============================================================
   ACCESSIBILITY - Reduced Motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ambient-phosphor-hum,
  .ambient-jitter,
  .glitch-micro-flash,
  .glitch-scanline-tear.active,
  .glitch-color-fringe,
  .glitch-micro-blackout,
  .glitch-vhs-tracking.active,
  .glitch-h-tear.active,
  .glitch-degauss,
  .glitch-snow.active,
  .glitch-wrong-color,
  .glitch-vertical-roll.active,
  .glitch-signal-loss.active,
  .glitch-phosphor-burn.active,
  .glitch-heavy-corruption,
  .glitch-signal-death.active,
  .glitch-screen-collapse,
  .glitch-recovery,
  .glitch-peripheral-dark.active,
  .glitch-room-flicker,
  .glitch-subliminal.active,
  .glitch-negative,
  .glitch-red-flash.active,
  #bleedText.active,
  .crash-distress #term,
  .crash-fragmenting #term {
    animation: none !important;
    transition: none !important;
  }
  
  /* Keep subtle state indicators */
  .crash-distress #term,
  .crash-fragmenting #term {
    filter: saturate(1.1) !important;
  }
}

/* ============================================================
   UTILITY CLASSES
============================================================ */

/* Disable all glitch effects */
.glitch-disabled #glitchScreenLayer,
.glitch-disabled #glitchEnvLayer,
.glitch-disabled #glitchPsycheLayer,
.glitch-disabled #bleedText {
  display: none !important;
}

/* Intensity modifiers */
.glitch-intensity-low .glitch-snow.active { opacity: 0.5; }
.glitch-intensity-low .glitch-subliminal.active { animation-duration: 0.016s; }

.glitch-intensity-high .glitch-snow.active { opacity: 1; }
.glitch-intensity-high .glitch-subliminal.active { animation-duration: 0.066s; }