/* === Animación de encendido de TV (punto → línea → pantalla completa) === */
@keyframes crt-on {
  0%   { transform: scaleY(0.001) scaleX(1);   filter: brightness(12); opacity: 1; }
  25%  { transform: scaleY(0.008) scaleX(1);   filter: brightness(6); }
  50%  { transform: scaleY(1) scaleX(1.05);    filter: brightness(3); }
  75%  { transform: scaleY(1) scaleX(1);       filter: brightness(1.8); }
  100% { transform: scaleY(1) scaleX(1);       filter: brightness(1); opacity: 1; }
}

/* === Animación de apagado de TV === */
@keyframes crt-off {
  0%   { transform: scaleY(1) scaleX(1);      filter: brightness(1);  opacity: 1; }
  20%  { transform: scaleY(1) scaleX(1);      filter: brightness(2); }
  50%  { transform: scaleY(0.012) scaleX(1);  filter: brightness(6); }
  75%  { transform: scaleY(0.002) scaleX(0.6); filter: brightness(12); }
  100% { transform: scaleY(0) scaleX(0);      filter: brightness(0);  opacity: 0; }
}

/* === Parpadeo CRT del logo === */
@keyframes flicker {
  0%, 92%, 94%, 96%, 100% { opacity: 1; }
  93%  { opacity: 0.75; }
  95%  { opacity: 0.9; }
}

/* === Parpadeo de cursor === */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* === Rotar dispositivo === */
@keyframes rotate-pulse {
  0%, 100% { transform: rotate(0deg);  opacity: 1; }
  50%       { transform: rotate(90deg); opacity: 0.6; }
}

/* === Mala señal: glitch y distorsión horizontal === */
@keyframes bad-signal {
  0%   { transform: translateX(0)    skewX(0deg);    filter: none; }
  8%   { transform: translateX(-6px) skewX(-2deg);   filter: hue-rotate(20deg) brightness(1.2); }
  16%  { transform: translateX(6px)  skewX(2deg);    filter: hue-rotate(-20deg); }
  24%  { transform: translateX(-3px) skewX(-1deg);   filter: none; }
  32%  { transform: translateX(4px)  skewX(1.5deg);  filter: brightness(0.8); }
  40%  { transform: translateX(0)    skewX(0deg);    filter: none; }
  48%  { transform: translateX(-5px) skewX(-1.5deg); filter: hue-rotate(10deg); }
  56%  { transform: translateX(5px)  skewX(1deg);    filter: brightness(1.3); }
  64%  { transform: translateX(-2px) skewX(-0.5deg); filter: none; }
  72%  { transform: translateX(3px)  skewX(0.8deg);  filter: hue-rotate(-10deg); }
  80%  { transform: translateX(-4px) skewX(-1.2deg); filter: none; }
  88%  { transform: translateX(2px)  skewX(0.5deg);  filter: brightness(0.9); }
  100% { transform: translateX(0)    skewX(0deg);    filter: none; }
}

/* === Expansión del punto de arranque === */
@keyframes boot-expand {
  0%   { width: 4px;   height: 4px;   opacity: 1;   border-radius: 50%; }
  25%  { width: 70vw;  height: 3px;   opacity: 1;   border-radius: 0; }
  55%  { width: 100vw; height: 100vh; opacity: 0.9; border-radius: 0; }
  85%  { width: 100vw; height: 100vh; opacity: 0.4; border-radius: 0; }
  100% { width: 100vw; height: 100vh; opacity: 0;   border-radius: 0; }
}

/* === Clases utilitarias === */
.crt-on-anim {
  animation: crt-on 0.6s ease-out forwards;
}

.crt-off-anim {
  animation: crt-off 0.8s ease-in forwards;
}

.bad-signal-anim {
  animation: bad-signal 0.35s ease-in-out infinite;
}