:root {
  /* Design font tokens: Inter** Regular Medium explanatory passages; Space Grotesk** SemiBold short technical annotations. */
  --deep-lagoon: #062A3A;
  --night-teal: #0B5B68;
  --aurora-mint: #7DF2C6;
  --soft-violet: #9A7CFF;
  --dawn-coral: #FF8E7A;
  --watercolor-sand: #F2E6C9;
  --pearl-foam: #F8FFF8;
  --shadow-kelp: #12352F;
  --display: "Bricolage Grotesque", "Space Grotesk", system-ui, sans-serif;
  --accent: "Space Grotesk", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--pearl-foam);
  background: var(--deep-lagoon);
  font-family: var(--body);
  overflow-x: hidden;
}

.lagoon {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(circle at 74% 11%, rgba(154, 124, 255, .34), transparent 31vw),
    radial-gradient(circle at 26% 23%, rgba(125, 242, 198, .22), transparent 36vw),
    linear-gradient(180deg, #062A3A 0%, #0B5B68 48%, #12352F 100%);
}

.aurora-field, .grain-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.aurora-field {
  opacity: .72;
  background:
    conic-gradient(from 180deg at 62% 23%, transparent, rgba(125, 242, 198, .33), rgba(154, 124, 255, .31), rgba(255, 142, 122, .16), transparent),
    radial-gradient(ellipse at 50% -20%, rgba(248, 255, 248, .16), transparent 52%);
  filter: blur(24px) saturate(118%);
  animation: auroraDrift 28s ease-in-out infinite alternate;
}
.grain-field {
  opacity: .16;
  background-image:
    radial-gradient(circle, rgba(248,255,248,.36) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(242,230,201,.25) .7px, transparent 1.2px);
  background-size: 53px 61px, 97px 83px;
  mix-blend-mode: screen;
}

main { position: relative; z-index: 2; }
.scene {
  min-height: 112vh;
  position: relative;
  display: grid;
  align-items: center;
  padding: 11vh 8vw 11vh 24vw;
  isolation: isolate;
}
.scene::after {
  content: "";
  position: absolute;
  inset: auto -10vw -18vh 12vw;
  height: 32vh;
  background: radial-gradient(ellipse, rgba(248,255,248,.09), transparent 68%);
  filter: blur(18px);
  z-index: -1;
}

.tide-nav {
  position: fixed;
  z-index: 6;
  right: 3.2vw;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tide-nav a {
  width: 8px;
  height: 28px;
  border-radius: 99px;
  background: rgba(248, 255, 248, .28);
  box-shadow: 0 0 0 1px rgba(242, 230, 201, .18);
  transition: .45s ease;
}
.tide-nav a.active { background: var(--aurora-mint); box-shadow: 0 0 22px rgba(125,242,198,.85); }

.current-map {
  position: fixed;
  z-index: 5;
  left: 17vw;
  top: 0;
  bottom: 0;
  width: 70px;
  pointer-events: none;
}
.current-line {
  position: absolute;
  left: 34px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(248,255,248,.34), rgba(125,242,198,.65), rgba(154,124,255,.38), transparent);
  filter: drop-shadow(0 0 8px rgba(125,242,198,.55));
}
.current-line::after {
  content: "";
  display: block;
  width: 100%;
  height: var(--progress, 0%);
  background: linear-gradient(180deg, var(--aurora-mint), var(--dawn-coral), var(--soft-violet));
  box-shadow: 0 0 18px rgba(125,242,198,.74);
}
.split-current {
  position: absolute;
  left: 34px;
  width: 58px;
  height: 26vh;
  border: 2px solid rgba(154,124,255,.42);
  border-left: 0;
  border-top-right-radius: 100% 55%;
  border-bottom-right-radius: 100% 55%;
  opacity: .55;
}
.split-one { top: 47vh; }
.split-two { top: 59vh; transform: scaleX(.64); transform-origin: left; border-color: rgba(125,242,198,.38); }
.bead {
  position: absolute;
  left: 21px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(248,255,248,.5);
  border-radius: 50%;
  background: rgba(6,42,58,.44);
  box-shadow: inset 0 0 14px rgba(248,255,248,.2), 0 0 0 8px rgba(248,255,248,.035);
  pointer-events: auto;
  cursor: pointer;
}
.bead:nth-of-type(1) { top: 13vh; }
.bead:nth-of-type(2) { top: 33vh; }
.bead:nth-of-type(3) { top: 53vh; }
.bead:nth-of-type(4) { top: 73vh; }
.bead:nth-of-type(5) { top: 91vh; }
.bead.active {
  background: radial-gradient(circle at 35% 30%, #F8FFF8, #7DF2C6 36%, #9A7CFF 78%);
  transform: scale(1.18);
}
.counter {
  position: absolute;
  left: 42px;
  top: 50%;
  transform: translateY(-50%);
  font: 600 12px/1 var(--accent);
  color: rgba(248,255,248,.76);
  letter-spacing: .12em;
}

.hero-copy { max-width: 980px; }
.route-code {
  margin: 0 0 22px;
  font: 600 13px/1 var(--accent);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: rgba(242,230,201,.78);
}
h1, h2 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.07em;
  margin: 0;
}
h1 {
  font-size: clamp(72px, 15vw, 210px);
  line-height: .78;
  text-shadow: 0 22px 60px rgba(0,0,0,.3);
  background: linear-gradient(180deg, #F8FFF8 48%, rgba(248,255,248,.28) 49%, rgba(125,242,198,.86));
  -webkit-background-clip: text;
  color: transparent;
}
h1 span { color: var(--dawn-coral); -webkit-text-fill-color: var(--dawn-coral); }
h2 {
  font-size: clamp(54px, 9vw, 142px);
  line-height: .84;
  color: rgba(248,255,248,.94);
}
.field-note, .text-island p:not(.route-code) {
  max-width: 560px;
  font-size: clamp(17px, 1.55vw, 24px);
  line-height: 1.76;
  color: rgba(248,255,248,.78);
}

.text-island {
  position: relative;
  max-width: 660px;
  padding: 34px 38px;
  border-radius: 48% 52% 44% 56% / 58% 42% 58% 42%;
  background: radial-gradient(circle at 28% 16%, rgba(248,255,248,.18), transparent 34%), rgba(6,42,58,.26);
  box-shadow: inset 0 0 44px rgba(248,255,248,.08), 0 30px 90px rgba(0,0,0,.2);
  backdrop-filter: blur(8px);
  transition: transform .7s ease, filter .7s ease;
}
.text-island.right { justify-self: end; }
.text-island:hover { transform: translateY(-10px) scale(1.015); filter: saturate(1.14); }
.annotation-shell, .code-fragment {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 18px;
  border-radius: 999px;
  font: 600 13px/1 var(--accent);
  letter-spacing: .06em;
  color: var(--shadow-kelp);
  background: rgba(242,230,201,.72);
}
.code-fragment { color: var(--pearl-foam); background: rgba(18,53,47,.48); border: 1px solid rgba(125,242,198,.24); }

.watercolor {
  position: absolute;
  z-index: -1;
  border-radius: 44% 56% 62% 38% / 54% 43% 57% 46%;
  filter: blur(.4px);
  opacity: .62;
  mix-blend-mode: screen;
  animation: pigment 18s ease-in-out infinite alternate;
}
.bloom { width: 48vw; height: 48vw; }
.bloom-mint { right: -12vw; top: 10vh; background: radial-gradient(circle, rgba(125,242,198,.35), transparent 62%); }
.bloom-violet { left: 13vw; bottom: 2vh; background: radial-gradient(circle, rgba(154,124,255,.25), transparent 66%); animation-delay: -7s; }
.bloom-coral { left: 36vw; top: 14vh; background: radial-gradient(circle, rgba(255,142,122,.30), rgba(154,124,255,.12), transparent 68%); }
.pool { width: 58vw; height: 64vh; }
.coral-pool { right: 4vw; background: radial-gradient(ellipse, rgba(255,142,122,.24), rgba(242,230,201,.13) 42%, transparent 70%); }
.violet-pool { left: 27vw; background: radial-gradient(ellipse, rgba(154,124,255,.30), rgba(125,242,198,.10) 52%, transparent 72%); }
.mint-pool { right: 8vw; background: radial-gradient(ellipse, rgba(125,242,198,.24), rgba(11,91,104,.2) 48%, transparent 73%); }
.hero-ripple, .lagoon-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(248,255,248,.28);
  opacity: .65;
}
.hero-ripple { width: 220px; height: 220px; left: 50%; top: 45%; transform: scale(.3); animation: ripple 5s ease-out infinite; }
.lagoon-ring { width: 52vw; height: 52vw; right: 7vw; top: 20vh; box-shadow: 0 0 90px rgba(125,242,198,.14), inset 0 0 70px rgba(248,255,248,.06); }
.brace-gate {
  position: absolute;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(190px, 23vw, 360px);
  color: rgba(242,230,201,.12);
  line-height: .7;
}
.left-brace { left: 28vw; top: 24vh; transform: rotate(-9deg); }
.right-brace { right: 7vw; bottom: 14vh; transform: rotate(8deg); }
.reef-shelf {
  position: absolute;
  left: 19vw;
  bottom: 6vh;
  width: 70vw;
  height: 20vh;
  background: radial-gradient(ellipse at 20% 40%, rgba(18,53,47,.78), transparent 30%), radial-gradient(ellipse at 55% 55%, rgba(18,53,47,.6), transparent 36%);
  border-radius: 50%;
  opacity: .75;
}
.route-sketch { position: absolute; left: 13vw; top: 20vh; width: 45vw; height: 65vh; overflow: visible; }
.route-sketch path { fill: none; stroke-linecap: round; stroke-width: 5; }
.main-route { stroke: rgba(248,255,248,.25); }
.hidden-route { stroke: var(--aurora-mint); stroke-dasharray: 12 18; filter: drop-shadow(0 0 10px rgba(125,242,198,.7)); opacity: .45; transition: .6s ease; }
.bypass:hover .hidden-route { opacity: 1; stroke-dasharray: 1 0; }

.fish, .guide-fish, .school b {
  position: absolute;
  width: 54px;
  height: 22px;
  border-radius: 60% 45% 45% 60%;
  background: linear-gradient(90deg, var(--aurora-mint), var(--soft-violet));
  box-shadow: 0 0 20px rgba(125,242,198,.35);
}
.fish::before, .guide-fish::before, .school b::before {
  content: "";
  position: absolute;
  right: -16px;
  top: 3px;
  border-left: 18px solid var(--dawn-coral);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.fish::after, .guide-fish::after, .school b::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--deep-lagoon);
}
.guide-fish { position: fixed; z-index: 7; left: 15vw; top: 13vh; transform: translate3d(0,0,0); pointer-events: none; }
.guide-fish span { position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgba(248,255,248,.18); animation: finPulse 2.6s ease-in-out infinite; }
.hero-fish { right: 27vw; top: 42vh; animation: swimAcross 9s ease-in-out infinite; }
.pair-fish { left: 38vw; top: 36vh; animation: smallCircle 11s linear infinite; }
.pair-fish i {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 60% 45% 45% 60%;
  background: linear-gradient(90deg, var(--aurora-mint), var(--soft-violet));
}
.pair-fish i::before {
  content: "";
  position: absolute;
  right: -16px;
  top: 3px;
  border-left: 18px solid var(--dawn-coral);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.pair-fish i:nth-child(2) { transform: translate(-38px, 28px) scale(.68); }
.guide-fish.circling { animation: smallCircle 1.8s ease-in-out 1; }
.school { position: absolute; right: 14vw; top: 35vh; width: 240px; height: 170px; }
.school b { transform: scale(.55); animation: schoolArc 7s ease-in-out infinite; }
.school b:nth-child(1){ left: 10px; top: 90px; }.school b:nth-child(2){ left: 55px; top: 54px; animation-delay:-1s; }.school b:nth-child(3){ left: 112px; top: 34px; animation-delay:-2s; }.school b:nth-child(4){ left: 166px; top: 58px; animation-delay:-3s; }.school b:nth-child(5){ left: 192px; top: 108px; animation-delay:-4s; }
.plankton span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--watercolor-sand);
  opacity: .55;
  animation: rise 8s ease-in-out infinite;
}
.plankton span:nth-child(1){ left: 35vw; top: 70vh; }.plankton span:nth-child(2){ left: 42vw; top: 62vh; animation-delay:-2s; }.plankton span:nth-child(3){ left: 50vw; top: 76vh; animation-delay:-4s; }.plankton span:nth-child(4){ left: 61vw; top: 58vh; animation-delay:-6s; }
.closing-mark { position: absolute; right: 16vw; bottom: 13vh; font: 800 28vw/.7 var(--display); color: rgba(242,230,201,.12); }
.ink-reveal, .waypoint { opacity: 0; filter: blur(16px); transform: translateY(28px); transition: opacity 1.1s ease, filter 1.1s ease, transform 1.1s ease; }
.scene.active .ink-reveal, .scene.active .waypoint { opacity: 1; filter: blur(0); transform: translateY(0); }
.soft-number { color: var(--aurora-mint); }

@keyframes auroraDrift { from { transform: translate3d(-3vw,-2vh,0) scale(1); } to { transform: translate3d(3vw,4vh,0) scale(1.08) rotate(3deg); } }
@keyframes pigment { from { transform: rotate(-3deg) scale(.96); border-radius: 44% 56% 62% 38% / 54% 43% 57% 46%; } to { transform: rotate(5deg) scale(1.05); border-radius: 60% 40% 47% 53% / 42% 60% 40% 58%; } }
@keyframes ripple { 0% { transform: scale(.22); opacity: .75; } 70%,100% { transform: scale(1.8); opacity: 0; } }
@keyframes swimAcross { 0%,100% { transform: translateX(-40px) translateY(0); } 50% { transform: translateX(150px) translateY(-24px); } }
@keyframes smallCircle { from { transform: rotate(0deg) translateX(42px) rotate(0deg); } to { transform: rotate(360deg) translateX(42px) rotate(-360deg); } }
@keyframes schoolArc { 0%,100% { transform: translate(0,0) scale(.55); } 50% { transform: translate(-18px,-20px) scale(.62); } }
@keyframes rise { 0%,100% { transform: translateY(0); opacity:.24; } 50% { transform: translateY(-48px); opacity:.7; } }
@keyframes finPulse { 0%,100% { transform: scale(.7); opacity:.15; } 50% { transform: scale(1.25); opacity:.45; } }

@media (max-width: 820px) {
  .scene { padding: 12vh 7vw 12vh 20vw; }
  .current-map { left: 7vw; }
  .tide-nav { display: none; }
  h1 { font-size: clamp(58px, 18vw, 110px); }
  h2 { font-size: clamp(46px, 15vw, 86px); }
  .text-island { padding: 26px 22px; border-radius: 32px; }
  .brace-gate { opacity: .5; }
  .guide-fish { left: 4vw; }
}