#ksdanceglitch-stage {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 350;  /* <-- Ponlo ENTRE el back y el front */
  pointer-events: none;
}
#ksdanceglitch-inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: 90vh;
  aspect-ratio: 2/3;
  pointer-events: none;
}
.dance-frame, .dance-frame.active {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  /* El escenario es el lienzo de referencia escalado: los vh de aquí serían
     de la ventana, no del lienzo, y achataban el personaje. */
  max-height: 1174px;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
  pointer-events: none;
}
.dance-frame.active {
  opacity: 1;
  z-index: 2;
}
/* SIN efecto encima de la imagen de sección. Se probaron tres y los tres
   quedaron feos: rayas de barrido con destello, capa recortada con la
   silueta, y bandas al corte con desgarro. La imagen va limpia. */
.holo-img {
  filter: saturate(1.12) contrast(1.03);
  /* FUERA el desvanecido de abajo. Lo puse yo por mi cuenta para que la figura
     no acabara en una línea recta, y no me lo habías pedido: se comía el
     último 26 % de la imagen (de 74 % a 100 % del alto). La imagen va entera.
     Si algún día se quiere, es esta máscara y nada más:
       mask-image: linear-gradient(to bottom, #000 74%, transparent 100%); */
}


@keyframes fragment-glitch {
  0%   { transform: translateX(0) skewX(0deg); opacity: 0.7; }
  20%  { transform: translateX(-10px) skewX(-4deg); opacity: 0.75; }
  40%  { transform: translateX(12px) skewX(6deg); opacity: 0.85; }
  60%  { transform: translateX(-6px) skewX(-3deg); opacity: 0.7; }
  80%  { transform: translateX(8px) skewX(2deg); opacity: 0.75; }
  100% { transform: translateX(0) skewX(0deg); opacity: 0.7; }
}