:root {
  --paper: #f4f1ea;
  --ink: #11110f;
  --muted: #6d6a61;
  --line: rgba(17, 17, 15, 0.14);
  --amber: #9a7a37;
  --cold: #8aa6ad;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.58), transparent 34rem),
    linear-gradient(135deg, #f7f4ed 0%, var(--paper) 48%, #e9e4d8 100%);
  color: var(--ink);
  font-family: "Inter", Arial, sans-serif;
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(17, 17, 15, 0.025) 1px, transparent 1px),
    linear-gradient(rgba(17, 17, 15, 0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.8;
}

a {
  color: inherit;
  text-decoration: none;
}

.page-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: clamp(18px, 3vw, 42px);
  position: relative;
  z-index: 2;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.brand-mark {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(17px, 1.6vw, 24px);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.site-nav a {
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  border-bottom-color: currentColor;
  outline: none;
}

.hero {
  min-height: 0;
  display: grid;
  align-items: end;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 6vw, 96px);
  padding: 12vh 0 clamp(32px, 7vh, 76px);
}

.hero-copy {
  max-width: 980px;
}

.eyebrow,
.status-line,
.registration {
  color: var(--muted);
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 600;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 clamp(18px, 3vh, 34px);
}

h1 {
  margin: 0;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(48px, 11vw, 154px);
  line-height: 0.88;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  position: relative;
  text-wrap: balance;
}

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

body.is-glitching h1::before {
  color: rgba(138, 166, 173, 0.82);
  transform: translate(-2px, 1px);
  clip-path: inset(12% 0 63% 0);
  opacity: 0.8;
}

body.is-glitching h1::after {
  color: rgba(154, 122, 55, 0.82);
  transform: translate(3px, -1px);
  clip-path: inset(58% 0 17% 0);
  opacity: 0.85;
}

body.is-page-glitch h1::before,
body.glitch-split h1::before,
body.glitch-signal h1::before,
body.glitch-invert h1::before,
body.glitch-negative h1::before {
  color: rgba(0, 122, 143, 0.72);
  transform: translate(-5px, -2px);
  clip-path: inset(4% 0 72% 0);
  opacity: 0.88;
}

body.is-page-glitch h1::after,
body.glitch-split h1::after,
body.glitch-signal h1::after,
body.glitch-invert h1::after,
body.glitch-negative h1::after {
  color: rgba(154, 89, 38, 0.72);
  transform: translate(6px, 2px);
  clip-path: inset(68% 0 7% 0);
  opacity: 0.88;
}

body.glitch-split h1::before {
  transform: translate(-9px, 0);
  clip-path: inset(16% 0 58% 0);
}

body.glitch-split h1::after {
  transform: translate(8px, 0);
  clip-path: inset(52% 0 22% 0);
}

body.glitch-signal h1::before {
  color: rgba(255, 255, 255, 0.9);
  transform: translate(-2px, 1px);
  clip-path: inset(0 0 76% 0);
}

body.glitch-signal h1::after {
  color: rgba(0, 0, 0, 0.62);
  transform: translate(2px, -1px);
  clip-path: inset(76% 0 0 0);
}

body.glitch-invert h1::before {
  transform: translate(-14px, -2px);
  clip-path: inset(28% 0 47% 0);
}

body.glitch-invert h1::after {
  transform: translate(13px, 2px);
  clip-path: inset(47% 0 29% 0);
}

body.glitch-negative h1::before {
  color: rgba(210, 248, 255, 0.92);
  transform: translate(-7px, -1px);
  clip-path: inset(8% 0 61% 0);
}

body.glitch-negative h1::after {
  color: rgba(255, 184, 88, 0.74);
  transform: translate(7px, 1px);
  clip-path: inset(54% 0 18% 0);
}

body.glitch-whiteout h1::before,
body.glitch-blackout h1::before,
body.glitch-slice h1::before,
body.glitch-overprint h1::before,
body.glitch-reversal h1::before {
  color: rgba(255, 255, 255, 0.9);
  transform: translate(-4px, 0);
  clip-path: inset(0 0 78% 0);
  opacity: 0.92;
}

body.glitch-whiteout h1::after,
body.glitch-blackout h1::after,
body.glitch-slice h1::after,
body.glitch-overprint h1::after,
body.glitch-reversal h1::after {
  color: rgba(17, 17, 15, 0.74);
  transform: translate(5px, 0);
  clip-path: inset(77% 0 0 0);
  opacity: 0.9;
}

body.glitch-slice h1::before {
  color: rgba(138, 166, 173, 0.9);
  transform: translate(-11px, -1px);
  clip-path: inset(20% 0 56% 0);
}

body.glitch-slice h1::after {
  color: rgba(154, 122, 55, 0.88);
  transform: translate(12px, 1px);
  clip-path: inset(50% 0 26% 0);
}

body.glitch-overprint h1::before {
  color: rgba(0, 122, 143, 0.68);
  transform: translate(-18px, 3px);
  clip-path: inset(0 0 0 0);
}

body.glitch-overprint h1::after {
  color: rgba(154, 89, 38, 0.62);
  transform: translate(16px, -2px);
  clip-path: inset(0 0 0 0);
}

body.glitch-reversal h1::before {
  color: rgba(244, 241, 234, 0.96);
  transform: translate(-6px, -2px);
  clip-path: inset(12% 0 58% 0);
}

body.glitch-reversal h1::after {
  color: rgba(244, 241, 234, 0.88);
  transform: translate(7px, 2px);
  clip-path: inset(58% 0 14% 0);
}

body.glitch-phase h1::before,
body.glitch-semantic h1::before,
body.glitch-legal h1::before,
body.glitch-redact h1::before,
body.glitch-void h1::before {
  color: rgba(138, 166, 173, 0.72);
  transform: translate(-10px, 1px);
  clip-path: inset(18% 0 58% 0);
  opacity: 0.86;
}

body.glitch-phase h1::after,
body.glitch-semantic h1::after,
body.glitch-legal h1::after,
body.glitch-redact h1::after,
body.glitch-void h1::after {
  color: rgba(154, 122, 55, 0.72);
  transform: translate(12px, -1px);
  clip-path: inset(52% 0 22% 0);
  opacity: 0.86;
}

body.glitch-semantic h1::before {
  transform: translate(-14px, 0);
  clip-path: inset(0 0 74% 0);
}

body.glitch-semantic h1::after {
  transform: translate(14px, 0);
  clip-path: inset(72% 0 0 0);
}

.status-line {
  margin: clamp(22px, 4vh, 42px) 0 0;
}

.registration {
  align-self: end;
  display: grid;
  gap: 12px;
  min-width: 190px;
  border-left: 1px solid var(--line);
  padding-left: 22px;
}

.image-flash,
.flash-field,
.slice-field,
.copy-glitch,
.redaction-field,
.void-field,
.static-field,
.tear-field,
.noise-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.image-flash {
  z-index: 8;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.86);
  opacity: 0;
  mix-blend-mode: multiply;
}

.image-flash img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  filter: contrast(1.2) saturate(0.86) brightness(0.82);
  transform: scale(1.03);
}

.image-flash.is-visible {
  animation: imageFlash 460ms steps(3, end);
}

.flash-field {
  z-index: 8;
  opacity: 0;
  background: transparent;
}

.slice-field {
  z-index: 10;
  opacity: 0;
  background:
    linear-gradient(180deg, transparent 0 9%, rgba(17, 17, 15, 0.9) 9% 10%, transparent 10% 23%, rgba(244, 241, 234, 0.86) 23% 24%, transparent 24% 39%, rgba(138, 166, 173, 0.48) 39% 40%, transparent 40% 63%, rgba(154, 122, 55, 0.42) 63% 64%, transparent 64%),
    repeating-linear-gradient(90deg, rgba(17, 17, 15, 0.12) 0 2px, transparent 2px 9px);
  mix-blend-mode: difference;
  transform: translateX(0);
}

.copy-glitch {
  z-index: 12;
  opacity: 0;
  display: grid;
  place-items: start;
  padding: 0;
  mix-blend-mode: multiply;
}

.copy-glitch span {
  position: fixed;
  left: var(--copy-x, 18vw);
  top: var(--copy-y, 42vh);
  max-width: min(540px, 82vw);
  color: rgba(17, 17, 15, 0.82);
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 700;
  line-height: 1;
  padding: 0;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow:
    -7px 0 0 rgba(138, 166, 173, 0.32),
    6px 0 0 rgba(154, 122, 55, 0.24);
}

.redaction-field {
  z-index: 12;
  opacity: 0;
}

.redaction-field span {
  position: fixed;
  left: var(--redact-x);
  top: var(--redact-y);
  width: var(--redact-w);
  height: var(--redact-h);
  background: #11110f;
  box-shadow: 8px 0 0 rgba(244, 241, 234, 0.82), -6px 0 0 rgba(17, 17, 15, 0.34);
  transform-origin: left center;
}

.void-field {
  z-index: 13;
  opacity: 0;
  background:
    repeating-linear-gradient(0deg, rgba(244, 241, 234, 0.08) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(244, 241, 234, 0.06) 0 1px, transparent 1px 9px),
    #050505;
  mix-blend-mode: normal;
}

.static-field {
  z-index: 9;
  opacity: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 3px);
  mix-blend-mode: difference;
}

.tear-field {
  z-index: 10;
  opacity: 0;
  background:
    linear-gradient(180deg, transparent 0 28%, rgba(255, 255, 255, 0.72) 28% 29%, transparent 29% 55%, rgba(0, 0, 0, 0.78) 55% 56%, transparent 56%),
    linear-gradient(90deg, rgba(138, 166, 173, 0.18), rgba(154, 122, 55, 0.12));
  transform: translateY(-6px);
  mix-blend-mode: hard-light;
}

.noise-canvas {
  z-index: 11;
  opacity: 0.055;
  mix-blend-mode: multiply;
}

body.is-glitching .page-shell {
  animation: pageTear 180ms steps(2, end);
}

body.is-page-glitch .page-shell {
  animation: pageCorrupt 520ms steps(5, end);
}

body.glitch-split .page-shell {
  animation: splitCorrupt 260ms steps(3, end);
}

body.glitch-tear .page-shell {
  animation: horizontalTear 430ms steps(4, end);
}

body.glitch-signal .page-shell {
  animation: signalLoss 720ms steps(6, end);
}

body.glitch-invert .page-shell {
  animation: pageCorrupt 620ms steps(5, end);
}

body.glitch-negative .page-shell {
  animation: photoNegative 680ms steps(6, end);
}

body.glitch-whiteout .page-shell {
  animation: exposurePop 220ms steps(2, end);
}

body.glitch-blackout .page-shell {
  animation: blackoutDrop 280ms steps(3, end);
}

body.glitch-slice .page-shell {
  animation: sliceSlip 360ms steps(4, end);
}

body.glitch-overprint .page-shell {
  animation: overprintSlip 420ms steps(4, end);
}

body.glitch-reversal .page-shell {
  animation: hardReversal 300ms steps(3, end);
}

body.glitch-legal .page-shell {
  animation: legalPageDrop 620ms steps(4, end);
}

body.glitch-redact .page-shell {
  animation: redactionJolt 520ms steps(4, end);
}

body.glitch-semantic .page-shell {
  animation: semanticSnap 760ms steps(5, end);
}

body.glitch-phase .brand-mark,
body.glitch-phase .site-nav,
body.glitch-phase .eyebrow,
body.glitch-phase h1,
body.glitch-phase .status-line,
body.glitch-phase .registration {
  animation: textPhaseSlip 340ms steps(4, end);
}

body.glitch-void .page-shell {
  animation: voidDissolvePage 2600ms steps(8, end);
}

body.glitch-void .void-field {
  animation: voidField 2600ms steps(8, end);
}

body.glitch-whiteout .flash-field {
  animation: whiteoutFlash 220ms steps(2, end);
}

body.glitch-blackout .flash-field {
  animation: blackoutFlash 280ms steps(3, end);
}

body.glitch-overprint .flash-field {
  animation: overprintFlash 420ms steps(4, end);
}

body.glitch-reversal .flash-field {
  animation: reversalFlash 300ms steps(3, end);
}

body.glitch-slice .slice-field {
  animation: sliceBands 360ms steps(4, end);
}

body.glitch-overprint .slice-field {
  animation: overprintBands 420ms steps(4, end);
}

body.glitch-reversal .slice-field {
  animation: reversalBands 300ms steps(3, end);
}

body.glitch-legal .copy-glitch {
  animation: copyIntrusion 620ms steps(4, end);
}

body.glitch-redact .redaction-field {
  animation: redactionField 520ms steps(4, end);
}

body.glitch-redact .redaction-field span {
  animation: redactionBar 520ms steps(4, end);
  animation-delay: var(--redact-delay);
}

body.is-glitching .static-field {
  animation: staticBurst 180ms steps(2, end);
}

body.is-page-glitch .static-field {
  animation: staticDrag 520ms steps(5, end);
}

body.glitch-split .static-field {
  animation: staticBurst 260ms steps(3, end);
}

body.glitch-tear .static-field {
  animation: staticDrag 430ms steps(4, end);
}

body.glitch-signal .static-field {
  animation: signalStatic 720ms steps(6, end);
}

body.glitch-invert .static-field {
  animation: staticDrag 620ms steps(5, end);
}

body.glitch-negative .static-field {
  animation: negativeStatic 680ms steps(6, end);
}

body.glitch-whiteout .static-field {
  animation: flashStatic 220ms steps(2, end);
}

body.glitch-blackout .static-field {
  animation: flashStatic 280ms steps(3, end);
}

body.glitch-slice .static-field {
  animation: sliceStatic 360ms steps(4, end);
}

body.glitch-overprint .static-field {
  animation: sliceStatic 420ms steps(4, end);
}

body.glitch-reversal .static-field {
  animation: reversalStatic 300ms steps(3, end);
}

body.glitch-legal .static-field {
  animation: flashStatic 620ms steps(4, end);
}

body.glitch-redact .static-field {
  animation: flashStatic 520ms steps(4, end);
}

body.glitch-semantic .static-field {
  animation: signalStatic 760ms steps(5, end);
}

body.glitch-phase .static-field {
  animation: staticBurst 340ms steps(4, end);
}

body.glitch-void .static-field {
  animation: voidStatic 2600ms steps(8, end);
}

body.glitch-void .tear-field {
  animation: voidTear 2600ms steps(8, end);
}

body.glitch-slice .tear-field {
  animation: sliceTear 360ms steps(4, end);
}

body.glitch-overprint .tear-field {
  animation: sliceTear 420ms steps(4, end);
}

body.is-glitching .tear-field {
  animation: tearBurst 180ms steps(2, end);
}

body.is-page-glitch .tear-field {
  animation: tearDrag 520ms steps(5, end);
}

body.glitch-split .tear-field {
  animation: tearBurst 260ms steps(3, end);
}

body.glitch-tear .tear-field {
  animation: horizontalTearField 430ms steps(4, end);
}

body.glitch-signal .tear-field {
  animation: signalTear 720ms steps(6, end);
}

body.glitch-invert .tear-field {
  animation: tearDrag 620ms steps(5, end);
}

body.glitch-negative .tear-field {
  animation: negativeWash 680ms steps(6, end);
}

@keyframes imageFlash {
  0% { opacity: 0; transform: translateX(0); }
  20% { opacity: 0.94; transform: translateX(-10px); }
  58% { opacity: 0.7; transform: translateX(9px); }
  100% { opacity: 0; transform: translateX(0); }
}

@keyframes exposurePop {
  0% { filter: none; transform: translate(0); }
  38% { filter: invert(1) grayscale(1) contrast(2.4) brightness(1.35); transform: translate(2px, 0); }
  62% { filter: contrast(1.8) brightness(1.8) saturate(0); transform: translate(-2px, 0); }
  100% { filter: none; transform: translate(0); }
}

@keyframes blackoutDrop {
  0% { filter: none; opacity: 1; transform: translate(0); }
  26% { filter: grayscale(1) contrast(2.2) brightness(0.18); opacity: 0.58; transform: translate(0, 1px); }
  54% { filter: invert(1) contrast(1.4) brightness(0.52); opacity: 0.78; transform: translate(-3px, 0); }
  100% { filter: none; opacity: 1; transform: translate(0); }
}

@keyframes sliceSlip {
  0% { filter: none; transform: translate(0); clip-path: inset(0); }
  18% { filter: contrast(1.5) saturate(0.6); transform: translate(-10px, 0); clip-path: inset(0 0 72% 0); }
  36% { filter: invert(1) contrast(1.2); transform: translate(12px, -1px); clip-path: inset(26% 0 48% 0); }
  62% { filter: grayscale(1) contrast(1.8); transform: translate(-6px, 1px); clip-path: inset(57% 0 18% 0); }
  100% { filter: none; transform: translate(0); clip-path: inset(0); }
}

@keyframes overprintSlip {
  0% { filter: none; transform: translate(0); }
  18% { filter: contrast(1.22) saturate(1.7); transform: translate(-5px, 2px); }
  42% { filter: sepia(0.65) hue-rotate(146deg) contrast(1.55); transform: translate(8px, -2px); }
  68% { filter: invert(0.18) contrast(1.7) saturate(1.9); transform: translate(-9px, 0); }
  100% { filter: none; transform: translate(0); }
}

@keyframes hardReversal {
  0% { filter: none; transform: translate(0); }
  28% { filter: invert(1) grayscale(1) contrast(2.6) brightness(0.95); transform: translate(0, -2px); }
  55% { filter: invert(1) hue-rotate(180deg) contrast(1.9) brightness(1.12); transform: translate(3px, 2px); }
  100% { filter: none; transform: translate(0); }
}

@keyframes legalPageDrop {
  0% { filter: none; transform: translate(0); }
  16% { filter: contrast(1.2) saturate(0.82); transform: translate(-2px, 1px); }
  38% { filter: grayscale(0.7) contrast(1.45); transform: translate(3px, 0); }
  64% { filter: contrast(1.1); transform: translate(-1px, -1px); }
  100% { filter: none; transform: translate(0); }
}

@keyframes redactionJolt {
  0% { filter: none; transform: translate(0); }
  18% { filter: contrast(1.38) brightness(0.92); transform: translate(2px, 0); }
  42% { filter: grayscale(1) contrast(1.6); transform: translate(-3px, 1px); }
  68% { filter: contrast(1.2); transform: translate(1px, -1px); }
  100% { filter: none; transform: translate(0); }
}

@keyframes semanticSnap {
  0% { filter: none; transform: translate(0); }
  12% { filter: invert(1) contrast(1.2); transform: translate(-3px, 0); }
  28% { filter: contrast(1.5) saturate(0.6); transform: translate(4px, -1px); }
  54% { filter: grayscale(1) contrast(1.25); transform: translate(-2px, 1px); }
  78% { filter: contrast(1.1); transform: translate(1px, 0); }
  100% { filter: none; transform: translate(0); }
}

@keyframes textPhaseSlip {
  0% { filter: none; transform: translate(0); }
  18% { filter: contrast(1.35); transform: translate(-12px, 0); }
  38% { filter: invert(1) contrast(1.1); transform: translate(16px, -1px); }
  64% { filter: grayscale(1) contrast(1.6); transform: translate(-5px, 1px); }
  100% { filter: none; transform: translate(0); }
}

@keyframes voidDissolvePage {
  0% {
    opacity: 1;
    filter: none;
    transform: translate(0);
  }
  10% {
    opacity: 0.88;
    filter: contrast(1.5) saturate(0.6);
    transform: translate(-6px, 1px);
  }
  22% {
    opacity: 0.5;
    filter: grayscale(1) contrast(2) brightness(0.68);
    transform: translate(8px, -1px);
  }
  34% {
    opacity: 0.14;
    filter: invert(1) contrast(1.6) brightness(0.24);
    transform: translate(-4px, 2px);
  }
  44%,
  72% {
    opacity: 0;
    filter: grayscale(1) contrast(0.4) brightness(0);
    transform: translate(0);
  }
  86% {
    opacity: 0;
    filter: grayscale(1) contrast(2) brightness(0);
    transform: translate(10px, 0);
  }
  92% {
    opacity: 1;
    filter: invert(1) contrast(2.2);
    transform: translate(-12px, 0);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: translate(0);
  }
}

@keyframes whiteoutFlash {
  0% { opacity: 0; background: #f4f1ea; mix-blend-mode: normal; }
  36% { opacity: 0.96; background: #f7f4ed; mix-blend-mode: normal; }
  62% { opacity: 0.36; background: rgba(255, 255, 255, 0.74); mix-blend-mode: color-dodge; }
  100% { opacity: 0; background: transparent; mix-blend-mode: normal; }
}

@keyframes blackoutFlash {
  0% { opacity: 0; background: #11110f; mix-blend-mode: normal; }
  28% { opacity: 0.92; background: #11110f; mix-blend-mode: normal; }
  54% { opacity: 0.48; background: rgba(0, 0, 0, 0.86); mix-blend-mode: multiply; }
  100% { opacity: 0; background: transparent; mix-blend-mode: normal; }
}

@keyframes overprintFlash {
  0% { opacity: 0; background: transparent; mix-blend-mode: multiply; }
  18% { opacity: 0.58; background: rgba(138, 166, 173, 0.44); mix-blend-mode: multiply; }
  42% { opacity: 0.42; background: rgba(154, 122, 55, 0.5); mix-blend-mode: screen; }
  68% { opacity: 0.52; background: rgba(17, 17, 15, 0.32); mix-blend-mode: difference; }
  100% { opacity: 0; background: transparent; mix-blend-mode: normal; }
}

@keyframes reversalFlash {
  0% { opacity: 0; background: #11110f; mix-blend-mode: difference; }
  30% { opacity: 0.9; background: #f4f1ea; mix-blend-mode: difference; }
  58% { opacity: 0.34; background: rgba(17, 17, 15, 0.82); mix-blend-mode: exclusion; }
  100% { opacity: 0; background: transparent; mix-blend-mode: normal; }
}

@keyframes sliceBands {
  0% { opacity: 0; transform: translateX(0); background-position: 0 0; }
  18% { opacity: 0.72; transform: translateX(-22px); background-position: 80px 0; }
  36% { opacity: 0.34; transform: translateX(18px); background-position: -60px 0; }
  62% { opacity: 0.62; transform: translateX(-10px); background-position: 36px 0; }
  100% { opacity: 0; transform: translateX(0); background-position: 0 0; }
}

@keyframes overprintBands {
  0% { opacity: 0; transform: translate(0); background-position: 0 0; }
  18% { opacity: 0.52; transform: translate(-16px, 2px); background-position: 64px 0; }
  42% { opacity: 0.4; transform: translate(20px, -1px); background-position: -90px 0; }
  68% { opacity: 0.6; transform: translate(-8px, 0); background-position: 30px 0; }
  100% { opacity: 0; transform: translate(0); background-position: 0 0; }
}

@keyframes reversalBands {
  0% { opacity: 0; transform: translateX(0); }
  28% { opacity: 0.78; transform: translateX(14px); }
  55% { opacity: 0.38; transform: translateX(-12px); }
  100% { opacity: 0; transform: translateX(0); }
}

@keyframes copyIntrusion {
  0% { opacity: 0; transform: translate(0); }
  12% { opacity: 0.92; transform: translate(-10px, 0); }
  22% { opacity: 0.34; transform: translate(8px, -1px); }
  36% { opacity: 0.82; transform: translate(0, 1px); }
  62% { opacity: 0.52; transform: translate(-4px, 0); }
  100% { opacity: 0; transform: translate(0); }
}

@keyframes redactionField {
  0% { opacity: 0; transform: translate(0); }
  16% { opacity: 0.94; transform: translate(-6px, 0); }
  42% { opacity: 0.68; transform: translate(8px, -1px); }
  70% { opacity: 0.88; transform: translate(-2px, 1px); }
  100% { opacity: 0; transform: translate(0); }
}

@keyframes redactionBar {
  0% { transform: scaleX(0); }
  18% { transform: scaleX(1.04); }
  42% { transform: scaleX(0.82); }
  70% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

@keyframes voidField {
  0% {
    opacity: 0;
    transform: scale(1);
    background-size: 8px 8px, 13px 13px, auto;
  }
  10% {
    opacity: 0.2;
    transform: scale(1.01);
    background-size: 12px 12px, 18px 18px, auto;
  }
  22% {
    opacity: 0.58;
    transform: scale(1.025) translate(-8px, 0);
    background-size: 20px 20px, 28px 28px, auto;
  }
  34% {
    opacity: 0.92;
    transform: scale(1.04) translate(6px, -2px);
    background-size: 34px 34px, 46px 46px, auto;
  }
  44%,
  72% {
    opacity: 1;
    transform: scale(1);
    background-size: 52px 52px, 71px 71px, auto;
  }
  82% {
    opacity: 0.72;
    transform: scale(1.02) translate(-10px, 0);
    background-size: 24px 24px, 34px 34px, auto;
  }
  90% {
    opacity: 0.96;
    transform: scale(1.01) translate(12px, 0);
    background-size: 9px 9px, 14px 14px, auto;
  }
  100% {
    opacity: 0;
    transform: scale(1);
    background-size: 8px 8px, 13px 13px, auto;
  }
}

@keyframes pageCorrupt {
  0% { filter: none; transform: translate(0); }
  14% { filter: contrast(1.2) saturate(0.7); transform: translate(-7px, 0); clip-path: inset(0 0 0 0); }
  28% { filter: contrast(1.5) grayscale(0.8); transform: translate(5px, -2px); clip-path: inset(0 0 18% 0); }
  42% { filter: invert(1) contrast(1.08); transform: translate(-3px, 2px); clip-path: inset(21% 0 0 0); }
  56% { filter: contrast(1.35) sepia(0.24); transform: translate(9px, 0); clip-path: inset(0 0 0 0); }
  72% { filter: grayscale(1) contrast(1.5); transform: translate(-4px, -1px); }
  100% { filter: none; transform: translate(0); clip-path: inset(0 0 0 0); }
}

@keyframes splitCorrupt {
  0% { filter: none; transform: translate(0); }
  24% { filter: contrast(1.35); transform: translate(-8px, 0); }
  58% { filter: grayscale(1) contrast(1.6); transform: translate(7px, 0); }
  100% { filter: none; transform: translate(0); }
}

@keyframes horizontalTear {
  0% { filter: none; transform: translate(0); clip-path: inset(0); }
  18% { filter: contrast(1.42); transform: translate(0, -4px); clip-path: inset(0 0 24% 0); }
  38% { filter: contrast(1.1) saturate(0.35); transform: translate(0, 5px); clip-path: inset(31% 0 32% 0); }
  72% { filter: contrast(1.36); transform: translate(0, -2px); clip-path: inset(68% 0 0 0); }
  100% { filter: none; transform: translate(0); clip-path: inset(0); }
}

@keyframes signalLoss {
  0% { filter: none; opacity: 1; transform: translate(0); }
  12% { filter: grayscale(1) contrast(1.5) brightness(0.92); opacity: 0.86; transform: translate(-2px, 0); }
  30% { filter: grayscale(1) contrast(1.9) brightness(1.15); opacity: 0.74; transform: translate(1px, 1px); }
  48% { filter: grayscale(1) contrast(0.8) brightness(1.3); opacity: 0.92; transform: translate(0, -1px); }
  74% { filter: grayscale(0.8) contrast(1.3); opacity: 0.82; transform: translate(2px, 0); }
  100% { filter: none; opacity: 1; transform: translate(0); }
}

@keyframes photoNegative {
  0% {
    filter: none;
    transform: translate(0);
  }
  10% {
    filter: invert(1) hue-rotate(172deg) contrast(1.35) brightness(1.08);
    transform: translate(-3px, 1px);
  }
  24% {
    filter: invert(1) hue-rotate(190deg) contrast(1.72) saturate(0.6);
    transform: translate(4px, -1px);
  }
  42% {
    filter: invert(1) grayscale(1) contrast(2.1) brightness(0.92);
    transform: translate(-6px, 0);
  }
  60% {
    filter: invert(1) hue-rotate(155deg) contrast(1.45) brightness(1.18);
    transform: translate(3px, 2px);
  }
  78% {
    filter: invert(0.82) hue-rotate(180deg) contrast(1.2);
    transform: translate(-2px, -1px);
  }
  100% {
    filter: none;
    transform: translate(0);
  }
}

@keyframes staticBurst {
  0% { opacity: 0; transform: translate(0); }
  30% { opacity: 0.38; transform: translate(-3px, 2px); }
  65% { opacity: 0.22; transform: translate(4px, -1px); }
  100% { opacity: 0; transform: translate(0); }
}

@keyframes flashStatic {
  0% { opacity: 0; transform: translate(0); }
  28% { opacity: 0.28; transform: translate(-6px, 1px); }
  58% { opacity: 0.12; transform: translate(8px, -1px); }
  100% { opacity: 0; transform: translate(0); }
}

@keyframes sliceStatic {
  0% { opacity: 0; transform: translate(0); }
  18% { opacity: 0.46; transform: translate(-18px, 0); }
  38% { opacity: 0.2; transform: translate(22px, -1px); }
  64% { opacity: 0.52; transform: translate(-7px, 1px); }
  100% { opacity: 0; transform: translate(0); }
}

@keyframes reversalStatic {
  0% { opacity: 0; transform: translate(0); }
  28% { opacity: 0.64; transform: translate(9px, -1px); }
  55% { opacity: 0.18; transform: translate(-6px, 1px); }
  100% { opacity: 0; transform: translate(0); }
}

@keyframes voidStatic {
  0% { opacity: 0; transform: translate(0); }
  10% { opacity: 0.24; transform: translate(-8px, 0); }
  22% { opacity: 0.58; transform: translate(12px, -1px); }
  34% { opacity: 0.36; transform: translate(-6px, 2px); }
  44%, 72% { opacity: 0.08; transform: translate(0); }
  86% { opacity: 0.42; transform: translate(16px, 0); }
  92% { opacity: 0.7; transform: translate(-18px, -1px); }
  100% { opacity: 0; transform: translate(0); }
}

@keyframes negativeStatic {
  0% { opacity: 0; transform: translate(0); }
  10% { opacity: 0.58; transform: translate(-8px, 0); }
  24% { opacity: 0.32; transform: translate(7px, -2px); }
  42% { opacity: 0.68; transform: translate(-3px, 3px); }
  60% { opacity: 0.24; transform: translate(10px, 0); }
  78% { opacity: 0.46; transform: translate(-5px, -1px); }
  100% { opacity: 0; transform: translate(0); }
}

@keyframes staticDrag {
  0% { opacity: 0; transform: translate(0); }
  14% { opacity: 0.5; transform: translate(-12px, 3px); }
  28% { opacity: 0.18; transform: translate(8px, -2px); }
  42% { opacity: 0.62; transform: translate(-4px, 4px); }
  56% { opacity: 0.28; transform: translate(12px, 0); }
  100% { opacity: 0; transform: translate(0); }
}

@keyframes signalStatic {
  0% { opacity: 0; transform: translate(0); }
  12% { opacity: 0.18; transform: translate(0, 0); }
  30% { opacity: 0.48; transform: translate(-2px, 0); }
  48% { opacity: 0.12; transform: translate(2px, 0); }
  74% { opacity: 0.34; transform: translate(0, -1px); }
  100% { opacity: 0; transform: translate(0); }
}

@keyframes tearBurst {
  0% { opacity: 0; transform: translateY(-8px); }
  32% { opacity: 0.72; transform: translateY(4px); }
  70% { opacity: 0.18; transform: translateY(-2px); }
  100% { opacity: 0; transform: translateY(0); }
}

@keyframes sliceTear {
  0% { opacity: 0; transform: translate(0); }
  18% { opacity: 0.58; transform: translate(-14px, -4px) skewX(-8deg); }
  38% { opacity: 0.2; transform: translate(18px, 3px) skewX(5deg); }
  64% { opacity: 0.5; transform: translate(-6px, -1px) skewX(-3deg); }
  100% { opacity: 0; transform: translate(0); }
}

@keyframes voidTear {
  0% { opacity: 0; transform: translate(0); }
  10% { opacity: 0.18; transform: translate(-10px, -2px) skewX(-5deg); }
  22% { opacity: 0.62; transform: translate(20px, 2px) skewX(8deg); }
  34% { opacity: 0.28; transform: translate(-16px, -1px) skewX(-10deg); }
  44%, 72% { opacity: 0; transform: translate(0); }
  86% { opacity: 0.44; transform: translate(18px, 1px) skewX(7deg); }
  92% { opacity: 0.8; transform: translate(-22px, -2px) skewX(-9deg); }
  100% { opacity: 0; transform: translate(0); }
}

@keyframes horizontalTearField {
  0% { opacity: 0; transform: translateY(0); }
  18% { opacity: 0.8; transform: translateY(-18px); }
  38% { opacity: 0.26; transform: translateY(12px); }
  72% { opacity: 0.58; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(0); }
}

@keyframes signalTear {
  0% { opacity: 0; transform: translate(0); }
  16% { opacity: 0.16; transform: translate(-1px, 0); }
  34% { opacity: 0.5; transform: translate(2px, 0); }
  56% { opacity: 0.2; transform: translate(0, 1px); }
  100% { opacity: 0; transform: translate(0); }
}

@keyframes negativeWash {
  0% {
    opacity: 0;
    transform: translateY(0);
    background:
      linear-gradient(180deg, transparent 0 28%, rgba(255, 255, 255, 0.72) 28% 29%, transparent 29% 55%, rgba(0, 0, 0, 0.78) 55% 56%, transparent 56%),
      linear-gradient(90deg, rgba(138, 166, 173, 0.18), rgba(154, 122, 55, 0.12));
  }
  14% {
    opacity: 0.82;
    transform: translateY(-10px);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.74), transparent 18%, rgba(0, 0, 0, 0.82) 19%, transparent 21%, rgba(255, 255, 255, 0.48) 58%, transparent 60%),
      linear-gradient(90deg, rgba(157, 223, 232, 0.38), rgba(255, 174, 75, 0.24));
  }
  44% {
    opacity: 0.5;
    transform: translateY(8px);
  }
  70% {
    opacity: 0.72;
    transform: translateY(-4px);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes tearDrag {
  0% {
    opacity: 0;
    transform: translateY(-10px) skewX(0deg);
    background-position: 0 0;
  }
  16% {
    opacity: 0.72;
    transform: translateY(3px) skewX(-6deg);
    background-position: 48px 0;
  }
  34% {
    opacity: 0.36;
    transform: translateY(-4px) skewX(4deg);
    background-position: -32px 0;
  }
  58% {
    opacity: 0.64;
    transform: translateY(5px) skewX(-3deg);
    background-position: 18px 0;
  }
  100% {
    opacity: 0;
    transform: translateY(0) skewX(0deg);
    background-position: 0 0;
  }
}

@keyframes pageTear {
  0% { filter: none; transform: translate(0); }
  35% { filter: contrast(1.35) saturate(0.7); transform: translate(3px, -1px); }
  62% { filter: invert(1) contrast(1.2); transform: translate(-2px, 1px); }
  100% { filter: none; transform: translate(0); }
}

@media (max-width: 760px) {
  body {
    overflow: hidden;
  }

  .page-shell {
    padding: 18px;
  }

  .site-header {
    align-items: flex-start;
  }

  .site-nav {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px 16px;
    text-align: right;
  }

  .hero {
    grid-template-columns: 1fr;
    align-content: end;
    padding-top: 10vh;
  }

  .registration {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 18px;
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-flash,
  .flash-field,
  .slice-field,
  .copy-glitch,
  .redaction-field,
  .void-field,
  .static-field,
  .tear-field,
  .noise-canvas {
    display: none;
  }

  body.is-glitching .page-shell,
  body.is-glitching h1::before,
  body.is-glitching h1::after {
    animation: none;
  }
}