:root {
  --red: #ff1717;
  --deep-red: #6d0000;
  --paper: #d8d4cf;
  --black: #020202;
  --safe-top: max(18px, env(safe-area-inset-top));
  --safe-right: max(18px, env(safe-area-inset-right));
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
  --safe-left: max(18px, env(safe-area-inset-left));
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--black);
}

body {
  color: var(--paper);
  font-family: "Courier New", "Lucida Console", monospace;
  isolation: isolate;
}

.filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

button,
input {
  font: inherit;
}

.interior-haze,
.vault-backdrop,
.pressure-light,
.mechanical-shudder,
.screen-texture,
.boot-curtain {
  position: fixed;
  inset: 0;
}

#site-underlay {
  position: fixed;
  z-index: 1;
  inset: -6px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(118, 0, 0, 0.2), transparent 31%),
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(255, 0, 0, 0.012) 79px 80px),
    #000;
  filter: url("#vhs-wave-distortion");
  will-change: filter;
}

.interior-haze {
  opacity: 0.72;
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(255, 0, 0, 0.018) 5px),
    radial-gradient(ellipse at 50% 52%, rgba(255, 0, 0, 0.08), transparent 43%);
  animation: interior-breathe 8s ease-in-out infinite;
}

.interior-placeholder {
  position: relative;
  z-index: 1;
  width: min(920px, 86vw);
  padding: 32px clamp(24px, 5vw, 64px);
  border: 1px solid rgba(255, 35, 35, 0.3);
  color: rgba(235, 232, 227, 0.7);
  text-align: center;
  letter-spacing: 0.1em;
  background:
    linear-gradient(90deg, rgba(35, 0, 0, 0.72), rgba(0, 0, 0, 0.9) 18% 82%, rgba(35, 0, 0, 0.72)),
    rgba(0, 0, 0, 0.88);
  box-shadow: 0 0 70px rgba(128, 0, 0, 0.13), inset 0 0 38px rgba(255, 0, 0, 0.045);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

.interior-placeholder h1 {
  margin: 14px 0;
  color: rgba(255, 42, 42, 0.56);
  font-size: clamp(1.2rem, 3vw, 2.4rem);
  font-weight: 400;
  letter-spacing: 0.18em;
}

.interior-placeholder p {
  margin: 0;
  font-size: clamp(0.58rem, 1.15vw, 0.78rem);
  line-height: 1.7;
}

.interior-kicker {
  color: rgba(220, 216, 212, 0.44);
}

.intrusion-line {
  min-height: 1.7em;
  color: rgba(255, 50, 50, 0.72);
  font-size: clamp(0.52rem, 0.96vw, 0.72rem) !important;
  letter-spacing: 0.19em;
  text-shadow: 0 0 9px rgba(255, 0, 0, 0.72);
  white-space: nowrap;
  overflow: hidden;
  animation: intrusion-line-flicker 0.16s steps(2, end) infinite;
}

.interior-mark {
  width: 18px;
  height: 18px;
  margin: 0 auto 22px;
  border: 1px solid rgba(255, 32, 32, 0.5);
  transform: rotate(45deg);
  box-shadow: 0 0 16px rgba(255, 0, 0, 0.25);
}

#vault-intro {
  position: fixed;
  z-index: 20;
  inset: -6px;
  overflow: hidden;
  background: transparent;
  contain: strict;
  filter: url("#vhs-wave-distortion");
  will-change: filter;
}

.vault-backdrop {
  z-index: 0;
  opacity: 0;
  background: transparent;
}

.vault-backdrop::before {
  content: "";
  display: none;
  position: absolute;
  inset: -12%;
  opacity: 0.28;
  background:
    repeating-radial-gradient(circle at center, transparent 0 28px, rgba(255, 0, 0, 0.025) 30px 31px),
    linear-gradient(115deg, transparent 0 44%, rgba(255, 0, 0, 0.03) 45%, transparent 47%);
  animation: vault-field 14s linear infinite;
}

.vault-stack,
.vault-layer,
.star-assembly {
  position: absolute;
  inset: 0;
}

.vault-stack {
  z-index: 2;
  overflow: visible;
  filter: saturate(1.02) contrast(1.03);
  animation: sealed-idle 7s ease-in-out infinite;
  transform-origin: center;
}

.vault-layer {
  pointer-events: none;
  transform-origin: center;
}

.layer-01 { z-index: 1; }
.layer-02 { z-index: 2; }
.layer-03 { z-index: 3; }
.layer-04 { z-index: 4; }
.layer-05 { z-index: 5; }
.layer-06 { z-index: 6; }

.vault-piece,
.star-housing,
.star-emitter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}

.vault-piece {
  filter: url("#vault-rusted-metal") saturate(0.94) contrast(1.06);
}

.piece-top { clip-path: inset(0 0 50% 0); }
.piece-bottom { clip-path: inset(50% 0 0 0); }
.piece-left { clip-path: inset(0 50% 0 0); }
.piece-right { clip-path: inset(0 0 0 50%); }
.piece-nw { clip-path: inset(0 50% 50% 0); }
.piece-ne { clip-path: inset(0 0 50% 50%); }
.piece-sw { clip-path: inset(50% 50% 0 0); }
.piece-se { clip-path: inset(50% 0 0 50%); }

/* Portrait screens use the same registered artwork without rotating it. */
body.portrait-mode .piece-left { clip-path: inset(0 0 50% 0); }
body.portrait-mode .piece-right { clip-path: inset(50% 0 0 0); }

.star-assembly {
  z-index: 7;
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
}

.star-housing {
  z-index: 1;
  filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.3));
}

.star-emitter {
  z-index: 2;
  opacity: 0.3;
  mix-blend-mode: screen;
  filter: brightness(0.82) saturate(1.15) drop-shadow(0 0 12px rgba(255, 0, 0, 0.6));
  transform-origin: center;
}

.star-corona {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(25vw, 44vh);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.18;
  background: radial-gradient(circle, rgba(255, 24, 24, 0.44), rgba(180, 0, 0, 0.08) 38%, transparent 70%);
  transform: translate(-50%, -50%);
  filter: blur(14px);
  will-change: transform, opacity;
}

.pressure-light {
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(255, 0, 0, 0.2), transparent 13%),
    radial-gradient(ellipse at center, rgba(255, 16, 16, 0.09), transparent 46%);
  mix-blend-mode: screen;
}

.steam-field {
  position: fixed;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: opacity;
}

.steam-field-rear {
  z-index: 1;
  filter: saturate(0.68) brightness(0.72);
}

.steam-field-front {
  z-index: 8;
  filter: saturate(0.78) brightness(1.18);
}

.steam-plume {
  --angle: 0deg;
  --distance: 24vh;
  --delay: 0s;
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(70px, 10vw, 210px);
  height: clamp(120px, 22vh, 360px);
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 18%, rgba(255, 244, 241, 0.42), rgba(184, 191, 200, 0.2) 37%, transparent 72%);
  filter: blur(19px) contrast(1.18);
  transform-origin: 50% 0;
  animation: steam-release 2.45s var(--delay) cubic-bezier(.16, .75, .28, 1) infinite;
}

.steam-field-rear .steam-plume {
  width: clamp(130px, 17vw, 330px);
  height: clamp(180px, 31vh, 520px);
  background: radial-gradient(ellipse at 50% 16%, rgba(216, 225, 232, 0.26), rgba(132, 142, 154, 0.16) 40%, transparent 74%);
  filter: blur(27px) contrast(1.08);
}

.steam-field-front .steam-plume {
  width: clamp(90px, 13vw, 250px);
  height: clamp(150px, 27vh, 430px);
}

.mechanical-shudder {
  z-index: 9;
  opacity: 0;
  pointer-events: none;
  box-shadow: inset 0 0 130px rgba(255, 0, 0, 0.18);
  mix-blend-mode: screen;
}

.recording-hud {
  position: fixed;
  z-index: 90;
  top: var(--safe-top);
  right: var(--safe-right);
  left: var(--safe-left);
  color: rgba(226, 222, 217, 0.58);
  font-size: clamp(0.5rem, 0.74vw, 0.72rem);
  line-height: 1;
  letter-spacing: 0.13em;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.16);
  pointer-events: none;
  mix-blend-mode: screen;
}

.recording-topline,
.recording-bottomline {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.recording-bottomline {
  justify-content: space-between;
  margin-top: 7px;
  color: rgba(255, 39, 39, 0.48);
  font-size: 0.87em;
}

.recording-spacer {
  flex: 1;
}

.recording-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ff1d1d;
  box-shadow: 0 0 9px rgba(255, 0, 0, 0.82);
  animation: recording-blink 1.1s steps(2, end) infinite;
}

.recording-rule {
  position: relative;
  height: 1px;
  margin-top: 9px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}

.recording-rule span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 0, 0, 0.12), rgba(255, 42, 42, 0.75));
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
  will-change: width;
}

.audio-arm {
  position: fixed;
  z-index: 100;
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  max-width: min(520px, calc(100vw - 36px));
  padding: 10px 14px;
  border: 1px solid rgba(255, 38, 38, 0.44);
  color: rgba(255, 170, 170, 0.78);
  font-size: clamp(0.48rem, 0.7vw, 0.68rem);
  letter-spacing: 0.12em;
  text-align: left;
  cursor: pointer;
  background: rgba(2, 0, 0, 0.82);
  box-shadow: 0 0 20px rgba(160, 0, 0, 0.16), inset 0 0 20px rgba(255, 0, 0, 0.03);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}

.audio-arm[hidden] {
  display: none;
}

.audio-arm:hover,
.audio-arm:focus-visible {
  color: #ffd0d0;
  border-color: rgba(255, 60, 60, 0.8);
  outline: none;
}

.audio-arm-icon {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
}

.mobile-terminal-warning {
  position: fixed;
  z-index: 180;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  color: #ff2525;
  background:
    radial-gradient(ellipse at center, rgba(35, 0, 0, 0.18), rgba(0, 0, 0, 0.9) 58%, #000 100%),
    rgba(0, 0, 0, 0.92);
  pointer-events: auto;
  touch-action: none;
}

.mobile-terminal-warning::before,
.mobile-terminal-warning::after {
  content: "";
  position: absolute;
  inset: -8%;
  opacity: 0;
  pointer-events: none;
}

.mobile-terminal-warning::before {
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.94) 0 2%, rgba(255, 0, 0, 0.68) 8%, rgba(126, 0, 0, 0.34) 31%, transparent 64%),
    linear-gradient(180deg, transparent 0 47%, rgba(255, 36, 36, 0.9) 49% 51%, transparent 53%);
  mix-blend-mode: screen;
}

.mobile-terminal-warning::after {
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(255, 0, 0, 0.18) 5px),
    linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.22), transparent);
}

.mobile-terminal-warning p {
  position: relative;
  z-index: 2;
  width: min(90vw, 760px);
  margin: 0;
  padding: 20px 16px;
  opacity: 0;
  color: #ff2a2a;
  font: 700 clamp(0.8rem, 3.6vw, 1.5rem)/1.45 "Courier New", monospace;
  letter-spacing: clamp(0.08em, 0.7vw, 0.2em);
  text-align: center;
  text-shadow: 0 0 5px #ff0000, 0 0 18px rgba(255, 0, 0, 0.92), 0 0 48px rgba(255, 0, 0, 0.58);
  border-block: 1px solid rgba(255, 41, 41, 0.78);
  background: linear-gradient(90deg, transparent, rgba(82, 0, 0, 0.74) 18% 82%, transparent);
  transform: scaleX(0.08) translateX(-9px);
}

.mobile-terminal-warning.warning-active::before {
  animation: mobile-warning-flash 1.08s steps(1, end) both;
}

.mobile-terminal-warning.warning-active::after {
  animation: mobile-warning-scan 0.72s steps(5, end) both;
}

.mobile-terminal-warning.warning-active p {
  animation: mobile-warning-message 1.08s steps(9, end) both;
}

body.mobile-terminal-locked #vault-intro {
  background: #000;
  filter: brightness(0.1) contrast(1.4) saturate(0.28);
}

body.mobile-terminal-locked .vault-stack {
  animation: none;
  filter: brightness(0.12) contrast(1.5) saturate(0.18);
}

body.mobile-terminal-locked #site-underlay,
body.mobile-terminal-locked .boot-curtain {
  opacity: 0;
}

body.mobile-terminal-locked .recording-hud {
  z-index: 181;
  opacity: 0.26;
}

.screen-texture {
  z-index: 80;
  opacity: 0.2;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
}

.circuit-event.puzzle-active ~ .screen-texture,
.circuit-event.puzzle-complete ~ .screen-texture {
  opacity: 0.28;
  background:
    linear-gradient(180deg,
      transparent 0 5%, rgba(255, 32, 32, 0.16) 5.1% 5.35%, transparent 5.7% 19%,
      rgba(255, 255, 255, 0.08) 19.1% 19.24%, transparent 19.6% 37%,
      rgba(255, 0, 0, 0.22) 37.1% 37.7%, transparent 38.4% 61%,
      rgba(255, 255, 255, 0.1) 61.1% 61.28%, transparent 61.7% 78%,
      rgba(190, 0, 0, 0.18) 78.1% 78.65%, transparent 79.1% 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 5px);
  animation: puzzle-signal-tear 3.8s steps(1, end) infinite;
}

.vhs-wave-overlay {
  position: fixed;
  z-index: 82;
  inset: -12% 0;
  opacity: 0.17;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      transparent 0 30%,
      rgba(255, 255, 255, 0.035) 37%,
      rgba(255, 24, 24, 0.075) 42%,
      transparent 49% 100%),
    repeating-linear-gradient(180deg,
      transparent 0 17px,
      rgba(255, 255, 255, 0.018) 18px,
      transparent 19px 36px);
  background-size: 100% 230px, 100% 100%;
  mix-blend-mode: screen;
  animation: vhs-wave-roll 6.4s linear infinite;
  will-change: transform, background-position;
}

.screen-texture::before,
.screen-texture::after {
  content: "";
  position: absolute;
  inset: -25%;
}

.screen-texture::before {
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  animation: noise-shift 0.18s steps(2, end) infinite;
}

.screen-texture::after {
  opacity: 0.12;
  background: linear-gradient(180deg, transparent 0 46%, rgba(255, 20, 20, 0.18) 49%, transparent 53%);
  animation: tracking-sweep 8s linear infinite;
}

.boot-curtain {
  z-index: 120;
  background: #000;
  pointer-events: none;
}

body.vault-open #vault-intro {
  pointer-events: none;
}

/* Analog transport scan and containment reversal ---------------------------- */
.transport-overlay,
.containment-overlay {
  position: fixed;
  inset: -8%;
  pointer-events: none;
}

.transport-overlay {
  z-index: 110;
  overflow: hidden;
  opacity: 0;
  color: rgba(255, 245, 245, 0.92);
  text-shadow: 2px 0 rgba(255, 0, 0, 0.72), -2px 0 rgba(160, 210, 255, 0.34), 0 0 12px #fff;
  mix-blend-mode: screen;
}

.transport-label {
  position: absolute;
  z-index: 2;
  top: 11%;
  left: 10%;
  display: inline-flex;
  align-items: baseline;
  gap: .62em;
  line-height: 1;
  white-space: nowrap;
}

.transport-label span,
.transport-label b {
  font-size: clamp(0.72rem, 1.55vw, 1.1rem);
  letter-spacing: 0.14em;
}

.transport-label b {
  font-weight: 400;
  letter-spacing: -0.08em;
}

.transport-overlay::before,
.transport-overlay::after,
.containment-overlay::before,
.containment-overlay::after {
  content: "";
  position: absolute;
  inset: -12%;
}

.transport-overlay::before {
  opacity: 0.72;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.96 .48' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.82'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 255, 255, 0.12) 3px, transparent 5px);
  background-size: 190px 190px, 100% 100%;
  animation: rewind-snow 96ms steps(2, jump-none) infinite;
}

.transport-overlay::after {
  opacity: 0.84;
  background:
    linear-gradient(180deg,
      transparent 0 7%, rgba(255,255,255,.34) 7.2% 7.7%, transparent 8.5% 24%,
      rgba(255,24,24,.28) 24.4% 26.2%, rgba(255,255,255,.5) 26.4% 27%, transparent 28% 63%,
      rgba(255,255,255,.22) 63.3% 64.1%, transparent 65% 82%, rgba(255,0,0,.36) 82.3% 85%, transparent 86%),
    repeating-linear-gradient(90deg, transparent 0 83px, rgba(255,255,255,.08) 84px, transparent 86px 168px);
  background-size: 100% 52%, 100% 100%;
  filter: blur(0.55px);
  animation: rewind-tracking-roll 430ms linear infinite;
}

body.recording-scrub-active .transport-overlay {
  opacity: 0.76;
  animation: rewind-overlay-gate 118ms steps(2, jump-none) infinite;
}

body.recording-scrub-active #site-underlay {
  filter: url("#vhs-wave-distortion") brightness(1.42) contrast(1.32) saturate(0.72);
  animation: rewind-frame-slip 128ms steps(1, jump-end) infinite;
}

body.recording-scrub-active .interior-placeholder,
body.recording-scrub-active .recording-hud {
  animation: rewind-object-hunt 156ms steps(1, jump-end) infinite;
}

body.recording-scrub-active .vhs-wave-overlay {
  z-index: 108;
  opacity: 0.74;
  background-size: 100% 96px, 100% 100%;
  animation: rewind-vhs-roll 310ms linear infinite;
}

body.recording-scrub-active .screen-texture {
  z-index: 109;
  opacity: 0.64;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(255,0,0,.08), rgba(255,255,255,.09), rgba(0,80,150,.06));
  animation: rewind-head-switch 190ms steps(3, jump-none) infinite;
}

body.recording-scrub-active #recording-timecode::after {
  content: " // 4X";
  color: #fff;
  text-shadow: 0 0 9px #ff1b1b;
}

.containment-overlay {
  z-index: 119;
  opacity: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 24%, rgba(0,0,0,.32) 52%, rgba(0,0,0,.92) 100%),
    linear-gradient(180deg, rgba(55,0,0,.12), rgba(0,0,0,.58));
}

.containment-overlay::before {
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 170 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  animation: containment-shadow-noise 1.3s steps(2, end) infinite;
}

.containment-overlay::after {
  opacity: 0.32;
  background:
    radial-gradient(ellipse at 22% 45%, rgba(86,0,0,.24), transparent 23%),
    radial-gradient(ellipse at 76% 61%, rgba(0,0,0,.82), transparent 29%),
    linear-gradient(180deg, transparent 0 43%, rgba(0,0,0,.76) 49%, transparent 56%);
  filter: blur(22px);
  animation: containment-shadow-drift 6.4s ease-in-out infinite alternate;
}

body.vault-locking .containment-overlay {
  opacity: 0.48;
  animation: containment-close-pulse 170ms steps(2, end) infinite;
}

body.vault-locked {
  cursor: pointer;
}

body.terminal-vault-locked {
  cursor: default;
}

body.terminal-vault-ending .credits-stage {
  z-index: 18;
}

body.terminal-vault-ending #vault-intro,
body.terminal-vault-locked #vault-intro {
  z-index: 20;
}

body.vault-locked .containment-overlay {
  opacity: 0.78;
}

body.vault-locking #vault-intro,
body.vault-locked #vault-intro {
  pointer-events: auto;
}

body.vault-locking #vault-intro {
  animation: containment-vault-jitter 130ms steps(1, end) infinite;
}

body.vault-locked #vault-intro {
  filter: url("#vhs-wave-distortion") brightness(0.48) contrast(1.64) saturate(0.52);
}

body.vault-locking .boot-curtain,
body.vault-locked .boot-curtain {
  opacity: 0 !important;
}

[hidden] {
  display: none !important;
}

/* Delayed reconstruction event ------------------------------------------------ */
.circuit-event,
.pervision-stage,
.energy-transition {
  position: fixed;
  inset: 0;
}

.circuit-event {
  z-index: 30;
  inset: -6px;
  overflow: hidden;
  opacity: 0;
  color: #eee;
  background: #000;
  isolation: isolate;
  filter: url("#vhs-wave-distortion");
  will-change: filter, opacity;
}

.circuit-event.charging,
.circuit-event.puzzle-active,
.circuit-event.puzzle-complete {
  opacity: 1;
}

.circuit-void {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(125, 0, 0, 0.2), transparent 30%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(255, 0, 0, 0.022) 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(255, 0, 0, 0.018) 32px),
    #010101;
}

.circuit-network {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  overflow: visible;
  opacity: 0.98;
  filter: drop-shadow(0 0 2px rgba(255, 18, 18, 0.92)) drop-shadow(0 0 9px rgba(160, 0, 0, 0.74));
}

.circuit-path {
  fill: none;
  stroke: #ef1111;
  stroke-width: calc(var(--weight, 1.25) * 2.35px);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--path-length, 1800);
  stroke-dashoffset: var(--path-length, 1800);
  vector-effect: non-scaling-stroke;
  opacity: 0;
}

.circuit-path.layer-b {
  stroke: #8d101c;
}

.circuit-path.differential {
  stroke: #ff3038;
}

.circuit-path.power {
  stroke: #ff1111;
}

.circuit-node {
  fill: #ff1b1b;
  opacity: 0;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px #ff1a1a);
  transform-box: fill-box;
  transform-origin: center;
}

.circuit-footprint {
  fill: rgba(2, 2, 2, 0.74);
  stroke: rgba(255, 30, 30, 0.5);
  stroke-width: 1px;
}

.circuit-pad {
  fill: #ff3434;
}

.circuit-via {
  fill: rgba(255, 24, 24, 0.22);
  stroke: #ff2b2b;
  stroke-width: 1.4px;
}

.circuit-via-hole {
  fill: #020202;
  filter: none;
}

.charging .circuit-path {
  animation: circuit-grow var(--duration, 5s) var(--delay, 0s) cubic-bezier(.12, .72, .2, 1) forwards;
}

.charging .circuit-node {
  animation: circuit-node-arrive 0.28s calc(var(--delay, 0s) + var(--duration, 5s) - 0.2s) ease-out forwards;
}

.circuit-event.whitening .circuit-path {
  stroke: #fff;
  filter: drop-shadow(0 0 3px #ff1818) drop-shadow(0 0 10px #b40000);
  transition: stroke 2.4s ease, filter 2.4s ease;
}

.circuit-event.whitening .circuit-node {
  fill: #fff;
  filter: drop-shadow(0 0 8px #ff0000);
}

.circuit-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(44vw, 64vh);
  aspect-ratio: 1;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12), rgba(255, 0, 0, 0.12) 18%, transparent 66%);
  transform: translate(-50%, -50%) scale(0.2);
  filter: blur(10px);
  mix-blend-mode: screen;
}

.circuit-event.whitening .circuit-core {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.25);
  transition: opacity 2.2s ease, transform 3.8s cubic-bezier(.13, .65, .2, 1);
}

.circuit-status {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: max(30px, 5vh);
  width: min(760px, 86vw);
  margin: 0;
  color: rgba(255, 70, 70, 0.66);
  font-size: clamp(0.52rem, 0.8vw, 0.76rem);
  letter-spacing: 0.18em;
  text-align: center;
  text-shadow: 0 0 12px rgba(255, 0, 0, 0.72);
  transform: translateX(-50%);
}

#puzzle-message {
  position: relative;
  display: inline-block;
}

@supports (clip-path: inset(0)) {
  .circuit-status::before,
  .circuit-status::after,
  #puzzle-message::before,
  #puzzle-message::after {
    content: attr(data-glitch);
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    will-change: clip-path, transform, opacity;
  }

  .circuit-status::before,
  .circuit-status::after {
    text-align: center;
  }

  .charging .circuit-status::before,
  .puzzle-active #puzzle-message::before {
    color: #ff1838;
    text-shadow: -4px 0 rgba(0, 220, 255, 0.5);
    animation: hud-glitch-slice-a 2.15s steps(1, end) infinite;
  }

  .charging .circuit-status::after,
  .puzzle-active #puzzle-message::after {
    color: #fff;
    text-shadow: 4px 0 rgba(255, 0, 70, 0.78);
    animation: hud-glitch-slice-b 2.73s 0.17s steps(1, end) infinite;
  }
}

.circuit-event.fragmenting {
  animation: circuit-screen-fracture 0.72s steps(7, end) both;
}

.circuit-event.fragmenting .circuit-network {
  animation: circuit-network-collapse 0.72s cubic-bezier(.7, 0, 1, .5) both;
}

/* Five full-screen clipped shards share one undistorted source image. */
.puzzle-field {
  position: absolute;
  z-index: 5;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(circle at 51.5% 50.5%, rgba(108, 0, 0, 0.22), transparent 26%),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(255, 255, 255, 0.012) 6px),
    #000;
}

.puzzle-active .puzzle-field,
.puzzle-complete .puzzle-field {
  opacity: 1;
  visibility: visible;
  animation: puzzle-field-arrive 0.48s steps(6, end) both;
}

.puzzle-active .circuit-network,
.puzzle-active .circuit-core,
.puzzle-active .circuit-status,
.puzzle-complete .circuit-network,
.puzzle-complete .circuit-core,
.puzzle-complete .circuit-status {
  opacity: 0;
  transition: opacity 0.18s linear;
}

.puzzle-piece {
  --piece-x: 0px;
  --piece-y: 0px;
  --piece-edge: rgba(255, 22, 22, 0.94);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: transparent;
  cursor: crosshair;
  background: #090909;
  transform: translate3d(var(--piece-x), var(--piece-y), 0);
  filter:
    brightness(0.9)
    drop-shadow(0 0 1px rgba(255, 215, 215, 0.96))
    drop-shadow(0 0 5px rgba(255, 0, 0, 0.96))
    drop-shadow(0 0 16px rgba(145, 0, 0, 0.72));
  transition: transform 0.11s linear, filter 0.16s ease;
  will-change: transform, filter;
}

.shard-01 { z-index: 1; clip-path: polygon(0 0, 44% 0, 51% 18%, 42% 45%, 0 53%); }
.shard-02 { z-index: 3; clip-path: polygon(44% 0, 71% 0, 65% 30%, 75% 52%, 51% 58%, 42% 45%, 51% 18%); }
.shard-03 { z-index: 2; clip-path: polygon(71% 0, 100% 0, 100% 58%, 75% 52%, 65% 30%); }
.shard-04 { z-index: 2; clip-path: polygon(0 53%, 42% 45%, 51% 58%, 48% 100%, 0 100%); }
.shard-05 { z-index: 4; clip-path: polygon(51% 58%, 75% 52%, 100% 58%, 100% 100%, 48% 100%); }

.puzzle-piece img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Every full-screen shard uses this exact same crop. The parent polygons then
     divide one enlarged upper-body image instead of repeating five portraits. */
  object-fit: cover;
  object-position: 50% 12%;
  transform-origin: 50% 12%;
  z-index: 2;
  opacity: 0.44;
  filter: brightness(0.56) contrast(2.05) saturate(0.62) sepia(0.28) hue-rotate(310deg) drop-shadow(0 0 22px #690000);
  -webkit-mask-image: radial-gradient(ellipse 76% 76% at 50% 46%, #000 0 58%, rgba(0, 0, 0, 0.92) 68%, rgba(0, 0, 0, 0.42) 84%, transparent 100%);
  mask-image: radial-gradient(ellipse 76% 76% at 50% 46%, #000 0 58%, rgba(0, 0, 0, 0.92) 68%, rgba(0, 0, 0, 0.42) 84%, transparent 100%);
  animation: shard-image-corruption 1.18s steps(2, end) infinite;
  pointer-events: none;
  user-select: none;
}

.piece-metal,
.piece-circuit,
.piece-chromatic,
.piece-outline,
.puzzle-piece::before,
.puzzle-piece::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.piece-metal {
  z-index: 1;
  opacity: 0.98;
  background:
    linear-gradient(180deg,
      transparent 0 9%, rgba(255, 255, 255, 0.035) 9.15% 9.3%, transparent 9.7% 32%,
      rgba(128, 0, 0, 0.12) 32.2% 33%, transparent 33.7% 69%,
      rgba(255, 32, 32, 0.08) 69.2% 69.8%, transparent 70.4% 100%),
    linear-gradient(132deg, transparent 0 34%, rgba(255, 255, 255, 0.055) 34.2% 34.5%, transparent 34.8% 67%, rgba(255, 0, 0, 0.07) 67.2% 67.5%, transparent 67.8%),
    radial-gradient(ellipse at 48% 44%, #202124 0, #151618 38%, #090a0b 75%, #030303 100%);
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.96),
    inset 0 0 28px rgba(255, 18, 18, 0.12);
}

.piece-circuit {
  z-index: 3;
  --pcb-trace: #ff3038;
  --pcb-layer-b: #98121e;
  --pcb-pad: #ff4148;
  --pcb-via: #ff2b33;
  --pcb-footprint: rgba(255, 30, 36, 0.4);
  opacity: 0.62;
  mix-blend-mode: screen;
}

.piece-board-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.65));
}

.pcb-trace {
  fill: none;
  stroke: var(--pcb-trace);
  stroke-width: calc(var(--pcb-weight, 0.9) * 1.45px);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pcb-trace.layer-b {
  stroke: var(--pcb-layer-b);
  opacity: 0.62;
}

.pcb-trace.power {
  stroke-width: calc(var(--pcb-weight, 1.7) * 1.95px);
}

.pcb-trace.differential {
  stroke-width: calc(var(--pcb-weight, 0.72) * 1.3px);
}

.pcb-pad {
  fill: var(--pcb-pad);
}

.pcb-via {
  fill: rgba(255, 0, 0, 0.18);
  stroke: var(--pcb-via);
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
}

.pcb-via-hole {
  fill: #020202;
}

.pcb-footprint {
  fill: rgba(0, 0, 0, 0.42);
  stroke: var(--pcb-footprint);
  stroke-width: 0.9px;
  vector-effect: non-scaling-stroke;
}

.piece-chromatic {
  z-index: 4;
  opacity: 0.18;
  background:
    linear-gradient(180deg,
      transparent 0 8%, rgba(0, 224, 255, 0.2) 8.1% 8.5%, transparent 8.8% 27%,
      rgba(255, 0, 124, 0.2) 27.1% 27.8%, transparent 28.2% 46%,
      rgba(255, 255, 255, 0.12) 46.1% 46.3%, transparent 46.8% 72%,
      rgba(255, 0, 0, 0.22) 72.1% 73%, transparent 73.5% 100%),
    linear-gradient(90deg, transparent 0 13%, rgba(0, 224, 255, 0.1) 13.2% 14%, transparent 14.3% 68%, rgba(255, 0, 96, 0.12) 68.2% 69%, transparent 69.4% 100%);
  mix-blend-mode: screen;
  animation: panel-chromatic-drift 4.8s steps(1, end) infinite;
}

.piece-outline {
  z-index: 9;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #ff0000) drop-shadow(0 0 13px #8f0000);
}

.piece-outline polygon {
  fill: none;
  stroke: var(--piece-edge);
  stroke-width: 1.15px;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.12s linear, stroke-width 0.12s linear;
}

.puzzle-piece::before {
  z-index: 5;
  opacity: 0.46;
  background:
    linear-gradient(125deg, transparent 0 44%, rgba(255, 0, 0, 0.42) 44.2% 44.5%, transparent 44.8%),
    linear-gradient(180deg, transparent 0 16%, rgba(255, 255, 255, 0.035) 16.1% 16.35%, transparent 16.8% 63%, rgba(255, 0, 0, 0.08) 63.2% 64%, transparent 64.6%);
  mix-blend-mode: screen;
}

.puzzle-piece::after {
  z-index: 7;
  opacity: 0;
  box-shadow: inset 0 0 70px rgba(255, 0, 0, 0.82);
  background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(255, 0, 0, 0.12));
}

.puzzle-piece:hover,
.puzzle-piece:focus-visible,
.puzzle-piece.selected {
  z-index: 8;
  outline: none;
  --piece-edge: #fff5f5;
  filter: brightness(1.1) drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px #ff1d1d) drop-shadow(0 0 22px rgba(255, 0, 0, 0.96));
}

.puzzle-piece:hover .piece-outline polygon,
.puzzle-piece:focus-visible .piece-outline polygon,
.puzzle-piece.selected .piece-outline polygon {
  stroke-width: 1.65px;
}

.puzzle-piece:hover::after,
.puzzle-piece:focus-visible::after,
.puzzle-piece.selected::after {
  opacity: 0.72;
}

.puzzle-piece.selected {
  animation: selected-circuit-surge 0.82s steps(4, end) infinite;
}

.puzzle-piece.locked {
  cursor: not-allowed;
  filter: brightness(0.48) contrast(1.65) drop-shadow(0 0 2px rgba(255, 180, 180, 0.8)) drop-shadow(0 0 11px rgba(255, 0, 0, 0.78));
  animation: locked-shard-corruption 0.34s steps(2, end) infinite;
}

.puzzle-piece.solved {
  --piece-edge: rgba(198, 242, 255, 0.94);
  z-index: 5;
  cursor: default;
  background: #010304;
  filter: brightness(1) drop-shadow(0 0 5px rgba(89, 194, 255, 0.4));
}

.puzzle-piece.solved img,
.puzzle-piece.solved .piece-chromatic {
  opacity: 0;
}

.puzzle-piece.solved .piece-metal {
  background:
    linear-gradient(132deg, transparent 0 34%, rgba(200, 244, 255, 0.06) 34.2% 34.5%, transparent 34.8% 67%, rgba(62, 175, 255, 0.08) 67.2% 67.5%, transparent 67.8%),
    linear-gradient(180deg, transparent 0 22%, rgba(168, 232, 255, 0.04) 22.1% 22.35%, transparent 22.8% 71%, rgba(62, 175, 255, 0.06) 71.2% 71.8%, transparent 72.2%),
    radial-gradient(ellipse at 48% 44%, #11191d 0, #080d10 54%, #010304 100%);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.9), inset 0 0 32px rgba(40, 162, 255, 0.08);
}

.puzzle-piece.solved .piece-outline {
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px #47bfff) drop-shadow(0 0 16px rgba(0, 88, 255, 0.7));
}

.puzzle-piece.solved .piece-circuit {
  --pcb-trace: #e9faff;
  --pcb-layer-b: #3c91bd;
  --pcb-pad: #dff8ff;
  --pcb-via: #79d1ff;
  --pcb-footprint: rgba(143, 220, 255, 0.5);
  opacity: 0.56;
  filter: drop-shadow(0 0 4px #187fba);
}

.puzzle-piece.solved::before {
  opacity: 0.22;
  background: radial-gradient(circle at 50% 50%, rgba(130, 221, 255, 0.12), transparent 55%);
}

.puzzle-piece.solved:hover,
.puzzle-piece.solved:focus-visible {
  filter: brightness(1.08) drop-shadow(0 0 7px rgba(114, 216, 255, 0.72));
}

.puzzle-piece.snapping {
  animation: shard-confirm 0.52s cubic-bezier(.08, .9, .22, 1) both;
}

.puzzle-piece.failing {
  animation: shard-rejected 0.48s steps(6, end) both;
}

.puzzle-piece.unsealed {
  animation: fifth-shard-unseal 1.1s steps(7, end) both;
}

.fracture-texture {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  width: max(76vw, 82vh);
  max-width: none;
  height: auto;
  opacity: 0;
  clip-path: circle(var(--fracture-reveal, 0%) at 48% 39%);
  transform: translate(-48%, -39%) scale(var(--fracture-scale, 0.98));
  transform-origin: 48% 39%;
  mix-blend-mode: screen;
  filter: grayscale(1) sepia(0.36) saturate(1.5) brightness(0.72) contrast(1.58) drop-shadow(0 0 3px rgba(255, 80, 80, 0.2));
  pointer-events: none;
  user-select: none;
  will-change: opacity, clip-path, transform;
  transition: opacity 0.28s linear, clip-path 0.72s cubic-bezier(.08, .72, .12, 1), transform 0.72s cubic-bezier(.08, .72, .12, 1);
}

.puzzle-active .fracture-texture,
.puzzle-complete .fracture-texture {
  animation: fracture-texture-pulse 4.8s cubic-bezier(.42, 0, .24, 1) infinite;
}

.circuit-event[data-stability="0"] .fracture-texture { --fracture-reveal: 22%; --fracture-scale: 0.96; opacity: 0.07; }
.circuit-event[data-stability="1"] .fracture-texture { --fracture-reveal: 38%; --fracture-scale: 0.985; opacity: 0.1; }
.circuit-event[data-stability="2"] .fracture-texture { --fracture-reveal: 55%; --fracture-scale: 1.01; opacity: 0.13; }
.circuit-event[data-stability="3"] .fracture-texture { --fracture-reveal: 72%; --fracture-scale: 1.035; opacity: 0.16; }
.circuit-event[data-stability="4"] .fracture-texture { --fracture-reveal: 92%; --fracture-scale: 1.06; opacity: 0.19; }
.circuit-event[data-stability="5"] .fracture-texture,
.puzzle-complete .fracture-texture { --fracture-reveal: 150%; --fracture-scale: 1.1; opacity: 0.23; }

.puzzle-readout {
  position: absolute;
  z-index: 14;
  right: max(18px, 2vw);
  bottom: max(20px, 3vh);
  left: max(18px, 2vw);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  opacity: 0;
  color: rgba(255, 72, 72, 0.72);
  font-size: clamp(0.48rem, 0.72vw, 0.72rem);
  letter-spacing: 0.15em;
  text-shadow: 0 0 9px rgba(255, 0, 0, 0.62);
  pointer-events: none;
}

.puzzle-active .puzzle-readout,
.puzzle-complete .puzzle-readout {
  opacity: 1;
  transition: opacity 0.3s 0.2s ease;
}

.puzzle-frame {
  position: absolute;
  z-index: 13;
  inset: 8px;
  border: 1px solid rgba(255, 0, 0, 0.24);
  box-shadow: inset 0 0 34px rgba(255, 0, 0, 0.1);
  pointer-events: none;
}

.puzzle-complete .puzzle-frame {
  animation: completed-frame-overload 1.75s cubic-bezier(.1, .78, .2, 1) both;
}

.puzzle-complete .puzzle-piece {
  pointer-events: none;
}

/* Short, stacked LCD slices: dense during impacts, absent during reading. */
.signal-rip-field {
  position: fixed;
  z-index: 88;
  inset: -4%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: opacity, transform;
}

.signal-rip-field.active {
  opacity: 1;
  animation: signal-rip-frame var(--rip-duration, 0.56s) steps(8, end) both;
}

.signal-rip {
  position: absolute;
  top: var(--rip-top, 50%);
  right: -8%;
  left: -8%;
  height: var(--rip-height, 2.2%);
  opacity: 0;
  background:
    linear-gradient(90deg,
      transparent 0 3%,
      rgba(255, 20, 42, 0.72) 7%,
      rgba(255, 255, 255, 0.82) 17%,
      rgba(0, 221, 255, 0.66) 31%,
      transparent 47% 55%,
      rgba(255, 0, 170, 0.64) 67%,
      rgba(114, 255, 44, 0.5) 78%,
      transparent 96%),
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(255, 255, 255, 0.2) 14px 15px, transparent 16px 26px);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.28);
  transform: translate3d(var(--rip-from, -18%), 0, 0) scaleX(0.84);
  animation: signal-rip-slice var(--rip-duration, 0.56s) var(--rip-delay, 0s) steps(5, end) both;
}

/* Final overload and Pervision transmission ----------------------------------- */
.energy-transition {
  z-index: 115;
  display: none;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}

.energy-transition.active {
  display: block;
  animation:
    energy-whiteout 2.85s linear both,
    energy-field-jitter 82ms steps(1, jump-end) infinite;
}

.energy-transition::before,
.energy-transition::after {
  content: "";
  position: absolute;
  inset: -14%;
  opacity: 0;
}

.energy-transition.active::before {
  background:
    repeating-linear-gradient(0deg, transparent 0 3.3%, rgba(220, 246, 255, 0.9) 3.45% 4.05%, transparent 4.25% 7.8%),
    repeating-linear-gradient(90deg, rgba(0, 36, 132, 0.18) 0 2px, transparent 3px 17px),
    linear-gradient(90deg, #002d9b, #4eb8ff 24%, #fff 46% 54%, #4eb8ff 76%, #002d9b);
  mix-blend-mode: screen;
  animation: energy-tear 2.85s steps(18, end) both;
}

.energy-transition.active::after {
  background:
    radial-gradient(circle at 50% 50%, #fff 0 7%, rgba(220, 246, 255, 0.98) 13%, rgba(72, 166, 255, 0.88) 30%, rgba(0, 67, 210, 0.42) 49%, transparent 70%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 7%, rgba(167, 224, 255, 0.18) 7.4% 8%, transparent 8.5% 13%);
  mix-blend-mode: screen;
  animation: energy-wave 2.85s cubic-bezier(.12, .72, .18, 1) both;
}

body.pervision-overload #site-underlay,
body.pervision-overload #circuit-event,
body.pervision-overload #pervision-stage,
body.pervision-overload .recording-hud,
body.pervision-overload .screen-texture {
  transform-origin: 50% 50%;
  animation: transition-screen-jitter 86ms steps(1, jump-end) infinite;
  will-change: transform, filter;
}

body.pervision-overload .signal-rip-field {
  z-index: 118;
}

.pervision-stage {
  z-index: 45;
  inset: -6px;
  overflow: hidden;
  opacity: 0;
  background: #000;
  isolation: isolate;
  filter: url("#vhs-wave-distortion");
  will-change: filter, opacity;
}

.pervision-stage.visible {
  opacity: 1;
}

.pervision-stage::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 43%, rgba(255, 15, 15, .13), transparent 23% 100%);
}

.pervision-stage.score-active::after {
  animation: pervision-score-bar 3s cubic-bezier(.25,.1,.25,1) infinite;
}

.pervision-figure,
.pervision-video,
.pervision-darkness,
.pervision-interference {
  position: absolute;
  inset: 0;
}

.pervision-figure {
  transform-origin: 50% 34%;
}

.pervision-stage.interaction-engaged .pervision-figure {
  animation: none;
}

.pervision-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  background: #000;
  filter: brightness(0.58) contrast(1.38) saturate(0.8) drop-shadow(0 0 14px rgba(255, 0, 0, 0.28));
  transform: scale(1.08);
  will-change: transform, filter, opacity;
}

.pervision-stage.intro-active .pervision-intro,
.pervision-stage.idle-active .pervision-idle,
.pervision-stage.speak-start-active .pervision-speak-start,
.pervision-stage.speak-start-reverse-active .pervision-speak-start-reverse,
.pervision-stage.speak-idle-active .pervision-speak-idle,
.pervision-stage.speak-continue-active .pervision-speak-continue,
.pervision-stage.speak-end-active .pervision-speak-end,
.pervision-stage.speak-end-reverse-active .pervision-speak-end-reverse,
.pervision-stage.alt-idle-1-active .pervision-alt-idle-1,
.pervision-stage.alt-idle-2-start-active .pervision-alt-idle-2-start,
.pervision-stage.alt-idle-2-start-reverse-active .pervision-alt-idle-2-start-reverse,
.pervision-stage.alt-idle-2-active .pervision-alt-idle-2,
.pervision-stage.uncertainty-start-active .pervision-uncertainty-start,
.pervision-stage.uncertainty-end-active .pervision-uncertainty-end,
.pervision-stage.farewell-intro-active .pervision-farewell-intro,
.pervision-stage.farewell-active .pervision-farewell {
  opacity: 1;
}

.pervision-stage.reveal-pending {
  background: #000;
}

.pervision-stage.reveal-pending .pervision-video {
  opacity: 0 !important;
}

.pervision-stage.idle-active .pervision-idle,
.pervision-stage.speak-start-active .pervision-speak-start,
.pervision-stage.speak-start-reverse-active .pervision-speak-start-reverse,
.pervision-stage.speak-idle-active .pervision-speak-idle,
.pervision-stage.speak-continue-active .pervision-speak-continue,
.pervision-stage.speak-end-active .pervision-speak-end,
.pervision-stage.speak-end-reverse-active .pervision-speak-end-reverse,
.pervision-stage.alt-idle-1-active .pervision-alt-idle-1,
.pervision-stage.alt-idle-2-start-active .pervision-alt-idle-2-start,
.pervision-stage.alt-idle-2-start-reverse-active .pervision-alt-idle-2-start-reverse,
.pervision-stage.alt-idle-2-active .pervision-alt-idle-2,
.pervision-stage.uncertainty-start-active .pervision-uncertainty-start,
.pervision-stage.uncertainty-end-active .pervision-uncertainty-end,
.pervision-stage.farewell-intro-active .pervision-farewell-intro,
.pervision-stage.farewell-active .pervision-farewell {
  animation: pervision-signal-glitch 8.4s steps(1, end) infinite;
}

.pervision-stage.speaking .pervision-video {
  filter: brightness(0.72) contrast(1.58) saturate(0.92) drop-shadow(0 0 22px rgba(255, 0, 0, 0.52));
}

.pervision-darkness {
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 0 20%, rgba(0, 0, 0, 0.16) 42%, rgba(0, 0, 0, 0.84) 88%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.28), transparent 32%, rgba(0, 0, 0, 0.38));
}

.pervision-interference {
  z-index: 4;
  opacity: 0.32;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, 0.03) 4px),
    linear-gradient(180deg, transparent 0 46%, rgba(255, 0, 0, 0.22) 48%, transparent 51%);
  background-size: 100% 100%, 100% 260px;
  mix-blend-mode: screen;
  animation: pervision-tracking 4.6s linear infinite;
}

.pervision-whispers,
.pervision-impact {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pervision-whispers {
  z-index: 13;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.6s linear;
}

.pervision-stage.visible .pervision-whispers {
  opacity: 1;
}

.pervision-whispers span {
  position: absolute;
  left: var(--whisper-x);
  top: var(--whisper-y);
  max-width: 22vw;
  overflow: hidden;
  color: rgba(245, 248, 255, 0.18);
  font: 500 clamp(0.24rem, 0.34vw, 0.4rem)/1 "Courier New", monospace;
  letter-spacing: 0.06em;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.28), 0 0 5px rgba(255, 0, 0, 0.24);
  white-space: nowrap;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) scale(var(--whisper-scale));
  transform-origin: center;
  animation: pervision-whisper var(--whisper-speed) var(--whisper-delay) steps(1, end) infinite;
  will-change: opacity, transform, filter, clip-path;
}

.pervision-whispers span.signal-locked {
  color: rgba(255, 42, 42, 0.68);
  text-shadow: 0 0 3px #d00000, 0 0 8px rgba(255, 0, 0, 0.58);
}

.pervision-whispers span.signal-binary {
  color: rgba(255, 255, 255, 0.38);
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.5), 0 0 7px rgba(255, 0, 0, 0.34);
}

.pervision-impact {
  z-index: 6;
  opacity: 0;
  background:
    linear-gradient(180deg, transparent 0 43%, rgba(255, 255, 255, 0.92) 47% 52%, transparent 56%),
    radial-gradient(ellipse at 50% 44%, #fff 0 7%, rgba(220, 246, 255, 0.94) 16%, rgba(31, 133, 255, 0.64) 35%, rgba(0, 51, 188, 0.24) 52%, transparent 68%);
  mix-blend-mode: screen;
}

.pervision-stage.impact-active .pervision-impact {
  animation: pervision-impact-overlay 1.72s cubic-bezier(.18, .64, .24, 1) both;
}

.pervision-stage.impact-active .pervision-video {
  animation: pervision-character-impact 1.72s cubic-bezier(.16, .68, .2, 1) both;
}

.pervision-eye-target {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 50%;
  width: clamp(240px, 32vw, 560px);
  height: min(92vh, 980px);
  margin: 0;
  padding: 0;
  opacity: 0;
  border: 0;
  border-radius: 50%;
  outline: 0;
  background: transparent;
  cursor: default;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.pervision-eye-target::before,
.pervision-eye-target::after {
  content: "";
  position: absolute;
  top: 47.5%;
  left: 50%;
  width: clamp(58px, 8vw, 128px);
  height: clamp(44px, 6vw, 96px);
  opacity: 0;
  border: 1px solid rgba(255, 35, 35, 0.62);
  border-radius: 50%;
  box-shadow: 0 0 7px rgba(255, 0, 0, 0.56), inset 0 0 8px rgba(255, 0, 0, 0.22);
  transform: translate(-50%, -50%);
}

.pervision-stage.eye-armed .pervision-eye-target {
  opacity: 1;
  cursor: crosshair;
  pointer-events: auto;
}

.pervision-stage.eye-armed .pervision-eye-target::before {
  animation: pervision-eye-window 1s ease-out infinite;
}

.pervision-stage.eye-tick .pervision-eye-target::after {
  animation: pervision-eye-tick 0.15s steps(3, end) both;
}

.pervision-caption {
  position: absolute;
  z-index: 14;
  left: 50%;
  bottom: clamp(34px, 8vh, 92px);
  display: grid;
  grid-template-columns: clamp(58px, 7vw, 88px) minmax(0, 1fr) auto;
  align-items: stretch;
  width: min(760px, 82vw);
  min-height: clamp(72px, 10vh, 104px);
  padding: 7px 10px 7px 7px;
  opacity: 0;
  overflow: hidden;
  color: rgba(242, 235, 235, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-left-color: rgba(255, 25, 25, 0.88);
  background:
    linear-gradient(115deg, rgba(55, 0, 0, 0.88), rgba(3, 3, 5, 0.94) 24% 78%, rgba(66, 0, 0, 0.78)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 22% 74%, rgba(255, 0, 0, 0.1));
  box-shadow: inset 0 0 20px rgba(255, 0, 0, 0.12), 0 0 3px #000, 0 0 20px rgba(120, 0, 0, 0.38);
  transform: translate(-50%, 0);
  clip-path: inset(0);
  pointer-events: none;
  will-change: opacity, transform, filter;
}

.pervision-caption[hidden] {
  display: none;
}

.pervision-caption::before,
.pervision-caption::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.pervision-caption::before {
  z-index: 4;
  inset: 0;
  opacity: 0.34;
  background:
    linear-gradient(90deg, transparent 0 11%, rgba(255, 0, 0, 0.28) 11.2% 11.5%, transparent 11.8% 79%, rgba(255, 255, 255, 0.13) 79.2% 79.4%, transparent 79.7%),
    linear-gradient(180deg, transparent 0 22%, rgba(255, 255, 255, 0.08) 22.3% 22.7%, transparent 23% 72%, rgba(255, 0, 0, 0.18) 72.3% 73%, transparent 73.4%);
}

.pervision-caption::after {
  z-index: 5;
  left: 0;
  top: 48%;
  width: 100%;
  height: 2px;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 6px #fff, 0 0 14px #ff0000;
}

.pervision-caption.visible {
  animation: pervision-caption-enter 0.5s steps(9, end) forwards;
}

.pervision-caption.swapping {
  animation: pervision-caption-swap 0.2s steps(5, end) forwards;
}

.pervision-caption.departing {
  animation: pervision-caption-exit 0.32s steps(7, end) forwards;
}

.pervision-caption.visible::after,
.pervision-caption.swapping::after,
.pervision-caption.departing::after {
  animation: pervision-caption-bar 0.32s steps(4, end) both;
}

.pervision-caption-emblem {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-right: 1px solid rgba(255, 36, 36, 0.72);
  background: radial-gradient(circle, rgba(255, 0, 0, 0.16), rgba(0, 0, 0, 0.82) 70%);
}

.pervision-caption-emblem img {
  width: 84%;
  height: 84%;
  object-fit: contain;
  filter: contrast(1.28) saturate(1.18) drop-shadow(0 0 6px rgba(255, 0, 0, 0.66));
}

.pervision-caption-channel {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  padding: 7px clamp(10px, 2vw, 20px);
  flex-direction: column;
  justify-content: center;
}

.pervision-caption-channel > span {
  color: rgba(255, 48, 48, 0.62);
  font: 500 clamp(0.42rem, 0.62vw, 0.58rem)/1 "Courier New", monospace;
  letter-spacing: 0.18em;
}

.pervision-caption-channel p {
  position: relative;
  margin: 8px 0 0;
  color: rgba(255, 238, 238, 0.95);
  font: 600 clamp(0.68rem, 1.05vw, 0.96rem)/1.3 "Courier New", monospace;
  letter-spacing: 0.14em;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.28), 0 0 9px rgba(255, 0, 0, 0.7);
}

.pervision-caption.caption-typing .pervision-caption-channel p {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 11px rgba(255, 0, 0, 0.8);
}

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

.pervision-caption.visible .pervision-caption-channel p::before {
  color: rgba(255, 0, 0, 0.72);
  animation: caption-text-slice-a 2.1s steps(1, end) infinite;
}

.pervision-caption.visible .pervision-caption-channel p::after {
  color: rgba(210, 245, 255, 0.58);
  animation: caption-text-slice-b 2.7s steps(1, end) infinite;
}

.pervision-caption-index {
  position: relative;
  z-index: 2;
  align-self: end;
  padding: 0 2px 4px 8px;
  color: rgba(255, 48, 48, 0.48);
  font: 500 clamp(0.42rem, 0.62vw, 0.58rem)/1 "Courier New", monospace;
  letter-spacing: 0.12em;
}

.final-verdict {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  width: min(1100px, 88vw);
  margin: 0;
  padding: clamp(18px, 3vw, 38px) clamp(20px, 5vw, 72px);
  opacity: 0;
  color: #ff2929;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: clamp(0.92rem, 2.65vw, 2.7rem);
  font-weight: 600;
  letter-spacing: clamp(0.12em, 0.6vw, 0.32em);
  line-height: 1.45;
  text-align: center;
  text-indent: 0.32em;
  text-shadow: 0 0 4px rgba(255, 235, 235, 0.62), 0 0 13px #f10000, 0 0 38px rgba(255, 0, 0, 0.82);
  border-top: 1px solid rgba(255, 255, 255, 0.58);
  border-bottom: 1px solid rgba(255, 24, 24, 0.72);
  background:
    linear-gradient(90deg, transparent, rgba(90, 0, 0, 0.46) 16%, rgba(0, 0, 0, 0.8) 50%, rgba(90, 0, 0, 0.46) 84%, transparent),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, 0.025) 4px);
  box-shadow: 0 -10px 30px -25px #fff, 0 14px 34px -24px #ff0000;
  transform: translate(-50%, -50%) scaleX(0.08) scaleY(0.64);
  clip-path: inset(0 50% 0 50%);
  pointer-events: none;
  will-change: transform, opacity, filter, clip-path;
}

.final-verdict::before,
.final-verdict::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: inherit;
  opacity: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;
  text-indent: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
}

.pervision-stage.verdict-active .final-verdict {
  animation: final-verdict-enter 1.28s steps(12, end) forwards;
}

.pervision-stage.verdict-resolved .final-verdict {
  opacity: 1;
  clip-path: inset(0);
  transform: translate(-50%, -50%);
  filter: none;
}

.pervision-stage.verdict-departing .final-verdict {
  animation: final-verdict-depart 1.22s steps(1, jump-end) forwards;
}

.pervision-stage.verdict-departing .final-verdict::before {
  color: rgba(255, 15, 15, 0.92);
  text-shadow: -8px 0 rgba(255, 0, 0, 0.72), 0 0 18px #ff0000;
  animation: final-verdict-channel-a 1.22s steps(1, jump-end) forwards;
}

.pervision-stage.verdict-departing .final-verdict::after {
  color: rgba(224, 248, 255, 0.78);
  text-shadow: 8px 0 rgba(0, 203, 255, 0.55), 0 0 10px #fff;
  animation: final-verdict-channel-b 1.22s steps(1, jump-end) forwards;
}

.recording-hud.experiment-ended #subject-label {
  color: rgba(255, 235, 235, 0.88);
  text-shadow: 0 0 7px #fff, 0 0 18px rgba(255, 0, 0, 0.9);
  animation: final-recording-settle 1.2s steps(8, end) both;
}

@keyframes circuit-grow {
  0% { opacity: 0; stroke-dashoffset: var(--path-length, 1800); }
  8% { opacity: 0.7; }
  100% { opacity: 0.94; stroke-dashoffset: 0; }
}

@keyframes circuit-node-arrive {
  0% { opacity: 0; transform: scale(0); }
  60% { opacity: 1; transform: scale(2.3); }
  100% { opacity: 0.86; transform: scale(1); }
}

@keyframes circuit-screen-fracture {
  0% { filter: none; transform: translate3d(0, 0, 0) scale(1.004); }
  9% { filter: contrast(1.8) brightness(1.4); transform: translate3d(-8px, 3px, 0) scale(1.01) skewX(-0.45deg); }
  17% { transform: translate3d(5px, -6px, 0) scale(1.006) skewX(0.22deg); }
  26% { filter: contrast(2.15) brightness(0.72) saturate(1.8); transform: translate3d(12px, 2px, 0) scale(1.012); }
  37% { transform: translate3d(-4px, 7px, 0) scale(1.008) skewX(-0.7deg); }
  48% { filter: contrast(2.7) brightness(1.9); transform: translate3d(-15px, -3px, 0) scale(1.014) skewX(1.15deg); }
  58% { transform: translate3d(9px, 5px, 0) scale(1.009) skewX(-0.28deg); }
  69% { filter: contrast(1.9) brightness(0.6); transform: translate3d(-7px, -6px, 0) scale(1.013); }
  82% { transform: translate3d(4px, 2px, 0) scale(1.018) skewX(0.2deg); }
  100% { filter: brightness(0.35); transform: scale(1.04); }
}

@keyframes circuit-network-collapse {
  0% { opacity: 1; transform: scale(1); }
  45% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.18); }
}

@keyframes puzzle-field-arrive {
  0% { filter: brightness(3) contrast(2); transform: scale(1.04); }
  25% { filter: brightness(0.4) contrast(2.4); transform: translateX(-6px); }
  48% { filter: brightness(1.6) contrast(1.8); transform: translateX(4px); }
  100% { filter: brightness(1) contrast(1); transform: none; }
}

@keyframes shard-image-corruption {
  0%, 82%, 100% { transform: translate3d(0, 0, 0) scale(1.025); filter: brightness(0.48) contrast(1.7) saturate(0.7) sepia(0.25) hue-rotate(310deg) drop-shadow(0 0 16px #530000); }
  84% { transform: translate3d(-7px, 2px, 0) scale(1.032) skewX(-0.25deg); filter: brightness(0.76) contrast(2.4) saturate(0.18) hue-rotate(180deg); }
  87% { transform: translate3d(5px, -4px, 0) scale(1.018) skewX(0.4deg); filter: brightness(0.3) contrast(2.9); }
  90% { transform: translate3d(10px, 1px, 0) scale(1.029); filter: brightness(0.88) contrast(2.1) hue-rotate(28deg); }
  93% { transform: translate3d(-3px, 5px, 0) scale(1.022) skewX(-0.18deg); }
  96% { transform: translate3d(4px, -1px, 0) scale(1.026); }
}

@keyframes panel-chromatic-drift {
  0%, 80%, 100% { opacity: 0.08; transform: translate3d(0, 0, 0); filter: none; }
  82% { opacity: 0.42; transform: translate3d(-9px, 1px, 0); filter: hue-rotate(24deg) contrast(2); }
  85% { opacity: 0.18; transform: translate3d(12px, -2px, 0); filter: hue-rotate(-48deg) contrast(2.4); }
  87% { opacity: 0.34; transform: translate3d(-4px, 3px, 0) skewX(-0.5deg); }
  90% { opacity: 0.06; transform: translate3d(0, 0, 0); }
}

@keyframes hud-glitch-slice-a {
  0%, 79%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate3d(0, 0, 0); }
  80% { opacity: 0.78; clip-path: inset(8% 0 66% 0); transform: translate3d(-9px, -1px, 0) skewX(-3deg); }
  82% { opacity: 0.36; clip-path: inset(57% 0 19% 0); transform: translate3d(12px, 1px, 0) skewX(2deg); }
  84% { opacity: 0.9; clip-path: inset(31% 0 48% 0); transform: translate3d(-4px, 0, 0); }
  86% { opacity: 0.2; clip-path: inset(74% 0 7% 0); transform: translate3d(7px, 2px, 0); }
  88% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate3d(0, 0, 0); }
}

@keyframes hud-glitch-slice-b {
  0%, 86%, 100% { opacity: 0; clip-path: inset(100% 0 0 0); transform: translate3d(0, 0, 0); }
  87% { opacity: 0.62; clip-path: inset(68% 0 8% 0); transform: translate3d(8px, 0, 0) skewX(2deg); }
  89% { opacity: 0.92; clip-path: inset(18% 0 61% 0); transform: translate3d(-12px, -2px, 0) skewX(-2deg); }
  91% { opacity: 0.34; clip-path: inset(44% 0 29% 0); transform: translate3d(5px, 1px, 0); }
  93% { opacity: 0; clip-path: inset(100% 0 0 0); transform: translate3d(0, 0, 0); }
}

@keyframes selected-circuit-surge {
  0%, 74%, 100% { filter: brightness(1.1) drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px #ff1d1d) drop-shadow(0 0 22px rgba(255, 0, 0, 0.96)); }
  78% { filter: brightness(1.42) contrast(1.7) drop-shadow(0 0 4px #fff) drop-shadow(0 0 17px #ff0000); }
  84% { filter: brightness(0.76) contrast(2.1) drop-shadow(0 0 3px #fff) drop-shadow(0 0 27px #ff0000); }
}

@keyframes locked-shard-corruption {
  0%, 100% { filter: brightness(0.48) contrast(1.65) drop-shadow(0 0 2px rgba(255, 180, 180, 0.8)) drop-shadow(0 0 11px rgba(255, 0, 0, 0.78)); }
  50% { filter: brightness(0.66) contrast(2.1) hue-rotate(18deg) drop-shadow(0 0 3px #fff) drop-shadow(0 0 18px #ff0000); }
}

@keyframes signal-rip-frame {
  0% { opacity: 0; transform: translate3d(0, 0, 0); filter: brightness(1); }
  7% { opacity: 0.95; transform: translate3d(-7px, 2px, 0); filter: brightness(1.9) contrast(1.6); }
  18% { transform: translate3d(11px, -3px, 0); }
  36% { opacity: 0.72; transform: translate3d(-5px, 1px, 0); filter: brightness(1.3) contrast(2); }
  58% { opacity: 0.9; transform: translate3d(4px, 0, 0); }
  100% { opacity: 0; transform: translate3d(0, 0, 0); filter: brightness(0.8); }
}

@keyframes signal-rip-slice {
  0% { opacity: 0; transform: translate3d(var(--rip-from, -18%), 0, 0) scaleX(0.82); }
  16% { opacity: var(--rip-opacity, 0.84); transform: translate3d(var(--rip-mid, 9%), 0, 0) scaleX(1.12); }
  38% { opacity: 0.3; transform: translate3d(var(--rip-return, -4%), 0, 0) scaleX(0.95); }
  57% { opacity: var(--rip-opacity, 0.84); transform: translate3d(var(--rip-end, 4%), 0, 0) scaleX(1.05); }
  100% { opacity: 0; transform: translate3d(0, 0, 0) scaleX(1); }
}

@keyframes shard-confirm {
  0% { filter: brightness(2.8) drop-shadow(0 0 26px #fff); }
  42% { filter: brightness(1.7) drop-shadow(0 0 34px #2aaeff); }
  100% { filter: brightness(1) drop-shadow(0 0 5px rgba(89, 194, 255, 0.4)); }
}

@keyframes shard-rejected {
  0%, 100% { filter: brightness(0.8) contrast(1.5) drop-shadow(0 0 8px #ff0000); }
  25% { filter: invert(1) brightness(1.8) contrast(2.4); }
  50% { filter: brightness(0.2) contrast(3) hue-rotate(90deg); }
  75% { filter: brightness(1.9) contrast(2.8) drop-shadow(0 0 24px #ff0000); }
}

@keyframes fifth-shard-unseal {
  0% { filter: brightness(0.25) contrast(2.5); }
  18% { filter: brightness(2.4) invert(1); }
  32% { filter: brightness(0.1); }
  58% { filter: brightness(1.7) contrast(2.2) drop-shadow(0 0 24px #fff); }
  100% { filter: brightness(0.88) drop-shadow(0 0 9px #ff0000); }
}

@keyframes completed-frame-overload {
  0% { border-color: #238cff; box-shadow: inset 0 0 45px rgba(0, 126, 255, 0.52), 0 0 18px #167cff; }
  46% { border-color: #89d9ff; box-shadow: inset 0 0 110px rgba(0, 140, 255, 0.74), 0 0 60px #57bdff; }
  72%, 100% { border-color: #fff; box-shadow: inset 0 0 220px rgba(255, 255, 255, 0.98), 0 0 130px #fff; }
}

@keyframes energy-whiteout {
  0% { background: rgba(0, 16, 70, 0); }
  7% { background: rgba(0, 69, 225, 0.22); }
  17% { background: rgba(16, 111, 255, 0.56); }
  29% { background: rgba(170, 226, 255, 0.94); }
  41% { background: rgba(255, 255, 255, 0.97); }
  53% { background: rgba(207, 239, 255, 0.88); }
  68% { background: rgba(59, 142, 255, 0.58); }
  84% { background: rgba(9, 57, 171, 0.26); }
  100% { background: transparent; }
}

@keyframes energy-tear {
  0% { opacity: 0.08; transform: scaleX(0.08) scaleY(0.86); }
  12% { opacity: 0.62; transform: scaleX(0.74) scaleY(1.03) translateX(-2%); }
  25% { opacity: 1; transform: scale(1.12, 1.08) translateX(2%) skewX(2.2deg); }
  43% { opacity: 0.94; transform: scale(1.18, 1.12) translateX(-3%) skewX(-3deg); }
  62% { opacity: 0.82; transform: scale(1.28, 1.18) translateX(4%) skewX(2deg); }
  79% { opacity: 0.56; transform: scale(1.42, 1.3) translateX(-5%) skewX(-1.6deg); }
  100% { opacity: 0; transform: scale(1.68, 1.46); }
}

@keyframes energy-wave {
  0% { opacity: 0.12; transform: scale(0.025); }
  15% { opacity: 0.74; transform: scale(0.28); }
  31% { opacity: 1; transform: scale(0.74); }
  55% { opacity: 0.9; transform: scale(1.28); }
  78% { opacity: 0.58; transform: scale(1.9); }
  100% { opacity: 0; transform: scale(2.65); }
}

@keyframes energy-field-jitter {
  0% { transform: translate3d(-7px, 4px, 0) scale(1.035, 1.025) skewX(-0.7deg); filter: contrast(1.5) saturate(1.3); }
  20% { transform: translate3d(6px, -5px, 0) scale(1.028, 1.04) skewY(0.55deg); filter: contrast(1.9) saturate(0.9); }
  40% { transform: translate3d(-3px, -7px, 0) scale(1.046, 1.022) skewX(0.85deg); filter: contrast(1.35) brightness(1.16); }
  60% { transform: translate3d(8px, 3px, 0) scale(1.03, 1.045) skewY(-0.65deg); filter: contrast(2.1) saturate(1.45); }
  80% { transform: translate3d(-6px, 6px, 0) scale(1.042, 1.03) skewX(-0.5deg); filter: contrast(1.6) brightness(0.96); }
  100% { transform: translate3d(4px, -3px, 0) scale(1.034); filter: contrast(1.8); }
}

@keyframes transition-screen-jitter {
  0% { transform: translate3d(-9px, 5px, 0) scale(1.032, 1.025) skewX(-0.55deg); filter: contrast(1.35) saturate(1.12); }
  17% { transform: translate3d(7px, -6px, 0) scale(1.026, 1.038) skewY(0.42deg); filter: contrast(1.72) brightness(1.08); }
  34% { transform: translate3d(-4px, -8px, 0) scale(1.04, 1.024) skewX(0.7deg); filter: contrast(1.44) saturate(0.72); }
  51% { transform: translate3d(10px, 4px, 0) scale(1.03, 1.041) skewY(-0.58deg); filter: contrast(1.92) brightness(0.92); }
  68% { transform: translate3d(-8px, 7px, 0) scale(1.042, 1.028) skewX(-0.38deg); filter: contrast(1.56) saturate(1.36); }
  85% { transform: translate3d(5px, -4px, 0) scale(1.029, 1.037) skewY(0.33deg); filter: contrast(1.83) brightness(1.04); }
  100% { transform: translate3d(-3px, 3px, 0) scale(1.035); filter: contrast(1.46); }
}

@keyframes mobile-warning-flash {
  0% { opacity: 0; transform: scale(0.12, 0.82); filter: brightness(5) blur(7px); }
  7% { opacity: 1; transform: scale(1.08, 0.94); filter: brightness(3.8) blur(0); }
  14% { opacity: 0.08; transform: translateX(-9px) scale(1.02); }
  22% { opacity: 0.78; transform: translateX(7px) scale(1.04, 0.98); filter: contrast(2.8); }
  31% { opacity: 0.14; transform: translateX(-3px); }
  47% { opacity: 0.38; transform: scale(1.01); filter: brightness(1.8); }
  70%, 100% { opacity: 0; transform: scale(1); filter: none; }
}

@keyframes mobile-warning-scan {
  0% { opacity: 0; transform: translateY(-38%) skewY(-1deg); }
  16% { opacity: 0.8; transform: translateY(-15%) skewY(0.6deg); }
  42% { opacity: 0.22; transform: translateY(9%); }
  69% { opacity: 0.54; transform: translateY(31%) skewY(-0.4deg); }
  100% { opacity: 0; transform: translateY(58%); }
}

@keyframes mobile-warning-message {
  0% { opacity: 0; transform: scaleX(0.08) translateX(-9px); clip-path: inset(46% 48%); filter: brightness(5) blur(5px); }
  12% { opacity: 1; transform: scaleX(1.08) scaleY(0.16) translateX(7px); clip-path: inset(39% 0); }
  24% { transform: scaleX(0.96) scaleY(1.04) translateX(-8px); clip-path: inset(8% 0 56%); filter: brightness(2.2); }
  38% { transform: translateX(5px); clip-path: inset(0); }
  52% { opacity: 0.84; transform: translateX(-3px); filter: contrast(2.3); }
  68% { opacity: 1; transform: translateX(1px); filter: none; }
  86% { opacity: 0.92; transform: translateX(0); clip-path: inset(0); }
  100% { opacity: 0; transform: scaleY(0.06); clip-path: inset(47% 0); filter: brightness(3); }
}

@keyframes pervision-whisper {
  0%, 73%, 100% { opacity: 0.14; transform: translate(-50%, -50%) scale(var(--whisper-scale)); filter: blur(0); clip-path: inset(0); }
  74% { opacity: 0.52; transform: translate(calc(-50% - 7px), calc(-50% + 1px)) scale(var(--whisper-scale)); filter: contrast(1.8); clip-path: inset(4% 0 63% 0); }
  76% { opacity: 0.18; transform: translate(calc(-50% + 5px), calc(-50% - 2px)) scale(var(--whisper-scale)); clip-path: inset(55% 0 8% 0); }
  78% { opacity: 0; transform: translate(-50%, -50%) scale(var(--whisper-scale)); clip-path: inset(29% 0 42% 0); }
  88% { opacity: 0.36; transform: translate(calc(-50% + 2px), -50%) scale(var(--whisper-scale)); filter: brightness(1.8); clip-path: inset(0); }
  90% { opacity: 0.05; transform: translate(-50%, -50%) scale(var(--whisper-scale)); }
}

@keyframes pervision-impact-overlay {
  0% { opacity: 0; transform: scale(0.9, 0.72); filter: blur(12px) brightness(5); }
  5% { opacity: 1; transform: scale(1.04, 0.94); filter: blur(1px) brightness(5); }
  17% { opacity: 1; transform: scale(1.08, 1.01); filter: blur(0) brightness(4.2); }
  31% { opacity: 0.82; transform: scale(1.045, 1.015); filter: brightness(3.1) contrast(1.5); }
  48% { opacity: 0.5; transform: scale(1.025); filter: brightness(2.1) blur(0.4px); }
  68% { opacity: 0.2; transform: scale(1.012); filter: brightness(1.45); }
  100% { opacity: 0; transform: scale(1); filter: none; }
}

@keyframes pervision-character-impact {
  0%, 14% { opacity: 0; transform: scale(1.08); filter: grayscale(1) brightness(5) contrast(0.8); }
  19% { opacity: 0.18; transform: translate(-6px, 2px) scale(1.095, 1.07); filter: grayscale(1) brightness(4.5) contrast(0.82); }
  25% { opacity: 0.78; transform: translate(7px, -2px) scale(1.075, 1.09); filter: grayscale(1) brightness(2.7) contrast(1.1); }
  32% { opacity: 1; transform: translate(-3px, 1px) scale(1.088); filter: grayscale(0.58) brightness(1.65) contrast(1.42); }
  45% { opacity: 1; transform: translate(2px, -1px) scale(1.082); filter: brightness(0.86) contrast(1.72) saturate(0.52); }
  62% { opacity: 1; transform: scale(1.086); filter: brightness(0.68) contrast(1.5) saturate(0.7); }
  100% { opacity: 1; transform: scale(1.08); filter: brightness(0.58) contrast(1.38) saturate(0.8) drop-shadow(0 0 14px rgba(255, 0, 0, 0.28)); }
}

@keyframes pervision-eye-window {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); filter: blur(2px); }
  16% { opacity: 0.24; transform: translate(-50%, -50%) scale(0.78); filter: blur(0); }
  58% { opacity: 0.08; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.42); }
}

@keyframes pervision-eye-tick {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.08) scaleY(1.5); filter: brightness(4); }
  35% { opacity: 0.78; transform: translate(-50%, -50%) scaleX(1.24) scaleY(0.32); filter: brightness(2.6); }
  66% { opacity: 0.18; transform: translate(calc(-50% - 5px), -50%) scale(0.82); }
  100% { opacity: 0; transform: translate(calc(-50% + 3px), -50%) scale(1.1); }
}

@keyframes pervision-caption-enter {
  0% { opacity: 0; transform: translate(-50%, 12px) scaleX(0.06) scaleY(0.22); clip-path: inset(46% 48%); filter: brightness(4) blur(5px); }
  18% { opacity: 1; transform: translate(-52%, -3px) scaleX(1.04) scaleY(0.18); clip-path: inset(39% 0); filter: brightness(2.8); }
  32% { transform: translate(-48.5%, 2px) scaleX(0.98) scaleY(1.04) skewX(-1.2deg); clip-path: inset(8% 0); filter: contrast(2.1); }
  46% { transform: translate(-51%, -1px) scaleX(1.02); clip-path: inset(0); }
  61% { opacity: 0.72; transform: translate(-49.3%, 1px); filter: brightness(0.72) contrast(2.4); }
  76% { opacity: 1; transform: translate(-50.4%, 0); filter: brightness(1.5); }
  100% { opacity: 1; transform: translate(-50%, 0); clip-path: inset(0); filter: none; }
}

@keyframes pervision-caption-swap {
  0% { opacity: 1; transform: translate(-50%, 0); clip-path: inset(0); }
  26% { opacity: 0.82; transform: translate(-53%, -2px) scaleX(1.06) scaleY(0.54); clip-path: inset(28% 0 41%); filter: brightness(2.6); }
  52% { opacity: 0.34; transform: translate(-47%, 3px) scaleX(0.92) scaleY(0.2); clip-path: inset(43% 0); filter: contrast(3); }
  100% { opacity: 0; transform: translate(-50%, 0) scaleX(0.08); clip-path: inset(48% 46%); }
}

@keyframes pervision-caption-exit {
  0% { opacity: 1; transform: translate(-50%, 0); clip-path: inset(0); }
  22% { opacity: 0.9; transform: translate(-52%, -2px) skewX(-2deg); filter: brightness(2.8); }
  44% { opacity: 0.48; transform: translate(-47%, 3px) scaleY(0.38); clip-path: inset(31% 0); filter: contrast(2.8); }
  66% { opacity: 0.82; transform: translate(-51%, -1px) scaleX(1.12) scaleY(0.08); clip-path: inset(46% 0); filter: brightness(4); }
  100% { opacity: 0; transform: translate(-50%, 0) scaleX(0.04) scaleY(0.02); clip-path: inset(49%); }
}

@keyframes pervision-caption-bar {
  0% { opacity: 0; transform: translateX(-65%) scaleX(0.08); }
  22% { opacity: 1; transform: translateX(-18%) scaleX(0.46); }
  52% { opacity: 0.72; transform: translateX(24%) scaleX(0.9); }
  100% { opacity: 0; transform: translateX(68%) scaleX(0.12); }
}

@keyframes caption-text-slice-a {
  0%, 84%, 100% { opacity: 0; clip-path: inset(0 0 100%); transform: translate(0); }
  85% { opacity: 0.82; clip-path: inset(8% 0 62%); transform: translate(-7px, -1px); }
  88% { opacity: 0.36; clip-path: inset(58% 0 12%); transform: translate(9px, 1px); }
  91% { opacity: 0; clip-path: inset(0 0 100%); transform: translate(0); }
}

@keyframes caption-text-slice-b {
  0%, 90%, 100% { opacity: 0; clip-path: inset(100% 0 0); transform: translate(0); }
  91% { opacity: 0.68; clip-path: inset(32% 0 44%); transform: translate(6px, 0); }
  94% { opacity: 0.22; clip-path: inset(70% 0 7%); transform: translate(-8px, 1px); }
  96% { opacity: 0; clip-path: inset(100% 0 0); transform: translate(0); }
}

@keyframes pervision-approach {
  0% { transform: scale(1); }
  100% { transform: scale(1.78) translateY(10%); }
}

@keyframes pervision-signal-glitch {
  0%, 92%, 94%, 100% { transform: scale(1.08) translate3d(0, 0, 0); filter: brightness(0.58) contrast(1.38) saturate(0.8) drop-shadow(0 0 14px rgba(255, 0, 0, 0.28)); }
  92.25% { transform: scale(1.0805) translate3d(-1.4px, .35px, 0); filter: brightness(0.63) contrast(1.5) saturate(0.76) drop-shadow(0 0 15px rgba(255, 0, 0, 0.3)); }
  92.55% { transform: scale(1.0796) translate3d(1.2px, -.25px, 0); filter: brightness(0.55) contrast(1.48) saturate(0.84) drop-shadow(0 0 14px rgba(255, 0, 0, 0.3)); }
  92.9% { transform: scale(1.0802) translate3d(-.55px, .15px, 0); filter: brightness(0.6) contrast(1.42) saturate(0.8) drop-shadow(0 0 15px rgba(255, 0, 0, 0.3)); }
}

@keyframes pervision-tracking {
  0% { background-position: 0 0, 0 -260px; transform: translateX(0); }
  48% { transform: translateX(0); }
  49% { transform: translateX(-4px); }
  51% { transform: translateX(3px); }
  53% { transform: translateX(0); }
  100% { background-position: 0 4px, 0 260px; transform: translateX(0); }
}

@keyframes final-recording-settle {
  0% { opacity: 0; transform: translateX(-12px); filter: blur(4px); }
  28% { opacity: 1; transform: translateX(8px); filter: blur(0); }
  46% { transform: translateX(-4px); color: #ff2222; }
  72% { transform: translateX(2px); color: #fff; }
  100% { transform: translateX(0); }
}

@keyframes final-verdict-enter {
  0% { opacity: 0; clip-path: inset(48% 50%); transform: translate(-50%, -50%) scaleX(0.08) scaleY(0.12); filter: brightness(5) blur(8px); }
  18% { opacity: 1; clip-path: inset(43% 9%); transform: translate(-52%, -50%) scaleX(1.04) scaleY(0.18); filter: brightness(3) blur(2px); }
  34% { clip-path: inset(18% 0); transform: translate(-48.5%, -51%) skewX(-2deg); filter: brightness(1.7) contrast(2.1); }
  49% { clip-path: inset(4% 2%); transform: translate(-51%, -49%) skewX(1.2deg); }
  61% { transform: translate(-49.4%, -50.5%); filter: brightness(2.2); }
  76% { transform: translate(-50.3%, -49.8%); filter: brightness(0.72) contrast(1.8); }
  100% { opacity: 1; clip-path: inset(0); transform: translate(-50%, -50%); filter: none; }
}

@keyframes final-verdict-depart {
  0% { opacity: 1; clip-path: inset(0); transform: translate(-50%, -50%); filter: none; }
  8% { opacity: 0.68; clip-path: inset(5% 0 61%); transform: translate(-52%, -48%) scaleX(1.08) skewX(-3deg); filter: brightness(2.5) contrast(2.4); }
  15% { opacity: 1; clip-path: inset(58% 0 9%); transform: translate(-47.5%, -51%) scaleX(0.94) skewX(4deg); filter: brightness(0.62) contrast(3); }
  23% { opacity: 0.36; clip-path: inset(24% 0 48%); transform: translate(-51%, -49%) scaleX(1.15); filter: brightness(3.6) blur(0.5px); }
  31% { opacity: 0.94; clip-path: inset(0); transform: translate(-49%, -50%) scaleX(1.03) scaleY(0.74) skewX(-1.6deg); filter: contrast(2.2); }
  39% { opacity: 0.52; clip-path: inset(39% 0 34%); transform: translate(-53%, -48%) scaleX(1.2) scaleY(0.44); filter: brightness(3.2); }
  48% { opacity: 0.88; clip-path: inset(43% 0); transform: translate(-47%, -51%) scaleX(1.12) scaleY(0.24) skewX(3deg); filter: brightness(2.8) blur(1px); }
  58% { opacity: 0.32; clip-path: inset(46% 4%); transform: translate(-52%, -49%) scaleX(0.9) scaleY(0.15); filter: brightness(4.4) contrast(2.6); }
  67% { opacity: 0.82; clip-path: inset(47% 0); transform: translate(-48%, -50%) scaleX(1.2) scaleY(0.1); filter: brightness(3.4); }
  79% { opacity: 0.48; clip-path: inset(48% 13%); transform: translate(-51%, -50%) scaleX(0.72) scaleY(0.07); filter: brightness(5) blur(1.5px); }
  90% { opacity: 0.22; clip-path: inset(49% 31%); transform: translate(-49%, -50%) scaleX(0.38) scaleY(0.04); filter: brightness(6) blur(3px); }
  100% { opacity: 0; clip-path: inset(49% 48%); transform: translate(-50%, -50%) scaleX(0.08) scaleY(0.03); filter: brightness(5) blur(5px); }
}

@keyframes final-verdict-channel-a {
  0%, 5%, 100% { opacity: 0; clip-path: inset(0); transform: translateX(0); }
  9% { opacity: 0.88; clip-path: inset(8% 0 65%); transform: translateX(-13px) skewX(-4deg); }
  18% { opacity: 0.62; clip-path: inset(61% 0 12%); transform: translateX(10px); }
  29% { opacity: 0.92; clip-path: inset(28% 0 43%); transform: translateX(-16px) scaleX(1.06); }
  42% { opacity: 0.74; clip-path: inset(45% 0 34%); transform: translateX(15px) skewX(6deg); }
  55% { opacity: 0.84; clip-path: inset(42% 0 43%); transform: translateX(-11px) scaleY(0.72); }
  70% { opacity: 0.58; clip-path: inset(47% 0); transform: translateX(18px) scaleX(1.14); }
  86% { opacity: 0.3; clip-path: inset(48% 19%); transform: translateX(-8px) scaleY(0.2); }
}

@keyframes final-verdict-channel-b {
  0%, 11%, 100% { opacity: 0; clip-path: inset(0); transform: translateX(0); }
  14% { opacity: 0.76; clip-path: inset(17% 0 57%); transform: translateX(14px) skewX(5deg); }
  25% { opacity: 0.48; clip-path: inset(55% 0 19%); transform: translateX(-12px); }
  36% { opacity: 0.86; clip-path: inset(34% 0 39%); transform: translateX(17px) scaleX(0.95); }
  49% { opacity: 0.68; clip-path: inset(42% 0 38%); transform: translateX(-15px) skewX(-5deg); }
  62% { opacity: 0.78; clip-path: inset(45% 0 40%); transform: translateX(12px) scaleY(0.66); }
  77% { opacity: 0.5; clip-path: inset(47% 8%); transform: translateX(-17px) scaleX(1.1); }
  91% { opacity: 0.24; clip-path: inset(49% 27%); transform: translateX(7px) scaleY(0.14); }
}

@keyframes sealed-idle {
  0%, 100% { transform: scale(1.002); filter: brightness(0.96); }
  50% { transform: scale(1.006); filter: brightness(1.015); }
}

@keyframes vault-field {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1.06); }
}

@keyframes steam-release {
  0% {
    opacity: 0;
    transform: translate(-50%, -6%) rotate(var(--angle)) translateY(0) scale(calc(var(--plume-scale, 1) * 0.42), 0.38);
  }
  13% { opacity: 0.74; }
  68% { opacity: 0.26; }
  100% {
    opacity: 0;
    transform: translate(-50%, -6%) rotate(var(--angle)) translateY(calc(var(--distance) * -1)) scale(calc(var(--plume-scale, 1) * 1.85), 2.12);
  }
}

@keyframes fracture-texture-pulse {
  0%, 100% { filter: grayscale(1) sepia(0.36) saturate(1.5) brightness(0.64) contrast(1.5) drop-shadow(0 0 2px rgba(255, 32, 32, 0.16)); }
  28% { filter: grayscale(0.9) sepia(0.72) saturate(3.2) brightness(0.7) contrast(1.58) drop-shadow(0 0 5px rgba(255, 0, 0, 0.3)); }
  48% { filter: grayscale(0.56) sepia(1) saturate(6.4) hue-rotate(318deg) brightness(0.88) contrast(1.76) drop-shadow(0 0 7px rgba(255, 0, 0, 0.62)) drop-shadow(0 0 19px rgba(154, 0, 0, 0.36)); }
  62% { filter: grayscale(0.72) sepia(0.9) saturate(4.5) hue-rotate(322deg) brightness(0.76) contrast(1.66) drop-shadow(0 0 6px rgba(255, 0, 0, 0.42)); }
  82% { filter: grayscale(0.96) sepia(0.48) saturate(2.1) brightness(0.67) contrast(1.54) drop-shadow(0 0 3px rgba(255, 0, 0, 0.22)); }
}

@keyframes noise-shift {
  0% { transform: translate3d(-3%, 2%, 0); }
  25% { transform: translate3d(4%, -2%, 0); }
  50% { transform: translate3d(-1%, 5%, 0); }
  75% { transform: translate3d(2%, -4%, 0); }
  100% { transform: translate3d(-4%, 1%, 0); }
}

@keyframes puzzle-signal-tear {
  0%, 66%, 100% { transform: translate3d(0, 0, 0) scale(1); background-position: 0 0, 0 0; filter: none; }
  67% { transform: translate3d(-7px, 1px, 0) scale(1.018, 1.002); background-position: -13px 2px, 0 1px; filter: contrast(1.35) brightness(1.12); }
  68% { transform: translate3d(11px, -2px, 0) scale(1.024, 0.998); background-position: 18px -3px, 0 -1px; filter: contrast(1.8) brightness(0.82) hue-rotate(-8deg); }
  69% { transform: translate3d(-3px, 3px, 0) scale(1.012, 1.004); background-position: -5px 4px, 0 2px; filter: contrast(1.22); }
  70% { transform: translate3d(0, 0, 0) scale(1); background-position: 0 0, 0 0; filter: none; }
  88% { transform: translate3d(5px, -1px, 0) scale(1.016, 1); background-position: 9px -1px, 0 -2px; filter: brightness(1.18) contrast(1.5); }
  89% { transform: translate3d(-9px, 2px, 0) scale(1.022, 0.999); background-position: -16px 3px, 0 1px; filter: brightness(0.88) contrast(1.7); }
  90% { transform: translate3d(0, 0, 0) scale(1); background-position: 0 0, 0 0; filter: none; }
}

@keyframes tracking-sweep {
  from { transform: translateY(-55%); }
  to { transform: translateY(55%); }
}

@keyframes vhs-wave-roll {
  0% { transform: translateY(-4%); background-position: 0 -230px, 0 0; }
  46% { transform: translateY(1.2%); }
  52% { transform: translateY(0.2%); }
  100% { transform: translateY(4%); background-position: 0 230px, 0 36px; }
}

@keyframes recording-blink {
  0%, 60% { opacity: 0.92; }
  61%, 100% { opacity: 0.22; }
}

@keyframes interior-breathe {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 0.78; transform: scale(1.03); }
}

@keyframes intrusion-line-flicker {
  0%, 48%, 100% { opacity: 0.7; transform: translateX(0); filter: none; }
  49% { opacity: 0.96; transform: translateX(-2px); filter: brightness(1.55); }
  65% { opacity: 0.48; transform: translateX(2px); }
}

@keyframes rewind-snow {
  0% { transform: translate3d(-2%, 4%, 0) scale(1.03); background-position: 0 0, 0 0; }
  33% { transform: translate3d(3%, -3%, 0) scale(1.06); background-position: 47px -63px, 0 -4px; }
  66% { transform: translate3d(-4%, -7%, 0) scale(1.04); background-position: -81px 34px, 0 7px; }
  100% { transform: translate3d(2%, -12%, 0) scale(1.07); background-position: 102px -91px, 0 -12px; }
}

@keyframes rewind-tracking-roll {
  from { transform: translate3d(0, 84%, 0) scaleY(1.18); background-position: 0 0, 0 0; }
  to { transform: translate3d(0, -92%, 0) scaleY(0.86); background-position: 0 -170px, -38px 0; }
}

@keyframes rewind-overlay-gate {
  0%, 100% { clip-path: inset(0 0 0 0); filter: brightness(1.05) contrast(1.28); }
  28% { clip-path: inset(0 0 4% 0); filter: brightness(1.32) contrast(1.62); }
  52% { clip-path: inset(3% 0 0 0); filter: brightness(0.86) contrast(1.9); }
  76% { clip-path: inset(0 0 1% 0); filter: brightness(1.18) contrast(1.42); }
}

@keyframes rewind-frame-slip {
  0% { transform: translate3d(0, -18px, 0) scale(1.012, 1.028); }
  18% { transform: translate3d(-5px, 9px, 0) scale(1.026, 0.986); }
  36% { transform: translate3d(7px, -7px, 0) scale(1.014, 1.018); }
  52% { transform: translate3d(-3px, 16px, 0) scale(1.032, 0.978); }
  70% { transform: translate3d(4px, -12px, 0) scale(1.008, 1.036); }
  86% { transform: translate3d(-8px, 4px, 0) scale(1.022, 0.992); }
  100% { transform: translate3d(0, -18px, 0) scale(1.012, 1.028); }
}

@keyframes rewind-object-hunt {
  0%, 100% { transform: translate3d(0, -3px, 0); }
  24% { transform: translate3d(-6px, 5px, 0) skewX(-0.45deg); }
  47% { transform: translate3d(8px, -7px, 0) skewX(0.7deg); }
  71% { transform: translate3d(-3px, 9px, 0) scaleY(0.98); }
  88% { transform: translate3d(5px, -4px, 0) scaleY(1.02); }
}

@keyframes rewind-vhs-roll {
  from { transform: translate3d(0, 40%, 0) scaleY(1.35); background-position: 0 190px, 0 0; }
  to { transform: translate3d(0, -52%, 0) scaleY(0.82); background-position: 0 -190px, 0 -46px; }
}

@keyframes rewind-head-switch {
  0% { transform: translate3d(0, 0, 0); clip-path: polygon(0 0,100% 0,100% 86%,0 93%); }
  34% { transform: translate3d(-9px, 7px, 0) scaleX(1.035); clip-path: polygon(0 2%,100% 0,100% 91%,0 83%); }
  67% { transform: translate3d(12px, -5px, 0) scaleX(1.05); clip-path: polygon(0 0,100% 5%,100% 79%,0 94%); }
  100% { transform: translate3d(-4px, -12px, 0); clip-path: polygon(0 1%,100% 0,100% 88%,0 84%); }
}

@keyframes containment-close-pulse {
  0%, 100% { filter: brightness(0.82) contrast(1.34); }
  50% { filter: brightness(1.18) contrast(1.76); }
}

@keyframes containment-vault-jitter {
  0% { transform: translate3d(0, 0, 0); }
  16% { transform: translate3d(-6px, 2px, 0); }
  33% { transform: translate3d(3px, -4px, 0); }
  51% { transform: translate3d(-2px, 5px, 0); }
  68% { transform: translate3d(5px, -1px, 0); }
  84% { transform: translate3d(-4px, -3px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes containment-shadow-noise {
  0%, 100% { transform: translate3d(-3%, 2%, 0) scale(1.05); }
  33% { transform: translate3d(4%, -5%, 0) scale(1.08); }
  66% { transform: translate3d(-1%, 6%, 0) scale(1.04); }
}

@keyframes containment-shadow-drift {
  from { transform: translate3d(-7%, -2%, 0) scale(1.06); opacity: 0.22; }
  to { transform: translate3d(8%, 4%, 0) scale(1.14); opacity: 0.46; }
}

/* Pervision finale transmission states. */
.pervision-constellation,
.pervision-slash,
.pervision-end-screen,
.pervision-blackout {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pervision-constellation {
  z-index: 2;
  opacity: 0;
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.96) 0 1px, transparent 1.8px),
    radial-gradient(circle at 31% 64%, rgba(146,192,255,.82) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.88) 0 1.2px, transparent 2px),
    radial-gradient(circle at 83% 58%, rgba(197,218,255,.78) 0 1px, transparent 2px),
    radial-gradient(circle at 54% 31%, rgba(255,255,255,.76) 0 .8px, transparent 1.7px),
    radial-gradient(circle at 42% 81%, rgba(112,158,255,.68) 0 1px, transparent 2px),
    radial-gradient(circle at 66% 74%, rgba(255,255,255,.72) 0 .9px, transparent 1.9px),
    radial-gradient(ellipse at 50% 48%, rgba(36,62,131,.2), rgba(7,8,17,.08) 42%, transparent 74%);
  background-size: 173px 139px, 229px 181px, 307px 211px, 263px 193px, 199px 167px, 281px 229px, 347px 251px, 100% 100%;
  mix-blend-mode: screen;
  filter: brightness(.7) contrast(1.3);
  transform: scale(1.04);
  transition: opacity 8s ease, filter 8s ease;
}

.pervision-stage.constellation-visible .pervision-constellation {
  opacity: .38;
  animation: pervision-constellation-drift 42s linear infinite, pervision-constellation-twinkle 7.2s steps(1, end) infinite;
}

.pervision-stage.constellation-intense .pervision-constellation {
  opacity: .7;
  filter: brightness(1.12) contrast(1.6) drop-shadow(0 0 8px rgba(91,145,255,.4));
}

.pervision-stage.story-approach .pervision-figure {
  animation: pervision-story-approach var(--story-approach-duration, 112s) cubic-bezier(.18,.58,.2,1) forwards;
}

.pervision-stage.story-retreat .pervision-figure {
  animation: pervision-story-retreat 3.4s cubic-bezier(.16,.74,.18,1) forwards;
}

.pervision-stage.uncertainty-hold .pervision-uncertainty-start {
  opacity: 1;
  animation: none;
}

.pervision-stage.uncertainty-filter-active .pervision-video {
  animation: pervision-uncertainty-filter 1.55s steps(1, jump-end) both;
}

.pervision-stage.uncertainty-filter-active .pervision-interference {
  opacity: .64;
  animation: pervision-uncertainty-interference 1.55s steps(1, jump-end) both;
}

.pervision-stage.mode-glitch .pervision-video {
  animation: pervision-mode-switch .36s steps(1, jump-end) both;
}

.pervision-stage.dialogue-severe-glitch .pervision-figure {
  animation: pervision-severe-dialogue-glitch .19s steps(1, jump-end) infinite;
}

.pervision-stage.dialogue-severe-glitch .pervision-interference {
  opacity: .72;
  filter: contrast(2.8) brightness(1.5);
  animation-duration: .24s;
}

.caption-italic {
  font-style: italic;
}

.caption-bold {
  font-weight: 900;
  letter-spacing: .19em;
}

.caption-corrupt {
  position: relative;
  display: inline-block;
  color: #ef1010;
  text-shadow: -1px 0 rgba(255,0,0,.9), 1px 0 rgba(170,220,255,.65), 0 0 8px #c00000, 0 0 17px rgba(255,0,0,.72);
  animation: pervision-word-corrupt .34s steps(1, jump-end) infinite;
}

.pervision-slash {
  z-index: 62;
  opacity: 0;
  overflow: hidden;
  isolation: isolate;
}

.pervision-slash::before,
.pervision-slash::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180vmax;
  height: clamp(3px, .7vmin, 9px);
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 7px #fff, 0 0 18px #8bd9ff, 0 0 42px #1e79ff, 0 0 94px rgba(0,73,255,.94);
  transform: translate(-50%,-50%) rotate(-26deg) scaleX(0);
  transform-origin: center;
}

.pervision-stage.slash-active .pervision-slash {
  opacity: 1;
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(158,219,255,.15) 6px, transparent 8px),
    radial-gradient(ellipse at 50% 50%, rgba(120,198,255,.38), rgba(8,45,155,.17) 35%, transparent 68%);
  animation: pervision-slash-field 1.15s steps(1, jump-end) both;
}

.pervision-stage.slash-active .pervision-slash::before {
  animation: pervision-slash-cut .8s cubic-bezier(.08,.7,.16,1) both;
}

.pervision-stage.slash-active .pervision-slash::after {
  height: clamp(18px, 4vmin, 58px);
  filter: blur(13px);
  animation: pervision-slash-bloom .92s cubic-bezier(.08,.68,.2,1) both;
}

.pervision-stage.transmission-corrupted .pervision-figure,
.pervision-stage.transmission-corrupted .pervision-caption,
.pervision-stage.transmission-corrupted .pervision-whispers {
  animation: pervision-transmission-shear 80ms steps(1, jump-end) infinite;
}

.recording-hud.transmission-corrupted {
  color: #fff;
  text-shadow: -4px 0 #ff0000, 4px 0 #087fff, 0 0 12px #fff;
  animation: pervision-transmission-shear 70ms steps(1, jump-end) infinite;
}

.pervision-stage.end-screen-active {
  z-index: 85;
  filter: none;
}

.pervision-end-screen {
  z-index: 72;
  display: none;
  place-content: center;
  gap: clamp(11px,2vh,24px);
  padding: 7vw;
  color: #d9eaff;
  text-align: center;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(183,226,255,.1) 3px, transparent 4px),
    linear-gradient(180deg, rgba(3,14,38,.99), #000 42% 58%, rgba(34,0,0,.98));
  mix-blend-mode: normal;
  opacity: 0;
}

.pervision-end-screen.visible {
  display: grid;
  opacity: 1;
  animation: pervision-error-arrive .9s steps(1, jump-end) both, pervision-error-idle .16s 1s steps(1, jump-end) infinite;
}

.pervision-end-screen span {
  position: relative;
  display: inline-block;
  color: #fff;
  font: 900 clamp(1.8rem,7vw,7rem)/.82 "OCR A Std", "Agency FB", "Bahnschrift SemiCondensed", "Lucida Console", monospace;
  letter-spacing: .15em;
  text-shadow: -5px 0 #ff1717, 5px 0 #136dff, 0 0 11px #fff, 0 0 28px rgba(255,0,0,.35);
  transform: scaleY(1.18) skewX(-2.4deg);
}

.pervision-end-screen span::before,
.pervision-end-screen span::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pervision-end-screen span::before {
  color: rgba(255, 18, 18, .78);
  text-shadow: -7px 0 #9b0000;
  animation: pervision-end-title-a .41s steps(1, jump-end) infinite;
}

.pervision-end-screen span::after {
  color: rgba(190, 226, 255, .62);
  text-shadow: 6px 0 #245dff;
  animation: pervision-end-title-b .53s steps(1, jump-end) infinite;
}

.pervision-end-screen strong {
  color: #ff2626;
  font: 900 clamp(.82rem,2vw,1.9rem)/1.15 "OCR A Std", "Agency FB", "Bahnschrift SemiCondensed", "Lucida Console", monospace;
  letter-spacing: .22em;
  text-shadow: 0 0 12px #ff0000;
  transform: scaleY(1.12) skewX(-1.2deg);
}

.pervision-end-screen p {
  margin: 0;
  color: rgba(222,238,255,.68);
  font: 700 clamp(.48rem,.9vw,.82rem)/1.4 "OCR A Std", "Lucida Console", "Courier New", monospace;
  letter-spacing: .2em;
}

.pervision-blackout {
  z-index: 90;
  opacity: 0;
  background: #000;
}

.pervision-blackout.active {
  animation: pervision-consciousness-loss 4.6s cubic-bezier(.18,.61,.16,1) forwards;
}

.pervision-stage.consciousness-loss .pervision-end-screen {
  animation: pervision-error-collapse 4.6s cubic-bezier(.12,.66,.18,1) forwards;
}

.credits-stage {
  position: fixed;
  z-index: 96;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: #000;
  isolation: isolate;
}

.credits-stage.visible {
  opacity: 1;
  animation: credits-fade-in 1.2s ease-out both;
}

.credits-stage.visible::before,
.credits-stage.visible::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: -5%;
  pointer-events: none;
}

.credits-stage.visible::before {
  opacity: .46;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(255,255,255,.09) 18px, transparent 20px),
    linear-gradient(90deg, transparent 0 29%, rgba(255,0,24,.12) 29.3% 30%, transparent 30.4% 67%, rgba(80,180,255,.11) 67.2% 67.8%, transparent 68.2%);
  animation: credits-rip-field .46s steps(1, end) infinite;
}

.credits-stage.visible::after {
  opacity: .42;
  mix-blend-mode: color-dodge;
  background:
    linear-gradient(0deg, transparent 0 12%, rgba(255,255,255,.15) 12.3% 12.9%, transparent 13.4% 59%, rgba(255,16,32,.18) 59.2% 61%, transparent 61.4%),
    repeating-linear-gradient(90deg, transparent 0 91px, rgba(70,180,255,.055) 92px, transparent 94px);
  animation: credits-dropout-bars .73s steps(1, end) infinite;
}

.credits-video,
.credits-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.credits-video {
  z-index: 1;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  background: #000;
  /* The supplied master contains a uniform 10% encoded matte; crop it cleanly. */
  transform: scale(1.285);
}

.credits-stage.visible .credits-video {
  animation:
    credits-heavy-jitter .82s steps(1, end) infinite,
    credits-chromatic-crush 3.1s steps(1, end) infinite;
}

.credits-grain {
  z-index: 2;
  opacity: .22;
  pointer-events: none;
  mix-blend-mode: screen;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.03) 3px, transparent 4px),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: credits-fine-grain .09s steps(2, end) infinite;
}

@keyframes pervision-score-bar {
  0%, 100% { opacity: 0; transform: scale(.88); filter: blur(12px); }
  6% { opacity: .075; transform: scale(.94); filter: blur(7px); }
  24% { opacity: .025; transform: scale(1.08); filter: blur(14px); }
  54% { opacity: 0; transform: scale(1.22); filter: blur(18px); }
}

@keyframes credits-signal-acquire {
  0% { opacity: 0; transform: scaleY(.01) scaleX(.76); filter: brightness(5) contrast(2.8); }
  18% { opacity: 1; transform: scaleY(.04) scaleX(1.04); filter: brightness(3.2) contrast(2.4); }
  42% { transform: scaleY(1.03) scaleX(.998); filter: brightness(1.7) contrast(1.5); }
  68% { transform: translate3d(-3px,1px,0) scale(1.003); filter: brightness(.78) contrast(1.35); }
  82% { transform: translate3d(2px,-1px,0) scale(.999); filter: brightness(1.18) contrast(1.2); }
  100% { opacity: 1; transform: none; filter: none; }
}

@keyframes credits-fine-grain {
  0%, 100% { transform: translate3d(-1.5%, 1%, 0) scale(1.04); }
  33% { transform: translate3d(1.2%, -1.3%, 0) scale(1.035); }
  66% { transform: translate3d(-.6%, -.4%, 0) scale(1.045); }
}

@keyframes credits-heavy-jitter {
  0%, 9%, 26%, 43%, 67%, 82%, 100% { transform: translate3d(0,0,0) scale(1.285); }
  10% { transform: translate3d(-7px,3px,0) skewX(-.35deg) scale(1.294); }
  11% { transform: translate3d(5px,-2px,0) skewX(.22deg) scale(1.288); }
  27% { transform: translate3d(3px,6px,0) scale(1.3,1.283); }
  28% { transform: translate3d(-4px,-3px,0) scale(1.286); }
  44% { transform: translate3d(8px,-1px,0) skewY(.28deg) scale(1.296); }
  45% { transform: translate3d(-6px,2px,0) scale(1.288); }
  68% { transform: translate3d(-3px,-6px,0) scale(1.292,1.3); }
  69% { transform: translate3d(4px,2px,0) scale(1.286); }
  83% { transform: translate3d(6px,4px,0) skewX(.3deg) scale(1.297); }
  84% { transform: translate3d(-5px,-2px,0) scale(1.287); }
}

@keyframes credits-chromatic-crush {
  0%, 17%, 52%, 76%, 100% { filter: contrast(1.08) saturate(1.03); }
  18% { filter: contrast(1.65) saturate(.55) drop-shadow(7px 0 rgba(255,0,24,.48)) drop-shadow(-6px 0 rgba(50,170,255,.42)); }
  19% { filter: contrast(1.2) saturate(1.3); }
  53% { filter: brightness(1.25) contrast(1.8) saturate(.35) drop-shadow(-8px 0 rgba(255,0,24,.4)); }
  54% { filter: brightness(.84) contrast(1.35) saturate(1.2); }
  77% { filter: contrast(1.75) saturate(.5) hue-rotate(-7deg) drop-shadow(6px 0 rgba(70,180,255,.4)); }
  78% { filter: contrast(1.1) saturate(1.04); }
}

@keyframes credits-rip-field {
  0%, 15%, 39%, 63%, 86%, 100% { transform: translate3d(0,0,0) scale(1.02); opacity: .18; }
  16% { transform: translate3d(11px,-7px,0) scale(1.035,1.018); opacity: .62; }
  17% { transform: translate3d(-8px,4px,0) scale(1.02); opacity: .28; }
  40% { transform: translate3d(-14px,6px,0) scale(1.04,1.012); opacity: .7; }
  41% { transform: translate3d(5px,-3px,0) scale(1.02); opacity: .2; }
  64% { transform: translate3d(9px,8px,0) scale(1.028,1.04); opacity: .66; }
  65% { transform: translate3d(-4px,-2px,0) scale(1.02); opacity: .24; }
  87% { transform: translate3d(-12px,-5px,0) scale(1.042,1.016); opacity: .72; }
  88% { transform: translate3d(4px,2px,0) scale(1.02); opacity: .2; }
}

@keyframes credits-dropout-bars {
  0%, 21%, 48%, 71%, 100% { transform: translate3d(0,0,0); opacity: .1; }
  22% { transform: translate3d(-2.4%,4%,0) scaleX(1.05); opacity: .58; }
  23% { transform: translate3d(1.6%,-2%,0); opacity: .18; }
  49% { transform: translate3d(3.2%,-6%,0) scaleX(.97); opacity: .66; }
  50% { transform: translate3d(-1.2%,2%,0); opacity: .14; }
  72% { transform: translate3d(-3.6%,5%,0) scaleX(1.06); opacity: .7; }
  73% { transform: translate3d(1%,0,0); opacity: .16; }
}

@keyframes pervision-story-approach {
  0% { transform: scale(1); }
  38% { transform: scale(1.14) translateY(1.5%); }
  72% { transform: scale(1.34) translateY(3.7%); }
  100% { transform: scale(1.58) translateY(7.2%); }
}

@keyframes pervision-story-retreat {
  0% { transform: scale(1.58) translateY(7.2%); }
  22% { transform: scale(1.51) translateY(6.4%); }
  100% { transform: scale(1.25) translateY(3%); }
}

@keyframes pervision-constellation-drift {
  0% { background-position: 0 0,0 0,0 0,0 0,0 0,0 0,0 0,50% 50%; transform: scale(1.04) rotate(0); }
  100% { background-position: 173px -139px,-229px 181px,307px 211px,-263px -193px,199px -167px,-281px 229px,347px -251px,50% 50%; transform: scale(1.1) rotate(.5deg); }
}

@keyframes pervision-constellation-twinkle {
  0%,100% { filter: brightness(.72) contrast(1.3); }
  17% { filter: brightness(1.05) contrast(1.55); }
  19% { filter: brightness(.55) contrast(1.8); }
  63% { filter: brightness(.86) contrast(1.42); }
  65% { filter: brightness(1.2) contrast(1.7); }
}

@keyframes pervision-datamosh-hold {
  0%,100% { transform: scale(1.08); filter: brightness(.55) contrast(1.5) saturate(.7); clip-path: inset(0); }
  12% { transform: translate3d(-13px,2px,0) scale(1.11,1.075); filter: brightness(.82) contrast(2.4) saturate(.2); clip-path: polygon(0 0,100% 0,100% 26%,0 31%,0 100%,100% 100%,100% 70%,0 64%); }
  34% { transform: translate3d(9px,-3px,0) scale(1.075,1.1); filter: brightness(.38) contrast(3) hue-rotate(28deg); }
  53% { transform: translate3d(-5px,5px,0) scale(1.1,1.06); clip-path: inset(14% 0 9%); }
  72% { transform: translate3d(15px,-1px,0) scale(1.07,1.12); filter: brightness(.76) contrast(2.6) saturate(1.4); }
}

@keyframes pervision-uncertainty-filter {
  0%, 100% { filter: brightness(.72) contrast(1.55) saturate(.86) drop-shadow(0 0 18px rgba(255,0,0,.38)); clip-path: inset(0); }
  8% { filter: brightness(1.7) contrast(3.4) saturate(.05) invert(.08) hue-rotate(-18deg) blur(.35px); clip-path: inset(3% 0 58%); }
  17% { filter: brightness(.24) contrast(4.2) saturate(1.8) hue-rotate(23deg); clip-path: inset(42% 0 9%); }
  29% { filter: brightness(1.34) contrast(2.9) saturate(.32) invert(.14) blur(.7px); clip-path: inset(12% 0 31%); }
  41% { filter: brightness(.4) contrast(4.6) saturate(.2) hue-rotate(-31deg); clip-path: inset(61% 0 5%); }
  58% { filter: brightness(1.08) contrast(3.2) saturate(1.25) blur(.25px); clip-path: inset(0 0 72%); }
  73% { filter: brightness(.55) contrast(3.8) saturate(.4) hue-rotate(14deg); clip-path: inset(28% 0 20%); }
  87% { filter: brightness(.86) contrast(2.1) saturate(.72) blur(.2px); clip-path: inset(7% 0 3%); }
}

@keyframes pervision-uncertainty-interference {
  0%, 100% { filter: contrast(1.4) brightness(.8); background-position: 0 0, 0 0; }
  14% { filter: contrast(3.8) brightness(1.7); background-position: 0 -41px, 0 88px; }
  31% { filter: contrast(2.7) brightness(.44); background-position: 0 72px, 0 -53px; }
  49% { filter: contrast(4.4) brightness(1.22); background-position: 0 -109px, 0 37px; }
  68% { filter: contrast(3.1) brightness(.58); background-position: 0 54px, 0 -126px; }
  84% { filter: contrast(2.2) brightness(1.08); background-position: 0 -29px, 0 61px; }
}

@keyframes pervision-mode-switch {
  0%,100% { transform: scale(1.08) translate3d(0,0,0); filter: brightness(.58) contrast(1.38) saturate(.8); }
  16% { transform: scale(1.0805) translate3d(-3.8px,.8px,0); filter: brightness(1.02) contrast(1.62) saturate(.68); }
  31% { transform: scale(1.0795) translate3d(2.9px,-.7px,0); filter: brightness(.49) contrast(1.74) saturate(.9); }
  49% { transform: scale(1.0803) translate3d(-2.1px,.45px,0) skewX(-.24deg); filter: brightness(.72) contrast(1.48) saturate(.78); }
  68% { transform: scale(1.0798) translate3d(1.4px,-.3px,0); filter: brightness(.55) contrast(1.5) saturate(.83); }
  84% { transform: scale(1.08) translate3d(-.6px,.15px,0); filter: brightness(.62) contrast(1.42) saturate(.8); }
}

@keyframes pervision-severe-dialogue-glitch {
  0% { transform: translate3d(-9px,3px,0) scale(1.018,1.006); filter: contrast(1.9) brightness(.76); clip-path: inset(0); }
  24% { transform: translate3d(13px,-5px,0) scale(1.03,.99) skewX(1.2deg); filter: contrast(2.8) brightness(1.3) saturate(.2); clip-path: inset(7% 0 63%); }
  49% { transform: translate3d(-16px,7px,0) scale(.99,1.025) skewX(-1.8deg); filter: contrast(3.2) brightness(.44) hue-rotate(24deg); clip-path: inset(58% 0 12%); }
  73% { transform: translate3d(8px,-2px,0) scale(1.016); filter: contrast(2.3) brightness(1.6); clip-path: inset(31% 0 39%); }
  100% { transform: translate3d(-5px,1px,0) scale(1.01); filter: contrast(1.8) brightness(.68); clip-path: inset(0); }
}

@keyframes pervision-word-corrupt {
  0%,100% { transform: translate(0); clip-path: inset(0); filter: brightness(1); }
  18% { transform: translate(-2px,1px) skewX(-3deg); clip-path: inset(0 0 58%); filter: brightness(1.8); }
  39% { transform: translate(3px,-1px) skewX(2deg); clip-path: inset(47% 0 18%); }
  61% { transform: translate(-1px,0); clip-path: inset(68% 0 0); filter: brightness(.7); }
  78% { transform: translate(2px,1px) scaleX(1.03); clip-path: inset(0); filter: brightness(1.35); }
}

@keyframes pervision-slash-cut {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(-26deg) scaleX(.002); filter: brightness(5); }
  7% { opacity: 1; transform: translate(-50%,-50%) rotate(-26deg) scaleX(.1); }
  27% { opacity: 1; transform: translate(-50%,-50%) rotate(-26deg) scaleX(1); filter: brightness(4); }
  52% { opacity: .96; transform: translate(-50%,-50%) rotate(-26deg) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(-26deg) scaleX(1.05); filter: blur(2px) brightness(1.5); }
}

@keyframes pervision-slash-bloom {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(-26deg) scaleX(.002) scaleY(.2); }
  18% { opacity: .85; transform: translate(-50%,-50%) rotate(-26deg) scaleX(1) scaleY(1); }
  52% { opacity: .58; transform: translate(-50%,-50%) rotate(-26deg) scaleX(1.04) scaleY(2.6); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(-26deg) scaleX(1.08) scaleY(6); }
}

@keyframes pervision-slash-field {
  0% { opacity: 0; filter: brightness(1); }
  8% { opacity: 1; filter: brightness(4) contrast(2); }
  18% { transform: translate3d(-18px,7px,0) scale(1.03); filter: brightness(.4) contrast(3); }
  31% { transform: translate3d(21px,-9px,0) scale(1.05,.98); filter: brightness(2.8) contrast(2); }
  48% { transform: translate3d(-8px,4px,0); filter: brightness(1.5) contrast(2.5); }
  100% { opacity: 0; transform: none; filter: brightness(1); }
}

@keyframes pervision-transmission-shear {
  0% { transform: translate3d(-12px,3px,0) skewX(-1deg); filter: brightness(1.6) contrast(2.4); clip-path: inset(0); }
  25% { transform: translate3d(17px,-6px,0) skewX(1.7deg); filter: brightness(.45) contrast(3); clip-path: inset(8% 0 58%); }
  50% { transform: translate3d(-20px,7px,0) scaleX(1.04); filter: brightness(2.4) contrast(2); clip-path: inset(54% 0 13%); }
  75% { transform: translate3d(9px,-2px,0) scaleY(.96); filter: brightness(.7) contrast(3.2); clip-path: inset(28% 0 42%); }
  100% { transform: translate3d(-5px,1px,0); filter: brightness(1.35) contrast(2.2); clip-path: inset(0); }
}

@keyframes pervision-error-arrive {
  0% { opacity: 0; transform: scaleX(.03) scaleY(.006); filter: brightness(8) blur(5px); }
  13% { opacity: 1; transform: scaleX(1) scaleY(.012); filter: brightness(6); }
  24% { transform: scaleX(.92) scaleY(1.08) translateX(-16px); filter: brightness(2.2) contrast(3); clip-path: inset(39% 0); }
  39% { transform: scaleX(1.05) translateX(19px); filter: brightness(.45) contrast(3.4); clip-path: inset(9% 0 58%); }
  54% { transform: translateX(-11px); filter: brightness(2); clip-path: inset(61% 0 6%); }
  72% { transform: translateX(6px); filter: brightness(.78) contrast(2); clip-path: inset(0); }
  100% { opacity: 1; transform: none; filter: none; clip-path: inset(0); }
}

@keyframes pervision-error-idle {
  0%,100% { transform: translate3d(0,0,0); filter: contrast(1.2); }
  33% { transform: translate3d(-2px,1px,0); filter: contrast(1.7) brightness(.92); }
  66% { transform: translate3d(2px,-1px,0); filter: contrast(1.35) brightness(1.08); }
}

@keyframes pervision-end-title-a {
  0%, 72%, 100% { opacity: 0; clip-path: inset(100% 0 0); transform: translate(0); }
  74% { opacity: .76; clip-path: inset(9% 0 66%); transform: translate(-7px, 1px); }
  79% { opacity: .32; clip-path: inset(58% 0 13%); transform: translate(4px, -1px); }
  84% { opacity: 0; clip-path: inset(100% 0 0); transform: translate(0); }
}

@keyframes pervision-end-title-b {
  0%, 83%, 100% { opacity: 0; clip-path: inset(0 0 100%); transform: translate(0); }
  85% { opacity: .62; clip-path: inset(48% 0 22%); transform: translate(6px, -1px); }
  91% { opacity: .28; clip-path: inset(18% 0 62%); transform: translate(-3px, 1px); }
  95% { opacity: 0; clip-path: inset(0 0 100%); transform: translate(0); }
}

@keyframes pervision-consciousness-loss {
  0% { opacity: 0; }
  18% { opacity: .08; }
  54% { opacity: .46; }
  82% { opacity: .88; }
  100% { opacity: 1; }
}

@keyframes pervision-error-collapse {
  0% { opacity: 1; transform: none; filter: none; }
  45% { opacity: .82; transform: scale(.99); filter: brightness(.62) blur(.3px); }
  78% { opacity: .28; transform: scale(.94); filter: brightness(.25) blur(1.2px); }
  100% { opacity: 0; transform: scale(.9); filter: brightness(0) blur(3px); }
}

@keyframes credits-fade-in {
  0% { opacity: 0; filter: brightness(.2) contrast(1.7); }
  35% { opacity: .2; filter: brightness(.5) contrast(1.35); }
  100% { opacity: 1; filter: none; }
}

@media (max-width: 680px) {
  .recording-topline {
    flex-wrap: wrap;
  }

  .recording-spacer {
    display: none;
  }

  #recording-timecode {
    margin-left: auto;
  }

  .recording-bottomline span:last-child {
    display: none;
  }

  .interior-placeholder {
    width: 86vw;
    padding: 26px 18px;
  }

  .pervision-caption {
    bottom: clamp(22px, 5vh, 48px);
    grid-template-columns: 52px minmax(0, 1fr);
    width: 90vw;
    min-height: 68px;
  }

  .pervision-caption-index {
    display: none;
  }

  .pervision-caption-channel {
    padding-inline: 10px;
  }
}

@media (orientation: portrait) {
  .vault-piece,
  .star-housing,
  .star-emitter {
    object-position: 50% 50%;
  }

  .star-corona {
    width: min(46vw, 26vh);
  }

  .recording-hud {
    font-size: clamp(0.48rem, 1.55vw, 0.68rem);
  }

  .pervision-eye-target {
    top: 50%;
    width: min(64vw, 520px);
    height: 88vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen-texture::before {
    animation-duration: 0.8s;
  }

  .vault-stack,
  .interior-haze,
  .fracture-texture,
  .piece-chromatic,
  .circuit-status::before,
  .circuit-status::after,
  #puzzle-message::before,
  #puzzle-message::after {
    animation: none;
  }

  .vhs-wave-overlay {
    animation-duration: 16s;
  }
}