/* ============================================= */
/* MAXIMUM DAMAGE - NIN / HTDA GLITCH MODE v2    */
/* Pure CSS - zero impact on functionality       */
/* ============================================= */

@layer utilities {
  .glitch {
    position: relative;
    animation: glitch-master 420ms linear infinite alternate;
  }

  .glitch::before,
  .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0.92;
  }

  .glitch::before {
    animation: glitch-rgb-1 280ms infinite linear alternate-reverse;
    color: #ff00ff;
    text-shadow: -4px 0 #00ffff, 4px 0 #ffff00;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    transform: skew(1deg);
  }

  .glitch::after {
    animation: glitch-rgb-2 340ms infinite linear alternate-reverse;
    color: #00ffff;
    text-shadow: -3px 0 #ff00ff, 3px 0 #ffff00;
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    transform: skew(-1deg);
  }
}

/* MASTER GLITCH */
body {
  position: relative;
  overflow: hidden;
  animation: body-flicker 1800ms infinite linear;
}

@keyframes body-flicker {
  0%, 92% { filter: brightness(1) contrast(1); }
  93%     { filter: brightness(3) contrast(4); }
  94%     { filter: brightness(0.3) contrast(0.6); }
  95%     { filter: brightness(2.5) hue-rotate(15deg); }
  96%, 100% { filter: brightness(1) contrast(1); }
}

/* SCANLINES */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(180deg, transparent 0px, transparent 2px, rgba(255,0,68,0.25) 2px, rgba(255,0,68,0.25) 5px);
  animation: scanlines 1.8s linear infinite;
  mix-blend-mode: multiply;
  opacity: 0.75;
}

@keyframes scanlines { 0% { background-position: 0 0; } 100% { background-position: 0 200%; } }

/* STATIC NOISE + VHS TEAR (FIXED) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.8' numOctaves='8'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E") repeat;
  animation: noise 45ms steps(6) infinite, vhs-tear 4200ms steps(1) infinite;
  mix-blend-mode: screen;
  opacity: 0.32;
}

@keyframes noise {
  0%   { filter: contrast(220%) brightness(80%); }
  100% { filter: contrast(140%) brightness(120%); }
}

@keyframes vhs-tear {
  0%, 96% { clip-path: inset(0 0 0 0); }
  97%     { clip-path: inset(12% 0 68% 0); }
  98%     { clip-path: inset(68% 0 12% 0); }
  99%     { clip-path: inset(0 0 0 0); }
}

/* RGB SPLIT ON DISSOLVE MESSAGE */
#dissolve-message {
  color: transparent !important;
  text-shadow: 0 0 20px #ff00ff, 3px 0 0 #00ffff, -3px 0 0 #ffff00;
  letter-spacing: -2px;
  animation: glitch-master 180ms linear infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#dissolve-message span {
  color: #ff0044 !important;
  text-shadow: 0 0 15px #ff0044;
  animation: none;
}

/* TABLE FEELS CORRUPTED */
#pched-live-view table {
  filter: contrast(125%) brightness(85%) hue-rotate(5deg);
  animation: table-jitter 1200ms infinite linear;
}

@keyframes table-jitter {
  0%, 94% { transform: translate(0, 0); }
  95%     { transform: translate(1px, -1px); }
  96%     { transform: translate(-2px, 2px); }
  97%     { transform: translate(1px, 1px); }
  98%, 100% { transform: translate(0, 0); }
}

/* BUTTONS & LINKS GLITCH ON HOVER */
button:hover, a:hover {
  animation: glitch-master 90ms linear 4;
  filter: hue-rotate(25deg) saturate(1.8) brightness(1.3);
}

/* HEADER GLITCH */
header {
  animation: header-glitch 5200ms infinite linear;
}
@keyframes header-glitch {
  0%, 93% { filter: none; }
  94%     { filter: brightness(0) invert(1); }
  95%     { filter: none; }
  96%     { filter: hue-rotate(180deg); }
  97%, 100% { filter: none; }
}