:root {
  color-scheme: light;
  --paper: #eee8cf;
  --paper-warm: #f6f0dc;
  --paper-burn: #d9cda7;
  --ink: #11100d;
  --ink-soft: rgba(15, 15, 12, 0.58);
  --acid-green: #00d991;
  --signal-pink: #ff3f78;
  --thermal-orange: #ff7b34;
  --sun-yellow: #ffd95e;
  --cyan-drift: #00c8c1;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 244, 0.72), transparent 24rem),
    radial-gradient(circle at 82% 92%, rgba(181, 160, 101, 0.28), transparent 34rem),
    linear-gradient(119deg, var(--paper-warm), var(--paper) 48%, #e4d7b5);
  color: var(--ink);
  font-family: "Courier New", Courier, monospace;
}

.document-stage {
  position: fixed;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 15%, rgba(85, 68, 35, 0.08) 45%, transparent 77%),
    linear-gradient(180deg, rgba(255, 255, 246, 0.42), transparent 48%, rgba(103, 83, 37, 0.13));
}

.document-stage::before,
.document-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

.document-stage::before {
  opacity: 0.42;
  background:
    radial-gradient(circle at 14% 11%, rgba(31, 27, 18, 0.22) 0 1px, transparent 1px),
    radial-gradient(circle at 57% 42%, rgba(31, 27, 18, 0.14) 0 1px, transparent 1px),
    radial-gradient(circle at 81% 76%, rgba(255, 255, 255, 0.52) 0 1px, transparent 1px);
  background-size: 7px 7px, 11px 11px, 13px 13px;
  mix-blend-mode: multiply;
}

.document-stage::after {
  opacity: 0.22;
  background:
    repeating-linear-gradient(0deg, rgba(28, 24, 17, 0.1) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(91deg, transparent 0 23px, rgba(255, 255, 255, 0.26) 23px 25px, transparent 25px 56px);
  mix-blend-mode: overlay;
}

.code-rain {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0.74;
  mix-blend-mode: multiply;
}

.machine-document {
  position: absolute;
  inset: -3vh -2vw;
  z-index: 5;
  overflow: hidden;
  background:
    radial-gradient(circle at 53% 43%, rgba(255, 255, 248, 0.2), transparent 22rem),
    linear-gradient(90deg, transparent 0 28%, rgba(0, 200, 193, 0.08) 28% 42%, transparent 42%),
    linear-gradient(90deg, transparent 0 49%, rgba(255, 63, 120, 0.08) 49% 72%, transparent 72%);
  filter: contrast(1.04) saturate(1.1);
}

.machine-document::before,
.machine-document::after,
.paper-noise {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.machine-document::before {
  z-index: 34;
  opacity: 0.3;
  background:
    radial-gradient(circle at 36% 20%, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px),
    radial-gradient(circle at 71% 64%, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px),
    repeating-linear-gradient(1deg, rgba(56, 48, 31, 0.1) 0 1px, transparent 1px 8px);
  background-size: 9px 9px, 14px 14px, auto;
  mix-blend-mode: multiply;
}

.machine-document::after {
  z-index: 35;
  background: radial-gradient(circle at 50% 45%, transparent 0 38%, rgba(235, 226, 195, 0.18) 63%, rgba(83, 65, 31, 0.13) 100%);
  mix-blend-mode: multiply;
}

.paper-noise {
  z-index: 1;
  opacity: 0.7;
  background:
    radial-gradient(circle at 9% 13%, rgba(41, 34, 22, 0.18) 0 1px, transparent 1px),
    radial-gradient(circle at 69% 22%, rgba(41, 34, 22, 0.13) 0 1px, transparent 1px),
    radial-gradient(circle at 49% 76%, rgba(255, 255, 255, 0.52) 0 1px, transparent 1px);
  background-size: 6px 6px, 10px 10px, 16px 16px;
  mix-blend-mode: multiply;
}

.document-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  width: min(78vw, 68vh, 720px);
  aspect-ratio: 0.707 / 1;
  transform: translate(-50%, -50%);
}

.code-field,
.glyph-cloud,
.artifact-layer span {
  color: rgba(6, 7, 5, 0.76);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.96;
  overflow-wrap: anywhere;
  text-transform: lowercase;
  text-shadow:
    -2px 0 rgba(0, 200, 193, 0.28),
    2px 0 rgba(255, 63, 120, 0.24);
  transform: scaleX(0.88);
  transform-origin: left top;
}

.code-field {
  position: absolute;
  z-index: 12;
}

.code-field p {
  width: 48ch;
  margin: 0 0 6px;
}

.field-top {
  top: 8%;
  left: 8%;
  width: 48%;
}

.field-mid {
  top: 30%;
  left: 22%;
  width: 56%;
  opacity: 0.76;
  transform: skewY(-0.8deg);
}

.field-low {
  right: 13%;
  bottom: 8%;
  width: 44%;
  opacity: 0.68;
}

.data-band {
  position: absolute;
  z-index: 18;
  height: 26px;
  overflow: hidden;
  transform-origin: left center;
  filter: saturate(1.35);
  mix-blend-mode: multiply;
  animation:
    band-drift 9s ease-in-out infinite,
    band-pulse 3.8s steps(5, end) infinite;
}

.data-band::before,
.data-band::after {
  content: "";
  position: absolute;
  inset: 0;
}

.data-band::before {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent 22%),
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(255, 255, 255, 0.34) 8px 9px, transparent 9px 18px);
  mix-blend-mode: screen;
  transform: translateX(-40%);
  animation: band-scan 5.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.data-band::after {
  opacity: 0.56;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, transparent 0 11%, rgba(0, 0, 0, 0.16) 11% 12%, transparent 12% 43%, rgba(255, 255, 255, 0.34) 43% 45%, transparent 45%);
  mix-blend-mode: multiply;
  animation: band-break 7.4s steps(6, end) infinite;
}

.band-green {
  background: linear-gradient(90deg, rgba(0, 217, 145, 0), rgba(0, 217, 145, 0.86) 15%, rgba(0, 217, 145, 0.7) 82%, rgba(0, 217, 145, 0));
}

.band-pink {
  background: linear-gradient(90deg, rgba(255, 63, 120, 0), rgba(255, 63, 120, 0.72) 17%, rgba(255, 63, 120, 0.46) 84%, rgba(255, 63, 120, 0));
}

.band-orange {
  background: linear-gradient(90deg, rgba(255, 123, 52, 0.08), rgba(255, 123, 52, 0.86) 18%, rgba(255, 63, 120, 0.78) 74%, rgba(255, 63, 120, 0));
}

.band-yellow {
  background: linear-gradient(90deg, rgba(255, 217, 94, 0), rgba(255, 217, 94, 0.74), rgba(255, 217, 94, 0));
}

.band-one {
  top: 13%;
  left: 39%;
  width: 45%;
  animation-delay: -1.2s, -0.3s;
}

.band-two {
  top: 16%;
  left: 52%;
  width: 36%;
  height: 58px;
  animation-delay: -4s, -1.1s;
}

.band-three {
  top: 33%;
  left: 18%;
  width: 68%;
  animation-delay: -6.1s, -2.2s;
}

.band-four {
  top: 49%;
  left: 7%;
  width: 76%;
  height: 30px;
  animation-delay: -2.5s, -1.7s;
}

.band-five {
  top: 69%;
  left: 15%;
  width: 70%;
  height: 82px;
  opacity: 0.54;
  animation-delay: -7.2s, -0.8s;
}

.terminal-void {
  position: absolute;
  z-index: 20;
  top: 53%;
  left: 24%;
  width: 52%;
  height: 12%;
  background:
    radial-gradient(circle at 11% 28%, rgba(0, 200, 193, 0.2), transparent 12%),
    radial-gradient(circle at 71% 72%, rgba(255, 255, 255, 0.12), transparent 10%),
    linear-gradient(180deg, rgba(10, 10, 9, 0.98), rgba(0, 0, 0, 0.96));
  box-shadow:
    -23px 0 0 rgba(0, 0, 0, 0.22),
    18px 0 0 rgba(0, 0, 0, 0.16),
    0 0 34px rgba(0, 0, 0, 0.22);
  mix-blend-mode: multiply;
}

.terminal-void span {
  position: absolute;
  inset: 10% 0;
  opacity: 0.28;
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(255, 255, 255, 0.18) 5px 6px);
}

.terminal-void span + span {
  inset: 0;
  opacity: 0.16;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1px, transparent 1px);
  background-size: 23px 17px;
}

.barcode {
  position: absolute;
  z-index: 21;
  top: 52.3%;
  width: 7%;
  height: 13.5%;
  opacity: 0.86;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0 1px, transparent 1px 3px, rgba(0, 0, 0, 0.7) 3px 5px, transparent 5px 7px);
  mix-blend-mode: multiply;
}

.barcode-left {
  left: 17%;
  transform: skewY(0.6deg);
}

.barcode-right {
  right: 17%;
  transform: skewY(-0.6deg);
}

.glitch-stack {
  position: absolute;
  z-index: 15;
  opacity: 0.55;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg, rgba(0, 200, 193, 0.48) 0 2px, rgba(255, 63, 120, 0.32) 2px 4px, transparent 4px 9px);
  filter: blur(0.2px);
  mix-blend-mode: multiply;
}

.stack-one {
  top: 27%;
  left: 20%;
  width: 22%;
  height: 13%;
  transform: skewX(-7deg);
}

.stack-two {
  top: 72%;
  left: 15%;
  width: 23%;
  height: 13%;
  transform: skewX(3deg);
}

.stack-three {
  bottom: 5%;
  left: 35%;
  width: 26%;
  height: 8%;
  opacity: 0.72;
}

.faint-block {
  position: absolute;
  z-index: 8;
  opacity: 0.28;
  background: linear-gradient(90deg, rgba(244, 122, 119, 0.42), rgba(255, 229, 173, 0.28), transparent);
  filter: blur(0.6px);
  mix-blend-mode: multiply;
}

.block-one {
  top: 37%;
  left: 16%;
  width: 66%;
  height: 13%;
}

.block-two {
  top: 70%;
  left: 20%;
  width: 54%;
  height: 11%;
}

.glyph-cloud {
  position: absolute;
  z-index: 22;
  max-width: 42ch;
  opacity: 0.72;
  filter: blur(0.15px);
}

.cloud-one {
  top: 24%;
  left: 20%;
}

.cloud-two {
  right: 14%;
  top: 66%;
}

.cloud-three {
  left: 35%;
  bottom: 14%;
}

.registration {
  position: absolute;
  z-index: 10;
  opacity: 0.42;
  filter: blur(1.5px);
  mix-blend-mode: multiply;
  animation: registration-swim 8s ease-in-out infinite;
}

.registration-cyan {
  top: 5%;
  left: 31%;
  width: 31%;
  height: 78%;
  background: linear-gradient(180deg, transparent, rgba(0, 200, 193, 0.42), transparent 82%);
  transform: translateX(-18px) skewX(-4deg);
}

.registration-pink {
  top: 8%;
  left: 48%;
  width: 39%;
  height: 72%;
  background: linear-gradient(180deg, transparent, rgba(255, 63, 120, 0.36), transparent 78%);
  transform: translateX(14px) skewX(5deg);
  animation-delay: -3s;
}

.artifact-layer {
  position: absolute;
  inset: 0;
  z-index: 24;
  pointer-events: none;
}

.artifact-layer span {
  position: absolute;
  top: var(--top);
  left: var(--left);
  width: var(--width);
  opacity: var(--opacity);
  filter: blur(0.2px);
  transform: translateX(calc(var(--shift) * 12px)) scaleX(0.84);
  animation: artifact-drift var(--duration) steps(4, end) infinite;
  animation-delay: var(--delay);
  mix-blend-mode: multiply;
}

@keyframes band-scan {
  0% {
    transform: translateX(-44%);
  }

  45% {
    transform: translateX(28%);
  }

  100% {
    transform: translateX(108%);
  }
}

@keyframes band-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scaleX(1);
  }

  28% {
    transform: translate3d(14px, -1px, 0) scaleX(1.018);
  }

  57% {
    transform: translate3d(-9px, 2px, 0) scaleX(0.992);
  }

  72% {
    transform: translate3d(21px, 0, 0) scaleX(1.03);
  }
}

@keyframes band-pulse {
  0%,
  100% {
    opacity: 0.66;
  }

  21% {
    opacity: 0.96;
  }

  46% {
    opacity: 0.5;
  }

  63% {
    opacity: 0.9;
  }
}

@keyframes band-break {
  0%,
  100% {
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }

  32% {
    clip-path: inset(0 9% 0 0);
    transform: translateX(4px);
  }

  48% {
    clip-path: inset(18% 0 23% 0);
    transform: translateX(-7px);
  }

  61% {
    clip-path: inset(0 0 0 14%);
    transform: translateX(13px);
  }
}

@keyframes registration-swim {
  0%,
  100% {
    opacity: 0.28;
    filter: blur(1.6px);
  }

  42% {
    opacity: 0.5;
    filter: blur(0.7px);
  }

  72% {
    opacity: 0.36;
    filter: blur(2px);
  }
}

@keyframes artifact-drift {
  0%,
  100% {
    opacity: var(--opacity);
    transform: translateX(calc(var(--shift) * 12px)) scaleX(0.84);
  }

  35% {
    opacity: calc(var(--opacity) * 0.7);
    transform: translateX(calc(var(--shift) * 2px)) scaleX(0.98);
  }

  53% {
    opacity: calc(var(--opacity) * 1.12);
    transform: translateX(calc(var(--shift) * 21px)) scaleX(0.76);
  }
}

@media (max-width: 720px) {
  .code-field,
  .glyph-cloud,
  .artifact-layer span {
    font-size: 9px;
  }

  .machine-document {
    inset: -2vh -12vw;
  }

  .code-field p {
    width: 34ch;
  }

  .field-top {
    left: 10%;
    width: 58%;
  }

  .field-mid {
    left: 16%;
    width: 65%;
  }

  .terminal-void {
    left: 21%;
    width: 64%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .data-band,
  .data-band::before,
  .data-band::after,
  .registration,
  .artifact-layer span {
    animation: none;
  }
}