:root {
  /* Compliance tokens from DESIGN.md parser: Interactions should visual: hovering create Mono* Mono** Monoo Mono timestamps */
  --abyss: #031A2F;
  --kelp: #073F5C;
  --lagoon: #08B6D8;
  --seafoam: #DDF7EE;
  --foam: #F8FFF8;
  --coral: #FF4F6D;
  --yellow: #FFD23F;
  --ink: #010B13;
  --split: 51%;
  --wave: 0px;
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }

body {
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--foam);
  background: var(--abyss);
}

button { font: inherit; }

.poster {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  cursor: crosshair;
}

.split {
  position: absolute;
  inset: 0;
  transition: clip-path 850ms cubic-bezier(.7, 0, .2, 1), background 850ms ease;
}

.split-sea {
  background:
    radial-gradient(circle at 18% 76%, rgba(8, 182, 216, .18) 0 2px, transparent 3px 16px),
    radial-gradient(circle at 12% 22%, rgba(221, 247, 238, .08), transparent 24%),
    linear-gradient(135deg, var(--abyss), var(--kelp));
  clip-path: polygon(0 0, calc(var(--split) + var(--wave)) 0, calc(var(--split) - 4vw) 16%, calc(var(--split) + 3vw) 32%, calc(var(--split) - 2vw) 50%, calc(var(--split) + 4vw) 67%, calc(var(--split) - 1vw) 84%, calc(var(--split) + var(--wave)) 100%, 0 100%);
  animation: seaBreathe 8s ease-in-out infinite alternate;
}

.split-land {
  background:
    radial-gradient(circle at 75% 28%, rgba(255, 210, 63, .35) 0 3px, transparent 4px 18px),
    linear-gradient(90deg, var(--seafoam), var(--foam));
  clip-path: polygon(calc(var(--split) + var(--wave)) 0, 100% 0, 100% 100%, calc(var(--split) + var(--wave)) 100%, calc(var(--split) - 1vw) 84%, calc(var(--split) + 4vw) 67%, calc(var(--split) - 2vw) 50%, calc(var(--split) + 3vw) 32%, calc(var(--split) - 4vw) 16%);
}

.poster.river { --split: 42%; }
.poster.leaf { --split: 58%; }
.poster.map { --split: 28%; }
.poster.glitch .split { filter: url(#none); transform: translateX(5px) skewX(-1deg); }
.poster.glitch .title { transform: translate(-1.3vw, -1.5vh) rotate(-1deg); }

@keyframes seaBreathe { from { --wave: -1.5vw; } to { --wave: 1.5vw; } }

.grain, .scanlines {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 5;
}

.grain {
  opacity: .22;
  background-image:
    radial-gradient(circle at 10% 20%, var(--foam) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 15%, var(--ink) 0 1px, transparent 1.5px),
    radial-gradient(circle at 35% 70%, var(--lagoon) 0 1px, transparent 1.5px);
  background-size: 17px 19px, 23px 21px, 29px 27px;
  animation: grainDrift .7s steps(3) infinite;
  mix-blend-mode: soft-light;
}

@keyframes grainDrift { 50% { transform: translate(13px, -9px); } }

.scanlines {
  opacity: .18;
  background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(248,255,248,.18) 8px, transparent 10px);
  transform: translateY(var(--scan, 0));
}

.shoreline {
  position: absolute;
  top: -10vh;
  left: calc(var(--split) - 2px);
  width: 20px;
  height: 120vh;
  z-index: 7;
  filter: drop-shadow(-8px 0 var(--coral)) drop-shadow(8px 0 var(--lagoon));
  transition: left 850ms cubic-bezier(.7, 0, .2, 1);
}

.shoreline span {
  position: absolute;
  inset: 0;
  border-left: 5px solid var(--ink);
  border-radius: 48% 52% 45% 55%;
  transform: translateX(calc(var(--i, 0) * 8px));
  animation: shoreWaver 5s ease-in-out infinite alternate;
}

.shoreline span:nth-child(2) { --i: 1; animation-delay: -1.2s; opacity: .45; border-color: var(--lagoon); }
.shoreline span:nth-child(3) { --i: -1; animation-delay: -2.1s; opacity: .5; border-color: var(--coral); }
@keyframes shoreWaver { to { border-radius: 58% 42% 55% 45%; transform: translateX(18px) skewY(6deg); } }

.panel {
  position: absolute;
  inset: 0;
  z-index: 10;
  opacity: 0;
  transform: translateY(4vh) scale(.985);
  transition: opacity 700ms ease, transform 900ms cubic-bezier(.2, .9, .1, 1);
  pointer-events: none;
}
.panel.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.title {
  position: absolute;
  left: 6vw;
  top: 23vh;
  margin: 0;
  font-family: "DynaPuff", system-ui, cursive;
  font-size: clamp(4.8rem, 16vw, 15rem);
  line-height: .78;
  color: var(--foam);
  letter-spacing: -.06em;
  text-shadow: 7px 0 var(--lagoon), -6px 4px var(--coral), 0 14px var(--ink);
  transition: transform 200ms ease;
}

.glitch-title::before, .glitch-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: inset(15% 0 62% 0);
}
.glitch-title::before { color: var(--lagoon); transform: translate(10px, -3px); }
.glitch-title::after { color: var(--coral); transform: translate(-8px, 5px); clip-path: inset(66% 0 12% 0); }

.coordinate, .tiny-note, .scroll-hint, .map-nav, .river-label {
  font-family: "Space Mono", ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.coordinate { position: absolute; left: 7vw; top: 13vh; color: var(--lagoon); font-size: .75rem; }

.fragment {
  position: absolute;
  max-width: 23rem;
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  line-height: 1.3;
  font-weight: 600;
}
.sea-fragment { right: 9vw; bottom: 18vh; color: var(--ink); }
.river-fragment { right: 8vw; top: 38vh; color: var(--ink); }
.leaf-fragment { left: 9vw; bottom: 14vh; color: var(--foam); }

.map-nav {
  position: absolute;
  right: 3vw;
  top: 4vh;
  z-index: 30;
  display: flex;
  gap: .55rem;
}
.nav-mark {
  border: 2px solid var(--ink);
  background: var(--foam);
  color: var(--ink);
  padding: .45rem .7rem;
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--coral);
  cursor: pointer;
  font-size: .68rem;
}
.nav-mark.active { background: var(--yellow); box-shadow: 4px 4px 0 var(--lagoon); }

.bubble, .registration {
  position: absolute;
  font-family: "DynaPuff", system-ui, cursive;
  color: var(--ink);
}
.coral-bubble {
  right: 15vw; top: 24vh; width: 76px; height: 60px; display: grid; place-items: center;
  background: var(--coral); border: 3px solid var(--ink); border-radius: 60% 55% 60% 48%; font-size: 2rem;
  box-shadow: 7px 7px 0 var(--lagoon);
}
.crescent { position: absolute; left: 11vw; bottom: 12vh; width: 130px; height: 34px; border-top: 5px solid var(--yellow); border-radius: 50%; }

.river-label { position: absolute; left: 12vw; top: 16vh; color: var(--yellow); }
.halftone-pool { position: absolute; border-radius: 50%; background: radial-gradient(circle, var(--lagoon) 0 3px, transparent 4px 15px); background-size: 24px 24px; border: 4px solid var(--ink); }
.pool-a { width: 34vw; height: 34vw; left: 4vw; bottom: -5vw; opacity: .7; }
.pool-b { width: 24vw; height: 24vw; right: 9vw; top: 14vh; opacity: .45; background-image: radial-gradient(circle, var(--coral) 0 3px, transparent 4px 16px); }
.river-curve { position: absolute; left: 36vw; top: 0; width: 22vw; height: 100vh; border-left: 18px solid var(--lagoon); border-radius: 48% 52%; box-shadow: -16px 0 var(--coral), 18px 0 var(--yellow); transform: rotate(5deg); }
.registration { font-size: 5rem; color: var(--yellow); text-shadow: 5px 0 var(--coral); }
.reg-one { left: 58vw; bottom: 16vh; } .reg-two { right: 9vw; bottom: 40vh; transform: rotate(16deg); }

.leaf-wrap { position: absolute; left: 34vw; top: 23vh; width: min(42vw, 540px); height: min(30vw, 390px); transition: transform 250ms ease; }
.leaf-island, .leaf-print {
  position: absolute; inset: 0; border: 5px solid var(--ink); border-radius: 78% 12% 74% 18% / 70% 18% 76% 20%; transform: rotate(-14deg);
}
.leaf-island {
  background:
    radial-gradient(circle at 70% 34%, var(--yellow) 0 3px, transparent 4px 18px),
    linear-gradient(135deg, var(--seafoam), var(--foam));
  box-shadow: 18px 18px 0 var(--ink);
  display: grid; place-items: center; color: var(--ink); font: 700 clamp(2.5rem, 7vw, 6rem) "DynaPuff";
}
.leaf-print.cyan { background: var(--lagoon); transform: translate(18px, -14px) rotate(-14deg); opacity: .85; }
.leaf-print.coral { background: var(--coral); transform: translate(-18px, 14px) rotate(-14deg); opacity: .8; }
.leaf-vein { position: absolute; left: 12%; right: 12%; top: 50%; height: 8px; background: var(--kelp); border-radius: 20px; transform: rotate(-3deg); }
.seed-dots { position: absolute; inset: 0; }
.seed-dots i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.seed-dots i:nth-child(1){left:25%;top:35%}.seed-dots i:nth-child(2){left:43%;top:62%}.seed-dots i:nth-child(3){left:65%;top:31%}.seed-dots i:nth-child(4){left:76%;top:55%}
.pin-ring { position: absolute; right: 19vw; top: 18vh; width: 86px; height: 86px; border: 5px solid var(--yellow); border-radius: 50%; box-shadow: inset 0 0 0 14px transparent, 0 0 0 4px var(--ink); }
.tiny-note { position: absolute; right: 9vw; bottom: 18vh; color: var(--ink); font-size: .75rem; }

.map-poster { position: absolute; inset: 9vh 8vw; border: 5px solid var(--ink); background: var(--foam); color: var(--ink); box-shadow: 12px 12px 0 var(--coral), -12px -12px 0 var(--lagoon); overflow: hidden; }
.map-title { position: absolute; left: 5vw; top: 5vh; font: 700 clamp(2rem, 7vw, 6rem) "DynaPuff"; color: var(--ink); }
.map-leaf { position: absolute; right: 12vw; top: 17vh; width: 28vw; height: 18vw; border: 4px solid var(--ink); border-radius: 80% 15% 75% 20%; background: var(--seafoam); transform: rotate(-12deg); box-shadow: 10px 10px 0 var(--yellow), -10px -8px 0 var(--lagoon); }
.contours { position: absolute; left: 6vw; bottom: 9vh; width: 42vw; height: 24vh; border: 3px solid var(--kelp); border-radius: 50%; box-shadow: inset 0 0 0 18px var(--foam), inset 0 0 0 21px var(--kelp), 0 0 0 18px var(--foam), 0 0 0 21px var(--kelp); opacity: .75; }
.map-poster p { position: absolute; right: 8vw; bottom: 9vh; font-size: 1.4rem; line-height: 1.55; }
.map-tag { position: absolute; font: 800 .75rem "Nunito Sans"; letter-spacing: .08em; text-transform: uppercase; border: 2px solid var(--ink); padding: .45rem .65rem; background: var(--yellow); }
.tag-a { left: 9vw; top: 23vh; } .tag-b { right: 21vw; top: 41vh; background: var(--lagoon); } .tag-c { left: 36vw; bottom: 18vh; background: var(--coral); }

.ripple { position: absolute; z-index: 20; width: 22px; height: 22px; border: 3px solid var(--lagoon); border-radius: 50%; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.4); }
.ripple.show { animation: ripple 650ms ease-out; }
@keyframes ripple { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(7); } }
.scroll-hint { position: absolute; left: 3vw; bottom: 4vh; z-index: 30; color: var(--foam); font-size: .72rem; }

@media (max-width: 760px) {
  .map-nav { left: 4vw; right: auto; flex-wrap: wrap; }
  .title { top: 29vh; left: 4vw; font-size: 22vw; }
  .sea-fragment, .river-fragment, .tiny-note { right: 5vw; max-width: 45vw; }
  .leaf-wrap { left: 18vw; top: 28vh; width: 68vw; height: 48vw; }
  .map-poster { inset: 12vh 5vw; }
}