:root {
  /* maritime commodity atlas voice; IBM Plex Mono very sparingly for coordinates; Space Grotes Grotesk* Grotesk** for readable body text */
  --abyss: #030907;
  --ink: #0B2A22;
  --kelp: #5FD18A;
  --ember: #C85F3E;
  --cyan: #8ADFD6;
  --bone: #EEE4CF;
  --gold: #D8B76A;
  --violet: #332A48;
  --scene: 0;
}

* { box-sizing: border-box; }
html { height: 100%; background: #030907; }
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  color: #EEE4CF;
  font-family: "Space Grotesk", sans-serif;
  background:
    radial-gradient(circle at 15% 18%, rgba(138, 223, 214, .11), transparent 30%),
    radial-gradient(circle at 84% 76%, rgba(51, 42, 72, .55), transparent 38%),
    linear-gradient(135deg, #030907 0%, #0B2A22 48%, #030907 100%);
}

.grain, .fog, .current-map, .atlas { position: fixed; inset: 0; }
.grain {
  pointer-events: none;
  z-index: 8;
  opacity: .21;
  background-image:
    radial-gradient(circle at 18% 24%, rgba(238, 228, 207, .22) 0 1px, transparent 1.7px),
    radial-gradient(circle at 78% 64%, rgba(95, 209, 138, .16) 0 1px, transparent 1.5px),
    radial-gradient(circle at 42% 82%, rgba(216, 183, 106, .16) 0 1px, transparent 1.4px);
  background-size: 97px 83px, 61px 73px, 39px 47px;
  mix-blend-mode: screen;
}
.fog {
  pointer-events: none;
  z-index: 5;
  opacity: .18;
  filter: blur(18px);
  background: radial-gradient(ellipse at center, rgba(138, 223, 214, .33), transparent 58%);
  animation: fogDrift 19s ease-in-out infinite alternate;
}
.fog-a { transform: translate(-18%, -20%) scale(1.1); }
.fog-b { transform: translate(20%, 24%) scale(1.4); animation-duration: 27s; opacity: .12; }

.atlas {
  perspective: 1300px;
  transform: rotate(calc((var(--scene) - 2.5) * -1.4deg)) scale(calc(1 + var(--scene) * .012));
  transition: transform 1100ms cubic-bezier(.2,.8,.16,1);
}
.current-map {
  z-index: 0;
  opacity: .72;
  transform: rotate(calc(var(--scene) * 2deg)) scale(1.06);
  transition: transform 1200ms ease, opacity 900ms ease;
}
.grid-lines path {
  stroke: rgba(138, 223, 214, .13);
  stroke-width: 1;
  stroke-dasharray: 6 18;
}
.route {
  fill: none;
  stroke-linecap: round;
  stroke-width: 3;
  stroke-dasharray: 18 18;
  animation: routeFlow 7s linear infinite;
}
.route-a { stroke: #5FD18A; opacity: .72; }
.route-b { stroke: #8ADFD6; opacity: .62; animation-duration: 9s; }
.route-c { stroke: #D8B76A; opacity: .42; animation-duration: 11s; }
.pearl { fill: #030907; stroke: #D8B76A; stroke-width: 3; filter: drop-shadow(0 0 8px rgba(216, 183, 106, .65)); }

.scene {
  position: absolute;
  inset: 0;
  min-height: 100vh;
  opacity: 0;
  transform: translate3d(0, 12vh, -120px) rotateX(8deg);
  transition: opacity 850ms ease, transform 1100ms cubic-bezier(.2,.8,.16,1);
  pointer-events: none;
  overflow: hidden;
}
.scene.active { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0); pointer-events: auto; }
.scene::before {
  content: "";
  position: absolute;
  inset: -18%;
  opacity: .28;
  background:
    linear-gradient(120deg, transparent 20%, rgba(138, 223, 214, .12), transparent 45%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 28px, rgba(238, 228, 207, .08) 29px 30px);
  mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
  animation: tideWipe 13s ease-in-out infinite alternate;
}

.wordmark {
  position: absolute;
  left: 7vw;
  top: 8vh;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: .18em;
  font-family: "Fraunces", serif;
  font-size: clamp(46px, 9vw, 142px);
  font-weight: 800;
  letter-spacing: -.07em;
  color: rgba(238, 228, 207, .92);
  text-shadow: 0 0 38px rgba(138, 223, 214, .18);
}
.wordmark i {
  width: .18em;
  height: .18em;
  border-radius: 50%;
  display: inline-block;
  background: #030907;
  border: .035em solid #D8B76A;
  box-shadow: inset 0 0 12px rgba(216, 183, 106, .45), 0 0 22px rgba(216, 183, 106, .72);
  transform: translateY(-.08em);
}
.harbor-rose {
  position: absolute;
  right: 13vw;
  top: 13vh;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(216, 183, 106, .34);
  background: conic-gradient(from 20deg, transparent, rgba(216, 183, 106, .18), transparent, rgba(138, 223, 214, .14), transparent);
  animation: compassTurn 18s ease-in-out infinite alternate;
}
.harbor-rose::before, .harbor-rose::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 2px; height: 46%; background: #D8B76A; transform-origin: 50% 0; }
.harbor-rose::after { transform: rotate(90deg); background: #8ADFD6; }
.harbor-rose span { position: absolute; font: 500 12px "IBM Plex Mono", monospace; color: #D8B76A; }
.harbor-rose span:nth-child(1) { top: 10px; left: 50%; }.harbor-rose span:nth-child(2) { right: 12px; top: 50%; }.harbor-rose span:nth-child(3) { bottom: 10px; left: 50%; }.harbor-rose span:nth-child(4) { left: 12px; top: 50%; }

.manifest {
  position: absolute;
  z-index: 4;
  width: min(430px, 86vw);
  padding: 26px 28px;
  color: #EEE4CF;
  background: linear-gradient(145deg, rgba(238, 228, 207, .14), rgba(11, 42, 34, .48));
  border: 1px solid rgba(138, 223, 214, .28);
  border-left-color: rgba(216, 183, 106, .72);
  box-shadow: 0 30px 90px rgba(3, 9, 7, .52), inset 0 1px 0 rgba(238, 228, 207, .16);
  backdrop-filter: blur(14px);
  clip-path: polygon(0 5%, 94% 0, 100% 84%, 88% 100%, 4% 96%);
}
.manifest h1, .manifest h2 {
  margin: 0 0 16px;
  font-family: "Fraunces", serif;
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.045em;
}
.manifest h1 { font-size: clamp(58px, 7vw, 104px); }
.manifest h2 { font-size: clamp(46px, 6vw, 86px); }
.manifest p { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(238, 228, 207, .82); }
.kicker { margin-bottom: 14px !important; font: 500 12px "IBM Plex Mono", monospace !important; letter-spacing: .14em; text-transform: uppercase; color: #8ADFD6 !important; }
.note { font-family: "Newsreader", serif; font-style: italic; }
.harbor-slip { left: 10vw; bottom: 12vh; }
.kelp-slip { right: 8vw; top: 16vh; }
.basalt-slip { left: 8vw; top: 17vh; }
.kiln-slip { right: 9vw; bottom: 14vh; }
.sediment-slip { left: 9vw; bottom: 11vh; }
.clearing-slip { right: 11vw; top: 18vh; }

.island, .interactive-island { position: absolute; z-index: 2; filter: drop-shadow(0 28px 48px rgba(3,9,7,.72)); }
.island-harbor { right: 19vw; bottom: 16vh; width: 210px; height: 95px; border-radius: 55% 45% 58% 42%; background: radial-gradient(circle at 65% 30%, #D8B76A, transparent 8%), linear-gradient(135deg, #0B2A22, #030907); border: 1px solid rgba(138,223,214,.22); }
.island-harbor em { position: absolute; inset: 30% 42%; border-radius: 50%; background: #030907; border: 4px solid #D8B76A; }

.kelp-isle { left: 12vw; top: 19vh; width: 390px; height: 460px; border-radius: 48% 52% 36% 64%; background: radial-gradient(circle at 45% 45%, rgba(95,209,138,.32), transparent 28%), linear-gradient(160deg, #0B2A22, #030907 70%); border: 1px solid rgba(95, 209, 138, .36); }
.kelp-isle i { position: absolute; bottom: 15%; width: 28px; height: 250px; border-radius: 80% 20%; background: linear-gradient(#5FD18A, transparent); transform-origin: bottom; animation: kelpSway 4s ease-in-out infinite alternate; }
.kelp-isle i:nth-child(1){left:22%;transform:rotate(-10deg)}.kelp-isle i:nth-child(2){left:38%;height:310px;animation-delay:-1s}.kelp-isle i:nth-child(3){left:55%;height:280px;animation-delay:-2s}.kelp-isle i:nth-child(4){left:70%;height:235px;animation-delay:-3s}
.buoy { position: absolute; left: 47vw; top: 47vh; width: 42px; height: 72px; border-radius: 50% 50% 42% 42%; background: linear-gradient(#D8B76A, #C85F3E 45%, #030907); box-shadow: 0 0 34px rgba(216,183,106,.66); animation: bob 3.4s ease-in-out infinite; }
.market-label { position: absolute; left: 18vw; bottom: 18vh; font: 500 13px "IBM Plex Mono", monospace; color: #5FD18A; letter-spacing: .12em; text-transform: uppercase; }

.scene-basalt { background: radial-gradient(circle at 62% 50%, rgba(51,42,72,.72), transparent 42%); }
.basalt-core { right: 14vw; top: 15vh; width: min(55vw, 610px); height: 62vh; clip-path: polygon(10% 12%, 56% 0, 96% 24%, 86% 76%, 45% 100%, 0 72%); background: radial-gradient(circle at 50% 42%, rgba(138,223,214,.22), transparent 16%), linear-gradient(135deg, #332A48, #0B2A22 45%, #030907); border: 1px solid rgba(216,183,106,.25); }
.basalt-core span { position: absolute; border-radius: 50%; border: 1px solid rgba(138,223,214,.25); background: rgba(3,9,7,.36); }
.basalt-core span:nth-child(1){inset:18% 58% 57% 17%}.basalt-core span:nth-child(2){inset:42% 28% 32% 46%}.basalt-core span:nth-child(3){inset:62% 61% 18% 22%}.basalt-core span:nth-child(4){inset:20% 20% 62% 65%}
.tide-gauge { position: absolute; right: 8vw; bottom: 14vh; width: 70px; height: 330px; border-left: 2px solid #8ADFD6; }
.tide-gauge b { display: block; height: 1px; margin: 54px 0; width: 70px; background: #D8B76A; }

.kiln-grid { left: 10vw; top: 18vh; width: min(58vw, 640px); height: 58vh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 34px; border-radius: 44% 56% 50% 50%; background: linear-gradient(145deg, #030907, #0B2A22); border: 1px solid rgba(200,95,62,.44); }
.kiln-grid span { border-radius: 18px; background: radial-gradient(circle, rgba(200,95,62,.88), rgba(200,95,62,.13) 38%, rgba(3,9,7,.85)); animation: emberPulse 2.8s ease-in-out infinite alternate; }
.kiln-grid span:nth-child(even) { animation-delay: -1.2s; }
.ember-ring { position: absolute; left: 28vw; bottom: 12vh; width: 220px; height: 220px; border-radius: 50%; border: 1px solid rgba(200,95,62,.5); box-shadow: inset 0 0 55px rgba(200,95,62,.32), 0 0 70px rgba(200,95,62,.16); }

.sediment-stack { right: 10vw; top: 19vh; width: min(52vw, 590px); height: 58vh; padding: 40px; border-radius: 49% 51% 57% 43%; background: linear-gradient(180deg, rgba(138,223,214,.14), rgba(51,42,72,.44), rgba(3,9,7,.96)); border: 1px solid rgba(138,223,214,.28); }
.sediment-stack span { display: block; height: 17%; margin: 3% 0; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(238,228,207,.28), rgba(138,223,214,.32), transparent); }
.auction-shell { position: absolute; right: 41vw; bottom: 13vh; width: 150px; height: 110px; border-radius: 80% 80% 30% 30%; border: 1px solid #D8B76A; background: repeating-radial-gradient(circle at 50% 100%, rgba(216,183,106,.28) 0 8px, transparent 9px 21px); }
.auction-shell i { position:absolute; inset:42% 44%; border-radius:50%; background:#030907; border:3px solid #D8B76A; }

.ledger-reef { left: 10vw; top: 22vh; width: min(62vw, 720px); height: 48vh; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 30px; border-radius: 42px; background: linear-gradient(135deg, rgba(238,228,207,.14), rgba(11,42,34,.6), rgba(3,9,7,.95)); border: 1px solid rgba(216,183,106,.38); transform: rotate(-4deg); }
.ledger-reef span { border-radius: 50%; background: #030907; border: 4px solid #D8B76A; box-shadow: 0 0 30px rgba(216,183,106,.34); }
.clearing-moons { position:absolute; left: 13vw; bottom: 13vh; display:flex; gap:20px; }
.clearing-moons span { width:34px; height:34px; border-radius:50%; border:1px solid #EEE4CF; background: linear-gradient(90deg, #EEE4CF 50%, transparent 50%); opacity:.75; }

.compass-nav {
  position: fixed;
  z-index: 10;
  right: 28px;
  top: 28px;
  width: 184px;
  height: 184px;
  border-radius: 50%;
  border: 1px solid rgba(216,183,106,.42);
  background: rgba(3,9,7,.42);
  backdrop-filter: blur(10px);
}
.compass-nav button { position: absolute; left: 50%; top: 50%; width: 76px; margin: -13px 0 0 -38px; border: 0; background: transparent; color: rgba(238,228,207,.62); font: 500 10px "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; transform: rotate(calc(var(--i) * 60deg)) translateY(-78px) rotate(calc(var(--i) * -60deg)); }
.compass-nav button:nth-child(1){--i:0}.compass-nav button:nth-child(2){--i:1}.compass-nav button:nth-child(3){--i:2}.compass-nav button:nth-child(4){--i:3}.compass-nav button:nth-child(5){--i:4}.compass-nav button:nth-child(6){--i:5}
.compass-nav button.active { color: #5FD18A; text-shadow: 0 0 12px #5FD18A; }
.needle { position: absolute; left: 50%; top: 50%; width: 3px; height: 74px; background: linear-gradient(#C85F3E, #D8B76A, transparent); transform-origin: 50% 0; transform: rotate(0deg); transition: transform 900ms cubic-bezier(.2,.8,.16,1); }
.rose-core { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: #030907; border: 2px solid #D8B76A; }

.scene-counter, .tide-caption { position: fixed; z-index: 10; font-family: "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(238,228,207,.74); }
.scene-counter { left: 28px; bottom: 24px; font-size: 12px; }
.tide-caption { right: 30px; bottom: 24px; font-size: 11px; color: #8ADFD6; }

.interactive-island { transition: transform 450ms ease, filter 450ms ease; }
.interactive-island:hover { transform: translateY(-10px) scale(1.02); filter: drop-shadow(0 0 34px rgba(95,209,138,.34)); }
body.tide-hover .route { stroke-width: 5; opacity: .9; }

@keyframes routeFlow { to { stroke-dashoffset: -72; } }
@keyframes fogDrift { to { transform: translate(14%, 10%) scale(1.45) rotate(8deg); } }
@keyframes tideWipe { to { transform: translateX(9%) rotate(5deg); opacity: .44; } }
@keyframes compassTurn { to { transform: rotate(16deg) scale(1.04); } }
@keyframes kelpSway { to { transform: rotate(14deg) translateX(12px); } }
@keyframes bob { 50% { transform: translateY(-16px) rotate(5deg); } }
@keyframes emberPulse { to { filter: brightness(1.55); transform: scale(.96); } }

@media (max-width: 760px) {
  .compass-nav { transform: scale(.72); transform-origin: top right; }
  .manifest { left: 7vw !important; right: auto !important; bottom: 8vh !important; top: auto !important; }
  .interactive-island, .island-harbor { left: 14vw !important; right: auto !important; top: 16vh !important; width: 72vw !important; height: 42vh !important; }
  .wordmark { font-size: 15vw; }
  .harbor-rose { width: 180px; height: 180px; right: 8vw; top: 22vh; }
  .tide-caption { display: none; }
}