/* Transición de página Phosphor-v2 — NUEVA ESTRATEGIA: el mismo glitch de las
   LETRAS llevado a pantalla completa, rápido y nervioso. NO más bandas/invert lento.
   Dos capas, ambas del mismo lenguaje que el título:
   1) RGB-split cromático: text-shadow rojo(#ff3b5c)/cian(#22d7ff) animado en #shell,
      que HEREDA a todo el texto → split por glifo, idéntico al título.
   2) Jitter/skew nervioso del contenedor.
   El scramble de caracteres de todo el texto lo dispara SiniFX.burst() (fx.js).
   Corto (~.3s). CSP 100% self, CSS puro. Activa con body.glitching. */
/* Aplica a body/* (no #shell) para funcionar en gate E index por igual. */
body.glitching{animation:shellJit .3s steps(5) both}
/* Split cromático por-glifo en TODO el texto de la página. */
body.glitching *{animation:chromaGlyph .3s steps(6) both}

@keyframes shellChroma{
  0%,100%{text-shadow:none}
  16%{text-shadow:-5px 0 #ff3b5c,5px 0 #22d7ff}
  33%{text-shadow:4px 0 #ff3b5c,-4px 0 #22d7ff}
  50%{text-shadow:-7px 1px #ff3b5c,7px -1px #22d7ff}
  66%{text-shadow:3px 0 #ff3b5c,-3px 0 #22d7ff}
  83%{text-shadow:-2px 0 #ff3b5c,2px 0 #22d7ff}
}
@keyframes chromaGlyph{
  0%,100%{text-shadow:none}
  16%{text-shadow:-4px 0 rgba(255,59,92,.9),4px 0 rgba(34,215,255,.9)}
  33%{text-shadow:3px 0 rgba(255,59,92,.9),-3px 0 rgba(34,215,255,.9)}
  50%{text-shadow:-6px 1px rgba(255,59,92,.9),6px -1px rgba(34,215,255,.9)}
  66%{text-shadow:2px 0 rgba(255,59,92,.9),-2px 0 rgba(34,215,255,.9)}
  83%{text-shadow:-1px 0 rgba(255,59,92,.9),1px 0 rgba(34,215,255,.9)}
}
@keyframes shellJit{
  0%,100%{transform:none}
  20%{transform:translateX(-7px) skewX(-1.6deg)}
  40%{transform:translateX(6px) skewX(1.1deg)}
  60%{transform:translateX(-5px) translateY(2px)}
  80%{transform:translateX(4px) skewX(-.9deg)}
}

@media (prefers-reduced-motion:reduce){
  body.glitching #shell,body.glitching #shell *{animation-duration:.01ms!important}
}