:root {
  color-scheme: dark;
  --red: #ff151f;
  --deep-red: #8b0007;
  --near-black: #020203;
  --proximity: 0;
  --damage: 0;
  --shake: 0px;
  font-family: "Lucida Console", "Courier New", monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #000;
  overflow: hidden;
}

body {
  min-height: 100dvh;
  color: #d8c9c9;
  isolation: isolate;
  cursor: crosshair;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.void,
.field-grid,
.vignette,
.scanlines,
.noise,
.red-bloom,
.signal-tear,
.crack-field,
.fracture-canvas,
.distortion-layer,
.rgb-frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.fracture-canvas {
  z-index: 4;
  width: 100%;
  height: 100%;
  opacity: 1;
  mix-blend-mode: screen;
  filter: saturate(1.35) contrast(1.18);
}

.distortion-layer {
  z-index: 72;
  overflow: hidden;
  contain: strict;
}

.distortion-band {
  position: absolute;
  left: -16%;
  width: 132%;
  opacity: 0;
  will-change: transform, opacity, clip-path;
  background: linear-gradient(90deg, transparent 0 4%, rgba(255, 0, 20, .52) 18%, rgba(255,255,255,.24) 48%, rgba(0, 215, 255, .28) 73%, transparent 97%);
  box-shadow: 0 0 28px rgba(255, 0, 20, .35);
  mix-blend-mode: screen;
}

.distortion-slice {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.055) 3px, transparent 4px),
    linear-gradient(90deg, rgba(255,0,18,.22), transparent 25% 72%, rgba(0,220,255,.15));
  mix-blend-mode: screen;
  will-change: transform, opacity, clip-path, filter;
}

.rgb-frame {
  z-index: 71;
  opacity: 0;
  box-shadow: inset 22px 0 40px rgba(255, 0, 18, .44), inset -22px 0 40px rgba(0, 205, 255, .24);
  mix-blend-mode: screen;
}

.void {
  z-index: -8;
  background:
    radial-gradient(circle at 50% 37%, rgba(86, 0, 5, calc(.1 + var(--proximity) * .14)) 0, transparent 27%),
    radial-gradient(ellipse at center, #090304 0%, #020203 48%, #000 100%);
}

.field-grid {
  z-index: -7;
  opacity: calc(.1 + var(--damage) * .035);
  background-image:
    linear-gradient(rgba(255, 20, 30, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 20, 30, .05) 1px, transparent 1px);
  background-size: 52px 52px;
  perspective: 500px;
  transform: scale(1.25) rotate(.001deg);
  mask-image: radial-gradient(ellipse at center, #000 5%, transparent 76%);
  animation: gridBreathe 9s ease-in-out infinite;
}

.vignette {
  z-index: 30;
  box-shadow: inset 0 0 13vw 5vw #000, inset 0 0 3vw 1vw rgba(117, 0, 7, .27);
}

.scanlines {
  z-index: 26;
  opacity: .28;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, .018) 0,
    rgba(255, 255, 255, .018) 1px,
    transparent 1px,
    transparent 4px
  );
  animation: scanDrift 9s linear infinite;
}

.noise {
  z-index: 25;
  opacity: calc(.13 + var(--damage) * .045);
  mix-blend-mode: screen;
  background-image:
    repeating-radial-gradient(circle at 17% 38%, rgba(255, 255, 255, .08) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 73% 62%, rgba(255, 0, 20, .09) 0 1px, transparent 1px 5px);
  background-size: 7px 9px, 11px 13px;
  animation: noiseShift .18s steps(2) infinite;
}

.red-bloom {
  z-index: 20;
  opacity: calc(var(--damage) * .14);
  background: radial-gradient(circle at 50% 39%, transparent 0 12%, rgba(190, 0, 9, .32) 23%, transparent 62%);
  animation: redBreathe 4.8s ease-in-out infinite;
}

.signal-tear {
  z-index: 24;
  opacity: 0;
  mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 20, .7), #fff, transparent);
}

.signal-tear-a {
  height: 3px;
  top: 31%;
}

.signal-tear-b {
  height: 9px;
  top: 72%;
  filter: blur(2px);
}

body.glitch-pulse .signal-tear-a {
  animation: tearAcross .21s steps(2) 1;
}

body.glitch-pulse .signal-tear-b {
  animation: tearAcross .28s .04s steps(3) 1 reverse;
}

.audio-toggle {
  position: fixed;
  top: clamp(14px, 2.5vw, 30px);
  right: clamp(14px, 2.5vw, 30px);
  z-index: 110;
  display: flex;
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(255, 45, 55, .35);
  padding: 9px 12px;
  color: #9f7e80;
  background: rgba(3, 0, 1, .78);
  font-size: 10px;
  letter-spacing: .17em;
  transition: color .15s, border-color .15s, box-shadow .15s;
}

.audio-toggle:hover,
.audio-toggle:focus-visible,
.audio-toggle[aria-pressed="true"] {
  color: #ff757a;
  border-color: rgba(255, 45, 55, .8);
  box-shadow: 0 0 18px rgba(255, 0, 18, .2), inset 0 0 12px rgba(255, 0, 18, .08);
  outline: none;
}

.audio-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4d2225;
  box-shadow: 0 0 0 transparent;
}

.audio-toggle[aria-pressed="true"] .audio-dot {
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
  animation: audioPulse 1.8s ease-in-out infinite;
}

.interrogation {
  position: relative;
  z-index: 5;
  width: min(980px, 92vw);
  min-height: 100dvh;
  margin: 0 auto;
  padding: clamp(26px, 5vh, 56px) 0 clamp(22px, 4vh, 42px);
  display: grid;
  grid-template-rows: auto minmax(220px, 1fr) auto;
  gap: clamp(10px, 2vh, 22px);
  transform: translate(calc(var(--shake) * .35), calc(var(--shake) * -.15));
  transition: filter .5s, opacity .35s;
}

.protocol-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3px 12px;
  border-bottom: 1px solid rgba(255, 32, 40, .18);
}

.node-label,
.stage-readout {
  margin: 0;
  color: #8c696b;
  font-size: clamp(9px, 1.2vw, 12px);
  letter-spacing: .26em;
}

.node-label {
  position: relative;
}

.node-label::before,
.node-label::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

body.glitch-pulse .node-label::before {
  color: #f00;
  opacity: .8;
  transform: translate(3px, -1px);
  clip-path: inset(10% 0 54% 0);
}

body.glitch-pulse .node-label::after {
  color: #7ee7ff;
  opacity: .45;
  transform: translate(-3px, 1px);
  clip-path: inset(64% 0 6% 0);
}

.stage-readout {
  color: #b20a14;
  text-shadow: 0 0 8px rgba(255, 0, 17, .55);
}

.stage-readout .separator {
  color: #513638;
}

.observer {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}

.eye-halo {
  position: absolute;
  width: clamp(250px, 42vw, 520px);
  aspect-ratio: 1.8;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 0, 12, calc(.05 + var(--proximity) * .2)) 0, transparent 67%);
  filter: blur(18px);
  transform: scale(calc(1 + var(--damage) * .05));
  animation: haloThrob 5.5s ease-in-out infinite;
}

.eye {
  position: relative;
  width: clamp(340px, 58vw, 720px);
  aspect-ratio: 1.92;
  filter:
    drop-shadow(0 0 calc(10px + var(--proximity) * 26px) rgba(255, 0, 18, calc(.2 + var(--proximity) * .55)))
    saturate(calc(1.05 + var(--damage) * .22));
  transform: scale(calc(1 + var(--damage) * .025));
  transition: filter .12s linear, transform .7s cubic-bezier(.22,.9,.24,1.2);
}

.eye-image-stack {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-origin: 50% 51%;
  will-change: transform, filter, clip-path;
  animation: apertureFloat 7.4s ease-in-out infinite;
}

.eye-image-stack::before,
.eye-image-stack::after {
  content: "";
  position: absolute;
  z-index: 9;
  left: 4%;
  right: 4%;
  height: 2px;
  opacity: .22;
  background: linear-gradient(90deg, transparent, #ff0018 18% 82%, transparent);
  filter: blur(.4px);
  transform-origin: center;
}

.eye-image-stack::before { top: 19%; transform: rotate(-.5deg) scaleX(.55); }
.eye-image-stack::after { bottom: 20%; transform: rotate(.5deg) scaleX(.55); }

.eye-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter, clip-path;
}

.eye-image-base {
  z-index: 3;
  opacity: calc(.63 + var(--proximity) * .32 + var(--damage) * .025);
  filter:
    brightness(calc(.72 + var(--proximity) * .44 + var(--damage) * .08))
    contrast(1.36)
    saturate(1.25)
    drop-shadow(0 0 calc(8px + var(--proximity) * 17px) rgba(255, 0, 12, calc(.22 + var(--proximity) * .45)));
  animation: eyeEnergy 4.8s ease-in-out infinite;
}

.eye-image-red,
.eye-image-cyan {
  z-index: 4;
  opacity: 0;
  clip-path: inset(0 0 0 0);
}

.eye-image-red {
  filter: saturate(2.6) contrast(1.65) brightness(1.2);
}

.eye-image-cyan {
  filter: hue-rotate(155deg) saturate(2.6) contrast(1.65) brightness(1.45);
  mix-blend-mode: screen;
}

.aperture-shutter {
  position: absolute;
  z-index: 7;
  left: 1%;
  width: 98%;
  height: 52%;
  background: #000;
  transition: transform 110ms cubic-bezier(.85,0,.15,1);
  pointer-events: none;
}

.shutter-top {
  top: -52%;
  clip-path: polygon(0 0, 100% 0, 92% 77%, 71% 82%, 50% 100%, 28% 83%, 8% 77%);
}

.shutter-bottom {
  bottom: -52%;
  clip-path: polygon(8% 23%, 28% 17%, 50% 0, 71% 18%, 92% 23%, 100% 100%, 0 100%);
}

.eye-core {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: clamp(2px, .32vw, 4px);
  height: 26%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(transparent, #ff646b 18%, #ff0017 45% 62%, #5b0006 90%, transparent);
  opacity: calc(.28 + var(--proximity) * .56 + var(--damage) * .05);
  box-shadow: 0 0 9px #ff0017, 0 0 32px rgba(255, 0, 15, .8), 0 0 70px rgba(255,0,18,.42);
  animation: coreBreathe 3.3s ease-in-out infinite;
}

.eye-reticle {
  position: absolute;
  z-index: 10;
  inset: 8% 3%;
  opacity: calc(.14 + var(--damage) * .045);
  border: 1px solid rgba(255, 0, 20, .12);
  clip-path: polygon(0 43%, 3% 43%, 3% 57%, 0 57%, 0 0, 22% 0, 22% 2%, 78% 2%, 78% 0, 100% 0, 100% 43%, 97% 43%, 97% 57%, 100% 57%, 100% 100%, 78% 100%, 78% 98%, 22% 98%, 22% 100%, 0 100%);
  animation: reticlePulse 6.4s ease-in-out infinite;
}

.eye-reticle i {
  position: absolute;
  width: 18px;
  height: 1px;
  background: #ff0018;
  box-shadow: 0 0 7px #ff0018;
}

.eye-reticle i:nth-child(1) { left: 0; top: 50%; }
.eye-reticle i:nth-child(2) { right: 0; top: 50%; }
.eye-reticle i:nth-child(3) { left: 50%; top: 0; transform: rotate(90deg); }
.eye-reticle i:nth-child(4) { left: 50%; bottom: 0; transform: rotate(90deg); }

.eye.is-blinking .eye-image-stack {
  animation: imageBlink 260ms cubic-bezier(.82,0,.18,1) 1;
}

.eye.is-blinking .shutter-top { transform: translateY(93%); }
.eye.is-blinking .shutter-bottom { transform: translateY(-93%); }

.eye.is-seizing .eye-image-base {
  animation: eyeSeizure 620ms steps(7) 1;
}

.eye.is-seizing .eye-image-red {
  animation: redChannelTear 620ms steps(8) 1;
}

.eye.is-seizing .eye-image-cyan {
  animation: cyanChannelTear 620ms steps(8) 1;
}

.eye.is-overloaded .eye-image-stack {
  animation: eyeOverload 1.35s steps(12) forwards;
}

.eye.is-overloaded .eye-image-red,
.eye.is-overloaded .eye-image-cyan {
  opacity: .8;
  animation: overloadChannels .16s steps(2) infinite alternate;
}

.eye-shell {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: polygon(50% 2%, 96% 50%, 50% 98%, 4% 50%);
  background: #010101;
  border: 1px solid rgba(166, 0, 10, .3);
  transform-origin: center;
  animation: eyeIdle 6s ease-in-out infinite;
}

.eye-shell::before,
.eye-shell::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.eye-shell::before {
  background: linear-gradient(105deg, transparent 30%, rgba(255, 20, 28, .1), transparent 63%);
  transform: translateX(-100%);
  animation: eyeSweep 7s 1s ease-in-out infinite;
}

.eye-shell::after {
  background: radial-gradient(ellipse at center, transparent 0 18%, rgba(0, 0, 0, .45) 49%, #000 91%);
}

.eye-shell img {
  position: absolute;
  z-index: 1;
  inset: -88% -50%;
  width: 200%;
  height: 276%;
  object-fit: cover;
  object-position: center;
  opacity: calc(.34 + var(--proximity) * .24 + var(--damage) * .06);
  filter: brightness(1.3) contrast(1.3) saturate(1.35);
  mix-blend-mode: screen;
}

.eye-shadow {
  position: absolute;
  z-index: 4;
  inset: 0;
  background: linear-gradient(to bottom, #000 0 23%, transparent 44% 56%, #000 78% 100%);
  opacity: .7;
}

.eye-slit,
.final-slit {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: clamp(2px, .5vw, 5px);
  height: 44%;
  border-radius: 50%;
  background: linear-gradient(#ff6c72, #ff0012 25%, #760007 78%, transparent);
  box-shadow:
    0 0 calc(6px + var(--proximity) * 13px) #ff0018,
    0 0 calc(16px + var(--proximity) * 25px) rgba(255, 0, 15, .78);
  transform: translate(-50%, -50%);
  opacity: calc(.52 + var(--proximity) * .43 + var(--damage) * .04);
}

.eye-flare {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 50%;
  width: 54%;
  height: 2px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(255, 0, 18, .5), #fff, rgba(255, 0, 18, .5), transparent);
  filter: blur(.3px);
  opacity: calc(.12 + var(--proximity) * .36);
}

.eye.is-blinking .eye-shell {
  animation: blinkNow .24s cubic-bezier(.55,0,.45,1) 1;
}

.eye-tick {
  position: absolute;
  width: 26px;
  height: 1px;
  background: rgba(255, 35, 43, .38);
  box-shadow: 0 0 6px rgba(255, 0, 10, .4);
}

.tick-one { left: -10px; top: 28%; transform: rotate(42deg); }
.tick-two { right: -10px; top: 28%; transform: rotate(-42deg); }
.tick-three { left: -10px; bottom: 27%; transform: rotate(-42deg); }
.tick-four { right: -10px; bottom: 27%; transform: rotate(42deg); }

.question-panel {
  position: relative;
  width: min(790px, 100%);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 30px) clamp(20px, 4vw, 42px) clamp(18px, 3vw, 26px);
  border: 1px solid rgba(172, 0, 10, .33);
  background:
    linear-gradient(110deg, rgba(33, 0, 3, .17), transparent 45%),
    rgba(2, 1, 2, .82);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .85),
    0 0 calc(16px + var(--proximity) * 22px) rgba(155, 0, 8, calc(.07 + var(--proximity) * .13)),
    inset 0 0 38px rgba(0, 0, 0, .75);
  backdrop-filter: blur(4px);
  transition: box-shadow .1s linear, border-color .1s;
}

.question-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 28, 37, .7), transparent);
  transform: scaleX(calc(.2 + var(--proximity) * .8));
  transition: transform .12s linear;
}

.panel-corner {
  position: absolute;
  width: 13px;
  height: 13px;
  border-color: var(--red);
  opacity: .65;
}

.corner-one { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.corner-two { right: -1px; bottom: -1px; border-right: 1px solid; border-bottom: 1px solid; }

.prompt-prefix {
  display: flex;
  justify-content: space-between;
  margin: 0 0 13px;
  color: #a3131a;
  font-size: 10px;
  letter-spacing: .32em;
}

.question-text {
  position: relative;
  min-height: 3.7em;
  margin: 0 0 clamp(18px, 3vh, 28px);
  color: #cbbabb;
  font-size: clamp(12px, 1.5vw, 15px);
  line-height: 1.75;
  letter-spacing: .055em;
  text-wrap: balance;
  text-shadow: 0 0 12px rgba(255, 0, 10, .08);
}

.question-text::before,
.question-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.question-text::before {
  color: #ff2434;
  text-shadow: 2px 0 #ff0018;
}

.question-text::after {
  color: #91efff;
  text-shadow: -2px 0 #00d9ff;
}

body.glitch-pulse .question-text::before {
  opacity: .78;
  animation: textSliceTop 260ms steps(6) 1;
}

body.glitch-pulse .question-text::after {
  opacity: .46;
  animation: textSliceBottom 260ms steps(7) 1;
}

body.glitch-pulse .rgb-frame,
body.answer-impact .rgb-frame,
body.pre-rupture .rgb-frame {
  animation: rgbFrameBurst 420ms steps(5) 1;
}

body.answer-impact .question-panel {
  animation: panelImpact 680ms steps(7) 1;
}

body.pre-rupture .interrogation {
  animation: preRupture 860ms steps(10) infinite;
}

body.pre-rupture .noise {
  opacity: .62;
}

body.pre-rupture .red-bloom {
  animation: ruptureBloom 740ms ease-in-out infinite alternate;
}

.question-text.morphing {
  color: #ff2430;
  text-shadow: 2px 0 #fff, -2px 0 #710008;
}

.answer-form {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  border: 1px solid rgba(255, 38, 47, .32);
  background: rgba(0, 0, 0, .76);
  box-shadow: inset 0 0 22px rgba(105, 0, 7, .08);
  overflow: hidden;
}

.answer-form::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 20, .18), transparent);
  transform: translateX(-120%);
}

.answer-form:focus-within::after {
  animation: inputSweep 2.8s ease-in-out infinite;
}

.input-prompt {
  padding-left: 16px;
  color: var(--red);
  text-shadow: 0 0 9px var(--red);
  animation: promptBlink 1.1s steps(1) infinite;
}

.answer-form input {
  width: 100%;
  min-width: 0;
  height: 48px;
  border: 0;
  outline: 0;
  padding: 0 14px;
  color: #f2d9da;
  caret-color: var(--red);
  background: transparent;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.answer-form input::placeholder {
  color: #50383a;
  opacity: 1;
}

.answer-form button {
  align-self: stretch;
  border: 0;
  border-left: 1px solid rgba(255, 38, 47, .25);
  padding: 0 clamp(12px, 2.7vw, 24px);
  color: #a9787b;
  background: rgba(40, 0, 4, .22);
  font-size: 10px;
  letter-spacing: .18em;
  transition: color .14s, background .14s, text-shadow .14s;
}

.answer-form button:hover,
.answer-form button:focus-visible {
  color: #ff7177;
  background: rgba(100, 0, 8, .25);
  text-shadow: 0 0 8px #ff0015;
  outline: none;
}

.answer-form input:disabled,
.answer-form button:disabled {
  opacity: .36;
  cursor: wait;
}

.response-text {
  min-height: 1em;
  margin: 13px 0 0;
  color: #654d4f;
  font-size: 9px;
  letter-spacing: .2em;
}

.response-text.accepted {
  color: #ff333e;
  text-shadow: 0 0 10px rgba(255, 0, 18, .65);
}

.response-text.denied {
  color: #f1c4c6;
  animation: deniedText .11s steps(2) 4;
}

.crack-field {
  z-index: 4;
  opacity: 1;
  overflow: hidden;
}

.crack-segment {
  --level: 1;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--length);
  height: var(--thickness);
  opacity: 0;
  transform: rotate(var(--angle)) scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #fff 0, var(--red) 7%, #790007 52%, transparent 100%);
  box-shadow: 0 0 7px rgba(255, 0, 16, .7), 0 0 18px rgba(119, 0, 6, .35);
  transition:
    transform .85s cubic-bezier(.12,.78,.19,1),
    opacity .2s;
}

.crack-segment::after {
  content: "";
  position: absolute;
  left: 63%;
  top: 0;
  width: 42%;
  height: 100%;
  background: inherit;
  box-shadow: inherit;
  transform: rotate(calc(var(--branch) * 1deg));
  transform-origin: left center;
}

body.damage-1 .crack-segment[data-level="1"],
body.damage-2 .crack-segment[data-level="1"],
body.damage-2 .crack-segment[data-level="2"],
body.damage-3 .crack-segment {
  opacity: var(--crack-opacity);
  transform: rotate(var(--angle)) scaleX(1);
}

body.damage-1 { --damage: 1; --shake: 0px; }
body.damage-2 { --damage: 2; --shake: 1px; }
body.damage-3 { --damage: 3; --shake: 2px; }

body.damage-2 .interrogation {
  animation: damagedJitter 4.2s steps(2) infinite;
}

body.damage-3 .interrogation {
  animation: damagedJitter 1.7s steps(2) infinite;
}

body.damage-2 .question-panel,
body.damage-3 .question-panel {
  clip-path: polygon(0 2%, 96% 0, 100% 8%, 99% 93%, 93% 100%, 3% 98%, 0 91%);
}

body.answer-impact .interrogation {
  animation: answerImpact .56s steps(3) 1;
}

body.answer-impact .eye {
  filter: drop-shadow(0 0 42px rgba(255, 0, 14, .95)) brightness(1.6) contrast(1.45);
}

body.wrong-answer .question-panel {
  animation: wrongShake .34s steps(4) 1;
  border-color: #fff;
}

.white-stage,
.shatter,
.crash,
.blackout,
.red-static {
  position: fixed;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.shatter {
  z-index: 80;
  opacity: 0;
  background:
    conic-gradient(from 11deg at 50% 42%, transparent 0 4deg, #fff 4.4deg 5.2deg, transparent 5.6deg 19deg, #f20a1a 19.4deg 20.2deg, transparent 21deg 48deg, #fff 48.3deg 49deg, transparent 49.4deg 100deg, #ff0018 100.3deg 101.4deg, transparent 102deg 167deg, #fff 167.4deg 168.1deg, transparent 169deg 231deg, #ff0018 231.3deg 232.2deg, transparent 233deg 300deg, #fff 300.4deg 301deg, transparent 302deg),
    radial-gradient(circle at 50% 42%, #fff 0 1%, #ff061b 2%, transparent 16%);
}

body.shatter-active .shatter {
  visibility: visible;
  animation: shatterBlast 1.5s cubic-bezier(.06,.78,.04,1) forwards;
}

body.shatter-active .interrogation {
  animation: collapseAway 1.15s steps(5) forwards;
}

.white-stage {
  z-index: 70;
  display: grid;
  place-items: center;
  color: #080808;
  background: #f1eeee;
  opacity: 0;
  overflow: hidden;
}

body.white-active .white-stage {
  visibility: visible;
  pointer-events: auto;
  animation: whiteReveal .65s steps(4) forwards;
}

.white-wave,
.white-noise {
  position: absolute;
  inset: -15%;
  pointer-events: none;
}

.white-wave {
  opacity: .22;
  background: repeating-radial-gradient(ellipse at 50% 50%, transparent 0 26px, rgba(0, 0, 0, .09) 27px 28px, transparent 29px 53px);
  animation: whiteWave 8s linear infinite;
}

.white-noise {
  opacity: .12;
  mix-blend-mode: multiply;
  background-image: repeating-radial-gradient(circle at 33% 57%, #111 0 1px, transparent 1px 4px);
  background-size: 6px 7px;
  animation: noiseShift .22s steps(2) infinite;
}

.final-eye {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(74vw, 1040px);
  aspect-ratio: 1.86;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.72);
  clip-path: polygon(50% 2%, 99% 50%, 50% 98%, 1% 50%);
  filter: contrast(1.55) brightness(.72) saturate(.82);
  transition: opacity 1.6s ease, transform 2.4s cubic-bezier(.13,.7,.2,1);
}

.final-eye.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.final-eye img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: var(--eye-opacity, .08);
  transition: opacity 1.5s ease;
}

.final-eye::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse, transparent 0 13%, #000 52%, #000 100%);
  opacity: calc(var(--eye-opacity, .08) * .9);
  transition: opacity 1.5s ease;
}

.final-slit {
  z-index: 4;
  width: 3px;
  height: 27%;
  opacity: calc(.34 + var(--eye-opacity, .08) * 2.2);
  box-shadow: 0 0 8px #f00, 0 0 20px rgba(255, 0, 0, .7);
  transition: opacity 1.5s ease;
}

.final-message {
  position: relative;
  z-index: 3;
  width: min(920px, 88vw);
  min-height: 11em;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .7em;
  padding: 30px;
  color: #090909;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(22px, 3vw, 46px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-align: center;
  text-wrap: balance;
  text-shadow: 1px 0 rgba(255, 0, 0, .24), -1px 0 rgba(0, 90, 130, .2);
}

.final-message p {
  position: relative;
  margin: 0;
  opacity: .92;
}

.final-message p::before,
.final-message p::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.final-message p.corrupting::before {
  color: #d80015;
  opacity: .24;
  animation: finalTextSliceA 250ms steps(6) 1;
}

.final-message p.corrupting::after {
  color: #006c88;
  opacity: .2;
  animation: finalTextSliceB 250ms steps(7) 1;
}

.final-message p:last-child {
  margin-top: .65em;
}

.caret {
  display: inline-block;
  width: .42em;
  height: .9em;
  margin-left: .12em;
  background: #111;
  vertical-align: -.04em;
  animation: caretBlink .6s steps(1) infinite;
}

.crash {
  z-index: 95;
  overflow: hidden;
  background: transparent;
}

body.crash-active .crash {
  visibility: visible;
  animation: crashField 3.15s steps(2) forwards;
}

body.crash-active .white-stage {
  animation: whiteCorrupt 2.8s steps(9) forwards;
}

body.crash-active .rgb-frame {
  animation: rgbFrameCollapse 2.8s steps(13) forwards;
}

body.crash-active .scanlines {
  opacity: .82;
  animation: scanCollapse 280ms steps(4) infinite;
}

body.crash-active .vignette {
  animation: vignetteCrush 2.7s steps(8) forwards;
}

.crash-bar {
  position: absolute;
  left: -20%;
  width: 140%;
  opacity: 0;
  mix-blend-mode: difference;
  filter: saturate(2);
}

.bar-a { top: 12%; height: 14%; background: #ff0019; }
.bar-b { top: 36%; height: 5%; background: #fff; }
.bar-c { top: 58%; height: 22%; background: #00e7ff; }
.bar-d { top: 84%; height: 8%; background: #ff00ae; }

body.crash-active .bar-a { animation: crashBar .21s .05s steps(2) 8; }
body.crash-active .bar-b { animation: crashBar .13s .14s steps(2) 12 reverse; }
body.crash-active .bar-c { animation: crashBar .18s .3s steps(2) 9; }
body.crash-active .bar-d { animation: crashBar .11s .48s steps(2) 12 reverse; }

.chromatic-eye {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22vw;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 3px solid #f00;
  box-shadow: 18px 0 #00e6ff, -18px 0 #fff, 0 0 120px #f00;
  opacity: 0;
}

body.crash-active .chromatic-eye {
  animation: chromaticEye 1.9s .18s steps(5) forwards;
}

.blackout {
  z-index: 100;
  display: grid;
  place-items: center;
  background: #000;
}

body.blackout-active .blackout {
  visibility: visible;
}

.inverse-wave {
  width: 10px;
  aspect-ratio: 1;
  border: 2px solid #ff0017;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 14px #ff0017, inset 0 0 14px #ff0017;
}

body.blackout-active .inverse-wave {
  animation: inverseWave 1.65s cubic-bezier(.05,.72,.11,1) forwards;
}

.red-static {
  z-index: 105;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #160003;
  opacity: 0;
}

body.static-active .red-static {
  visibility: visible;
  opacity: 1;
}

.red-static-noise,
.red-static::before,
.red-static::after {
  content: "";
  position: absolute;
  inset: -30%;
}

.red-static-noise {
  opacity: .78;
  background-image:
    repeating-radial-gradient(circle at 10% 30%, #ff0a20 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 70% 80%, #750006 0 1px, #050001 1px 4px);
  background-size: 5px 7px, 9px 6px;
  animation: redNoise .11s steps(2) infinite;
}

.red-static::before {
  z-index: 2;
  opacity: .7;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0, 0, 0, .68) 4px 6px);
  animation: staticRoll 1.4s linear infinite;
}

.red-static::after {
  z-index: 3;
  background: radial-gradient(ellipse at center, transparent 0 22%, rgba(0, 0, 0, .54) 62%, #000 100%);
  animation: staticBreathe 4s ease-in-out infinite;
}

.red-static p {
  position: relative;
  z-index: 4;
  margin: 0;
  color: rgba(0, 0, 0, .76);
  background: rgba(255, 20, 35, .13);
  padding: 8px 11px;
  font-size: clamp(9px, 1vw, 12px);
  font-weight: 800;
  letter-spacing: .38em;
  text-shadow: 1px 0 rgba(255, 70, 80, .35);
  animation: carrierGlitch 1.9s steps(2) infinite;
}

.red-static p span {
  color: rgba(255, 73, 82, .45);
}

@keyframes gridBreathe { 50% { opacity: .18; transform: scale(1.29) rotate(.001deg); } }
@keyframes scanDrift { to { transform: translateY(8px); } }
@keyframes noiseShift { 0% { transform: translate(0); } 25% { transform: translate(2px, -3px); } 50% { transform: translate(-3px, 1px); } 75% { transform: translate(3px, 2px); } }
@keyframes redBreathe { 50% { transform: scale(1.14); opacity: calc(var(--damage) * .2); } }
@keyframes tearAcross { 0% { opacity: 0; transform: translateX(-80%) scaleX(.1); } 22% { opacity: .9; } 100% { opacity: 0; transform: translateX(80%) scaleX(.55); } }
@keyframes audioPulse { 50% { opacity: .45; box-shadow: 0 0 4px var(--red); } }
@keyframes haloThrob { 50% { transform: scale(calc(1.05 + var(--damage) * .05)); filter: blur(24px); } }
@keyframes eyeIdle { 0%, 100% { transform: scaleY(.91); } 50% { transform: scaleY(1); } }
@keyframes eyeSweep { 0%, 69% { transform: translateX(-120%); } 88%, 100% { transform: translateX(120%); } }
@keyframes blinkNow { 0%, 100% { transform: scaleY(.94); } 46%, 58% { transform: scaleY(.025); } }
@keyframes inputSweep { 0%, 40% { transform: translateX(-120%); } 70%, 100% { transform: translateX(120%); } }
@keyframes promptBlink { 0%, 54% { opacity: 1; } 55%, 100% { opacity: .25; } }
@keyframes deniedText { 50% { transform: translateX(3px); color: #f00; } }
@keyframes damagedJitter { 0%, 93%, 100% { transform: translate(0); } 94% { transform: translate(calc(var(--shake) * -2), var(--shake)); } 96% { transform: translate(calc(var(--shake) * 2), calc(var(--shake) * -1)); } }
@keyframes answerImpact { 0% { transform: scale(1); filter: none; } 20% { transform: scale(1.018) translateX(-7px); filter: contrast(2) brightness(1.5); } 42% { transform: scale(.99) translateX(9px); filter: hue-rotate(28deg); } 100% { transform: scale(1); filter: none; } }
@keyframes wrongShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-9px) skewX(-2deg); } 50% { transform: translateX(7px); } 75% { transform: translateX(-3px) skewX(2deg); } }
@keyframes shatterBlast { 0% { opacity: 0; transform: scale(.02) rotate(0); filter: brightness(5); } 12% { opacity: 1; } 48% { opacity: .92; transform: scale(2.2) rotate(1deg); } 100% { opacity: 0; transform: scale(4.8) rotate(-2deg); } }
@keyframes collapseAway { 0% { opacity: 1; transform: scale(1); } 14% { filter: contrast(4) brightness(2); transform: scale(1.03) skewX(-2deg); } 38% { transform: scale(.95) skewX(4deg); } 100% { opacity: 0; transform: scale(1.4); filter: brightness(6); } }
@keyframes whiteReveal { 0% { opacity: 0; filter: brightness(7); } 28% { opacity: 1; filter: brightness(2); } 45% { opacity: .35; } 100% { opacity: 1; filter: none; } }
@keyframes whiteWave { to { transform: scale(1.18) rotate(.001deg); } }
@keyframes caretBlink { 50% { opacity: 0; } }
@keyframes crashField { 0% { background: transparent; } 8% { background: #fff; } 10% { background: #f00; } 17% { background: transparent; } 38% { background: rgba(0, 255, 255, .3); } 41% { background: #fff; } 67% { background: #c00013; } 70% { background: transparent; } 95% { background: #000; } 100% { background: #000; } }
@keyframes whiteCorrupt { 0% { filter: none; transform: none; } 12% { filter: invert(1) contrast(4); transform: translateX(20px) skewX(6deg); } 29% { filter: hue-rotate(150deg) contrast(5); transform: translateX(-32px) scaleY(.9); } 45% { filter: invert(1); transform: translateY(15px) skewY(-3deg); } 68% { filter: contrast(8) brightness(3); transform: scale(1.08); } 100% { opacity: 0; filter: brightness(0); } }
@keyframes crashBar { 0% { opacity: 0; transform: translateX(-28%) skewX(18deg); } 50% { opacity: .92; transform: translateX(17%) skewX(-11deg); } 100% { opacity: 0; transform: translateX(37%); } }
@keyframes chromaticEye { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(.2); } 22% { opacity: 1; transform: translate(-47%, -50%) rotate(42deg) scale(1.2); } 47% { transform: translate(-54%, -48%) rotate(50deg) scale(.7); filter: invert(1); } 78% { opacity: 1; transform: translate(-50%, -50%) rotate(225deg) scale(4); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(405deg) scale(8); } }
@keyframes inverseWave { 0% { opacity: 1; transform: scale(.2); } 45% { opacity: .9; } 100% { opacity: 0; transform: scale(170); border-width: 1px; } }
@keyframes redNoise { 0% { transform: translate(0) scale(1.1); } 25% { transform: translate(3%, -2%) scale(1.06); } 50% { transform: translate(-2%, 3%) scale(1.13); } 75% { transform: translate(1%, 2%) scale(1.08); } }
@keyframes staticRoll { to { transform: translateY(18px); } }
@keyframes staticBreathe { 50% { transform: scale(.92); opacity: .72; } }
@keyframes carrierGlitch { 0%, 88%, 100% { transform: none; opacity: .66; } 90% { transform: translate(-9px, 2px) skewX(9deg); opacity: 1; } 94% { transform: translate(7px, -1px); } }
@keyframes apertureFloat {
  0%, 100% { transform: translateY(0) scale(1); filter: contrast(1); }
  45% { transform: translateY(-3px) scale(1.012); filter: contrast(1.08); }
  52% { transform: translateY(-2px) scale(.998); }
}
@keyframes eyeEnergy {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translateX(0); }
  47% { clip-path: inset(0 0 0 0); transform: translateX(0); }
  48% { clip-path: inset(13% 0 19% 0); transform: translateX(1px); }
  49% { clip-path: inset(0 0 0 0); transform: translateX(-1px); }
  50% { transform: translateX(0); }
}
@keyframes coreBreathe {
  0%, 100% { transform: translate(-50%, -50%) scaleY(.72); filter: brightness(.72); }
  50% { transform: translate(-50%, -50%) scaleY(1.12); filter: brightness(1.55); }
}
@keyframes reticlePulse {
  0%, 100% { transform: scale(.97); opacity: .12; }
  50% { transform: scale(1.015); opacity: calc(.2 + var(--damage) * .06); }
}
@keyframes imageBlink {
  0%, 100% { transform: scaleY(1); filter: brightness(1); }
  43%, 58% { transform: scaleY(.018); filter: brightness(2.2); }
}
@keyframes eyeSeizure {
  0%, 100% { transform: translate(0); clip-path: inset(0); filter: brightness(1); }
  12% { transform: translate(-14px, 2px) skewX(-6deg); clip-path: inset(6% 0 63% 0); filter: brightness(1.7); }
  26% { transform: translate(10px, -3px) skewX(4deg); clip-path: inset(55% 0 5% 0); }
  39% { transform: translate(-5px, 1px); clip-path: inset(21% 0 37% 0); filter: contrast(2.3); }
  53% { transform: translate(17px, 0) skewX(-8deg); clip-path: inset(72% 0 2% 0); }
  68% { transform: translate(-9px, 3px); clip-path: inset(3% 0 74% 0); }
  83% { transform: translate(5px, -2px) skewX(3deg); clip-path: inset(34% 0 20% 0); }
}
@keyframes redChannelTear {
  0%, 100% { opacity: 0; transform: translateX(0); clip-path: inset(0); }
  14% { opacity: .82; transform: translateX(18px); clip-path: inset(8% 0 66% 0); }
  31% { opacity: .5; transform: translateX(-12px); clip-path: inset(62% 0 5% 0); }
  49% { opacity: .74; transform: translateX(9px); clip-path: inset(32% 0 38% 0); }
  72% { opacity: .42; transform: translateX(-18px); clip-path: inset(75% 0 0 0); }
}
@keyframes cyanChannelTear {
  0%, 100% { opacity: 0; transform: translateX(0); clip-path: inset(0); }
  18% { opacity: .54; transform: translateX(-16px); clip-path: inset(67% 0 4% 0); }
  36% { opacity: .36; transform: translateX(13px); clip-path: inset(4% 0 72% 0); }
  58% { opacity: .46; transform: translateX(-8px); clip-path: inset(41% 0 29% 0); }
  82% { opacity: .28; transform: translateX(20px); clip-path: inset(19% 0 54% 0); }
}
@keyframes eyeOverload {
  0% { transform: scale(1); filter: brightness(1) contrast(1); }
  14% { transform: scale(1.06, .94) translateX(-9px); filter: brightness(1.7) contrast(2); }
  28% { transform: scale(.98, 1.09) translateX(13px) skewX(5deg); }
  43% { transform: scale(1.11, .9) translateX(-17px) skewX(-8deg); filter: brightness(2.2) contrast(2.8); }
  62% { transform: scale(.92, 1.14) translateX(11px); }
  80% { transform: scale(1.2, .78); filter: brightness(3.4) contrast(4); }
  100% { transform: scale(1.42, .06); filter: brightness(8) contrast(5); opacity: .2; }
}
@keyframes overloadChannels {
  from { transform: translateX(-20px); clip-path: inset(8% 0 54% 0); }
  to { transform: translateX(22px); clip-path: inset(61% 0 3% 0); }
}
@keyframes textSliceTop {
  0% { transform: translate(0); clip-path: inset(0 0 82% 0); }
  20% { transform: translate(7px,-1px); clip-path: inset(13% 0 57% 0); }
  48% { transform: translate(-5px,1px); clip-path: inset(46% 0 31% 0); }
  73% { transform: translate(9px,0); clip-path: inset(69% 0 7% 0); }
  100% { transform: translate(0); clip-path: inset(100% 0 0 0); }
}
@keyframes textSliceBottom {
  0% { transform: translate(0); clip-path: inset(79% 0 0 0); }
  24% { transform: translate(-8px,1px); clip-path: inset(56% 0 18% 0); }
  51% { transform: translate(6px,-1px); clip-path: inset(31% 0 46% 0); }
  78% { transform: translate(-10px,0); clip-path: inset(7% 0 71% 0); }
  100% { transform: translate(0); clip-path: inset(0 0 100% 0); }
}
@keyframes rgbFrameBurst {
  0%, 100% { opacity: 0; transform: scale(1); }
  13% { opacity: .9; transform: scaleX(1.028); }
  29% { opacity: .26; transform: scaleX(.985) translateX(-8px); }
  47% { opacity: .72; transform: scaleX(1.016) translateX(11px); }
  71% { opacity: .18; transform: scaleX(.994); }
}
@keyframes panelImpact {
  0%, 100% { transform: translate(0); filter: none; clip-path: inset(0); }
  12% { transform: translate(-13px, 2px) skewX(-3deg); filter: brightness(1.6) contrast(2); clip-path: inset(0 0 77% 0); }
  27% { transform: translate(11px, -3px) skewX(2deg); clip-path: inset(22% 0 44% 0); }
  44% { transform: translate(-7px, 1px); clip-path: inset(54% 0 12% 0); }
  63% { transform: translate(6px, 0); filter: contrast(1.6); clip-path: inset(9% 0 66% 0); }
  81% { transform: translate(-2px, 0); clip-path: inset(0); }
}
@keyframes preRupture {
  0%, 100% { transform: translate(0); filter: contrast(1); }
  18% { transform: translate(-3px,1px); filter: contrast(1.25); }
  41% { transform: translate(4px,-2px) skewX(1deg); filter: contrast(1.6) brightness(1.14); }
  66% { transform: translate(-6px,2px) skewX(-1.5deg); filter: contrast(1.35); }
  83% { transform: translate(2px,-1px); }
}
@keyframes ruptureBloom {
  from { opacity: .32; transform: scale(.8); filter: blur(20px); }
  to { opacity: .92; transform: scale(1.5); filter: blur(8px); }
}
@keyframes finalTextSliceA {
  0% { transform: translateX(0); clip-path: inset(0 0 76% 0); }
  25% { transform: translateX(7px); clip-path: inset(26% 0 51% 0); }
  55% { transform: translateX(-5px); clip-path: inset(53% 0 23% 0); }
  100% { transform: translateX(0); clip-path: inset(100% 0 0 0); }
}
@keyframes finalTextSliceB {
  0% { transform: translateX(0); clip-path: inset(74% 0 0 0); }
  30% { transform: translateX(-8px); clip-path: inset(47% 0 29% 0); }
  67% { transform: translateX(5px); clip-path: inset(19% 0 58% 0); }
  100% { transform: translateX(0); clip-path: inset(0 0 100% 0); }
}
@keyframes rgbFrameCollapse {
  0% { opacity: 0; transform: scale(1); }
  7% { opacity: 1; transform: scale(1.05, .97) translateX(18px); }
  18% { opacity: .3; transform: scale(.97, 1.08) translateX(-28px); }
  33% { opacity: .92; transform: scale(1.12, .89) skewX(7deg); }
  48% { opacity: .2; transform: scale(.91, 1.16) skewX(-9deg); }
  66% { opacity: 1; transform: scale(1.2, .7); filter: hue-rotate(80deg); }
  81% { opacity: .74; transform: scale(.8, 1.34); }
  100% { opacity: 0; transform: scale(1.5, .03); }
}
@keyframes scanCollapse {
  0% { transform: translateY(-12px) scaleY(.8); }
  50% { transform: translateY(14px) scaleY(1.3); }
  100% { transform: translateY(-3px) scaleY(.5); }
}
@keyframes vignetteCrush {
  0% { box-shadow: inset 0 0 13vw 5vw #000; }
  45% { box-shadow: inset 0 0 24vw 10vw #000, inset 18vw 0 22vw rgba(255,0,20,.5), inset -18vw 0 22vw rgba(0,210,255,.3); }
  78% { box-shadow: inset 0 0 38vw 20vw #000; }
  100% { box-shadow: inset 0 0 80vw 48vw #000; }
}

@media (max-height: 760px) {
  .interrogation {
    padding-top: 22px;
    padding-bottom: 18px;
    grid-template-rows: auto minmax(150px, 1fr) auto;
  }

  .eye {
    width: clamp(300px, 51vw, 620px);
  }

  .question-panel {
    padding-top: 17px;
    padding-bottom: 16px;
  }

  .question-text {
    line-height: 1.55;
    margin-bottom: 16px;
  }
}

@media (max-width: 600px) {
  .interrogation {
    width: 90vw;
    padding-top: 66px;
  }

  .protocol-header {
    align-items: flex-end;
    gap: 14px;
  }

  .eye {
    width: min(96vw, 520px);
  }

  .node-label {
    max-width: 70%;
    line-height: 1.55;
  }

  .answer-form {
    grid-template-columns: auto 1fr;
  }

  .answer-form button {
    grid-column: 1 / -1;
    min-height: 38px;
    border-left: 0;
    border-top: 1px solid rgba(255, 38, 47, .25);
  }

  .question-text {
    min-height: 7em;
  }

  .final-eye {
    width: 108vw;
  }

  .final-message {
    padding: 18px;
    font-size: clamp(20px, 6vw, 30px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scanlines,
  .noise,
  .field-grid,
  .eye-shell,
  .eye-shell::before,
  .eye-halo,
  .red-static-noise,
  .red-static::before,
  .red-static::after {
    animation-duration: 12s !important;
  }

  .eye-image-stack,
  .eye-image-base,
  .eye-core,
  .eye-reticle {
    animation-duration: 14s !important;
  }

  body.glitch-pulse .signal-tear {
    display: none;
  }
}