/* ============================================================
   glitch_sim.css — Versión COMPLETA para compatibilidad total 
   con el glitch original y con app.js del Proyecto G
   ============================================================ */

/* overlay that captures TAP/HOLD */
#glitch_full_overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 19999;
  background: transparent;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  display: none;
}

/* text layer */
#glitch_layer_text {
  position: fixed;
  inset: 0;
  z-index: 20000;
  pointer-events: none;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: pre-wrap;
  color: #00ff88;
  font-family: monospace;
  font-size: 16px;
  text-align: center;
}

/* clone messages */
.noise-red {
  font-size: 20px;
  color: #ff4444;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
  transition: transform .06s steps(1, end);
}

.clone-msg {
  position: fixed;
  pointer-events: none;
  font-size: 18px;
  color: #ff4444;
  text-shadow: 0 0 8px rgba(255, 68, 68, 0.25);
  z-index: 30001;
}

/* flash overlays */
.flash-overlay {
  position: fixed;
  inset: 0;
  z-index: 30000;
  opacity: 1;
  pointer-events: none;
  transition: opacity .08s linear;
}

.flash-overlay .crack {
  position: absolute;
  inset: 0;
  opacity: .95;
  mix-blend-mode: screen;
}

/* ————————————————————————
   FLASH COLORS
———————————————————————— */
.flash-red { background:#ff2d2d; }
.flash-red .crack {
  background: repeating-linear-gradient(
    90deg,
    rgba(0,255,136,.5) 0px,
    rgba(0,255,136,.5) 18px,
    transparent 18px,
    transparent 46px
  );
  filter: contrast(160%) saturate(140%);
}

.flash-green { background:#00ff88; }
.flash-green .crack {
  background: repeating-linear-gradient(
    90deg,
    rgba(255,45,45,.5) 0px,
    rgba(255,45,45,.5) 18px,
    transparent 18px,
    transparent 46px
  );
  filter: contrast(160%) saturate(160%);
}

.flash-black { background:#000; }
.flash-black .crack {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0,255,136,.45) 0px,
      rgba(0,255,136,.45) 14px,
      transparent 14px,
      transparent 36px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,45,45,.45) 0px,
      rgba(255,45,45,.45) 10px,
      transparent 10px,
      transparent 30px
    );
  filter: contrast(200%) saturate(200%);
}

/* ————————————————————————
   ALIAS OFICIALES (coinciden con app.js)
———————————————————————— */

/* MEGA SHAKE */
body.bg-megaShake,
body.glitch-bg-megaShake {
  animation: glitch-megaShake .40s linear 1;
}

@keyframes glitch-megaShake {
  0% { transform: none; }
  12% { transform: translate(-28px,20px) rotate(-1deg); }
  28% { transform: translate(30px,-24px) rotate(1deg); }
  44% { transform: translate(-36px,28px) rotate(-2deg); }
  60% { transform: translate(40px,-30px) rotate(2deg); }
  80% { transform: translate(-18px,12px) rotate(-1deg); }
  100% { transform: none; }
}

/* PIXEL BLOCK */
body.bg-pixel-block,
body.glitch-bg-pixel-block {
  animation: glitch-pixelBlocks .14s steps(1,end) 3;
}

@keyframes glitch-pixelBlocks {
  0% { filter:none; }
  50% { filter:contrast(220%) blur(.8px); }
  100% { filter:none; }
}

/* RGB MELTDOWN */
body.bg-rgbMeltdown,
body.glitch-bg-rgbMeltdown {
  animation: glitch-rgbFracture .28s steps(1,end) 2;
}

@keyframes glitch-rgbFracture {
  0%{}
  30%{ filter:drop-shadow(-28px 0 red) drop-shadow(28px 0 cyan) saturate(260%); }
  60%{ filter:invert(1) saturate(300%) contrast(320%); }
  100%{}
}

/* JPEG ARTIFACTS */
body.bg-jpegArtifacts,
body.glitch-bg-jpegArtifacts {
  animation: glitch-jpegCrunch .40s linear 1;
}

@keyframes glitch-jpegCrunch {
  0%{}
  20%{ filter:contrast(260%) saturate(220%); }
  40%{ clip-path: inset(10% 0 60% 0); }
  70%{ clip-path: inset(0); }
  100%{}
}

/* NOISE OVERLOAD */
body.bg-noiseOverload,
body.glitch-bg-noiseOverload {
  animation: glitch-noiseOverload 7s steps(1,end) 1;
}

@keyframes glitch-noiseOverload {
  0%{}
  30%{ filter:invert(.95); }
  95%{}
  100%{}
}

/* INVERT FLASH (alias para bg-invertFlash) */
body.bg-invertFlash,
body.glitch-bg-invert9C {
  animation: glitch-invertFlash .12s linear 1;
}

@keyframes glitch-invertFlash {
  0%{ filter:none; }
  45%{ filter:invert(1) brightness(260%) contrast(600%); }
  100%{ filter:none; }
}

/* ————————————————————————
   EFECTOS QUE NO EXISTÍAN Y APP.JS USA
———————————————————————— */

/* SHOCK BURST */
body.bg-shockBurst {
  animation: shockBurst .22s steps(1,end) 1;
}

@keyframes shockBurst {
  0% { filter:contrast(150%) saturate(150%); }
  40% { filter:brightness(260%) contrast(500%) saturate(300%); }
  100% { filter:none; }
}

/* BW FLASH */
body.bg-bwFlash {
  animation: bwFlash .20s steps(1,end) 1;
}

@keyframes bwFlash {
  0%{ filter:grayscale(1) brightness(180%); }
  100%{ filter:none; }
}

/* RGB MELTDOWN 2 (versión extra usada en ultraShakeBurst) */
body.bg-rgbMeltdown2 {
  animation: rgbMeltdownTwo .30s steps(1,end) 2;
}

@keyframes rgbMeltdownTwo {
  0%{ filter:none; }
  25%{ filter:hue-rotate(40deg) saturate(260%); }
  55%{ filter:hue-rotate(-40deg) invert(1) saturate(300%); }
  100%{ filter:none; }
}

/* disable animations for accessibility */
@media (prefers-reduced-motion: reduce) {
  body[class*="bg-"],
  .clone-msg,
  .flash-overlay {
    animation: none !important;
    transition: none !important;
  }
}