:root {
  /* Space Grotesk is used sparingly for route numbers and dock tags. */
  --pearl-foam: #F4F0DE;
  --sea-glass-mint: #7EE6D4;
  --kelp-shadow: #173F35;
  --abyss-blue: #061B2E;
  --coral-signal: #FF6F61;
  --tide-teal: #0B6F7A;
  --moonlit-lavender: #B8C7FF;
  --display: Fraunces, Georgia, 'Times New Roman', serif;
  --body: 'Noto Sans KR', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --space: 'Space Grotesk', 'Trebuchet MS', system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--pearl-foam);
  font-family: var(--body);
  background: var(--abyss-blue);
  overflow-x: hidden;
  cursor: default;
}

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

.water-grain,
.caustic-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.water-grain {
  opacity: .18;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 13% 18%, rgba(244, 240, 222, .45) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 42%, rgba(126, 230, 212, .35) 0 1px, transparent 1.5px),
    radial-gradient(circle at 32% 76%, rgba(184, 199, 255, .35) 0 1px, transparent 1.5px);
  background-size: 29px 31px, 43px 47px, 61px 67px;
}

.caustic-field {
  opacity: .34;
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(126, 230, 212, .09) 22%, transparent 29% 54%, rgba(184, 199, 255, .07) 59%, transparent 66%),
    repeating-radial-gradient(ellipse at 48% 0%, rgba(244, 240, 222, .08) 0 2px, transparent 3px 42px);
  filter: blur(1px);
  animation: causticDrift 18s ease-in-out infinite alternate;
}

#descent-map {
  position: relative;
  isolation: isolate;
}

.depth-band {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 72px);
  display: block;
}

.depth-band::before,
.depth-band::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.depth-band::before {
  inset: -20% -10%;
  background:
    radial-gradient(ellipse at 12% 34%, rgba(126, 230, 212, .14), transparent 34%),
    radial-gradient(ellipse at 76% 24%, rgba(184, 199, 255, .12), transparent 33%),
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0 36px, rgba(244, 240, 222, .035) 38px 40px, transparent 43px 88px);
  opacity: .9;
}

.depth-band::after {
  left: -8vw;
  right: -8vw;
  bottom: -12vh;
  height: 32vh;
  background: radial-gradient(ellipse at center, rgba(23, 63, 53, .44), transparent 64%);
  transform: rotate(-2deg);
}

.surface-gate {
  background:
    radial-gradient(ellipse at 50% -20%, rgba(244, 240, 222, .38), transparent 34%),
    linear-gradient(180deg, rgba(126, 230, 212, .28), rgba(11, 111, 122, .65) 48%, #061B2E 112%),
    var(--abyss-blue);
}

.kelp-arcade {
  background:
    linear-gradient(168deg, #0B6F7A 0%, #07394C 48%, #061B2E 100%);
}

.ferry-plaza {
  background:
    radial-gradient(ellipse at 74% 36%, rgba(184, 199, 255, .22), transparent 34%),
    linear-gradient(191deg, #08364E 0%, #061B2E 74%);
}

.coral-tunnel {
  background:
    radial-gradient(ellipse at 28% 72%, rgba(255, 111, 97, .12), transparent 29%),
    linear-gradient(180deg, #061B2E 0%, #041421 100%);
}

.midnight-harbor {
  background:
    radial-gradient(ellipse at 50% 72%, rgba(11, 111, 122, .36), transparent 43%),
    linear-gradient(180deg, #061B2E 0%, #020A13 100%);
}

.depth-label {
  position: absolute;
  top: 28px;
  left: clamp(24px, 4vw, 64px);
  font-family: var(--space);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244, 240, 222, .72);
  z-index: 4;
}

.porthole-sign {
  position: relative;
  z-index: 5;
  color: var(--pearl-foam);
  width: min(620px, 82vw);
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid rgba(126, 230, 212, .45);
  border-radius: 44% 56% 51% 49% / 26% 31% 69% 74%;
  background:
    linear-gradient(145deg, rgba(244, 240, 222, .13), rgba(11, 111, 122, .24)),
    rgba(6, 27, 46, .52);
  box-shadow:
    0 0 0 10px rgba(126, 230, 212, .035),
    0 28px 80px rgba(0, 0, 0, .28),
    inset 0 0 42px rgba(126, 230, 212, .14);
  backdrop-filter: blur(12px);
  animation: buoyDrift 7s ease-in-out infinite;
  transition: border-color .45s ease, box-shadow .45s ease, background .45s ease;
}

.porthole-sign::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(244, 240, 222, .22);
  border-radius: inherit;
  pointer-events: none;
}

.porthole-sign h1,
.porthole-sign h2 {
  font-family: var(--display);
  font-weight: 800;
  margin: 0;
  letter-spacing: -.045em;
  line-height: .88;
  text-shadow: 0 0 30px rgba(126, 230, 212, .38);
}

.porthole-sign h1 { font-size: clamp(76px, 15vw, 190px); }
.porthole-sign h2 { font-size: clamp(48px, 8vw, 112px); }

.porthole-sign p {
  margin: 20px 0 0;
  font-size: clamp(16px, 1.8vw, 21px);
  line-height: 1.65;
  color: rgba(244, 240, 222, .86);
}

.porthole-sign.is-hovered {
  border-color: rgba(244, 240, 222, .74);
  background:
    linear-gradient(145deg, rgba(244, 240, 222, .18), rgba(11, 111, 122, .32)),
    rgba(6, 27, 46, .62);
  box-shadow:
    0 0 0 14px rgba(126, 230, 212, .055),
    0 34px 90px rgba(0, 0, 0, .32),
    inset 0 0 56px rgba(184, 199, 255, .18),
    0 0 34px rgba(126, 230, 212, .2);
}

.micro-scene {
  margin-top: 24px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(126, 230, 212, .22);
  background:
    radial-gradient(circle at 18% 48%, rgba(255, 111, 97, .75) 0 4px, transparent 5px),
    linear-gradient(90deg, rgba(244, 240, 222, .08), rgba(184, 199, 255, .08));
  position: relative;
  overflow: hidden;
  opacity: .74;
}

.micro-scene i {
  position: absolute;
  top: 19px;
  width: 34px;
  height: 12px;
  border-radius: 999px 999px 999px 12px;
  background: linear-gradient(90deg, var(--sea-glass-mint), var(--moonlit-lavender));
  box-shadow: 0 0 18px rgba(126, 230, 212, .42);
  animation: microSwim 5.8s ease-in-out infinite;
}

.micro-scene i:nth-child(1) { left: 14%; animation-delay: -1s; }
.micro-scene i:nth-child(2) { left: 45%; width: 22px; animation-delay: -3s; }
.micro-scene i:nth-child(3) { left: 68%; width: 28px; background: var(--coral-signal); animation-delay: -4.2s; }

.micro-scene span {
  position: absolute;
  right: 18px;
  top: 19px;
  max-width: 58%;
  color: rgba(244, 240, 222, .62);
  font-family: var(--space);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.porthole-sign:not(.is-hovered) .micro-scene span { opacity: .45; }

.hangul-mark {
  font-family: var(--body);
  color: var(--sea-glass-mint) !important;
  letter-spacing: .06em;
}

.route-tag,
.dock-token,
.caption-buoy {
  font-family: var(--space);
  text-transform: uppercase;
  letter-spacing: .16em;
}

.route-tag {
  display: inline-flex;
  margin-bottom: 18px;
  font-size: 11px;
  color: var(--sea-glass-mint);
}

.hero-sign { margin: 16vh 0 0 6vw; }
.arcade-sign { margin: 20vh 0 0 auto; transform: rotate(2deg); }
.plaza-sign { margin: 18vh 0 0 7vw; }
.tunnel-sign { margin: 18vh 7vw 0 auto; }
.harbor-plaque { margin: 15vh auto 0; text-align: center; }

.current-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: visible;
}

.route-draw,
.route-glow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 18 20;
}

.route-draw {
  stroke: var(--sea-glass-mint);
  stroke-width: 3;
  filter: drop-shadow(0 0 10px rgba(126, 230, 212, .72));
  stroke-dashoffset: 1000;
  animation: pathDraw 9s ease-in-out infinite alternate;
}

.route-glow {
  stroke: rgba(184, 199, 255, .4);
  stroke-width: 18;
  stroke-dasharray: none;
  opacity: .28;
}

.slow { animation-duration: 15s; }

.bubble-route {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.bubble {
  position: absolute;
  width: var(--size);
  height: var(--size);
  left: var(--left);
  top: var(--top);
  border: 1px solid rgba(244, 240, 222, .55);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(244, 240, 222, .72), rgba(126, 230, 212, .18) 38%, transparent 70%);
  box-shadow: 0 0 16px rgba(126, 230, 212, .25);
  animation: bubbleRise var(--duration) linear infinite;
  animation-delay: var(--delay);
}

.kelp-shadow {
  position: absolute;
  z-index: 1;
  width: 72px;
  height: 48vh;
  bottom: -6vh;
  border-radius: 80% 20% 70% 30%;
  background: linear-gradient(180deg, transparent, rgba(23, 63, 53, .72));
  filter: blur(.2px);
  transform-origin: bottom center;
  animation: kelpSway 8s ease-in-out infinite alternate;
}

.kelp-a { right: 14vw; height: 62vh; transform: rotate(8deg); }
.kelp-b { right: 4vw; width: 42px; animation-delay: -2s; }
.kelp-c { left: 10vw; height: 76vh; width: 92px; animation-delay: -4s; }

.dock-token,
.caption-buoy,
.map-island {
  position: absolute;
  z-index: 6;
  color: var(--abyss-blue);
  background: var(--pearl-foam);
  border: 1px solid rgba(126, 230, 212, .7);
  box-shadow: 0 12px 42px rgba(0, 0, 0, .24), 0 0 20px rgba(126, 230, 212, .22);
}

.dock-token {
  right: 12vw;
  bottom: 16vh;
  padding: 14px 19px;
  border-radius: 999px 999px 999px 22px;
  font-size: 12px;
  animation: buoyDrift 5.5s ease-in-out infinite reverse;
}

.caption-buoy {
  padding: 12px 16px;
  border-radius: 20px;
  font-size: 10px;
  transform: rotate(-5deg);
}

.buoy-left { left: 7vw; bottom: 18vh; }
.buoy-right { right: 9vw; top: 22vh; transform: rotate(7deg); }
.buoy-center { left: 39vw; bottom: 16vh; }

.map-island {
  right: 8vw;
  bottom: 13vh;
  width: 230px;
  min-height: 128px;
  padding: 28px;
  border-radius: 63% 37% 45% 55% / 48% 58% 42% 52%;
  background: linear-gradient(135deg, var(--pearl-foam), #dbeadb);
  animation: buoyDrift 6.8s ease-in-out infinite;
}

.map-island b { display: block; font-size: 20px; margin-bottom: 8px; color: var(--tide-teal); }
.map-island span { font-family: var(--space); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

.coral-signal {
  position: absolute;
  z-index: 7;
  display: grid;
  gap: 9px;
  padding: 12px;
  border-radius: 26px;
  background: rgba(6, 27, 46, .58);
  border: 1px solid rgba(244, 240, 222, .22);
}

.coral-signal i {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--coral-signal);
  box-shadow: 0 0 24px rgba(255, 111, 97, .72);
  animation: signalPulse 2.2s ease-in-out infinite;
}

.coral-signal i:nth-child(2) { background: var(--sea-glass-mint); animation-delay: .35s; }
.coral-signal i:nth-child(3) { background: var(--moonlit-lavender); animation-delay: .7s; }
.signal-a { left: 19vw; top: 28vh; transform: rotate(-8deg); }
.signal-b { left: 16vw; bottom: 20vh; transform: rotate(8deg); }

.harbor-window {
  position: absolute;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(2, 15px);
  gap: 12px;
  padding: 28px;
  border-radius: 46% 54% 36% 64% / 64% 28% 72% 36%;
  background: linear-gradient(180deg, rgba(23, 63, 53, .76), rgba(6, 27, 46, .85));
  border: 1px solid rgba(126, 230, 212, .2);
  transition: filter .35s ease, transform .35s ease;
}

.harbor-window.is-hovered { filter: brightness(1.25) saturate(1.1); }

.harbor-window span {
  width: 13px;
  height: 19px;
  border-radius: 10px;
  background: var(--moonlit-lavender);
  box-shadow: 0 0 18px rgba(184, 199, 255, .8);
  opacity: .75;
  animation: windowBlink 4s ease-in-out infinite;
}

.harbor-window span:nth-child(3n) { background: var(--sea-glass-mint); animation-delay: -1.8s; }
.harbor-window span:nth-child(2n) { opacity: .35; animation-delay: -.8s; }

.tower-one { right: 11vw; top: 24vh; transform: rotate(9deg); }
.reef-a { right: 22vw; bottom: 7vh; width: 150px; min-height: 230px; transform: rotate(-6deg); }
.reef-b { right: 6vw; bottom: 16vh; width: 120px; min-height: 178px; transform: rotate(6deg); }

.ferry-lights circle {
  fill: var(--coral-signal);
  filter: drop-shadow(0 0 14px rgba(255, 111, 97, .8));
  animation: ferryPulse 3s ease-in-out infinite;
}

.ferry-lights circle:nth-child(2n) { fill: var(--sea-glass-mint); animation-delay: -1s; }

.lantern-eel {
  position: absolute;
  z-index: 7;
  left: 48vw;
  top: 20vh;
  width: 104px;
  height: 26px;
  border-radius: 80% 20% 80% 20%;
  background: linear-gradient(90deg, var(--sea-glass-mint), var(--moonlit-lavender), transparent);
  box-shadow: 0 0 26px rgba(126, 230, 212, .58);
  animation: eelSwim 10s ease-in-out infinite;
}

.lantern-eel::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 7px;
  border-left: 18px solid rgba(184, 199, 255, .75);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.contour-orb {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(244, 240, 222, .22);
  border-radius: 50%;
  box-shadow: inset 0 0 0 22px transparent, 0 0 50px rgba(255, 111, 97, .12);
}

.contour-orb::before,
.contour-orb::after {
  content: "";
  position: absolute;
  inset: 16%;
  border: 1px dashed rgba(126, 230, 212, .28);
  border-radius: 50%;
}

.contour-orb::after { inset: 32%; border-color: rgba(255, 111, 97, .3); }
.orb-one { width: 330px; height: 330px; left: 5vw; top: 20vh; }
.orb-two { width: 460px; height: 460px; right: 4vw; bottom: 2vh; }

.harbor-skyline {
  position: absolute;
  inset: auto 8vw 6vh 8vw;
  height: 46vh;
  z-index: 3;
}

.harbor-skyline .reef-tower { bottom: 0; position: absolute; }
.harbor-skyline .tall { left: 8%; width: 138px; height: 320px; }
.harbor-skyline .low { left: 31%; width: 118px; height: 190px; }
.harbor-skyline .mid { right: 28%; width: 132px; height: 250px; }
.harbor-skyline .thin { right: 9%; width: 90px; height: 288px; }

.plaque-token {
  display: inline-block;
  position: relative;
  right: auto;
  bottom: auto;
  margin-top: 26px;
  color: var(--abyss-blue);
}

.tide-nav {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: 12px;
}

.tide-nav a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(6, 27, 46, .54);
  border: 1px solid rgba(126, 230, 212, .38);
  color: rgba(244, 240, 222, .72);
  font-family: var(--space);
  font-size: 11px;
  transition: .35s ease;
}

.tide-nav a.active,
.tide-nav a:hover {
  background: var(--sea-glass-mint);
  color: var(--abyss-blue);
  box-shadow: 0 0 22px rgba(126, 230, 212, .62);
}

.surface-gate::after {
  background:
    radial-gradient(ellipse at 22% 40%, rgba(244, 240, 222, .12), transparent 38%),
    radial-gradient(ellipse at center, rgba(23, 63, 53, .34), transparent 64%);
}

.is-visible .porthole-sign { animation-name: buoyDrift, signReveal; animation-duration: 7s, 1.2s; }

@keyframes causticDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.04); }
  to { transform: translate3d(2%, 1.5%, 0) scale(1.08); }
}

@keyframes pathDraw {
  from { stroke-dashoffset: 1100; }
  to { stroke-dashoffset: 0; }
}

@keyframes bubbleRise {
  from { transform: translate3d(0, 16vh, 0) scale(.75); opacity: 0; }
  15%, 82% { opacity: .75; }
  to { transform: translate3d(var(--drift), -112vh, 0) scale(1.1); opacity: 0; }
}

@keyframes buoyDrift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--tilt, 0deg)); }
  50% { transform: translate3d(0, -16px, 0) rotate(calc(var(--tilt, 0deg) + 1.5deg)); }
}

@keyframes kelpSway {
  from { transform: rotate(-7deg) skewX(-3deg); }
  to { transform: rotate(9deg) skewX(4deg); }
}

@keyframes signalPulse {
  0%, 100% { transform: scale(.78); opacity: .45; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes windowBlink {
  0%, 100% { opacity: .34; }
  45%, 70% { opacity: 1; }
}

@keyframes ferryPulse {
  0%, 100% { opacity: .35; transform: scale(.84); }
  50% { opacity: 1; transform: scale(1.18); }
}

@keyframes eelSwim {
  0%, 100% { transform: translate3d(-12vw, 0, 0) rotate(-4deg); opacity: .28; }
  50% { transform: translate3d(18vw, 7vh, 0) rotate(7deg); opacity: .9; }
}

@keyframes signReveal {
  from { opacity: .2; filter: blur(8px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes microSwim {
  0%, 100% { transform: translate3d(-18px, -3px, 0) scale(.92); opacity: .45; }
  50% { transform: translate3d(18px, 4px, 0) scale(1.05); opacity: 1; }
}

@media (max-width: 760px) {
  .depth-band { padding: 72px 20px 40px; }
  .hero-sign,
  .arcade-sign,
  .plaza-sign,
  .tunnel-sign,
  .harbor-plaque { margin: 14vh auto 0; }
  .tide-nav { right: 8px; gap: 8px; }
  .tide-nav a { width: 32px; height: 32px; font-size: 9px; }
  .dock-token, .caption-buoy, .map-island, .coral-signal { transform: scale(.82); }
  .map-island { right: 2vw; bottom: 7vh; }
  .reef-a, .reef-b, .tower-one { opacity: .65; }
}