:root {
  --under-tile-black: #090A0D;
  --wet-concrete-charcoal: #202329;
  --fogged-glass-blue-gray: #7F8A96;
  --muted-circuit-sage: #8AA59A;
  --monster-eye-amber: #E0A84F;
  --bruised-mauve-shadow: #5B4A56;
  --pale-condenser-glow: #D8DDD2;
  --display: "IBM Plex Mono", "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --secondary: "Space Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --accent-jp: "Noto Sans JP", "IBM Plex Mono", sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--under-tile-black);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--pale-condenser-glow);
  font-family: var(--secondary);
  background:
    radial-gradient(circle at 20% 8%, rgba(91, 74, 86, .26), transparent 28rem),
    radial-gradient(circle at 84% 28%, rgba(138, 165, 154, .16), transparent 34rem),
    linear-gradient(140deg, #090A0D 0%, #111317 42%, #202329 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(216, 221, 210, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 221, 210, .028) 1px, transparent 1px);
  background-size: 9.6vw 9.6vw;
  transform: rotate(-7deg);
  z-index: 1;
}

.film-grain,
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.film-grain {
  opacity: .13;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(circle at 14% 21%, rgba(255,255,255,.65) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 43%, rgba(255,255,255,.45) 0 1px, transparent 1px),
    radial-gradient(circle at 38% 78%, rgba(255,255,255,.5) 0 1px, transparent 1px),
    radial-gradient(circle at 91% 13%, rgba(255,255,255,.3) 0 1px, transparent 1px);
  background-size: 19px 23px, 31px 29px, 37px 41px, 53px 47px;
  animation: grainJitter .9s steps(2, end) infinite;
}

.vignette {
  z-index: 49;
  background: radial-gradient(ellipse at center, transparent 34%, rgba(9, 10, 13, .46) 70%, rgba(9, 10, 13, .9) 100%);
}

.opening,
.chamber {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
}

.opening {
  display: grid;
  place-items: center;
  padding: 8vw;
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 48%, rgba(224, 168, 79, .06), transparent 17rem),
    linear-gradient(180deg, rgba(9, 10, 13, 1), rgba(9, 10, 13, .8) 72%, rgba(32, 35, 41, .48));
}

.opening::after {
  content: "";
  position: absolute;
  width: 44vmin;
  height: 24vmin;
  border: 1px solid rgba(127, 138, 150, .13);
  border-radius: 46% 54% 57% 43% / 62% 38% 54% 46%;
  background: rgba(32, 35, 41, .2);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 0 45px rgba(216, 221, 210, .04), 0 0 70px rgba(138, 165, 154, .08);
  opacity: 0;
  animation: firstReveal 5.8s ease forwards .9s;
}

.opening-mark {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  font-size: clamp(.75rem, 1.1vw, 1rem);
  letter-spacing: .54em;
  text-transform: lowercase;
  color: rgba(216, 221, 210, .76);
  z-index: 3;
}

.opening-caption,
.subtitle {
  font-family: var(--display);
  color: rgba(216, 221, 210, .66);
  letter-spacing: .16em;
  text-transform: lowercase;
  font-size: clamp(.7rem, 1vw, .9rem);
  line-height: 1.9;
}

.opening-caption {
  position: absolute;
  bottom: 9vh;
  opacity: 0;
  animation: captionIn 2.8s ease forwards 2.2s;
}

.opening-circuit {
  width: min(88vw, 1180px);
  height: auto;
  overflow: visible;
  z-index: 2;
}

.opening-circuit path,
.trace,
.branch,
.fork,
.resistors {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quiet-line {
  stroke: rgba(138, 165, 154, .24);
  stroke-width: 1.4;
}

.wake-line {
  stroke: var(--monster-eye-amber);
  stroke-width: 3;
  stroke-dasharray: 72 1120;
  filter: drop-shadow(0 0 12px rgba(224, 168, 79, .62));
  animation: amberRun 4.8s cubic-bezier(.55, 0, .3, 1) infinite 1.25s;
}

.solder-eye {
  fill: var(--monster-eye-amber);
  opacity: 0;
  filter: drop-shadow(0 0 11px rgba(224, 168, 79, .9));
  animation: eyeBlink 5.8s ease infinite 3s;
}

.scene-wire {
  position: fixed;
  left: clamp(1rem, 3vw, 2.2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: grid;
  gap: 1.1rem;
  padding: 1.1rem .75rem;
  border-left: 1px solid rgba(138, 165, 154, .2);
}

.wire-label {
  writing-mode: vertical-rl;
  font-family: var(--display);
  font-size: .58rem;
  letter-spacing: .28em;
  color: rgba(127, 138, 150, .62);
  transform: rotate(180deg);
}

.tick {
  width: 1rem;
  height: 1rem;
  position: relative;
  display: block;
}

.tick i {
  position: absolute;
  inset: .33rem;
  border-radius: 50%;
  background: rgba(127, 138, 150, .5);
  transition: background .45s ease, box-shadow .45s ease, transform .45s ease;
}

.tick.active i,
.tick:hover i {
  background: var(--monster-eye-amber);
  box-shadow: 0 0 18px rgba(224, 168, 79, .86);
  transform: scale(1.8);
}

.tunnel {
  position: relative;
  z-index: 2;
}

.chamber {
  padding: clamp(5rem, 10vw, 9rem) clamp(1.35rem, 8vw, 8rem);
  display: grid;
  align-items: center;
  overflow: hidden;
}

.chamber::before {
  content: "";
  position: absolute;
  inset: 8% 6%;
  border-radius: 45% 55% 52% 48% / 36% 57% 43% 64%;
  border: 1px solid rgba(127, 138, 150, .05);
  transform: rotate(var(--frame-tilt, -4deg));
  box-shadow: inset 0 0 120px rgba(9, 10, 13, .55);
  z-index: -2;
}

.chamber-a { --frame-tilt: -5deg; }
.chamber-b { --frame-tilt: 4deg; }
.chamber-c { --frame-tilt: -2deg; }
.chamber-d { --frame-tilt: 6deg; }
.chamber-e { --frame-tilt: -7deg; }

.ambient {
  position: absolute;
  width: 52vmax;
  height: 52vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .22;
  z-index: -3;
  animation: breatheField 7s ease-in-out infinite;
}

.ambient-sage { background: #8AA59A; left: -20vmax; top: 8vh; }
.ambient-mauve { background: #5B4A56; right: -22vmax; top: 0; }
.ambient-amber { background: #E0A84F; left: 18vw; top: 28vh; opacity: .12; }
.ambient-blue { background: #7F8A96; right: 18vw; bottom: -24vmax; }
.ambient-dawn { background: #D8DDD2; right: -18vmax; top: 18vh; opacity: .13; }

.circuit {
  position: absolute;
  width: min(88vw, 900px);
  height: auto;
  opacity: .9;
  z-index: -1;
  overflow: visible;
}

.circuit-a { right: 1vw; top: 7vh; transform: rotate(-10deg); }
.circuit-b { left: 0; top: 4vh; transform: rotate(7deg); }
.circuit-c { right: 0; bottom: -8vh; transform: rotate(4deg); }
.circuit-d { left: 4vw; top: 0; transform: rotate(-5deg); }
.circuit-e { right: 5vw; top: 8vh; transform: rotate(9deg); }

.trace.base {
  stroke: rgba(138, 165, 154, .28);
  stroke-width: 2;
}

.trace.live {
  stroke: #E0A84F;
  stroke-width: 4;
  stroke-dasharray: 38 720;
  filter: drop-shadow(0 0 10px rgba(224, 168, 79, .56));
  animation: traceTravel 5.6s ease-in-out infinite;
}

.trace.live.slow { animation-duration: 7.4s; }
.trace.live.heartbeat { animation: traceTravel 4.6s ease-in-out infinite, lineHeart 2.1s ease-in-out infinite; }

.branch,
.fork,
.resistors {
  stroke: rgba(127, 138, 150, .34);
  stroke-width: 2;
}

.node {
  fill: rgba(224, 168, 79, .74);
  filter: drop-shadow(0 0 12px rgba(224, 168, 79, .65));
  animation: nodeBreath 3.8s ease-in-out infinite;
}

.pane {
  position: relative;
  width: min(34rem, 88vw);
  min-height: 30rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid rgba(127, 138, 150, .28);
  border-radius: 35% 65% 48% 52% / 42% 36% 64% 58%;
  background:
    linear-gradient(145deg, rgba(216, 221, 210, .08), transparent 34%),
    radial-gradient(circle at 42% 34%, rgba(127, 138, 150, .13), transparent 42%),
    rgba(32, 35, 41, .48);
  backdrop-filter: blur(20px) saturate(.9);
  box-shadow:
    inset 0 1px 0 rgba(216, 221, 210, .16),
    inset 0 -32px 80px rgba(9, 10, 13, .28),
    0 34px 95px rgba(0, 0, 0, .44);
  opacity: .45;
  transform: translate3d(var(--drift-x, 0), 3rem, 0) rotate(var(--tilt, -3deg));
  transition: opacity 900ms ease, transform 900ms cubic-bezier(.2, .8, .2, 1), border-color .5s ease, box-shadow .5s ease;
}

.chamber.in-view .pane {
  opacity: 1;
  transform: translate3d(var(--drift-x, 0), 0, 0) rotate(var(--tilt, -3deg));
}

.pane:hover {
  border-color: rgba(224, 168, 79, .42);
  box-shadow:
    inset 0 1px 0 rgba(216, 221, 210, .22),
    inset 0 -32px 80px rgba(9, 10, 13, .2),
    0 0 42px rgba(224, 168, 79, .1),
    0 40px 110px rgba(0, 0, 0, .5);
}

.pane:hover .monster-shadow { opacity: .82; transform: translate(-50%, -50%) scale(1.08); }
.pane:hover .amber-eyes i { opacity: 1; transform: scale(1.25); }

.pane-left { justify-self: start; --tilt: -4deg; }
.pane-right { justify-self: end; --tilt: 5deg; }
.pane-center { justify-self: center; --tilt: -1deg; }
.tall { min-height: 35rem; border-radius: 42% 58% 38% 62% / 56% 34% 66% 44%; }
.rounder { border-radius: 49% 51% 45% 55% / 47% 50% 50% 53%; }
.narrow { width: min(29rem, 86vw); }
.dawn-pane { border-radius: 31% 69% 56% 44% / 48% 46% 54% 52%; }

.inspection-sticker,
.coordinate,
.maintenance-slip {
  font-family: var(--display);
  color: rgba(127, 138, 150, .72);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.maintenance-slip {
  font-family: var(--accent-jp);
  position: absolute;
  right: 2rem;
  top: 6rem;
  color: rgba(216, 221, 210, .54);
  letter-spacing: .12em;
  text-transform: none;
}

h1,
h2 {
  position: relative;
  z-index: 2;
  margin: clamp(8rem, 18vh, 12rem) 0 1rem;
  max-width: 14ch;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 5.6rem);
  line-height: .96;
  letter-spacing: -.08em;
  text-transform: lowercase;
  color: rgba(216, 221, 210, .92);
  text-shadow: 0 0 36px rgba(216, 221, 210, .06);
}

.pane p {
  position: relative;
  z-index: 2;
  max-width: 31rem;
  margin: 0 0 1.8rem;
  color: rgba(216, 221, 210, .67);
  font-size: clamp(.85rem, 1.35vw, 1.05rem);
  line-height: 1.9;
}

.coordinate {
  position: relative;
  z-index: 2;
  display: block;
  color: rgba(138, 165, 154, .66);
}

.subtitle {
  position: absolute;
  left: clamp(1.5rem, 12vw, 11rem);
  bottom: 9vh;
  max-width: 34rem;
  opacity: .35;
  transform: translateY(1.5rem);
  transition: opacity 1.1s ease .25s, transform 1.1s ease .25s;
}

.subtitle.offset {
  left: auto;
  right: clamp(1.5rem, 10vw, 10rem);
}

.chamber.in-view .subtitle {
  opacity: .78;
  transform: translateY(0);
}

.tile-grid,
.condensation,
.oscilloscope,
.heart-core,
.monster-shadow,
.footprints,
.amber-eyes {
  position: absolute;
  pointer-events: none;
}

.tile-grid {
  inset: 2rem;
  border-radius: inherit;
  opacity: .24;
  background-image:
    linear-gradient(rgba(216, 221, 210, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 221, 210, .1) 1px, transparent 1px);
  background-size: 5.4rem 5.4rem;
  mask-image: radial-gradient(circle at 42% 42%, black, transparent 72%);
}

.monster-shadow {
  left: 54%;
  top: 43%;
  width: 16rem;
  height: 12rem;
  border-radius: 54% 46% 50% 50% / 61% 43% 57% 39%;
  background: radial-gradient(ellipse at center, rgba(9, 10, 13, .8), rgba(91, 74, 86, .28) 48%, transparent 72%);
  filter: blur(13px);
  opacity: .42;
  transform: translate(-50%, -50%);
  transition: opacity .6s ease, transform .6s ease;
  animation: creatureBreath 4.7s ease-in-out infinite;
}

.monster-shadow.small { width: 12rem; height: 8rem; opacity: .35; top: 38%; }
.monster-shadow.breathing { width: 20rem; height: 17rem; }
.monster-shadow.withdrawn { width: 11rem; height: 16rem; left: 66%; opacity: .28; }
.monster-shadow.fading { opacity: .2; background: radial-gradient(ellipse at center, rgba(32,35,41,.9), transparent 72%); }

.footprints {
  left: 16%;
  bottom: 28%;
  display: grid;
  gap: .8rem;
  transform: rotate(-23deg);
}

.footprints span {
  display: block;
  width: 2rem;
  height: .45rem;
  border-left: .6rem solid rgba(224, 168, 79, .45);
  border-right: .6rem solid rgba(224, 168, 79, .22);
  filter: blur(.2px);
}

.condensation {
  inset: 12% 10%;
  border-radius: 50%;
  opacity: .5;
  background:
    radial-gradient(circle at 22% 30%, rgba(216, 221, 210, .35) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 24%, rgba(216, 221, 210, .24) 0 1px, transparent 2px),
    radial-gradient(ellipse at center, rgba(216, 221, 210, .18), transparent 62%);
  filter: blur(1px);
  animation: fogPulse 5.8s ease-in-out infinite;
}

.amber-eyes {
  left: 54%;
  top: 39%;
  display: flex;
  gap: 1.5rem;
}

.amber-eyes i {
  width: .78rem;
  height: .78rem;
  border-radius: 50%;
  background: #E0A84F;
  box-shadow: 0 0 20px rgba(224, 168, 79, .86);
  opacity: .68;
  transition: opacity .6s ease, transform .6s ease;
}

.heart-core {
  left: 50%;
  top: 42%;
  width: 11rem;
  height: 11rem;
  border: 1px solid rgba(224, 168, 79, .22);
  border-radius: 43% 57% 61% 39% / 50% 43% 57% 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(224, 168, 79, .42), rgba(224, 168, 79, .08) 31%, transparent 63%);
  filter: blur(.3px);
  animation: corePulse 2.4s ease-in-out infinite;
}

.heart-core span {
  position: absolute;
  inset: 42%;
  border-radius: 50%;
  background: #E0A84F;
  box-shadow: 0 0 28px rgba(224, 168, 79, .9);
}

.oscilloscope {
  top: 22%;
  right: 14%;
  width: 10rem;
  height: 5rem;
  opacity: .55;
  border-bottom: 1px solid rgba(138, 165, 154, .26);
}

.oscilloscope span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(138, 165, 154, .74), rgba(224, 168, 79, .45), transparent);
  animation: scopeFlicker 1.8s steps(2, end) infinite;
}

.oscilloscope span:nth-child(1) { top: 28%; animation-delay: .1s; }
.oscilloscope span:nth-child(2) { top: 52%; animation-delay: .4s; }
.oscilloscope span:nth-child(3) { top: 72%; animation-delay: .8s; }

@keyframes amberRun {
  0% { stroke-dashoffset: 1180; opacity: 0; }
  12% { opacity: 1; }
  68% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes traceTravel {
  0% { stroke-dashoffset: 760; opacity: .12; }
  25% { opacity: .94; }
  100% { stroke-dashoffset: 0; opacity: .2; }
}

@keyframes lineHeart {
  0%, 100% { stroke-width: 3; }
  42% { stroke-width: 6; }
  55% { stroke-width: 3; }
  68% { stroke-width: 5; }
}

@keyframes firstReveal {
  0%, 18% { opacity: 0; transform: translateY(1rem) scale(.96) rotate(-6deg); }
  42%, 74% { opacity: .8; }
  100% { opacity: .34; transform: translateY(0) scale(1) rotate(-6deg); }
}

@keyframes captionIn { to { opacity: .64; } }
@keyframes eyeBlink { 0%, 34%, 48%, 100% { opacity: 0; } 38%, 44% { opacity: .95; } }
@keyframes grainJitter { 0% { transform: translate(0, 0); } 100% { transform: translate(-2%, 1%); } }
@keyframes breatheField { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes creatureBreath { 0%, 100% { filter: blur(13px); } 50% { filter: blur(18px); } }
@keyframes fogPulse { 0%, 100% { opacity: .34; transform: scale(.97); } 50% { opacity: .64; transform: scale(1.04); } }
@keyframes corePulse { 0%, 100% { opacity: .62; transform: translate(-50%, -50%) scale(.94); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes nodeBreath { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes scopeFlicker { 0%, 100% { opacity: .22; transform: translateX(-.2rem); } 50% { opacity: .9; transform: translateX(.4rem); } }

@media (max-width: 760px) {
  .scene-wire { left: .4rem; padding-left: .4rem; gap: .7rem; }
  .wire-label { display: none; }
  .chamber { padding-left: 2.6rem; padding-right: 1rem; }
  .pane, .tall { min-height: 30rem; }
  h1, h2 { margin-top: 8rem; font-size: clamp(2.4rem, 15vw, 4rem); }
  .subtitle, .subtitle.offset { left: 2.8rem; right: 1rem; bottom: 4vh; }
  .opening-mark { letter-spacing: .32em; }
}