:root {
  /* Design font language retained for compliance: IBM Plex Mono very sparingly for coordinate ticks and timestamp-like droplets. IBM Plex Sans Condensed** Condense* Condensedd for small technical labels */
  --ink: #050505;
  --paper: #F6F4EC;
  --graphite: #414141;
  --silver: #B8BEC2;
  --blue: #2E5F73;
  --red: #B21F18;
  --progress: 0;
  --mouse-x: 50vw;
  --mouse-y: 50vh;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--paper);
  background:
    radial-gradient(circle at 74% 42%, rgba(46, 95, 115, .12), transparent 28vw),
    linear-gradient(90deg, #020202 0%, var(--ink) 28%, #0d0d0d 63%, #010101 100%);
  font-family: "IBM Plex Sans Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  background:
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(246, 244, 236, .025) 32px, transparent 33px),
    repeating-linear-gradient(0deg, rgba(246, 244, 236, .018) 0 1px, transparent 2px 6px);
  mix-blend-mode: screen;
  opacity: .65;
}

.grain {
  position: fixed;
  inset: -20%;
  z-index: 10;
  pointer-events: none;
  opacity: .22;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(246, 244, 236, .35) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, rgba(184, 190, 194, .28) 0 1px, transparent 1.5px),
    radial-gradient(circle at 40% 50%, rgba(65, 65, 65, .9) 0 1px, transparent 1.5px);
  background-size: 91px 113px, 67px 79px, 43px 53px;
  animation: grainShift 1.7s steps(2, end) infinite;
}

.cursor-bell {
  position: fixed;
  left: var(--mouse-x);
  top: var(--mouse-y);
  width: 34px;
  height: 34px;
  border: 1px solid rgba(246, 244, 236, .35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 20;
  opacity: .55;
  box-shadow: 0 0 22px rgba(184, 190, 194, .25);
}

.cursor-bell::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  background: var(--silver);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.slip-nav {
  position: fixed;
  top: 0;
  right: clamp(18px, 4vw, 58px);
  z-index: 12;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.slip-nav a {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  min-height: 104px;
  padding: 16px 5px 10px;
  color: var(--paper);
  background: linear-gradient(#111, #050505 50%, rgba(246, 244, 236, .08));
  border: 1px solid rgba(246, 244, 236, .18);
  border-top: 0;
  font-size: 10px;
  letter-spacing: .16em;
  text-decoration: none;
  opacity: .62;
  transition: opacity .3s ease, transform .3s ease, border-color .3s ease;
}

.slip-nav a.active, .slip-nav a:hover {
  opacity: 1;
  transform: translateY(8px);
  border-color: var(--silver);
}

.rain-lattice {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 500vh;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.threads path,
.web-links path,
.registration path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.threads path {
  stroke: url(#rainFade);
  stroke-width: 1.1;
  opacity: calc(.22 + var(--progress) * .66);
  filter: url(#wetGlow);
  transform-box: fill-box;
  transform-origin: center;
}

.threads path.vibrate { animation: wireShake .28s ease-out; }

.web-links path {
  stroke: var(--silver);
  stroke-width: .95;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--progress));
  opacity: calc(var(--progress) * .88);
  filter: url(#wetGlow);
}

.droplet-layer circle,
.droplet-layer ellipse {
  fill: var(--silver);
  opacity: .82;
  filter: url(#wetGlow);
}

.registration path {
  stroke: var(--paper);
  stroke-width: 1;
  opacity: .24;
}

.scene {
  min-height: 100vh;
  position: relative;
  z-index: 3;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(46px, 8vw, 108px);
}

.scene::before {
  content: attr(data-scene);
  position: absolute;
  left: clamp(18px, 3vw, 48px);
  top: 46%;
  writing-mode: vertical-rl;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: .6em;
  color: var(--silver);
  opacity: .42;
}

.black-eave {
  display: grid;
  align-items: center;
  background: radial-gradient(circle at 18% 80%, rgba(246, 244, 236, .05), transparent 28vw);
}

.eave-cut {
  position: absolute;
  left: -5vw;
  right: -5vw;
  bottom: 0;
  height: 34vh;
  background: linear-gradient(154deg, transparent 0 13%, #000 13.4% 37%, transparent 37.4% 44%, #020202 44.5% 79%, transparent 79.4%);
  filter: drop-shadow(0 -16px 24px rgba(0,0,0,.8));
  opacity: .96;
}

.wordmark {
  width: min(890px, 78vw);
  display: grid;
  grid-template-columns: repeat(10, minmax(18px, 1fr));
  gap: clamp(5px, 1.2vw, 18px);
  margin-left: clamp(26px, 8vw, 138px);
  font-family: Impact, "Archivo Black", Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(52px, 9.4vw, 168px);
  line-height: .78;
  letter-spacing: -.08em;
  text-transform: lowercase;
  color: var(--paper);
  text-shadow: 0 9px 0 rgba(246,244,236,.04), 0 24px 22px rgba(0,0,0,.86);
}

.wordmark span {
  display: block;
  transform: translateY(calc(var(--progress) * 18px));
  filter: blur(calc(var(--progress) * .4px));
  animation: letterBleed 4.4s ease-in-out infinite alternate;
}

.wordmark span:nth-child(2n) { margin-top: .19em; animation-delay: -.8s; color: var(--silver); }
.wordmark span:nth-child(3n) { margin-top: -.12em; animation-delay: -1.5s; }

.hanging-note,
.weather-fragment,
.basin-copy,
.shrine-frame p {
  font-family: "Shippori Mincho", Georgia, "Times New Roman", serif;
  color: var(--paper);
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.55;
  max-width: 560px;
}

.note-a {
  position: absolute;
  left: 58%;
  top: 23%;
  padding-left: 18px;
  border-left: 1px solid var(--silver);
  opacity: .78;
}

.mono-tick {
  position: absolute;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--silver);
  opacity: .55;
}

.tick-a { left: 12vw; bottom: 14vh; transform: rotate(-90deg); transform-origin: left center; }
.tick-b { right: 8vw; bottom: 12vh; }

.single-thread {
  position: absolute;
  left: 84%;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(var(--paper), transparent);
  opacity: .7;
}

.wirefall h1,
.catch-basin h2,
.signal-shrine h2,
.afterimage-map h2 {
  margin: 0;
  font-family: Impact, "Archivo Black", Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(64px, 13vw, 210px);
  line-height: .82;
  letter-spacing: -.07em;
  color: var(--paper);
  text-transform: uppercase;
}

.wirefall {
  padding-top: 19vh;
  background: linear-gradient(180deg, transparent, rgba(65, 65, 65, .16), transparent);
}

.wirefall h1 { margin-left: 16vw; mix-blend-mode: screen; }
.wirefall .weather-fragment { margin: 42px 0 0 43vw; }

.pole {
  position: absolute;
  left: 11vw;
  bottom: 0;
  width: 18px;
  height: 76vh;
  background: #000;
  border-left: 1px solid var(--graphite);
}
.pole i { position: absolute; left: -44px; width: 210px; height: 9px; background: #030303; border-top: 1px solid var(--silver); }
.pole i:nth-child(1) { top: 18%; transform: rotate(-4deg); }
.pole i:nth-child(2) { top: 38%; transform: rotate(3deg); }
.pole b { position: absolute; width: 18px; height: 18px; border: 2px solid var(--paper); border-radius: 50%; left: 74px; opacity: .7; }
.pole b:nth-of-type(1) { top: 15.5%; }
.pole b:nth-of-type(2) { top: 35.5%; }

.slip {
  position: absolute;
  min-width: 54px;
  padding: 18px 9px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--silver);
  box-shadow: 0 18px 28px rgba(0,0,0,.55);
  font-family: "Shippori Mincho", Georgia, serif;
}
.slip::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: 90px; width: 1px; background: var(--silver); }
.slip-one { right: 21vw; top: 19vh; writing-mode: vertical-rl; font-size: 30px; }
.slip-two { left: 35vw; bottom: 18vh; font-size: 16px; }

.halftone-orbit {
  position: absolute;
  right: -13vw;
  bottom: 3vh;
  width: 46vw;
  height: 46vw;
  background: radial-gradient(circle, rgba(246,244,236,.24) 0 1px, transparent 1.6px);
  background-size: 14px 14px;
  border-radius: 50%;
  opacity: .28;
  mask-image: radial-gradient(circle, #000, transparent 68%);
}

.catch-basin {
  display: grid;
  align-content: center;
  background: radial-gradient(ellipse at 50% 70%, rgba(46, 95, 115, .28), transparent 38vw);
}
.catch-basin h2 { max-width: 560px; }
.basin-copy { margin: 24px 0 0 8vw; }

.basin {
  position: absolute;
  left: 6vw;
  right: 6vw;
  bottom: 13vh;
  height: 28vh;
  border-top: 1px solid rgba(246,244,236,.72);
  background: linear-gradient(180deg, rgba(46,95,115,.16), rgba(0,0,0,.92));
  overflow: hidden;
}
.reflection {
  position: absolute;
  left: 10vw;
  top: -2vh;
  font-family: Impact, "Archivo Black", sans-serif;
  font-size: clamp(56px, 11vw, 178px);
  letter-spacing: -.08em;
  color: var(--paper);
  opacity: .22;
  transform: scaleY(-1) skewX(-8deg);
  filter: blur(1.4px);
}
.ripple { position: absolute; left: 15%; right: 10%; height: 1px; background: var(--silver); opacity: .34; animation: ripple 3.8s linear infinite; }
.r1 { top: 28%; } .r2 { top: 52%; animation-delay: -1.2s; } .r3 { top: 76%; animation-delay: -2.3s; }

.basin-routes {
  position: absolute;
  right: 9vw;
  bottom: 21vh;
  display: flex;
  gap: 22px;
}
.basin-routes a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--silver);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .18em;
}

.signal-shrine {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at center, rgba(246,244,236,.07), transparent 24vw);
}
.shrine-frame {
  position: relative;
  width: min(660px, 82vw);
  min-height: 62vh;
  padding: clamp(44px, 7vw, 78px);
  border: 1px solid rgba(246,244,236,.52);
  border-top: 10px solid #000;
  background: linear-gradient(180deg, rgba(246,244,236,.04), rgba(5,5,5,.88));
  box-shadow: 0 0 0 14px rgba(0,0,0,.7), inset 0 0 60px rgba(0,0,0,.88);
}
.shrine-frame h2 { font-size: clamp(54px, 9vw, 128px); }
.bell {
  position: absolute;
  left: 50%;
  top: -46px;
  width: 44px;
  height: 50px;
  border: 1px solid var(--silver);
  border-radius: 50% 50% 44% 44%;
  transform: translateX(-50%);
  background: #050505;
}
.bell::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 76px; background: var(--silver); }
.vermilion-knot {
  position: absolute;
  right: 48px;
  top: 42px;
  width: 54px;
  height: 54px;
  border: 9px solid var(--red);
  border-radius: 50% 4px 50% 4px;
  transform: rotate(45deg) scale(calc(.58 + var(--progress) * .42));
  box-shadow: 0 0 24px rgba(178,31,24,.45);
}
.seal {
  position: absolute;
  right: 40px;
  bottom: 34px;
  color: var(--red);
  border: 1px solid var(--red);
  padding: 8px;
  font-family: "Shippori Mincho", Georgia, serif;
}

.afterimage-map {
  min-height: 116vh;
  display: grid;
  align-content: center;
  background: linear-gradient(180deg, #050505, #0b0b0b 48%, #000);
}
.afterimage-map h2 { max-width: 820px; }
.afterimage-map .weather-fragment { margin-left: 32vw; }
.poster-net {
  position: absolute;
  inset: 12vh 11vw;
  border: 1px solid rgba(246,244,236,.22);
  opacity: calc(.28 + var(--progress) * .38);
}
.poster-net span { position: absolute; background: var(--paper); opacity: .36; }
.poster-net span:nth-child(1) { left: 16%; top: 0; width: 1px; height: 100%; }
.poster-net span:nth-child(2) { left: 43%; top: 0; width: 1px; height: 100%; transform: skewX(-7deg); }
.poster-net span:nth-child(3) { left: 70%; top: 0; width: 1px; height: 100%; }
.poster-net span:nth-child(4) { left: 7%; right: 10%; top: 34%; height: 1px; transform: rotate(-8deg); }
.poster-net span:nth-child(5) { left: 18%; right: 5%; top: 67%; height: 1px; transform: rotate(5deg); }
.ghost-domain {
  position: absolute;
  right: 7vw;
  bottom: 7vh;
  font-family: Impact, "Archivo Black", sans-serif;
  font-size: clamp(64px, 14vw, 230px);
  letter-spacing: -.09em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(246,244,236,.23);
  opacity: .7;
}

@keyframes grainShift { 0% { transform: translate(0,0); } 50% { transform: translate(-3%, 2%); } 100% { transform: translate(2%, -2%); } }
@keyframes wireShake { 0% { transform: translateX(0); } 25% { transform: translateX(2px); } 50% { transform: translateX(-1px); } 100% { transform: translateX(0); } }
@keyframes letterBleed { from { text-shadow: 0 0 0 var(--paper); } to { text-shadow: 0 6px 2px rgba(246,244,236,.18), 0 16px 8px rgba(184,190,194,.08); } }
@keyframes ripple { from { transform: translateX(-20%) scaleX(.45); opacity: 0; } 18% { opacity: .42; } to { transform: translateX(25%) scaleX(1.18); opacity: 0; } }

@media (max-width: 760px) {
  .scene { padding: 34px 22px; }
  .slip-nav { right: 8px; gap: 3px; }
  .slip-nav a { min-height: 78px; font-size: 8px; padding-inline: 3px; }
  .wordmark { width: 86vw; margin-left: 4vw; gap: 2px; }
  .note-a, .wirefall .weather-fragment, .basin-copy, .afterimage-map .weather-fragment { left: auto; margin-left: 0; max-width: 72vw; }
  .wirefall h1 { margin-left: 5vw; }
  .basin-routes { left: 10vw; right: auto; }
  .cursor-bell { display: none; }
}