/* ============================================================
   CRT — con bordes oscuros (box-shadow) + scanlines RGB + flicker suave
   ============================================================ */

:root {
  --crt-scanline-opacity: 0.25;
  --crt-rgb-opacity-r: 0.06;
  --crt-rgb-opacity-g: 0.02;
  --crt-rgb-opacity-b: 0.06;
  --crt-interference-opacity: 0.04;
  --crt-grain-opacity: 0.06;
}

#crtOverlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99998;
  opacity: 0;
  transform-origin: center;
  transition: opacity 0.15s ease;
}

#crtOverlay.crt-active {
  opacity: 1;
}

/* ============================================================
   APAGADO ("collapse" tipo TV analógica vieja)
   Al agregar la clase .crt-power-off: la imagen se contrae
   verticalmente hasta quedar en una franja brillante, esa franja
   se encoge hasta un punto de luz, y el punto se apaga con un
   último destello. Sacar las clases crt-active/crt-power-off
   cuando termine la animación (ver JS del taskbar).
   ============================================================ */
#crtOverlay.crt-power-off {
  animation: crtPowerOff 0.55s cubic-bezier(0.55, 0, 0.85, 0.35) forwards;
}

@keyframes crtPowerOff {
  0%   { opacity: 1; filter: brightness(1) contrast(1); transform: scaleY(1) scaleX(1); }
  30%  { opacity: 1; filter: brightness(2.2) contrast(1.4); transform: scaleY(0.03) scaleX(1); }
  50%  { opacity: 1; filter: brightness(3.4) contrast(1.7); transform: scaleY(0.006) scaleX(1); }
  70%  { opacity: 1; filter: brightness(3.8) contrast(1.9); transform: scaleY(0.006) scaleX(0.12); }
  85%  { opacity: 1; filter: brightness(2.2) contrast(1.5); transform: scaleY(0.004) scaleX(0.015); }
  100% { opacity: 0; filter: brightness(0.4) contrast(1); transform: scaleY(0.004) scaleX(0); }
}

/* ============================================================
   CAPA 1: SCANLINES + RGB + INTERFERENCIA (con flicker suave)
   ============================================================ */
#crtOverlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Interferencia (bandas fantasma) */
    repeating-linear-gradient(
      to bottom,
      rgba(180,200,255,var(--crt-interference-opacity)) 0px,
      transparent 2px,
      transparent 10px,
      rgba(200,180,255,calc(var(--crt-interference-opacity)*0.6)) 11px,
      transparent 12px,
      transparent 22px
    ),
    /* Scanline horizontal */
    linear-gradient(
      rgba(18,16,16,0) 50%,
      rgba(0,0,0,var(--crt-scanline-opacity)) 50%
    ),
    /* Scanline vertical RGB (subpíxeles) */
    linear-gradient(
      90deg,
      rgba(255,0,0,var(--crt-rgb-opacity-r)),
      rgba(0,255,0,var(--crt-rgb-opacity-g)),
      rgba(0,0,255,var(--crt-rgb-opacity-b))
    );
  background-size:
    100% 100%,
    100% 2px,
    3px 100%;
  mix-blend-mode: overlay;
  pointer-events: none;
  /* Flicker suave (solo afecta a esta capa) */
  animation: flickerSoft 0.2s infinite;
}

/* ============================================================
   CAPA 2: BORDES OSCUROS (viñeta con box-shadow)
   + reflejo / bloom (opcional)
   ============================================================ */
#crtOverlay::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Reflejo especular (luz en esquina) */
  background: radial-gradient(
    ellipse at 25% 8%,
    rgba(255,255,255,0.15) 0%,
    transparent 60%
  );
  /* Viñeta con sombra interna (como en la primera versión) */
  box-shadow:
    inset 0 0 6em 1.2em rgba(0,0,0,0.55),
    inset 0 0 1.4em 0.2em rgba(0,0,0,0.35);
  pointer-events: none;
  /* SIN animación de flicker aquí */
}

/* ============================================================
   CAPA 3: RUIDO (GRAIN) — div extra
   ============================================================ */
#crtOverlay .crt-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: var(--crt-grain-opacity);
  mix-blend-mode: multiply;
  pointer-events: none;
  animation: grainMove 0.6s steps(2) infinite;
}

/* ============================================================
   ANIMACIONES
   ============================================================ */

/* Flicker suave (solo para scanlines) */
@keyframes flickerSoft {
  0%   { opacity: 0.92; }
  10%  { opacity: 0.88; }
  20%  { opacity: 0.95; }
  30%  { opacity: 0.90; }
  40%  { opacity: 0.86; }
  50%  { opacity: 0.97; }
  60%  { opacity: 0.93; }
  70%  { opacity: 0.89; }
  80%  { opacity: 0.96; }
  90%  { opacity: 0.91; }
  100% { opacity: 0.94; }
}

@keyframes grainMove {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(-6%,-4%) scale(1.01); }
  66%  { transform: translate(4%,7%) scale(0.99); }
  100% { transform: translate(0,0) scale(1); }
}

/* ============================================================
   SEPARACIÓN DE COLOR EN TEXTO (opcional)
   ============================================================ */
.crt-text {
  animation: textShadow 1.6s infinite;
}

@keyframes textShadow {
  0%   { text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  5%   { text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  10%  { text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  15%  { text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  20%  { text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  25%  { text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  30%  { text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  35%  { text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  40%  { text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  45%  { text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  50%  { text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  55%  { text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  60%  { text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  65%  { text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  70%  { text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  75%  { text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  80%  { text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  85%  { text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  90%  { text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  95%  { text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  100% { text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
}

/* ============================================================
   RESPETAR PREFERENCIAS DE MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #crtOverlay::before { animation: none !important; }
  #crtOverlay .crt-grain { animation: none !important; }
  #crtOverlay.crt-power-off { animation: none !important; opacity: 0 !important; }
  .crt-text { animation: none !important; text-shadow: 0 0 3px rgba(0,0,0,0.3); }
}