:root {
  --pgsc-overlay: rgba(139, 0, 255, 0.16);
  --pgsc-accent: #d76cff;
  --pgsc-shadow: #4b0082;
  --pgsc-shift-x: 0px;
  --pgsc-shift-y: 0px;
}

html.pgsc-glitch-active,
body.pgsc-glitch-active {
  overflow-x: hidden;
}

body.pgsc-glitch-active {
  transform: translate(var(--pgsc-shift-x), var(--pgsc-shift-y));
}

body.pgsc-glitch-active::before,
body.pgsc-glitch-active::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483645;
}

body.pgsc-glitch-active::before {
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 8px,
      rgba(255,255,255,0.03) 8px,
      rgba(255,255,255,0.03) 10px,
      transparent 10px,
      transparent 16px
    ),
    linear-gradient(90deg, transparent 0%, var(--pgsc-overlay) 50%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 1;
}

body.pgsc-glitch-active::after {
  background:
    linear-gradient(0deg, transparent 0%, rgba(255,255,255,0.10) 50%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(215,108,255,0.18) 40%, rgba(75,0,130,0.18) 70%, transparent 100%);
  mix-blend-mode: lighten;
  animation: pgsc-flicker 80ms steps(2) infinite;
}

.pgsc-glitch-slice,
.pgsc-glitch-slice-2 {
  position: fixed;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 2147483646;
  opacity: 0;
}

.pgsc-glitch-slice {
  height: 14vh;
  background: linear-gradient(90deg, transparent, rgba(215,108,255,0.35), transparent);
}

.pgsc-glitch-slice-2 {
  height: 8vh;
  background: linear-gradient(90deg, transparent, rgba(75,0,130,0.45), transparent);
}

body.pgsc-glitch-active .pgsc-glitch-slice,
body.pgsc-glitch-active .pgsc-glitch-slice-2 {
  opacity: 1;
}

body.pgsc-glitch-active * {
  text-shadow:
    2px 0 0 var(--pgsc-accent),
    -2px 0 0 var(--pgsc-shadow);
}

@keyframes pgsc-flicker {
  0% { opacity: 0.85; }
  50% { opacity: 0.35; }
  100% { opacity: 0.9; }
}