:root {
  /* Compliance phrase: IBM Plex Mono coordinates snap into place around the edges. Use CSS transforms. IBM Plex Mono** Mon* from Google Fonts. Source visual inspiration from storm radar. */
  --abyss: #030409;
  --navy: #071827;
  --cyan: #00E5FF;
  --magenta: #C026FF;
  --chartreuse: #D7FF3F;
  --steel: #73808C;
  --porcelain: #EAF2F7;
  --display: "Bebas Neue", "Arial Narrow", "Impact", sans-serif;
  --headline: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", "Consolas", monospace;
  --serif: "Newsreader", "Georgia", serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 78% 18%, rgba(192, 38, 255, .18), transparent 28rem),
    radial-gradient(circle at 18% 75%, rgba(0, 229, 255, .14), transparent 30rem),
    linear-gradient(180deg, var(--abyss), #020307 55%, var(--navy));
  color: var(--porcelain);
  font-family: var(--headline);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.boot {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: var(--abyss);
  animation: bootFade .35s ease 2.15s forwards;
  pointer-events: none;
}

.boot-cursor {
  width: 1.2rem;
  height: 3.8rem;
  border: 1px solid var(--cyan);
  background: var(--cyan);
  box-shadow: 0 0 22px var(--cyan), 0 0 60px rgba(192, 38, 255, .5);
  animation: cursorBlink .33s steps(1) 0s 6 forwards;
}

.site-shell { position: relative; isolation: isolate; }

.grid-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .72;
  background-image:
    linear-gradient(rgba(0, 229, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, .035) 1px, transparent 1px);
  background-size: 9.5rem 7.25rem;
}

.grid-line { position: absolute; background: var(--cyan); opacity: .35; transform-origin: left top; filter: drop-shadow(0 0 8px var(--cyan)); animation: drawLine 1.6s ease forwards; }
.grid-line.h { height: 1px; width: 0; }
.grid-line.v { width: 1px; height: 0; }
.h1 { top: 15vh; left: 6vw; max-width: 62vw; animation-delay: 1.7s; }
.h2 { top: 47vh; left: 0; max-width: 34vw; animation-delay: 1.9s; }
.h3 { top: 83vh; left: 28vw; max-width: 55vw; animation-delay: 2.1s; }
.v1 { left: 11vw; top: 3vh; max-height: 67vh; animation-delay: 1.8s; }
.v2 { left: 61vw; top: 0; max-height: 39vh; animation-delay: 2s; }
.v3 { left: 87vw; top: 24vh; max-height: 72vh; animation-delay: 2.2s; }

.command-rail {
  position: fixed;
  z-index: 10;
  right: 2vw;
  top: 13vh;
  display: grid;
  gap: .65rem;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--steel);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: .12em;
}

.command-rail a { padding: .6rem .22rem; background: rgba(3, 4, 9, .62); border: 1px solid rgba(0, 229, 255, .24); transition: color .2s, border-color .2s, text-shadow .2s; }
.command-rail a:hover, .command-rail a.active { color: var(--chartreuse); border-color: var(--chartreuse); text-shadow: 0 0 12px var(--chartreuse); }

.signal-room { position: relative; min-height: 100vh; padding: 8vw; overflow: hidden; perspective: 1200px; }

.hero { display: flex; align-items: flex-end; padding-bottom: 7vh; }
.hero-copy { position: relative; z-index: 3; max-width: 78vw; transform: translateY(12vh); opacity: 0; animation: tideIn 1.05s cubic-bezier(.2,.8,.2,1) 2.05s forwards; }
.prompt, .meta, .room-stamp, .edge-coord, .sticky-label, .quote-credit { font-family: var(--mono); color: var(--steel); letter-spacing: .08em; text-transform: uppercase; }
.prompt { color: var(--cyan); font-size: .82rem; text-shadow: 0 0 14px rgba(0, 229, 255, .7); }
.masthead {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(7rem, 22vw, 21rem);
  line-height: .72;
  letter-spacing: -.045em;
  font-weight: 900;
  color: var(--porcelain);
  text-shadow: -8px 8px 0 rgba(192, 38, 255, .34), 0 0 34px rgba(0, 229, 255, .24);
}
.dek { max-width: 39rem; margin: 1.6rem 0 0 1vw; font: 1.15rem/1.6 var(--serif); color: rgba(234, 242, 247, .78); }
.edge-coord { position: absolute; z-index: 4; font-size: .72rem; opacity: 0; animation: snapIn .3s ease 2.65s forwards; }
.north { top: 2rem; left: 8vw; }
.font-signal { top: 2rem; right: 15vw; color: var(--steel); }
.west { left: 1.5rem; bottom: 12vh; writing-mode: vertical-rl; color: var(--chartreuse); }

.photo-slab, .duotone-window {
  background-blend-mode: screen, multiply, normal;
  border: 1px solid rgba(0, 229, 255, .35);
  box-shadow: 0 18px 60px rgba(0,0,0,.6), inset 0 0 42px rgba(0,229,255,.14), 0 0 32px rgba(192,38,255,.18);
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
}
.photo-slab { position: absolute; z-index: 2; opacity: 0; transform-style: preserve-3d; animation: slabEnter .9s ease forwards, slowDrift 6s ease-in-out infinite alternate; }
.photo-slab span { position: absolute; bottom: .7rem; left: 1rem; font: .7rem var(--mono); color: var(--chartreuse); text-transform: uppercase; letter-spacing: .14em; }
.slab-a { right: 14vw; top: 13vh; width: min(32vw, 31rem); height: 43vh; background: linear-gradient(135deg, rgba(0,229,255,.72), transparent 45%), linear-gradient(45deg, rgba(192,38,255,.8), transparent 58%), repeating-linear-gradient(90deg, #071827 0 12px, #030409 12px 16px); transform: rotateZ(-7deg) rotateY(-14deg); animation-delay: 2.35s, 3.3s; }
.slab-b { right: 31vw; top: 42vh; width: min(29vw, 26rem); height: 18vh; background: linear-gradient(135deg, rgba(192,38,255,.8), transparent), repeating-linear-gradient(0deg, #030409 0 4px, #00E5FF 5px 6px, #071827 7px 18px); transform: rotateZ(4deg) rotateX(12deg); animation-delay: 2.55s, 3.5s; }
.slab-c { right: 7vw; bottom: 12vh; width: min(21vw, 18rem); height: 33vh; background: radial-gradient(circle at 30% 30%, rgba(215,255,63,.38), transparent 18%), linear-gradient(160deg, rgba(0,229,255,.55), rgba(192,38,255,.48)), repeating-linear-gradient(90deg, #030409 0 8px, #071827 9px 22px); transform: rotateZ(9deg) rotateY(18deg); animation-delay: 2.75s, 3.7s; }

.pulse-tile { position: absolute; left: 49vw; bottom: 8vh; font: 900 clamp(3rem, 9vw, 9rem)/.74 var(--display); color: transparent; -webkit-text-stroke: 1px rgba(0,229,255,.42); opacity: .42; transform: rotate(-4deg); }
.tide-ruler { position: absolute; right: 8vw; top: 5vh; display: grid; gap: 1.2rem; }
.tide-ruler i { width: 4.4rem; height: 1px; background: var(--chartreuse); box-shadow: 0 0 10px var(--chartreuse); }

.wave-index { display: grid; grid-template-columns: .85fr 1.15fr; gap: 5vw; align-items: center; }
.room-stamp { position: absolute; top: 5rem; left: 8vw; color: var(--chartreuse); font-size: .75rem; }
.section-word { margin: 0; font: 900 clamp(5rem, 15vw, 15rem)/.78 var(--display); letter-spacing: -.03em; color: rgba(234,242,247,.08); text-shadow: 0 0 42px rgba(0,229,255,.16); }
.transmission-list { display: grid; gap: 1.8rem; margin-top: 12vh; }
.transmission { padding: 1.4rem; background: linear-gradient(135deg, rgba(7,24,39,.88), rgba(3,4,9,.64)); border: 1px solid rgba(115,128,140,.35); clip-path: polygon(0 0, 96% 0, 100% 18%, 94% 100%, 0 100%); transform: translateX(5vw) rotate(-1.5deg); transition: transform .25s, border-color .25s, box-shadow .25s; }
.transmission.offset { margin-left: -6vw; transform: rotate(1.7deg); }
.transmission h3 { margin: .75rem 0; font: 600 clamp(1.55rem, 3.5vw, 4rem)/.95 var(--headline); letter-spacing: -.025em; text-transform: uppercase; }
.transmission p { margin: 0; color: rgba(234,242,247,.68); font: 1rem/1.6 var(--serif); }
.meta { font-size: .68rem; color: var(--cyan); }

.dossier-wall { min-height: 150vh; }
.sticky-label { position: sticky; top: 2rem; margin-left: auto; width: max-content; z-index: 8; color: var(--chartreuse); background: rgba(3,4,9,.78); border: 1px solid rgba(215,255,63,.3); padding: .7rem 1rem; }
.dossier { position: absolute; width: min(34rem, 38vw); padding: 1rem; background: rgba(3,4,9,.82); border: 1px solid rgba(0,229,255,.28); transform-style: preserve-3d; transition: transform .25s, box-shadow .25s; }
.dossier h3 { margin: .7rem 0 0; font: 600 clamp(1.4rem, 2.6vw, 3.2rem)/.98 var(--headline); text-transform: uppercase; }
.pin { color: var(--magenta); text-shadow: 0 0 16px var(--magenta); }
.duotone-window { height: 14rem; margin: .7rem 0; }
.map { background: radial-gradient(circle at 52% 48%, transparent 0 18%, rgba(0,229,255,.45) 19% 20%, transparent 21% 32%, rgba(192,38,255,.5) 33% 34%, transparent 35%), repeating-linear-gradient(135deg, rgba(0,229,255,.35) 0 2px, transparent 3px 18px), #071827; }
.mic { background: radial-gradient(ellipse at 50% 35%, rgba(234,242,247,.42), transparent 15%), linear-gradient(110deg, rgba(192,38,255,.75), rgba(0,229,255,.35)), repeating-linear-gradient(90deg, #030409 0 10px, #071827 11px 20px); }
.ferry { background: linear-gradient(0deg, rgba(0,229,255,.45) 0 18%, transparent 19%), radial-gradient(circle at 74% 34%, rgba(215,255,63,.6), transparent 4%), linear-gradient(135deg, rgba(192,38,255,.56), rgba(7,24,39,.9)); }
.dossier-one { top: 18vh; left: 9vw; transform: rotateY(-14deg) rotateZ(-4deg); }
.dossier-two { top: 50vh; right: 9vw; transform: rotateY(15deg) rotateZ(5deg); }
.dossier-three { top: 92vh; left: 31vw; transform: rotateX(9deg) rotateZ(-2deg); }

.quote-depth { display: grid; place-items: center; background: radial-gradient(circle at center, rgba(7,24,39,.8), transparent 45%); }
.coordinate-cloud { position: absolute; inset: 18vh 10vw auto; display: flex; justify-content: space-between; font: .7rem var(--mono); color: var(--steel); }
blockquote { max-width: 74rem; margin: 0; font: clamp(3.3rem, 8vw, 9rem)/.9 var(--display); text-transform: uppercase; letter-spacing: -.025em; text-align: left; text-shadow: 0 0 34px rgba(192,38,255,.22); }
.quote-credit { justify-self: start; margin-left: 10vw; color: var(--chartreuse); }

.final-transmission { min-height: 90vh; display: grid; place-items: center; }
.final-panel { width: min(62rem, 78vw); padding: clamp(2rem, 6vw, 5rem); background: linear-gradient(135deg, rgba(7,24,39,.92), rgba(3,4,9,.82)); border: 1px solid rgba(0,229,255,.35); clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%); box-shadow: 0 0 80px rgba(0,229,255,.11); }
.final-panel h2 { margin: .5rem 0; font: 900 clamp(3rem, 8vw, 8rem)/.82 var(--display); text-transform: uppercase; }
.final-panel p:not(.prompt) { max-width: 37rem; color: rgba(234,242,247,.72); font: 1.1rem/1.7 var(--serif); }
.terminal-row { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; font: 600 .75rem var(--mono); color: var(--steel); letter-spacing: .18em; text-transform: uppercase; }
.terminal-row i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--magenta), transparent); }

.hover-tilt.is-near, .hover-tilt:hover { border-color: var(--cyan); box-shadow: 0 24px 70px rgba(0,0,0,.65), 0 0 36px rgba(0,229,255,.16), 0 0 36px rgba(192,38,255,.12); }

@keyframes cursorBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes bootFade { to { opacity: 0; visibility: hidden; } }
@keyframes tideIn { to { opacity: 1; transform: translateY(0); } }
@keyframes snapIn { to { opacity: 1; } }
@keyframes drawLine { to { width: var(--line-w, 100%); height: var(--line-h, 100%); } }
@keyframes slabEnter { to { opacity: .92; } }
@keyframes slowDrift { from { margin-top: 0; } to { margin-top: -1.2rem; } }

@media (max-width: 820px) {
  .command-rail { writing-mode: horizontal-tb; top: auto; bottom: 1rem; left: 1rem; right: 1rem; display: flex; overflow: auto; }
  .wave-index { grid-template-columns: 1fr; }
  .photo-slab { opacity: .38; }
  .slab-a { width: 62vw; right: -7vw; }
  .slab-b { width: 56vw; right: 14vw; }
  .slab-c { display: none; }
  .dossier { position: relative; width: 86vw; inset: auto; margin: 12vh auto; }
  .dossier-one, .dossier-two, .dossier-three { transform: rotateZ(-2deg); }
  .coordinate-cloud { flex-wrap: wrap; gap: 1rem; }
}