:root {
  --porcelain-mist: #EEF7FF;
  --taisho-glass: #BBD8F4;
  --relay-blue: #4A83C5;
  --ink-lacquer: #121722;
  --oxidized-brass: #B7A36A;
  --violet-shadow: #6C6F9E;
  --rail-x: 38px;
}

/* Design vocabulary retained: IBM Plex Mono* Mono** sparingly at tiny sizes. IBM Plex Sans JP* JP** from Google Fonts for captions; IntersectionObserver to activate each plate. */

@keyframes ceremonial-current {
  0% { opacity: .18; transform: translateX(-8px) scaleX(.985); }
  58% { opacity: .82; transform: translateX(3px) scaleX(1.012); }
  100% { opacity: .55; transform: translateX(0) scaleX(1); }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--porcelain-mist);
}

body {
  margin: 0;
  color: var(--ink-lacquer);
  font-family: "IBM Plex Sans JP", "Inter", sans-serif;
  background:
    radial-gradient(circle at 72% 18%, rgba(187, 216, 244, .55), transparent 38%),
    radial-gradient(circle at 16% 82%, rgba(108, 111, 158, .13), transparent 42%),
    var(--porcelain-mist);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(18, 23, 34, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 23, 34, .025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 58% 44%, black, transparent 78%);
  z-index: 0;
}

.plates { position: relative; z-index: 1; }

.plate {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid rgba(18, 23, 34, .06);
}

.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--glow-x, 70%) var(--glow-y, 30%), rgba(187, 216, 244, .4), transparent 34%);
  opacity: .82;
  z-index: -2;
}

.plate::after {
  content: "";
  position: absolute;
  inset: 7vw 9vw;
  border: 1px solid rgba(74, 131, 197, .12);
  z-index: -1;
  opacity: .48;
}

.plate-grid {
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(64px, 1fr));
  gap: 0 2vw;
  padding: 7vw 8vw 6vw 13vw;
}

.circuit-rail {
  position: fixed;
  left: var(--rail-x);
  top: 0;
  bottom: 0;
  width: 42px;
  z-index: 20;
}

.rail-line {
  position: absolute;
  left: 20px;
  top: 8vh;
  bottom: 8vh;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(18, 23, 34, .36) 8%, rgba(74, 131, 197, .42), rgba(18, 23, 34, .24) 92%, transparent);
}

.rail-node {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  text-decoration: none;
  transform: translate3d(var(--pull-x, 0), var(--pull-y, 0), 0);
  transition: transform .45s cubic-bezier(.18, 1.45, .35, 1), filter .45s ease;
}

.rail-node:nth-of-type(1) { top: 18vh; }
.rail-node:nth-of-type(2) { top: 38vh; }
.rail-node:nth-of-type(3) { top: 58vh; }
.rail-node:nth-of-type(4) { top: 78vh; }

.rail-node span {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid rgba(74, 131, 197, .55);
  background: var(--porcelain-mist);
  box-shadow: 0 0 0 0 rgba(74, 131, 197, 0);
  transition: inset .55s cubic-bezier(.18, 1.6, .3, 1), background .35s ease, box-shadow .55s ease;
}

.rail-node::after {
  content: attr(data-label);
  position: absolute;
  left: 32px;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  color: var(--relay-blue);
  font: 500 10px/1 "IBM Plex Mono", monospace;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
}

.rail-node:hover::after,
.rail-node.active::after { opacity: 1; transform: translateY(-50%) translateX(0); }

.rail-node.active span {
  inset: 1px;
  background: var(--taisho-glass);
  box-shadow: 0 0 18px rgba(74, 131, 197, .48), inset 0 0 0 3px rgba(238, 247, 255, .75);
}

.domain-seal {
  position: fixed;
  right: 30px;
  bottom: 26px;
  z-index: 18;
  color: var(--ink-lacquer);
  font: 500 10px/1 "IBM Plex Mono", monospace;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .09;
  transform: translateY(8px);
  transition: opacity .7s ease, transform .7s ease, color .7s ease;
}

.domain-seal.revealed { opacity: .78; transform: translateY(0); color: var(--relay-blue); }

.micro-label {
  margin: 0;
  color: var(--violet-shadow);
  font: 500 11px/1.4 "IBM Plex Mono", monospace;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.wordmark,
.plate-title {
  margin: 0;
  font-family: "Cormorant Garamond", Garamond, serif;
  font-weight: 400;
  letter-spacing: -.055em;
  color: var(--ink-lacquer);
}

.wordmark {
  font-size: clamp(88px, 15vw, 236px);
  line-height: .72;
}

.plate-title {
  font-size: clamp(64px, 10vw, 168px);
  line-height: .78;
}

.split-title span {
  display: block;
  transform: translateY(18px);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(.16, 1, .3, 1), opacity .9s ease;
}

.plate.active .split-title span { transform: translateY(0); opacity: 1; }
.plate.active .split-title span:nth-child(2) { transition-delay: .12s; }

.fragment,
.closing-line,
.vellum-copy {
  color: rgba(18, 23, 34, .72);
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 300;
  line-height: 1.8;
}

.hero-grid .micro-label { grid-column: 2 / 5; grid-row: 2; align-self: end; }
.hero-grid .wordmark { grid-column: 5 / 13; grid-row: 5 / 7; align-self: end; }
.hero-fragment { grid-column: 2 / 5; grid-row: 6 / 8; align-self: center; max-width: 310px; }

.marginal-grid .micro-label { grid-column: 2 / 5; grid-row: 2; }
.marginal-grid .plate-title { grid-column: 7 / 12; grid-row: 2 / 4; }
.marginal-grid > .fragment { grid-column: 2 / 5; grid-row: 5 / 6; max-width: 270px; }

.vellum-grid .micro-label { grid-column: 2 / 5; grid-row: 2; }
.vellum-grid .plate-title { grid-column: 2 / 7; grid-row: 3 / 5; }
.vellum-copy { grid-column: 8 / 11; grid-row: 3 / 7; padding: 22px 0 22px 24px; border-left: 1px solid rgba(74, 131, 197, .28); background: linear-gradient(90deg, rgba(187, 216, 244, .16), transparent); }
.vellum-copy p { margin: 0 0 28px; }

.closing-grid .micro-label { grid-column: 2 / 5; grid-row: 2; }
.closing-grid .plate-title { grid-column: 6 / 12; grid-row: 3 / 5; }
.closing-line { grid-column: 4 / 8; grid-row: 6 / 7; font-family: "Cormorant Garamond", Garamond, serif; font-size: clamp(28px, 4vw, 58px); line-height: 1.05; color: var(--ink-lacquer); }

.plate-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.dawn-circuit { opacity: .95; }
.switchboard-illustration { width: 58vw; left: 27vw; top: 3vh; height: 92vh; }
.porcelain-column { width: 58vw; left: 29vw; top: 0; height: 100vh; }
.afterimage-loop { width: 72vw; left: 18vw; top: 6vh; height: 88vh; }

.elastic-path,
.wave-ribbon,
.glyph-line,
.measurement,
.tick-mark {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.elastic-path {
  stroke: var(--relay-blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 9px rgba(74, 131, 197, .18));
  stroke-dasharray: var(--path-length, 1200);
  stroke-dashoffset: var(--path-length, 1200);
  transition: stroke-dashoffset 1.35s cubic-bezier(.17, 1.35, .29, 1), stroke-width .6s ease;
}

.plate.active .elastic-path { stroke-dashoffset: 0; stroke-width: 2.35; }
.plate.active .wave-ribbon { animation: ceremonial-current 1.6s cubic-bezier(.17, 1.35, .29, 1) both; }

.wave-ribbon {
  stroke: rgba(108, 111, 158, .18);
  stroke-width: 1.2;
  stroke-dasharray: 8 18;
}

.porcelain-dot,
.porcelain-medallion {
  fill: rgba(238, 247, 255, .92);
  stroke: rgba(74, 131, 197, .62);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 18px rgba(187, 216, 244, .65));
  transition: transform .7s cubic-bezier(.16, 1.55, .28, 1), fill .5s ease;
}

.plate.active .porcelain-dot,
.plate.active .porcelain-medallion { transform: scale(1.08); fill: #EEF7FF; }

.porcelain-dot.small { opacity: .82; }
.brass-dot { fill: var(--oxidized-brass); filter: drop-shadow(0 0 9px rgba(183, 163, 106, .45)); }
.bakelite { fill: rgba(18, 23, 34, .055); stroke: rgba(18, 23, 34, .18); stroke-width: 1; }
.glyph-line { stroke: var(--ink-lacquer); stroke-width: 1.15; opacity: .68; }
.tick-mark,
.measurement { stroke: var(--oxidized-brass); stroke-width: 1; opacity: .62; }
.insulator-ring { fill: rgba(187, 216, 244, .13); stroke: rgba(74, 131, 197, .32); stroke-width: 1; }

.artifact-label {
  position: relative;
  color: rgba(18, 23, 34, .68);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: .04em;
  padding-left: 18px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
}

.plate.active .artifact-label { opacity: 1; transform: translateY(0); }
.plate.active .label-two { transition-delay: .12s; }
.plate.active .label-three { transition-delay: .24s; }

.artifact-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oxidized-brass);
}

.artifact-label b {
  display: block;
  color: var(--relay-blue);
  font: 500 10px/1.2 "IBM Plex Mono", monospace;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.artifact-label span { display: block; max-width: 190px; }
.label-one { grid-column: 6 / 8; grid-row: 3 / 4; }
.label-two { grid-column: 10 / 12; grid-row: 5 / 6; }
.label-three { grid-column: 6 / 8; grid-row: 7 / 8; }

.letterpress-ticks {
  position: absolute;
  width: 42px;
  height: 42px;
  border-color: var(--oxidized-brass);
  opacity: .55;
}

.tick-a { left: 12vw; top: 12vh; border-top: 1px solid; border-left: 1px solid; }
.tick-b { right: 9vw; bottom: 13vh; border-right: 1px solid; border-bottom: 1px solid; }

@media (max-width: 760px) {
  :root { --rail-x: 16px; }
  .plate-grid { padding: 18vh 8vw 10vh 22vw; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(52px, 1fr)); }
  .hero-grid .micro-label,
  .marginal-grid .micro-label,
  .vellum-grid .micro-label,
  .closing-grid .micro-label { grid-column: 1 / 6; grid-row: 1; }
  .hero-grid .wordmark,
  .marginal-grid .plate-title,
  .vellum-grid .plate-title,
  .closing-grid .plate-title { grid-column: 1 / 7; grid-row: 3 / 5; }
  .hero-fragment,
  .marginal-grid > .fragment,
  .vellum-copy,
  .closing-line { grid-column: 1 / 6; grid-row: 6 / 8; }
  .switchboard-illustration,
  .porcelain-column,
  .afterimage-loop { width: 112vw; left: 8vw; opacity: .72; }
  .artifact-label { display: none; }
  .rail-node::after { display: none; }
  .domain-seal { right: 14px; bottom: 14px; }
}