/* =============================================
   GLITCH.CSS — Animações de glitch, color shift, boot, tears
   ============================================= */

/* =============================================
   Color shift por estado
   ============================================= */

:root {
  --color-shift: 0deg;
  --saturation-mult: 1;
  --brightness-mult: 1;
}

.crt-screen {
  /* Filtros aplicados na superfície do monitor (não no conteúdo):
     1. Ajuste de cor por estado
     2. Aberração cromática de tela — separa R/Cyan em toda a superfície */
  filter:
    hue-rotate(var(--color-shift))
    saturate(var(--saturation-mult))
    brightness(var(--brightness-mult))
    url(#screen-chroma);
  transition: filter 0.35s ease;
}

/* =============================================
   Glitch — fragmentos horizontais CSS
   ============================================= */

@keyframes glitch-h-1 {
  0%   { transform: translateX(0);   clip-path: inset(12% 0 72% 0); }
  20%  { transform: translateX(-8px); clip-path: inset(12% 0 72% 0); }
  21%  { transform: translateX(5px); }
  40%  { transform: translateX(0);   }
  100% { transform: translateX(0);   clip-path: inset(12% 0 72% 0); }
}

@keyframes glitch-h-2 {
  0%   { transform: translateX(0);   clip-path: inset(38% 0 48% 0); }
  10%  { transform: translateX(7px);  clip-path: inset(38% 0 48% 0); }
  11%  { transform: translateX(-4px); }
  30%  { transform: translateX(0);   }
  100% { transform: translateX(0);   clip-path: inset(38% 0 48% 0); }
}

.glitch-active .glitch-layer-1 {
  opacity: 0.72;
  animation: glitch-h-1 0.28s steps(1) infinite;
  filter: hue-rotate(90deg);
}

.glitch-active .glitch-layer-2 {
  opacity: 0.52;
  animation: glitch-h-2 0.22s steps(1) infinite;
  filter: hue-rotate(-90deg);
}

/* =============================================
   CRT Boot — linha se expandindo do centro
   Comportamento real de um CRT ligando
   ============================================= */

@keyframes crt-boot {
  0% {
    clip-path: inset(50% 0 50% 0);
    filter: brightness(12) saturate(0) contrast(3);
    opacity: 1;
  }
  12% {
    clip-path: inset(47% 0 47% 0);
    filter: brightness(8) saturate(0.1);
  }
  28% {
    clip-path: inset(38% 0 38% 0);
    filter: brightness(5) saturate(0.3);
  }
  45% {
    clip-path: inset(20% 0 20% 0);
    filter: brightness(3) saturate(0.6);
  }
  62% {
    clip-path: inset(5% 0 5% 0);
    filter: brightness(2.2) saturate(0.85);
  }
  72% {
    clip-path: inset(0% 0 0% 0);
    filter: brightness(1.8) saturate(1);
  }
  80% { filter: brightness(1.3) saturate(1.1); }
  86% { filter: brightness(0.82) saturate(1);  }
  91% { filter: brightness(1.12) saturate(1);  }
  95% { filter: brightness(0.95) saturate(1);  }
  100% {
    clip-path: inset(0% 0 0% 0);
    filter: brightness(1) saturate(1);
    opacity: 1;
  }
}

.crt-boot {
  animation: crt-boot 2s cubic-bezier(0.3, 0, 0.1, 1) forwards;
}

/* =============================================
   CRT Shutdown — linha se contraindo ao centro
   ============================================= */

@keyframes crt-shutdown {
  0%   { clip-path: inset(0% 0 0% 0);   filter: brightness(1); }
  25%  { clip-path: inset(15% 0 15% 0); filter: brightness(2.5); }
  55%  { clip-path: inset(35% 0 35% 0); filter: brightness(4); }
  80%  { clip-path: inset(48% 0 48% 0); filter: brightness(6); }
  100% { clip-path: inset(50% 0 50% 0); filter: brightness(0); opacity: 0; }
}

.crt-shutdown {
  animation: crt-shutdown 0.7s ease-in forwards;
}

/* =============================================
   Red pulse — estados de raiva
   ============================================= */

@keyframes red-pulse {
  0%, 100% { box-shadow: inset 0 0 120px rgba(220, 0, 0, 0.0); }
  50%       { box-shadow: inset 0 0 160px rgba(220, 0, 0, 0.55); }
}

.state-squinting .crt-screen,
.state-crimson .crt-screen {
  animation: red-pulse 1.8s ease-in-out infinite;
}

.state-aggressive .crt-screen {
  --color-shift: 12deg;
  --saturation-mult: 2.4;
  animation: red-pulse 0.45s ease-in-out infinite;
}

/* =============================================
   Scanlines coloridas — WATCHING state
   ============================================= */

@keyframes color-scanline {
  0%   { background-position: 0 0;    }
  100% { background-position: 0 30px; }
}

.state-watching .crt-screen::after {
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 2px,
      rgba(0, 0, 0, 0.10) 2px,
      rgba(0, 0, 0, 0.10) 3px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 9px,
      rgba(255, 0, 0, 0.035) 9px,
      rgba(255, 0, 0, 0.035) 10px,
      transparent 10px,
      transparent 19px,
      rgba(0, 255, 255, 0.035) 19px,
      rgba(0, 255, 255, 0.035) 20px,
      transparent 20px,
      transparent 29px,
      rgba(255, 255, 0, 0.025) 29px,
      rgba(255, 255, 0, 0.025) 30px
    );
  animation: color-scanline 1.5s linear infinite;
}

/* =============================================
   NARROWED — scanlines pesadas, mundo invertido
   ============================================= */

@keyframes narrowed-scan {
  0%   { background-position: 0 0;  }
  100% { background-position: 0 4px; }
}

.state-narrowed .crt-screen {
  filter: contrast(1.5) brightness(0.65);
}

.state-narrowed .crt-screen::after {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.75) 0px,
    rgba(0, 0, 0, 0.75) 2px,
    transparent 2px,
    transparent 4px
  );
  animation: narrowed-scan 0.18s linear infinite;
}

/* =============================================
   MANY / GLITCH — violeta intenso
   ============================================= */

.state-many .crt-screen {
  --color-shift: 62deg;
  --saturation-mult: 2.2;
}

/* =============================================
   PATROL — leve tom amarelo
   ============================================= */

.state-patrol .crt-screen {
  --color-shift: 28deg;
  --saturation-mult: 1.2;
}

/* =============================================
   ETHEREAL — glow forte cyan
   ============================================= */

@keyframes ethereal-pulse {
  0%, 100% { box-shadow: inset 0 0 160px rgba(0, 200, 255, 0.20); }
  50%       { box-shadow: inset 0 0 200px rgba(0, 200, 255, 0.48); }
}

.state-ethereal .crt-screen {
  animation: ethereal-pulse 2.5s ease-in-out infinite;
}

/* =============================================
   AGGRESSIVE — pulsação de alerta
   ============================================= */

@keyframes aggressive-flash {
  0%   { opacity: 1;    }
  48%  { opacity: 1;    }
  50%  { opacity: 0.88; }
  52%  { opacity: 1;    }
  96%  { opacity: 1;    }
  98%  { opacity: 0.82; }
  100% { opacity: 1;    }
}

.state-aggressive .eye-container {
  animation: aggressive-flash 0.35s steps(1) infinite;
}

/* =============================================
   BARED — scanlines magenta
   ============================================= */

.state-bared .crt-screen {
  --color-shift: -20deg;
  --saturation-mult: 1.5;
}

/* =============================================
   RETURNS — glow verde ao acordar
   ============================================= */

.state-returns .crt-screen {
  --color-shift: 120deg;
  --brightness-mult: 0.85;
}