/* =============================================
   CRT.CSS — Implementação completa seguindo padrão CodePen
   Estrutura: main.crt-scanlines > div.crt-screen > conteúdo
   ============================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --font-mono:
    "Menlo", "Monaco", "Lucida Console", "Liberation Mono",
    "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif;
  --bg-main: #05030e;
  --glow-cyan: #00E5FF;
  --aberration-cyan: #00FFEE;
  --aberration-red: #FF2222;
  --patrol-yellow: #F5C518;
  --aggressive-red: #CC0000;
  --squinting-magenta: #CC0044;
  --crimson-iris: #8B0000;
  --many-violet: #6600BB;
  --terminal-green: #33FF33;
  --glitch-cyan: #00FFFF;
  --glitch-magenta: #FF00FF;
}

html, body {
  width: 100%;
  height: 100%;
  background: #030209;
  overflow: hidden;
  font-family: var(--font-mono);
  cursor: none;
}

/* =============================================
   WRAPPER EXTERNO — scanlines + scan beam
   Padrão do CodePen: main.scanlines com ::before e ::after
   ============================================= */

main.crt-scanlines {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  /* Fundo violeta-negro respirante — CRT preto nunca é #000 puro */
  background:
    radial-gradient(ellipse 70% 65% at 50% 50%,
      rgba(18,  8, 48, 1.0)   0%,
      rgba(10,  4, 32, 1.0)  45%,
      rgba( 5,  2, 16, 1.0)  75%,
      rgba( 3,  1,  9, 1.0) 100%
    );
}

/* Scanlines — bandas horizontais pronunciadas (CRT real)
   Duas camadas: linha escura definitiva + micro linha de separação
   Opacidade 0.55 torna visível mesmo em fundo escuro */
main.crt-scanlines::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    /* Scanline primária: banda escura bem visível */
    linear-gradient(
      rgba(0, 0, 0, 0)    50%,
      rgba(0, 0, 0, 0.55) 50%
    ),
    /* Scanline secundária: micro-brilho do fósforo entre linhas */
    repeating-linear-gradient(
      0deg,
      transparent         0px,
      transparent         1px,
      rgba(30, 10, 80, 0.06) 1px,
      rgba(30, 10, 80, 0.06) 2px
    );
  background-size: 100% 4px, 100% 2px;
  pointer-events: none;
  z-index: 50;
  animation:
    scanlines-drift 8s linear infinite,
    scanline-jitter 11s steps(1) infinite;
}

@keyframes scanlines-drift {
  0%   { background-position: 0 0,    0 0; }
  100% { background-position: 0 100px, 0 100px; }
}

/* Jitter horizontal sutil — simula instabilidade do sinal analógico */
@keyframes scanline-jitter {
  0%,   96%,  100% { transform: translateX(0); }
  96.3%             { transform: translateX(-2px); }
  96.7%             { transform: translateX(2px); }
  97%               { transform: translateX(-1px); }
  97.5%             { transform: translateX(0); }
}

/* Scan beam — faixa de luz varrendo a tela de cima para baixo
   Simula o feixe de elétrons real do CRT */
main.crt-scanlines::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20vh;
  background: linear-gradient(
    to bottom,
    transparent                    0%,
    rgba(255, 255, 255, 0.012)    20%,
    rgba(255, 255, 255, 0.028)    50%,
    rgba(255, 255, 255, 0.012)    80%,
    transparent                   100%
  );
  pointer-events: none;
  z-index: 51;
  animation: scan-beam 10s linear infinite;
}

@keyframes scan-beam {
  0%   { transform: translateY(-20vh); }
  100% { transform: translateY(120vh); }
}

/* =============================================
   SUPERFÍCIE PHOSPHOR — a tela CRT em si
   Recebe filtros de estado (hue-rotate, saturate, brightness)
   ============================================= */

.crt-screen {
  position: absolute;
  inset: 0;
  background: var(--bg-main);
  overflow: hidden;
}

/* Vignette forte — centro claro, bordas quase pretas
   Violet-black nas bordas — nunca preto puro, sempre contaminado */
.crt-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    /* Vignette principal: queda brutal de brilho nas bordas */
    radial-gradient(ellipse 85% 80% at 50% 50%,
      transparent              22%,
      rgba(8,  3, 22, 0.25)   42%,
      rgba(6,  2, 18, 0.72)   65%,
      rgba(4,  1, 14, 0.92)   82%,
      rgba(3,  1, 10, 0.98)  100%
    ),
    /* Vinheta lateral extra — escurece ainda mais lados */
    radial-gradient(ellipse 55% 100% at 50% 50%,
      transparent              45%,
      rgba(4,  2, 14, 0.35)   72%,
      rgba(3,  1, 10, 0.65)  100%
    ),
    /* Reflexo de vidro no topo — glare sutil */
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.035)  0%,
      rgba(255, 255, 255, 0.012)  20%,
      transparent                  45%
    );
  pointer-events: none;
  z-index: 20;
}

/* Rim glow purple-violet — borda interna CRT, phosphor ambient
   Múltiplas camadas de box-shadow para profundidade */
.crt-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 21;
  box-shadow:
    inset 0 0   40px rgba(30, 10, 80, 0.55),
    inset 0 0  100px rgba(18,  6, 50, 0.45),
    inset 0 0  200px rgba(10,  3, 30, 0.38);
}

/* =============================================
   CANVAS — noise e glitch
   ============================================= */

#noise-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.45;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: screen;
  /* Canvas roda em 1/3 da resolução, CSS upscala — pixelated mantém o grain */
  image-rendering: pixelated;
}

#glitch-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 15;
  opacity: 0;
  transition: opacity 0.08s;
}

/* =============================================
   GLITCH LAYERS CSS
   ============================================= */

.glitch-layer-1,
.glitch-layer-2 {
  position: absolute;
  inset: 0;
  background: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
}

.glitch-layer-1 { z-index: 12; }
.glitch-layer-2 { z-index: 13; }


/* =============================================
   CONTAINER DO OLHO SVG
   Corpo da janela eye-window — centering interno do SVG
   ============================================= */

.eye-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#eye-svg {
  mask-image: radial-gradient(ellipse 88% 78% at 50% 50%,
    black 25%,
    rgba(0,0,0,0.95) 40%,
    rgba(0,0,0,0.70) 55%,
    rgba(0,0,0,0.28) 70%,
    rgba(0,0,0,0.06) 82%,
    transparent 92%
  );
  -webkit-mask-image: radial-gradient(ellipse 88% 78% at 50% 50%,
    black 25%,
    rgba(0,0,0,0.95) 40%,
    rgba(0,0,0,0.70) 55%,
    rgba(0,0,0,0.28) 70%,
    rgba(0,0,0,0.06) 82%,
    transparent 92%
  );
  transition: opacity 0.5s ease;
}

/* Nos estados intensos o olho fica ligeiramente maior (percepção) */
.eye-glow-active #eye-svg {
  opacity: 1;
}

/* =============================================
   TERMINAL DE DIÁLOGO
   Posicionamento flutuante definido em windows.css (#terminal-window)
   ============================================= */

.terminal-inner {
  display: block;
  padding: 8px 14px 6px;
  /* background e border usam variáveis do tema injetadas por terminal-matrix.css */
  background: color-mix(in srgb, var(--background, #000400) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #33FF33) 22%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--accent, #33FF33) 35%, transparent);
  border-radius: 2px;
  color: var(--foreground, var(--terminal-green));
  font-size: var(--font-size, clamp(10px, 1.1vw, 14px));
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-shadow:
    0 0 5px var(--foreground, var(--terminal-green)),
    0 0 12px color-mix(in srgb, var(--foreground, #33FF33) 45%, transparent);
  opacity: 0.9;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 3px
  );
}

.terminal-cursor {
  display: inline-block;
  width: 0.52em;
  height: 1em;
  background: var(--foreground, var(--terminal-green));
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: cursor-blink 0.72s step-end infinite;
  box-shadow: 0 0 5px var(--foreground, var(--terminal-green));
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* =============================================
   FLICKER PHOSPHOR — IDLE, WATCHING
   Variação de brilho mais perceptível — instabilidade real do sinal
   ============================================= */

@keyframes phosphor-flicker {
  0%,  100% { opacity: 1.000; }
  7%         { opacity: 0.970; }
  8%         { opacity: 0.910; }
  8.5%       { opacity: 1.000; }
  19%        { opacity: 0.960; }
  20%        { opacity: 1.000; }
  51%        { opacity: 0.975; }
  51.5%      { opacity: 0.888; }
  52%        { opacity: 1.000; }
  71%        { opacity: 0.955; }
  71.5%      { opacity: 0.900; }
  72%        { opacity: 1.000; }
  87%        { opacity: 0.940; }
  87.4%      { opacity: 0.860; }
  87.8%      { opacity: 1.000; }
  92%        { opacity: 0.965; }
  93%        { opacity: 0.875; }
  93.5%      { opacity: 1.000; }
}

.crt-flicker {
  animation: phosphor-flicker 7s infinite linear;
}

/* =============================================
   CURSOR CUSTOMIZADO — crosshair cyan
   ============================================= */

#cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  will-change: transform;
}

.cursor-h {
  position: absolute;
  top: 50%;
  left: -8px;
  width: 16px;
  height: 1px;
  background: #00E5FF;
  transform: translateY(-50%);
  box-shadow: 0 0 4px rgba(0, 229, 255, 0.8);
}

.cursor-v {
  position: absolute;
  left: 50%;
  top: -8px;
  height: 16px;
  width: 1px;
  background: #00E5FF;
  transform: translateX(-50%);
  box-shadow: 0 0 4px rgba(0, 229, 255, 0.8);
}

.cursor-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #00E5FF;
  box-shadow: 0 0 6px #00E5FF;
}