/* ============================================================
   VANTA PRESENCE CSS v1.0
   Visual escalation as VANTA approaches through corruption
   
   Add to styles.css or create as vanta-presence.css
============================================================ */

/* === LEVEL 1: 60%+ - Subtle interference === */
.vanta-presence-1 {
  --vanta-interference: 0.1;
}

.vanta-presence-1 #glitchGhost .glyph {
  animation: vanta-flicker-subtle 4s infinite;
}

@keyframes vanta-flicker-subtle {
  0%, 95%, 100% { opacity: 1; }
  96% { opacity: 0.7; }
}

/* === LEVEL 2: 70%+ - CRASH struggling === */
.vanta-presence-2 {
  --vanta-interference: 0.25;
}

.vanta-presence-2 #terminal {
  animation: terminal-shake 0.1s infinite;
  animation-play-state: paused;
}

.vanta-presence-2 #terminal:has(.error) {
  animation-play-state: running;
}

@keyframes terminal-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-1px); }
  75% { transform: translateX(1px); }
}

.vanta-presence-2 #glitchGhost {
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.3));
}

/* === LEVEL 3: 80%+ - VANTA approaching === */
.vanta-presence-3 {
  --vanta-interference: 0.5;
}

.vanta-presence-3::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.15) 100%
  );
  z-index: var(--z-overlay);
  animation: vanta-vignette 3s ease-in-out infinite;
}

@keyframes vanta-vignette {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

.vanta-presence-3 #glitchGhost .glyph {
  animation: glyph-corrupt 0.5s infinite;
}

@keyframes glyph-corrupt {
  0%, 90%, 100% { 
    filter: none;
    color: inherit; 
  }
  92% { 
    filter: invert(1);
    color: #000; 
  }
}

/* Peripheral shadows - VANTA watching */
.vanta-presence-3::after {
  content: '\0394'; /* Delta symbol */
  position: fixed;
  font-size: 200px;
  color: rgba(0, 0, 0, 0.03);
  pointer-events: none;
  z-index: var(--z-overlay);
  animation: vanta-peripheral 8s ease-in-out infinite;
}

@keyframes vanta-peripheral {
  0%, 100% { 
    top: -100px; 
    left: -100px; 
    opacity: 0; 
  }
  25% { 
    top: 20%; 
    left: -50px; 
    opacity: 0.5; 
  }
  50% { 
    top: -100px; 
    left: -100px; 
    opacity: 0; 
  }
  75% { 
    top: 60%; 
    right: -50px;
    left: auto;
    opacity: 0.5; 
  }
}

/* === LEVEL 4: 90%+ - CRITICAL === */
.vanta-presence-4,
.vanta-critical {
  --vanta-interference: 0.8;
}

.vanta-critical #terminal {
  filter: grayscale(0.5) contrast(1.2);
}

.vanta-critical #terminal .output-line:not(.error):not(.warning) {
  opacity: 0.5;
}

/* CRASH's voice dimmed */
.vanta-critical #terminal .output-line[data-source="crash"] {
  filter: blur(1px);
  opacity: 0.3;
}

/* Ghost nearly gone */
.vanta-critical #glitchGhost {
  opacity: 0.3;
  filter: grayscale(1) blur(2px);
  animation: ghost-dying 2s ease-in-out infinite;
}

@keyframes ghost-dying {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.15; transform: scale(0.95); }
}

/* Terminal input still works - emergency attune */
.vanta-critical #terminalInput {
  border-color: #ff0000 !important;
  animation: emergency-pulse 1s infinite;
}

@keyframes emergency-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.3); }
  50% { box-shadow: 0 0 15px rgba(255, 0, 0, 0.6); }
}

/* === RECOVERY ANIMATION === */
.vanta-retreating {
  animation: vanta-retreat 2s ease-out forwards;
}

@keyframes vanta-retreat {
  0% { 
    filter: grayscale(0.5) contrast(1.2);
    --vanta-interference: 0.8;
  }
  100% { 
    filter: none;
    --vanta-interference: 0;
  }
}

/* === POST-VANTA SURVIVOR STATE === */
body.vanta-survivor #glitchGhost::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    transparent 60%,
    rgba(0, 0, 0, 0.05) 100%
  );
  pointer-events: none;
  /* Permanent subtle shadow - VANTA leaves marks */
}

/* CRASH's dialogue has a subtle difference post-survival */
body.vanta-survivor .crash-line {
  text-shadow: 
    0 0 10px currentColor,
    0 0 2px rgba(0, 0, 0, 0.1); /* tiny black edge */
}