.screen-glitch {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  overflow: hidden;
  background-color: rgb(12 0 10 / 94%);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 8px, rgb(255 0 112 / 24%) 9px 10px, transparent 11px 17px),
    linear-gradient(90deg, transparent 0 11%, rgb(255 0 106 / 52%) 11.2% 11.8%, transparent 12% 74%, rgb(0 245 255 / 26%) 74.2% 75%, transparent 75.2% 100%);
  opacity: 0;
  pointer-events: none;
  animation: screen-glitch var(--glitch-duration, 560ms) steps(1, end) forwards;
}

.screen-glitch::before,
.screen-glitch::after {
  position: absolute;
  inset: -2%;
  content: "";
  pointer-events: none;
}

.screen-glitch::before {
  background: linear-gradient(90deg,
    transparent 0 4%, rgb(255 0 92 / 78%) 4.2% 19%, transparent 19.3% 42%,
    rgb(0 239 255 / 55%) 42.2% 42.7%, transparent 43% 68%,
    rgb(255 0 132 / 65%) 68.2% 91%, transparent 91.3% 100%);
  mix-blend-mode: screen;
  transform: translateX(var(--tear-x, 0));
  animation: channel-tear var(--glitch-duration, 560ms) steps(1, end) forwards;
}

.screen-glitch::after {
  background: repeating-linear-gradient(0deg,
    transparent 0 var(--tear-density, 19px), rgb(255 255 255 / 50%) calc(var(--tear-density, 19px) + 1px) calc(var(--tear-density, 19px) + 2px),
    transparent calc(var(--tear-density, 19px) + 3px) calc(var(--tear-density, 19px) + 12px),
    rgb(236 22 141 / 72%) calc(var(--tear-density, 19px) + 13px) calc(var(--tear-density, 19px) + 16px),
    transparent calc(var(--tear-density, 19px) + 17px) calc(var(--tear-density, 19px) + 38px));
  mix-blend-mode: screen;
  opacity: var(--tear-opacity, .8);
  transform: skewX(var(--tear-skew, 0deg));
  animation: horizontal-tear var(--glitch-duration, 560ms) steps(1, end) forwards;
}

.screen-glitch--composite {
  background-color: rgb(8 2 10 / 92%);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 10px, rgb(255 0 128 / 12%) 11px 12px, transparent 13px 20px),
    radial-gradient(ellipse at 50% 48%, rgb(56 0 33 / 28%), transparent 68%);
  animation: screen-glitch-composite var(--glitch-duration, 720ms) steps(1, end) forwards;
}

.screen-glitch--composite::before,
.screen-glitch--composite::after { display: none; }

.screen-glitch--mode-layer {
  position: absolute;
  z-index: var(--mode-index, 1);
  inset: 0;
  background-color: transparent !important;
  background-image: none !important;
  opacity: var(--mode-opacity, .68) !important;
  animation: none !important;
}

.screen-glitch--alley > .alley-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translateX(var(--alley-x, 0));
  filter: saturate(1.08) contrast(1.06);
  animation: alley-frame-tear var(--glitch-duration, 1900ms) steps(1, end) forwards;
}

@keyframes alley-frame-tear {
  0%, 100% { clip-path: inset(0); transform: translateX(0); }
  14% { clip-path: inset(8% 0 74%); transform: translateX(var(--alley-x, 0)); }
  31% { clip-path: inset(0); transform: translateX(var(--alley-x-inverse, 0)); }
  48% { clip-path: inset(56% 0 22%); transform: translateX(var(--alley-x, 0)); }
  68% { clip-path: inset(0); transform: translateX(0); }
  84% { clip-path: inset(21% 0 62%); transform: translateX(var(--alley-x-inverse, 0)); }
}

.screen-glitch--rgb {
  background-color: rgb(9 0 18 / 94%);
  filter: saturate(1.55) contrast(1.14);
}

.screen-glitch--rgb::before {
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 8%, rgb(255 0 92 / 82%) 8.3% 8.8%, transparent 9.2% 100%),
    linear-gradient(90deg, transparent 0 27%, rgb(0 240 255 / 70%) 27.2% 48%, transparent 48.4% 71%, rgb(255 0 126 / 72%) 71.3% 92%, transparent 92.4%),
    linear-gradient(90deg, transparent 0 14%, rgb(255 255 255 / 48%) 14.2% 14.5%, transparent 14.8% 100%);
  mix-blend-mode: screen;
  animation: channel-tear var(--glitch-duration, 560ms) steps(1, end) forwards;
}

.screen-glitch--block::before {
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 12%, rgb(255 0 118 / 84%) 12% 39%, transparent 39% 100%),
    linear-gradient(90deg, transparent 0 58%, rgb(0 239 255 / 78%) 58% 86%, transparent 86% 100%),
    linear-gradient(90deg, transparent 0 34%, rgb(255 255 255 / 46%) 34% 61%, transparent 61% 100%);
  background-size: 100% 17%, 100% 23%, 100% 11%;
  background-position: 0 12%, 0 48%, 0 79%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  animation: block-corrupt var(--glitch-duration, 560ms) steps(1, end) forwards;
}

.screen-glitch--block::after {
  background:
    repeating-linear-gradient(0deg, transparent 0 13px, rgb(255 255 255 / 42%) 14px 15px, transparent 16px 31px),
    linear-gradient(90deg, transparent 0 22%, rgb(255 0 133 / 50%) 22.2% 59%, transparent 59.4% 100%);
  animation: horizontal-tear var(--glitch-duration, 560ms) steps(1, end) forwards;
}

.screen-glitch--crt {
  background-color: #aaa7a9;
  background-image: radial-gradient(ellipse at center, transparent 40%, rgb(15 10 17 / 48%) 100%);
  filter: saturate(.18) contrast(1.17);
  animation-name: screen-glitch-crt;
}

.crt-snow {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  opacity: var(--crt-static-opacity, .48);
  mix-blend-mode: normal;
  animation: crt-flicker 74ms steps(2, end) infinite;
}

.screen-glitch--crt::before {
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 42%, rgb(18 15 21 / 28%) 100%),
    repeating-linear-gradient(0deg, rgb(16 13 18 / 22%) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
  transform: translateX(0);
  animation: crt-sync-jitter 180ms steps(2, end) infinite;
}

.screen-glitch--crt::after {
  z-index: 3;
  inset: -15% 0;
  background:
    linear-gradient(0deg, transparent 0 42%, rgb(255 255 255 / 30%) 44%, rgb(255 255 255 / 72%) 45%, rgb(255 0 127 / 42%) 45.4%, rgb(50 45 52 / 35%) 46.6%, transparent 50% 100%),
    linear-gradient(0deg, transparent 0 47%, rgb(255 255 255 / 12%) 48% 49%, transparent 51% 100%);
  mix-blend-mode: screen;
  opacity: .78;
  transform: translateY(var(--crt-roll-start, -20%));
  animation: crt-hold-roll var(--crt-roll-speed, 420ms) linear forwards;
}

/* Full-frame treatments from the author's supplied VHS/static references. */
.screen-glitch--vhs {
  background-color: rgb(6 2 13 / 96%);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 5px, rgb(240 236 244 / 15%) 6px 7px, transparent 8px 13px),
    linear-gradient(90deg, rgb(237 19 133 / 32%), transparent 28% 68%, rgb(0 229 255 / 27%));
  filter: saturate(1.55) contrast(1.18);
}

.screen-glitch--vhs::before {
  background:
    linear-gradient(90deg, transparent 0 4%, rgb(237 19 133 / 95%) 4.4% 21%, transparent 21.4% 27%, rgb(0 238 255 / 88%) 27.5% 47%, transparent 47.4% 53%, rgb(234 255 87 / 72%) 53.5% 59%, transparent 59.4% 68%, rgb(127 83 255 / 84%) 68.5% 94%, transparent 94.4% 100%),
    repeating-linear-gradient(0deg, transparent 0 18px, rgb(255 255 255 / 27%) 19px 20px, transparent 21px 37px);
  mix-blend-mode: screen;
  animation: vhs-primary-chroma var(--glitch-duration, 620ms) steps(3, end) forwards;
}

.screen-glitch--vhs::after {
  inset: -20% 0;
  background:
    linear-gradient(0deg, transparent 0 42%, rgb(255 255 255 / 20%) 44%, rgb(255 255 255 / 84%) 45%, rgb(237 19 133 / 72%) 45.6%, rgb(0 239 255 / 62%) 46.2%, transparent 49% 100%),
    linear-gradient(0deg, transparent 0 71%, rgb(255 255 255 / 37%) 72% 73%, transparent 74% 100%);
  mix-blend-mode: screen;
  animation: vhs-primary-roll var(--glitch-duration, 620ms) linear forwards;
}

.screen-glitch--static {
  background-color: rgb(7 4 11 / 96%);
  background-image: radial-gradient(ellipse at center, transparent 37%, rgb(12 7 16 / 70%) 100%);
  animation-name: screen-glitch-static;
}

.color-noise {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  opacity: var(--crt-static-opacity, .48);
  mix-blend-mode: screen;
}

.screen-glitch--static::before {
  z-index: 2;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgb(12 8 15 / 44%) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, transparent 0 12%, rgb(237 19 133 / 45%) 13% 20%, transparent 22% 47%, rgb(0 239 255 / 34%) 48% 54%, transparent 56% 100%);
  mix-blend-mode: screen;
  animation: sync-drift var(--glitch-duration, 620ms) steps(3, end) forwards;
}

.screen-glitch--static::after {
  z-index: 3;
  inset: -15% 0;
  background: linear-gradient(0deg, transparent 0 42%, rgb(255 255 255 / 24%) 44%, rgb(255 255 255 / 70%) 45%, rgb(0 239 255 / 34%) 45.5%, transparent 49% 100%);
  mix-blend-mode: screen;
  opacity: .8;
  animation: crt-hold-roll var(--crt-roll-speed, 420ms) linear forwards;
}

.null-payload {
  position: fixed;
  z-index: 2147483648;
  top: var(--null-top, 50%);
  left: var(--null-left, 50%);
  color: #ed1385;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.6rem, 6vw, 4.8rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-shadow: 0 0 0.16em #ed1385, 0 0 0.65em rgb(237 19 133 / 72%);
  transform: translate(-50%, -50%);
  white-space: pre;
  animation: null-corruption 120ms steps(1, end) infinite;
}

.glitch-layer {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  opacity: var(--layer-opacity, .45);
  pointer-events: none;
}

.glitch-layer::before,
.glitch-layer::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.glitch-layer--null {
  z-index: 12;
  opacity: 1;
}

.glitch-layer--null::before {
  background:
    linear-gradient(90deg, transparent 0 8%, rgb(255 0 128 / 65%) 8.2% 34%, transparent 34.4% 62%, rgb(255 240 248 / 52%) 62.2% 63%, transparent 63.3% 100%),
    repeating-linear-gradient(0deg, transparent 0 17px, rgb(255 0 128 / 42%) 18px 19px, transparent 20px 41px);
  mix-blend-mode: screen;
  animation: null-companion-tear var(--layer-duration, 720ms) steps(3, end) forwards;
}

.glitch-layer--null .null-payload {
  position: absolute;
  z-index: 1;
  top: var(--null-top, 50%);
  left: var(--null-left, 50%);
}

.glitch-layer--rgb::before {
  background:
    linear-gradient(90deg, transparent 0 5%, rgb(255 0 104 / 76%) 5.2% 23%, transparent 23.4% 48%, rgb(0 239 255 / 68%) 48.2% 72%, transparent 72.4% 100%),
    linear-gradient(90deg, transparent 0 31%, rgb(255 255 255 / 42%) 31.3% 50%, transparent 50.4% 83%, rgb(255 0 138 / 65%) 83.2% 94%, transparent 94.4% 100%);
  mix-blend-mode: screen;
  transform: translate(var(--layer-x, 0), var(--layer-y, 0));
  animation: rgb-layer-flash var(--layer-duration, 520ms) steps(1, end) forwards;
}

.glitch-layer--mosaic::before {
  background:
    linear-gradient(90deg, transparent 0 9%, rgb(255 0 124 / 82%) 9% 43%, transparent 43% 100%),
    linear-gradient(90deg, transparent 0 48%, rgb(0 239 255 / 70%) 48% 91%, transparent 91% 100%),
    linear-gradient(90deg, transparent 0 24%, rgb(255 255 255 / 42%) 24% 58%, transparent 58% 100%);
  background-size: 100% 19%, 100% 13%, 100% 26%;
  background-position: 0 var(--layer-phase, 20%), 0 51%, 0 84%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  transform: translateX(var(--layer-x, 0));
  animation: mosaic-fragments var(--layer-duration, 520ms) steps(1, end) forwards;
}

.glitch-layer--scanlines::before {
  background:
    repeating-linear-gradient(0deg, rgb(13 8 15 / 46%) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 48%, rgb(14 8 15 / 25%) 100%);
  mix-blend-mode: multiply;
  animation: scanline-roll var(--layer-duration, 520ms) steps(3, end) forwards;
}

.glitch-snow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  mix-blend-mode: normal;
  animation: crt-flicker 74ms steps(2, end) infinite;
}

.glitch-layer--hold::before {
  inset: -22% 0;
  background:
    linear-gradient(0deg, transparent 0 43%, rgb(255 255 255 / 18%) 44%, rgb(255 255 255 / 76%) 45%, rgb(255 0 130 / 48%) 45.5%, rgb(35 31 38 / 30%) 47%, transparent 49% 100%);
  mix-blend-mode: screen;
  transform: translateY(var(--layer-phase, -15%));
  animation: rolling-hold var(--layer-duration, 520ms) linear forwards;
}

.glitch-layer--sync::before {
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgb(255 255 255 / 30%) 24px 25px, transparent 26px 53px),
    linear-gradient(90deg, transparent 0 17%, rgb(0 239 255 / 38%) 17.2% 36%, transparent 36.3% 69%, rgb(255 0 128 / 48%) 69.2% 88%, transparent 88.3% 100%);
  mix-blend-mode: screen;
  animation: sync-drift var(--layer-duration, 520ms) steps(2, end) forwards;
}

.glitch-layer--sync::after {
  background: linear-gradient(0deg, transparent 0 45%, rgb(235 230 236 / 34%) 47% 49%, transparent 52% 100%);
  transform: translateY(var(--layer-y, 0));
  animation: sync-shear var(--layer-duration, 520ms) steps(2, end) forwards;
}

.glitch-layer--vhs::before {
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, rgb(255 0 128 / 70%) 8px 9px, transparent 10px 19px),
    linear-gradient(90deg, transparent 0 5%, rgb(255 0 125 / 68%) 7% 23%, transparent 25% 31%, rgb(0 239 255 / 62%) 33% 49%, transparent 51% 59%, rgb(214 255 72 / 46%) 61% 66%, transparent 68% 77%, rgb(112 73 255 / 60%) 79% 94%, transparent 96% 100%);
  background-size: 100% 100%, 100% 100%;
  mix-blend-mode: screen;
  filter: hue-rotate(var(--layer-hue, 0deg)) saturate(1.45);
  transform: translateY(var(--layer-y, 0));
  animation: vhs-chroma-flash var(--layer-duration, 520ms) steps(2, end) forwards;
}

.glitch-layer--vhs::after {
  background:
    linear-gradient(0deg, transparent 0 28%, rgb(255 255 255 / 52%) 29% 30%, rgb(255 0 128 / 76%) 30.2% 31%, transparent 32% 66%, rgb(0 239 255 / 55%) 67% 68%, transparent 69% 100%);
  mix-blend-mode: screen;
  transform: translateY(var(--layer-phase, 0));
  animation: vhs-tracking var(--layer-duration, 520ms) linear forwards;
}

.glitch-layer--chroma::before {
  background:
    linear-gradient(90deg, transparent 0 14%, rgb(255 0 116 / 48%) 16% 50%, transparent 53% 100%),
    linear-gradient(90deg, transparent 0 31%, rgb(0 236 255 / 45%) 33% 69%, transparent 72% 100%);
  mix-blend-mode: screen;
  filter: blur(1.4px) hue-rotate(var(--layer-hue, 0deg));
  transform: translate(var(--layer-x, 0), var(--layer-y, 0));
  animation: chroma-bleed var(--layer-duration, 520ms) steps(2, end) forwards;
}

.glitch-layer--ghost::before {
  background: linear-gradient(90deg, transparent 0 18%, rgb(255 30 138 / 21%) 21% 47%, transparent 53% 100%);
  mix-blend-mode: screen;
  backdrop-filter: blur(1.4px) saturate(1.8) hue-rotate(var(--layer-hue, 0deg));
  transform: translate(var(--layer-x, 0), var(--layer-y, 0));
  animation: ghost-trail var(--layer-duration, 520ms) steps(2, end) forwards;
}

.glitch-layer--streaks::before {
  background:
    linear-gradient(90deg, transparent 0 4%, rgb(255 0 128 / 86%) 6% 24%, transparent 27% 100%),
    linear-gradient(90deg, transparent 0 31%, rgb(255 244 250 / 74%) 33% 39%, rgb(255 0 128 / 82%) 40% 65%, transparent 68% 100%),
    linear-gradient(90deg, transparent 0 59%, rgb(0 239 255 / 42%) 61% 68%, rgb(255 0 128 / 78%) 70% 94%, transparent 97% 100%);
  background-size: 100% 8%, 100% 13%, 100% 5%;
  background-position: 0 18%, 0 51%, 0 82%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  transform: translate(var(--layer-x, 0), var(--layer-y, 0));
  animation: neon-streak-rush var(--layer-duration, 520ms) steps(2, end) forwards;
}

.glitch-layer--streaks::after {
  background: linear-gradient(90deg, transparent 0 12%, rgb(255 0 128 / 68%) 16% 48%, transparent 54% 75%, rgb(255 245 250 / 54%) 78% 87%, transparent 92% 100%);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 var(--layer-phase, 36%);
  mix-blend-mode: screen;
  animation: streak-snap var(--layer-duration, 520ms) steps(3, end) forwards;
}

@keyframes screen-glitch {
  0% { opacity: 0; clip-path: inset(48% 0 48%); transform: translateX(0); }
  10% { opacity: .9; clip-path: inset(var(--band-a-top, 43%) 0 var(--band-a-bottom, 47%)); transform: translateX(-.8%); }
  22% { opacity: .28; clip-path: inset(var(--band-b-top, 8%) 0 var(--band-b-bottom, 76%)); transform: translateX(.7%); }
  35% { opacity: .9; clip-path: inset(0); transform: translateX(-.35%); }
  48% { opacity: .38; clip-path: inset(var(--band-c-top, 60%) 0 var(--band-c-bottom, 18%)); transform: translateX(.9%); }
  62% { opacity: .94; clip-path: inset(0); transform: translateX(0); }
  75% { opacity: .4; clip-path: inset(var(--band-d-top, 19%) 0 var(--band-d-bottom, 69%)); transform: translateX(-.65%); }
  87% { opacity: .92; clip-path: inset(0); transform: translateX(.2%); }
  100% { opacity: .98; clip-path: inset(0); transform: translateX(0); }
}

@keyframes screen-glitch-composite {
  0% { opacity: 0; clip-path: inset(48% 0 48%); transform: translateX(0); }
  9% { opacity: .96; clip-path: inset(var(--band-a-top, 43%) 0 var(--band-a-bottom, 47%)); transform: translateX(-.45%); }
  24% { opacity: .72; clip-path: inset(var(--band-b-top, 8%) 0 var(--band-b-bottom, 76%)); transform: translateX(.38%); }
  39% { opacity: .94; clip-path: inset(0); transform: translateX(-.2%); }
  57% { opacity: .78; clip-path: inset(var(--band-c-top, 60%) 0 var(--band-c-bottom, 18%)); transform: translateX(.42%); }
  76% { opacity: .9; clip-path: inset(0); transform: translateX(-.15%); }
  100% { opacity: .96; clip-path: inset(0); transform: translateX(0); }
}

@keyframes null-companion-tear {
  0%, 100% { opacity: .15; transform: translateX(0); }
  27% { opacity: .86; transform: translateX(var(--layer-x, 0)); }
  53% { opacity: .32; transform: translateX(var(--layer-x-inverse, 0)); }
  79% { opacity: .72; transform: translateX(0); }
}

@keyframes channel-tear {
  0%, 100% { transform: translateX(0); filter: none; }
  10% { transform: translateX(calc(var(--tear-x, 0px) + 2.2%)); filter: hue-rotate(var(--tear-hue-inverse, 0deg)); }
  22% { transform: translateX(calc(var(--tear-x, 0px) - 3.5%)); }
  35% { transform: translateX(calc(var(--tear-x, 0px) + 1.6%)); filter: hue-rotate(var(--tear-hue, 0deg)); }
  48% { transform: translateX(calc(var(--tear-x, 0px) - 2.5%)); }
  62% { transform: translateX(calc(var(--tear-x, 0px) + 1.1%)); filter: hue-rotate(var(--tear-hue-inverse, 0deg)); }
  75% { transform: translateX(calc(var(--tear-x, 0px) - 1.8%)); }
  87% { transform: translateX(calc(var(--tear-x, 0px) + .6%)); filter: hue-rotate(var(--tear-hue, 0deg)); }
}

@keyframes horizontal-tear {
  0%, 100% { transform: translate(0, 0) skewX(0); }
  10% { transform: translate(var(--tear-x, 0px), var(--tear-y, 0px)) skewX(var(--tear-skew, 0deg)); }
  22% { transform: translate(var(--tear-x-inverse, 0px), 0) skewX(var(--tear-skew-inverse, 0deg)); }
  35% { transform: translate(0, var(--tear-y-inverse, 0px)) skewX(var(--tear-skew, 0deg)); }
  48% { transform: translate(var(--tear-x, 0px), 0) skewX(var(--tear-skew-inverse, 0deg)); }
  62% { transform: translate(0, var(--tear-y, 0px)) skewX(0); }
  75% { transform: translate(var(--tear-x-inverse, 0px), var(--tear-y-inverse, 0px)) skewX(var(--tear-skew, 0deg)); }
  87% { transform: translate(0, 0) skewX(0); }
}

@keyframes block-corrupt {
  0%, 100% { clip-path: inset(0); transform: translate(0); }
  10% { clip-path: inset(9% 0 67%); transform: translateX(-1.2%); }
  22% { clip-path: inset(38% 0 42%); transform: translateX(1.5%); }
  35% { clip-path: inset(0); transform: translateX(-.4%); }
  48% { clip-path: inset(69% 0 9%); transform: translateX(1.8%); }
  62% { clip-path: inset(21% 0 63%); transform: translateX(-1%); }
  75% { clip-path: inset(0); transform: translateX(.7%); }
  87% { clip-path: inset(53% 0 29%); transform: translateX(-.8%); }
}

@keyframes screen-glitch-crt {
  0% { opacity: 0; clip-path: inset(0); transform: translateX(0); }
  7% { opacity: .88; clip-path: inset(0); transform: translateX(-.35%); }
  14% { opacity: .54; clip-path: inset(var(--band-a-top, 31%) 0 var(--band-a-bottom, 48%)); transform: translateX(.2%); }
  25% { opacity: .96; clip-path: inset(0); transform: translateX(.25%); }
  39% { opacity: .77; clip-path: inset(0); transform: translateX(-.2%); }
  53% { opacity: .99; clip-path: inset(var(--band-c-top, 61%) 0 var(--band-c-bottom, 17%)); transform: translateX(.3%); }
  66% { opacity: .7; clip-path: inset(0); transform: translateX(-.15%); }
  82% { opacity: .94; clip-path: inset(0); transform: translateX(.22%); }
  100% { opacity: .98; clip-path: inset(0); transform: translateX(0); }
}

@keyframes screen-glitch-static {
  0% { opacity: 0; clip-path: inset(47% 0 47%); transform: translateX(0); }
  9% { opacity: .96; clip-path: inset(0); transform: translateX(-.3%); }
  21% { opacity: .72; clip-path: inset(var(--band-a-top, 28%) 0 var(--band-a-bottom, 51%)); transform: translateX(.25%); }
  34% { opacity: .98; clip-path: inset(0); transform: translateX(-.2%); }
  53% { opacity: .75; clip-path: inset(var(--band-c-top, 61%) 0 var(--band-c-bottom, 19%)); transform: translateX(.3%); }
  71% { opacity: .96; clip-path: inset(0); transform: translateX(-.15%); }
  100% { opacity: .98; clip-path: inset(0); transform: translateX(0); }
}

@keyframes vhs-primary-chroma {
  0%, 100% { opacity: .18; transform: translate(0); filter: hue-rotate(0deg); }
  14% { opacity: .98; transform: translate(var(--tear-x, 0), var(--tear-y, 0)); filter: hue-rotate(var(--tear-hue, 0deg)); }
  31% { opacity: .52; transform: translate(var(--tear-x-inverse, 0), 0); filter: hue-rotate(var(--tear-hue-inverse, 0deg)); }
  48% { opacity: .94; transform: translate(0, var(--tear-y-inverse, 0)); }
  69% { opacity: .42; transform: translate(var(--tear-x, 0), 0); filter: hue-rotate(var(--tear-hue, 0deg)); }
  84% { opacity: .9; transform: translate(var(--tear-x-inverse, 0), var(--tear-y, 0)); }
}

@keyframes vhs-primary-roll {
  0% { transform: translateY(-115%); opacity: .3; }
  18% { opacity: .95; }
  77% { opacity: .76; }
  100% { transform: translateY(115%); opacity: .2; }
}

@keyframes crt-flicker {
  0%, 100% { opacity: var(--crt-static-opacity, .48); }
  35% { opacity: calc(var(--crt-static-opacity, .48) * .62); }
  68% { opacity: calc(var(--crt-static-opacity, .48) * 1.12); }
}

@keyframes crt-sync-jitter {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(.22%); }
}

@keyframes crt-hold-roll {
  from { transform: translateY(var(--crt-roll-start, -20%)); }
  to { transform: translateY(115%); }
}

@keyframes rgb-layer-flash {
  0%, 100% { opacity: .2; transform: translate(0); }
  18% { opacity: 1; transform: translate(var(--layer-x, 0), var(--layer-y, 0)); }
  33% { opacity: .36; transform: translate(var(--layer-x-inverse, 0), 0); }
  57% { opacity: .92; transform: translate(0, var(--layer-y, 0)); }
  78% { opacity: .28; transform: translate(var(--layer-x, 0), 0); }
}

@keyframes mosaic-fragments {
  0%, 100% { clip-path: inset(0); }
  12% { clip-path: inset(8% 0 68%); }
  27% { clip-path: inset(41% 0 37%); }
  46% { clip-path: inset(0); }
  63% { clip-path: inset(71% 0 8%); }
  81% { clip-path: inset(23% 0 59%); }
}

@keyframes scanline-roll {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(2px); }
  70% { transform: translateY(-1px); }
}

@keyframes rolling-hold {
  from { transform: translateY(var(--layer-phase, -15%)); }
  to { transform: translateY(120%); }
}

@keyframes sync-drift {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(var(--layer-x, 0)); }
  67% { transform: translateX(var(--layer-x-inverse, 0)); }
}

@keyframes sync-shear {
  0%, 100% { transform: translateY(var(--layer-y, 0)); }
  45% { transform: translateY(var(--layer-y-inverse, 0)); }
}

@keyframes vhs-chroma-flash {
  0%, 100% { opacity: .2; transform: translateY(0); }
  17% { opacity: 1; transform: translateY(var(--layer-y, 0)); }
  41% { opacity: .38; transform: translateY(var(--layer-y-inverse, 0)); }
  63% { opacity: .85; transform: translateY(0); }
  82% { opacity: .31; transform: translateY(var(--layer-y, 0)); }
}

@keyframes vhs-tracking {
  from { transform: translateY(-115%); }
  to { transform: translateY(115%); }
}

@keyframes chroma-bleed {
  0%, 100% { opacity: .18; transform: translate(0); }
  28% { opacity: .8; transform: translate(var(--layer-x, 0), var(--layer-y, 0)); }
  59% { opacity: .34; transform: translate(var(--layer-x-inverse, 0), var(--layer-y-inverse, 0)); }
  81% { opacity: .7; transform: translate(0, var(--layer-y, 0)); }
}

@keyframes ghost-trail {
  0%, 100% { opacity: .12; transform: translate(0); }
  32% { opacity: .72; transform: translate(var(--layer-x, 0), var(--layer-y, 0)); }
  57% { opacity: .24; transform: translate(var(--layer-x-inverse, 0), var(--layer-y-inverse, 0)); }
  83% { opacity: .62; transform: translate(var(--layer-x, 0), 0); }
}

@keyframes neon-streak-rush {
  0%, 100% { opacity: .12; clip-path: inset(45% 0 45%); transform: translate(0); }
  16% { opacity: .92; clip-path: inset(12% 0 70%); transform: translate(var(--layer-x, 0), var(--layer-y, 0)); }
  39% { opacity: .34; clip-path: inset(48% 0 34%); transform: translate(var(--layer-x-inverse, 0), 0); }
  64% { opacity: .86; clip-path: inset(71% 0 14%); transform: translate(0, var(--layer-y-inverse, 0)); }
  83% { opacity: .48; clip-path: inset(28% 0 54%); transform: translate(var(--layer-x, 0), 0); }
}

@keyframes streak-snap {
  0%, 100% { opacity: 0; transform: translateX(0); }
  21% { opacity: .82; transform: translateX(var(--layer-x-inverse, 0)); }
  47% { opacity: .2; transform: translateX(var(--layer-x, 0)); }
  72% { opacity: .7; transform: translateX(0); }
}

@keyframes null-corruption {
  0%, 100% { clip-path: inset(0); transform: translate(-50%, -50%) skewX(0); }
  33% { clip-path: inset(0 0 45%); transform: translate(calc(-50% - 5px), -50%) skewX(-7deg); }
  66% { clip-path: inset(48% 0 0); transform: translate(calc(-50% + 4px), -50%) skewX(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .screen-glitch,
  .screen-glitch::before,
  .screen-glitch::after,
  .glitch-layer,
  .glitch-layer::before,
  .glitch-layer::after,
  .null-payload,
  .crt-snow,
  .color-noise { animation: none; }

  .screen-glitch--composite { opacity: 1; }
}

.jumpscare-transition {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #020106;
  animation: jumpscare-transition-in 150ms steps(3, end) both;
}

.jumpscare-transition__video {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 0 0 1px rgb(245 0 145 / 58%), 0 0 44px rgb(245 0 145 / 24%);
}

.jumpscare-transition__still-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 0 1px rgb(245 0 145 / 58%), 0 0 44px rgb(245 0 145 / 24%);
}

.jumpscare-transition__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--still-image-position, center);
  will-change: transform, clip-path, filter;
  animation: jumpscare-still-source var(--still-glitch-duration, 1900ms) steps(1, end) both;
}

.jumpscare-transition__still-frame::before,
.jumpscare-transition__still-frame::after {
  position: absolute;
  z-index: 1;
  inset: -1.5%;
  content: "";
  pointer-events: none;
  background-image: var(--still-image);
  background-position: var(--still-image-position, center);
  background-size: cover;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  will-change: transform, clip-path, opacity;
}

.jumpscare-transition__still-frame::before {
  filter: sepia(1) saturate(8) hue-rotate(var(--still-fuchsia-hue, 325deg));
  animation: jumpscare-still-fuchsia var(--still-glitch-duration, 1900ms) steps(1, end) both;
}

.jumpscare-transition__still-frame::after {
  filter: sepia(1) saturate(8) hue-rotate(var(--still-cyan-hue, 180deg));
  animation: jumpscare-still-cyan var(--still-glitch-duration, 1900ms) steps(1, end) both;
}

@keyframes jumpscare-still-source {
  0%, 100% { clip-path: inset(0); transform: scale(1.025); filter: brightness(1) contrast(1.08) saturate(1.08); }
  2%, 3% { clip-path: inset(var(--still-band-a-top) 0 var(--still-band-a-bottom) 0); transform: scale(1.05) translate(var(--still-shift-x), var(--still-shift-y)); filter: brightness(1.45) contrast(1.45) saturate(1.5); }
  5%, 6% { clip-path: inset(0 0 var(--still-band-b-bottom) 0); transform: scale(1.035) translate(var(--still-shift-x-inverse), 0); filter: brightness(.72) contrast(1.65); }
  9% { clip-path: inset(0); transform: scale(1.03) translateY(var(--still-shift-y)); filter: brightness(1.12) contrast(1.18); }
  12%, 13% { clip-path: inset(var(--still-band-b-top) 0 var(--still-band-b-bottom) 0); transform: scale(1.055) translate(var(--still-shift-x-inverse), var(--still-shift-y-inverse)); filter: brightness(1.55) contrast(1.35) hue-rotate(12deg); }
  16%, 17% { clip-path: inset(0); transform: scale(1.025) translate(var(--still-shift-x), 0); filter: brightness(.8) contrast(1.45); }
  20%, 21% { clip-path: inset(var(--still-band-a-top) 0 var(--still-band-a-bottom) 0); transform: scale(1.045) translate(var(--still-shift-x), 0); filter: brightness(1.35) contrast(1.4) saturate(1.5); }
  24% { clip-path: inset(0 0 var(--still-band-b-bottom) 0); transform: scale(1.03) translateY(var(--still-shift-y-inverse)); filter: brightness(.7) contrast(1.7); }
  28%, 29% { clip-path: inset(0); transform: scale(1.04) translate(var(--still-shift-x-inverse), 0); filter: brightness(1.18) contrast(1.2); }
  32%, 33% { clip-path: inset(var(--still-band-b-top) 0 var(--still-band-b-bottom) 0); transform: scale(1.055) translate(var(--still-shift-x-inverse), var(--still-shift-y)); filter: brightness(1.5) contrast(1.42) hue-rotate(-12deg); }
  36% { clip-path: inset(0); transform: scale(1.025) translateY(var(--still-shift-y)); filter: brightness(.82) contrast(1.4); }
  40%, 41% { clip-path: inset(var(--still-band-a-top) 0 var(--still-band-a-bottom) 0); transform: scale(1.045) translate(var(--still-shift-x), var(--still-shift-y-inverse)); filter: brightness(1.4) contrast(1.5); }
  44%, 45% { clip-path: inset(0 0 var(--still-band-b-bottom) 0); transform: scale(1.03) translate(var(--still-shift-x-inverse), 0); filter: brightness(.76) contrast(1.62); }
  48%, 49% { clip-path: inset(var(--still-band-b-top) 0 var(--still-band-b-bottom) 0); transform: scale(1.055) translate(var(--still-shift-x), var(--still-shift-y)); filter: brightness(1.52) contrast(1.4) hue-rotate(16deg); }
  52% { clip-path: inset(0); transform: scale(1.025) translateY(var(--still-shift-y-inverse)); filter: brightness(.82) contrast(1.4); }
  56%, 57% { clip-path: inset(var(--still-band-a-top) 0 var(--still-band-a-bottom) 0); transform: scale(1.05) translate(var(--still-shift-x-inverse), 0); filter: brightness(1.38) contrast(1.42) saturate(1.4); }
  60%, 61% { clip-path: inset(0 0 var(--still-band-b-bottom) 0); transform: scale(1.035) translateY(var(--still-shift-y)); filter: brightness(.75) contrast(1.68); }
  65% { clip-path: inset(0); transform: scale(1.04) translate(var(--still-shift-x), 0); filter: brightness(1.2) contrast(1.2); }
  68%, 69% { clip-path: inset(var(--still-band-b-top) 0 var(--still-band-b-bottom) 0); transform: scale(1.055) translate(var(--still-shift-x), var(--still-shift-y-inverse)); filter: brightness(1.48) contrast(1.48); }
  73%, 74% { clip-path: inset(0); transform: scale(1.03) translate(var(--still-shift-x-inverse), 0); filter: brightness(.8) contrast(1.35); }
  78%, 79% { clip-path: inset(var(--still-band-a-top) 0 var(--still-band-a-bottom) 0); transform: scale(1.05) translate(var(--still-shift-x-inverse), var(--still-shift-y)); filter: brightness(1.42) contrast(1.48); }
  83% { clip-path: inset(0 0 var(--still-band-b-bottom) 0); transform: scale(1.03) translate(var(--still-shift-x), 0); filter: brightness(.74) contrast(1.6); }
  87%, 88% { clip-path: inset(var(--still-band-b-top) 0 var(--still-band-b-bottom) 0); transform: scale(1.055) translate(var(--still-shift-x), var(--still-shift-y)); filter: brightness(1.58) contrast(1.38) hue-rotate(-14deg); }
  92%, 93% { clip-path: inset(0); transform: scale(1.025) translateY(var(--still-shift-y-inverse)); filter: brightness(.8) contrast(1.42); }
  97% { clip-path: inset(var(--still-band-a-top) 0 var(--still-band-a-bottom) 0); transform: scale(1.045) translate(var(--still-shift-x-inverse), 0); filter: brightness(1.38) contrast(1.48); }
}

@keyframes jumpscare-still-fuchsia {
  0%, 4%, 8%, 13%, 18%, 23%, 28%, 34%, 39%, 45%, 51%, 57%, 63%, 69%, 75%, 81%, 87%, 93%, 100% { opacity: 0; transform: translateX(0); clip-path: inset(0); }
  2%, 3% { opacity: var(--still-chroma-opacity, .46); transform: translateX(var(--still-shift-x)); clip-path: inset(var(--still-band-a-top) 0 var(--still-band-a-bottom) 0); }
  11%, 12% { opacity: var(--still-chroma-opacity, .46); transform: translateX(var(--still-shift-x-inverse)); clip-path: inset(var(--still-band-b-top) 0 var(--still-band-b-bottom) 0); }
  20%, 22% { opacity: var(--still-chroma-opacity, .46); transform: translateX(var(--still-shift-x)); clip-path: inset(var(--still-band-a-top) 0 var(--still-band-a-bottom) 0); }
  31%, 33% { opacity: var(--still-chroma-opacity, .46); transform: translateX(var(--still-shift-x-inverse)); clip-path: inset(var(--still-band-b-top) 0 var(--still-band-b-bottom) 0); }
  42%, 44% { opacity: var(--still-chroma-opacity, .46); transform: translateX(var(--still-shift-x)); clip-path: inset(var(--still-band-a-top) 0 var(--still-band-a-bottom) 0); }
  53%, 55% { opacity: var(--still-chroma-opacity, .46); transform: translateX(var(--still-shift-x-inverse)); clip-path: inset(var(--still-band-b-top) 0 var(--still-band-b-bottom) 0); }
  64%, 66% { opacity: var(--still-chroma-opacity, .46); transform: translateX(var(--still-shift-x)); clip-path: inset(var(--still-band-a-top) 0 var(--still-band-a-bottom) 0); }
  76%, 78% { opacity: var(--still-chroma-opacity, .46); transform: translateX(var(--still-shift-x-inverse)); clip-path: inset(var(--still-band-b-top) 0 var(--still-band-b-bottom) 0); }
  85%, 86% { opacity: var(--still-chroma-opacity, .46); transform: translateX(var(--still-shift-x)); clip-path: inset(var(--still-band-a-top) 0 var(--still-band-a-bottom) 0); }
  95%, 97% { opacity: var(--still-chroma-opacity, .46); transform: translateX(var(--still-shift-x-inverse)); clip-path: inset(var(--still-band-b-top) 0 var(--still-band-b-bottom) 0); }
}

@keyframes jumpscare-still-cyan {
  0%, 6%, 11%, 16%, 21%, 27%, 32%, 38%, 43%, 49%, 55%, 61%, 67%, 73%, 79%, 85%, 91%, 96%, 100% { opacity: 0; transform: translateX(0); clip-path: inset(0); }
  5%, 7% { opacity: var(--still-chroma-opacity-cyan, .36); transform: translateX(var(--still-shift-x-inverse)); clip-path: inset(var(--still-band-b-top) 0 var(--still-band-b-bottom) 0); }
  14%, 15% { opacity: var(--still-chroma-opacity-cyan, .36); transform: translateX(var(--still-shift-x)); clip-path: inset(var(--still-band-a-top) 0 var(--still-band-a-bottom) 0); }
  25%, 26% { opacity: var(--still-chroma-opacity-cyan, .36); transform: translateX(var(--still-shift-x-inverse)); clip-path: inset(var(--still-band-b-top) 0 var(--still-band-b-bottom) 0); }
  36%, 37% { opacity: var(--still-chroma-opacity-cyan, .36); transform: translateX(var(--still-shift-x)); clip-path: inset(var(--still-band-a-top) 0 var(--still-band-a-bottom) 0); }
  47%, 50% { opacity: var(--still-chroma-opacity-cyan, .36); transform: translateX(var(--still-shift-x-inverse)); clip-path: inset(var(--still-band-b-top) 0 var(--still-band-b-bottom) 0); }
  59%, 60% { opacity: var(--still-chroma-opacity-cyan, .36); transform: translateX(var(--still-shift-x)); clip-path: inset(var(--still-band-a-top) 0 var(--still-band-a-bottom) 0); }
  70%, 72% { opacity: var(--still-chroma-opacity-cyan, .36); transform: translateX(var(--still-shift-x-inverse)); clip-path: inset(var(--still-band-b-top) 0 var(--still-band-b-bottom) 0); }
  82%, 84% { opacity: var(--still-chroma-opacity-cyan, .36); transform: translateX(var(--still-shift-x)); clip-path: inset(var(--still-band-a-top) 0 var(--still-band-a-bottom) 0); }
  90%, 94% { opacity: var(--still-chroma-opacity-cyan, .36); transform: translateX(var(--still-shift-x-inverse)); clip-path: inset(var(--still-band-b-top) 0 var(--still-band-b-bottom) 0); }
}

.jumpscare-transition .glitch-layer--null { opacity: var(--layer-opacity, .45); }

@keyframes jumpscare-transition-in {
  0% { opacity: 0; clip-path: inset(49% 0 49%); filter: brightness(3); }
  46% { opacity: .92; clip-path: inset(0 0 0); filter: brightness(.55); }
  72% { opacity: .72; filter: brightness(1.8); }
  100% { opacity: 1; filter: brightness(1); }
}