:root {
  /* compliance text: sparingly timestamps Interpret “shinonome” violet-orange sunrise “stream” moving Grotesk** Grotes* short narrative fragments */
  --black: #07080A;
  --concrete: #6D7478;
  --cyan: #00F0FF;
  --magenta: #FF2BD6;
  --sodium: #FF8A1F;
  --vapor: #E8F2EE;
  --canal: #071A2C;
  --bebas: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  --space: 'Space Grotesk', 'Trebuchet MS', 'Inter', system-ui, sans-serif;
  --jp: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  margin: 0;
  color: var(--vapor);
  background: var(--black);
  font-family: var(--space);
  overflow-x: hidden;
  cursor: crosshair;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: .16;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 18% 27%, rgba(255,255,255,.13) 0 1px, transparent 1.5px),
    radial-gradient(circle at 73% 64%, rgba(255,255,255,.08) 0 1px, transparent 1.5px),
    repeating-linear-gradient(0deg, rgba(232,242,238,.035) 0 1px, transparent 1px 4px);
  background-size: 37px 41px, 53px 47px, 100% 6px;
  animation: noiseDrift 1.1s steps(2) infinite;
}

.pressure-cursor {
  position: fixed;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 2px solid var(--cyan);
  border-left-color: var(--magenta);
  border-radius: 50%;
  z-index: 45;
  pointer-events: none;
  mix-blend-mode: difference;
  transform: translate3d(var(--mx, 50vw), var(--my, 50vh), 0) scale(var(--pressure, 1));
  transition: transform .08s linear, border-color .2s;
}
.pressure-line {
  position: fixed;
  left: var(--mx, 50vw);
  top: 0;
  width: 2px;
  height: 100vh;
  background: linear-gradient(var(--cyan), transparent 28%, var(--magenta), transparent 70%, var(--sodium));
  z-index: 6;
  opacity: .38;
  pointer-events: none;
  filter: blur(.25px) drop-shadow(0 0 12px var(--cyan));
}

.gate-nav {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 7px;
  z-index: 50;
}
.gate-plate {
  width: 64px;
  height: 42px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 4px;
  color: var(--vapor);
  text-decoration: none;
  background: var(--black);
  border: 2px solid var(--concrete);
  box-shadow: -5px 5px 0 rgba(0,0,0,.7);
  font-family: var(--mono);
  font-size: 10px;
  transition: background .25s, color .25s, transform .25s, border-color .25s;
}
.gate-plate span { font-family: var(--bebas); font-size: 26px; line-height: 1; }
.gate-plate em { font-style: normal; writing-mode: vertical-rl; justify-self: end; letter-spacing: .12em; }
.gate-plate.active { background: var(--sodium); color: var(--black); border-color: var(--vapor); transform: translateX(-8px) skewY(-5deg); }

.chamber {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 16px solid var(--black);
  background: var(--black);
}
.chamber::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(0,240,255,.35) 42.15%, transparent 42.8% 100%),
    repeating-linear-gradient(90deg, rgba(232,242,238,.05) 0 1px, transparent 1px 82px),
    repeating-linear-gradient(0deg, rgba(232,242,238,.04) 0 1px, transparent 1px 76px);
  transform: skewY(-3deg) scale(1.08);
}
.chapter-number {
  position: absolute;
  right: -4vw;
  bottom: -11vh;
  margin: 0;
  font: 32vw/.72 var(--bebas);
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 3px rgba(232,242,238,.13);
  text-stroke: 3px rgba(232,242,238,.13);
  z-index: 1;
}
h2 {
  position: absolute;
  margin: 0;
  font: clamp(68px, 13vw, 190px)/.82 var(--bebas);
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--vapor);
  text-shadow: 7px 0 0 var(--black), 10px 0 0 var(--magenta);
  z-index: 7;
}
.mono, .timestamp { font-family: var(--mono); }

.reservoir {
  background:
    radial-gradient(ellipse at 50% 104%, rgba(7,26,44,.92) 0 30%, transparent 66%),
    linear-gradient(180deg, var(--black), #020305 68%, var(--canal));
}
.gate-mask { position: absolute; top: 0; bottom: 0; width: 38vw; background: var(--black); z-index: 8; border: solid var(--concrete); }
.gate-mask.left { left: -8vw; border-width: 0 10px 0 0; clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); animation: gateLeft 1.3s cubic-bezier(.2,.9,.1,1) both; }
.gate-mask.right { right: -8vw; border-width: 0 0 0 10px; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); animation: gateRight 1.45s cubic-bezier(.2,.9,.1,1) both; }
.hairline { position: absolute; left: 8vw; right: 10vw; top: 61vh; height: 3px; background: var(--sodium); box-shadow: 0 0 24px var(--sodium); transform-origin: left; animation: horizonWake 3.5s ease-in-out infinite alternate; z-index: 9; }
.vertical-wordmark { position: absolute; left: 5vw; top: 6vh; z-index: 10; writing-mode: vertical-rl; font: clamp(58px, 9vw, 132px)/.78 var(--bebas); color: var(--vapor); letter-spacing: -.025em; text-shadow: -4px 0 var(--cyan), 4px 0 var(--magenta); animation: vibrate 2.2s steps(2) infinite; }
.timestamp { position: absolute; right: 8vw; top: 8vh; color: var(--cyan); font-size: 13px; letter-spacing: .16em; z-index: 10; }
.floodgate-glyph { position: relative; width: 128px; height: 104px; filter: drop-shadow(0 0 18px var(--cyan)); }
.floodgate-glyph i { display: block; height: 24px; margin: 0 0 10px; background: linear-gradient(90deg, var(--cyan), var(--magenta)); border: 3px solid var(--black); }
.floodgate-glyph b { position: absolute; left: -15px; top: 48px; width: 165px; height: 6px; background: var(--sodium); transform: rotate(-31deg); box-shadow: 0 0 16px var(--sodium); }
.logo-glyph { position: absolute; left: 42vw; top: 16vh; z-index: 7; opacity: .9; transform: rotate(-7deg); }
.depth-ruler { position: absolute; left: 0; bottom: 8vh; width: 74px; height: 48vh; border-right: 7px solid var(--vapor); color: var(--vapor); display: flex; flex-direction: column; justify-content: space-between; padding: 4px 10px; font-family: var(--mono); font-size: 12px; opacity: .55; }
.depth-ruler::after { content:""; position:absolute; right:-20px; top:0; bottom:0; width:20px; background: repeating-linear-gradient(0deg, var(--vapor) 0 2px, transparent 2px 24px); }
.caption { position: absolute; max-width: 360px; font-size: 22px; line-height: 1.05; color: var(--vapor); background: rgba(7,8,10,.72); border-left: 8px solid var(--cyan); padding: 12px 16px; z-index: 10; }
.caption-one { right: 12vw; bottom: 16vh; transform: rotate(-2deg); }
.jp-stamp { position: absolute; right: 18vw; bottom: 7vh; font-family: var(--jp); color: var(--sodium); letter-spacing: .25em; z-index: 10; }

.spillway { background: linear-gradient(110deg, var(--concrete) 0 48%, var(--black) 48.2% 52%, var(--canal) 52.2%); }
.diagonal-current { position: absolute; inset: -20%; background: linear-gradient(135deg, transparent 25%, rgba(0,240,255,.9) 30%, rgba(255,43,214,.7) 32%, transparent 39%); filter: blur(1px); animation: currentRun 5s linear infinite; }
.caption-river { position: absolute; left: -10vw; top: 30vh; width: 120vw; display: grid; gap: 18px; transform: rotate(-9deg); z-index: 6; }
.caption-river span { display: block; width: max-content; padding: 10px 18px; background: var(--vapor); color: var(--black); font-family: var(--mono); font-size: clamp(14px, 2vw, 28px); box-shadow: 9px 9px 0 var(--black); animation: captionFloat 7s ease-in-out infinite alternate; }
.caption-river span:nth-child(2) { margin-left: 22vw; animation-delay: -.8s; background: var(--cyan); }
.caption-river span:nth-child(3) { margin-left: 48vw; animation-delay: -1.6s; background: var(--sodium); }
.slam-panel { position: absolute; background: var(--black); border: 9px solid var(--concrete); z-index: 5; animation: slam 1.4s cubic-bezier(.1,1.15,.2,1) both; }
.panel-a { left: -4vw; top: 5vh; width: 40vw; height: 34vh; transform: skewX(-13deg); }
.panel-b { right: -6vw; bottom: 0; width: 52vw; height: 26vh; transform: skewX(-13deg); animation-delay: .15s; }
.spillway h2 { left: 6vw; bottom: 8vh; color: var(--black); text-shadow: 4px 0 0 var(--cyan); }
.spillway h2 span { color: var(--magenta); }
.edge-copy { position: absolute; right: 8vw; top: 10vh; max-width: 420px; z-index: 8; color: var(--vapor); font-size: 24px; line-height: 1.08; }
.qr-stamp { position: absolute; left: 12vw; top: 12vh; width: 142px; height: 142px; background: var(--vapor); color: var(--black); display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; padding: 12px; transform: rotate(7deg); z-index: 8; mix-blend-mode: screen; }
.qr-stamp span { background: var(--black); }
.qr-stamp strong { position:absolute; inset: 38px 18px; font-family: var(--bebas); font-size: 27px; text-align: center; color: var(--magenta); animation: dissolve 2s steps(3) infinite; }
.drip-bars { position: absolute; right: 28vw; bottom: 13vh; display:flex; gap: 10px; z-index: 9; }
.drip-bars i { width: 17px; height: 150px; background: linear-gradient(var(--cyan), transparent); animation: drip 1.8s ease-in-out infinite alternate; }
.drip-bars i:nth-child(even) { background: linear-gradient(var(--magenta), transparent); animation-delay: -.7s; }

.antenna { background: var(--black); }
.split { position: absolute; top:0; bottom:0; width:55%; }
.split.dry { left:0; background: linear-gradient(90deg, var(--concrete), #44494d); clip-path: polygon(0 0, 82% 0, 66% 100%, 0 100%); }
.split.wet { right:0; background: linear-gradient(180deg, var(--canal), var(--black)); clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
.tower { position: absolute; left: 48vw; top: 9vh; width: 150px; height: 58vh; z-index: 8; }
.tower::before { content:""; position:absolute; left:70px; top:0; bottom:0; width:8px; background: var(--black); box-shadow: 0 0 0 3px var(--cyan), 0 0 28px var(--cyan); }
.tower i { position:absolute; left:12px; right:12px; height:4px; background: var(--magenta); transform: rotate(var(--r, 25deg)); transform-origin:center; box-shadow:0 0 20px var(--magenta); }
.tower i:nth-child(1){top:12%;--r:25deg}.tower i:nth-child(2){top:30%;--r:-25deg}.tower i:nth-child(3){top:48%;--r:25deg}.tower i:nth-child(4){top:66%;--r:-25deg}
.reflection { position: absolute; left: 44vw; bottom: 0; width: 28vw; height: 28vh; background: repeating-linear-gradient(180deg, rgba(0,240,255,.24) 0 3px, transparent 3px 15px); filter: blur(1px); transform: skewX(-18deg); opacity: .7; animation: waterShift 2.8s ease-in-out infinite alternate; }
.antenna h2 { left: 5vw; top: 7vh; max-width: 600px; }
.corner-fragment { position: absolute; z-index: 8; max-width: 340px; padding: 12px; background: var(--black); border-top: 6px solid var(--sodium); font-family: var(--mono); }
.corner-fragment.top { right: 9vw; top: 11vh; }
.corner-fragment.bottom { left: 8vw; bottom: 10vh; }
.rot-label { position: absolute; right: 4vw; bottom: 12vh; writing-mode: vertical-rl; font-family: var(--mono); color: var(--cyan); letter-spacing:.18em; z-index:8; }
.glyph-architecture { position:absolute; right: 17vw; top: 39vh; transform: scale(1.8) rotate(12deg); z-index:7; opacity:.7; }

.eel { background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,43,214,.2), transparent 28%), var(--canal); }
#currentCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; }
.neon-grid { position:absolute; inset:-10%; background: repeating-linear-gradient(90deg, rgba(0,240,255,.16) 0 2px, transparent 2px 72px), repeating-linear-gradient(0deg, rgba(255,43,214,.14) 0 2px, transparent 2px 72px); transform: perspective(500px) rotateX(58deg) translateY(10vh); transform-origin: bottom; filter: drop-shadow(0 0 15px var(--cyan)); animation:gridPulse 3s infinite alternate; }
.eel h2 { left: 6vw; top: 8vh; }
.eel-copy { position:absolute; left: 8vw; bottom: 10vh; max-width: 470px; z-index:8; font-size:26px; line-height:1.04; background: rgba(7,8,10,.7); border-left: 10px solid var(--magenta); padding: 15px; }
.buoy { position:absolute; z-index:8; width: 76px; height: 76px; border: 3px solid var(--cyan); background: var(--black); color: var(--sodium); display:grid; place-items:center; font-family:var(--mono); box-shadow:0 0 24px var(--cyan); animation: buoy 4s ease-in-out infinite; }
.buoy-a{right:21vw;top:18vh}.buoy-b{right:38vw;bottom:22vh;animation-delay:-1s}.buoy-c{left:44vw;top:48vh;animation-delay:-2s}
.current-label { position:absolute; right:8vw; bottom:9vh; color:var(--cyan); font-family:var(--mono); z-index:8; letter-spacing:.16em; }

.outlet { background: var(--black); }
.dawn-field { position:absolute; inset:0; background: linear-gradient(180deg, var(--black) 0, var(--canal) 42%, rgba(255,138,31,.25) 62%, var(--sodium) 100%); animation: dawnFlood 8s ease-in-out infinite alternate; }
.retreat-bar { position:absolute; top:0; bottom:0; width:24vw; background:var(--black); z-index:8; animation: retreat 3s ease-in-out infinite alternate; }
.bar-left{left:0}.bar-right{right:0;animation-delay:-.9s}
.outlet h2 { left: 6vw; top: 12vh; color: var(--black); text-shadow: 3px 0 var(--vapor), 8px 0 var(--sodium); z-index:9; }
.final-text { position:absolute; right:9vw; top:35vh; max-width:500px; z-index:9; color:var(--black); background:rgba(232,242,238,.72); padding:18px 22px; font-size:28px; line-height:1.02; border-bottom:9px solid var(--cyan); }
.final-glyph { position:absolute; left:38vw; top:42vh; transform:scale(2.6); z-index:9; filter:drop-shadow(0 0 30px var(--sodium)); }
.jp-stamp.final { left:8vw; right:auto; bottom:8vh; color:var(--black); background:var(--sodium); padding:9px 14px; z-index:9; }
.horizon.full { position:absolute; left:0; right:0; top:66vh; height:13px; background:var(--sodium); box-shadow:0 0 60px 24px var(--sodium); z-index:7; }

.chamber.in-view .slam-panel, .chamber.in-view .caption-river span { animation-play-state: running; }

@keyframes noiseDrift { to { background-position: 37px -41px, -53px 47px, 0 6px; } }
@keyframes gateLeft { 0% { transform: translateX(0); } 55% { transform: translateX(-7vw); } 62% { transform: translateX(-5vw); } 100% { transform: translateX(-18vw); } }
@keyframes gateRight { 0% { transform: translateX(0); } 55% { transform: translateX(7vw); } 62% { transform: translateX(5vw); } 100% { transform: translateX(18vw); } }
@keyframes horizonWake { from { transform: scaleX(.22); opacity:.72; } to { transform: scaleX(1); opacity:1; } }
@keyframes vibrate { 0%,100% { transform: translate(0,0); } 25% { transform: translate(2px,-1px); } 50% { transform: translate(-2px,1px); } 75% { transform: translate(1px,2px); } }
@keyframes currentRun { to { transform: translate(18%, 18%); } }
@keyframes captionFloat { from { transform: translateX(-4vw) skewX(-8deg); } to { transform: translateX(6vw) skewX(4deg); } }
@keyframes slam { 0% { transform: translateX(-80vw) skewX(-13deg); } 70% { transform: translateX(3vw) skewX(-13deg); } 77% { transform: translateX(-1vw) skewX(-13deg); } 100% { transform: translateX(0) skewX(-13deg); } }
@keyframes dissolve { 50% { filter: blur(2px); transform: translateY(4px) scaleY(.82); opacity:.55; } }
@keyframes drip { to { height: 70px; opacity:.45; } }
@keyframes waterShift { to { transform: skewX(-25deg) translateX(24px); opacity:.35; } }
@keyframes gridPulse { to { opacity:.45; transform: perspective(500px) rotateX(58deg) translateY(6vh) scale(1.04); } }
@keyframes buoy { 50% { transform: translateY(-18px) rotate(6deg); } }
@keyframes dawnFlood { from { filter:saturate(.8) brightness(.8); } to { filter:saturate(1.3) brightness(1.18); } }
@keyframes retreat { from { transform: translateX(0); } to { transform: translateX(var(--retreat, -18vw)); } }
.bar-right { --retreat: 18vw; }

@media (max-width: 760px) {
  .gate-nav { right: 8px; }
  .gate-plate { width: 48px; height: 34px; }
  .gate-plate span { font-size: 20px; }
  h2 { font-size: 68px; }
  .vertical-wordmark { font-size: 58px; }
  .caption, .edge-copy, .eel-copy, .final-text { max-width: 72vw; font-size: 18px; }
  .final-glyph, .glyph-architecture { transform: scale(1.25) rotate(8deg); }
}