:root {
  /* DESIGN typography tokens: IBM Plex Mono** / IBM Plex Sans KR** */
  --abyss: #031724;
  --deep: #063A5C;
  --teal: #0A6B78;
  --cyan: #24E6D2;
  --lime: #B7F25C;
  --orange: #FF7A2F;
  --rose: #FF5E8A;
  --mist: #E6F7F2;
  --design-font-token-mono: "Mono**";
  --design-font-token-kr: "KR**";
  --depth: 0;
  --swell: 1;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--mist);
  background: var(--abyss);
  font-family: "IBM Plex Sans KR", Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(36, 230, 210, .12), transparent 34%),
    linear-gradient(180deg, rgba(3, 23, 36, .08), rgba(3, 23, 36, calc(.35 + var(--depth) * .45)));
  z-index: 2;
  mix-blend-mode: screen;
}

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

.water-field {
  position: fixed;
  inset: -12vh -12vw;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 14%, rgba(255, 94, 138, .13), transparent 18%),
    radial-gradient(circle at 16% 82%, rgba(183, 242, 92, .09), transparent 20%),
    linear-gradient(135deg, #031724 0%, #063A5C 45%, #0A6B78 78%, #031724 100%);
  filter: saturate(calc(1.15 - var(--depth) * .2));
}

.mesh {
  position: absolute;
  border-radius: 46% 54% 61% 39% / 55% 38% 62% 45%;
  filter: blur(20px);
  mix-blend-mode: screen;
  opacity: .66;
  animation: meshDrift 24s ease-in-out infinite alternate;
}

.mesh-one {
  width: 62vw;
  height: 58vh;
  left: -8vw;
  top: 2vh;
  background: radial-gradient(circle at 38% 42%, #24E6D2, transparent 30%), radial-gradient(circle at 62% 58%, #063A5C, transparent 54%);
}

.mesh-two {
  width: 56vw;
  height: 66vh;
  right: -7vw;
  top: 26vh;
  background: radial-gradient(circle at 28% 55%, #0A6B78, transparent 38%), radial-gradient(circle at 70% 25%, #FF7A2F, transparent 13%);
  animation-delay: -8s;
}

.mesh-three {
  width: 44vw;
  height: 42vh;
  left: 36vw;
  bottom: -10vh;
  background: radial-gradient(circle at 50% 50%, #063A5C, transparent 42%), radial-gradient(circle at 35% 70%, #B7F25C, transparent 14%);
  animation-delay: -15s;
}

.plankton {
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image: radial-gradient(circle, #E6F7F2 0 1px, transparent 1.5px), radial-gradient(circle, #24E6D2 0 1px, transparent 1.5px);
  background-size: 8vw 8vw, 13vw 13vw;
  background-position: 0 0, 4vw 6vw;
  animation: planktonRise 32s linear infinite;
}

main { position: relative; z-index: 1; }

.scene {
  position: relative;
  min-height: 100vh;
  padding: clamp(4rem, 8vw, 7rem) clamp(1.2rem, 5vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 6%;
  border: 1px solid rgba(230, 247, 242, .08);
  border-radius: 58% 42% 47% 53% / 34% 58% 42% 66%;
  pointer-events: none;
  opacity: .55;
}

.depth-nav {
  position: fixed;
  right: clamp(.8rem, 2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: grid;
  gap: .8rem;
  font-family: "IBM Plex Mono", monospace;
}

.depth-link {
  display: grid;
  justify-items: end;
  gap: .1rem;
  color: rgba(230, 247, 242, .45);
  font-size: .68rem;
  letter-spacing: .08em;
  transition: color .8s ease, transform .8s ease;
}

.depth-link span { color: var(--cyan); }
.depth-link.active { color: var(--mist); transform: translateX(-.45rem); }

.coordinate {
  margin: 0 0 1rem;
  color: var(--cyan);
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(.68rem, .9vw, .86rem);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.pressure-gate { display: flex; align-items: center; }

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 78rem;
  margin-left: clamp(.2rem, 4vw, 5rem);
  transform: translateY(calc(var(--depth) * -1.5rem));
}

.wordmark {
  margin: 0;
  font-family: "Noto Sans KR", "IBM Plex Sans KR", sans-serif;
  font-size: clamp(4.7rem, 17vw, 18rem);
  line-height: .78;
  letter-spacing: -.095em;
  font-weight: 900;
  color: var(--mist);
  text-shadow: 0 0 36px rgba(36, 230, 210, .26);
  transform: scale(calc(1 + var(--swell) * .015));
}

.wordmark span {
  display: block;
  margin-left: clamp(3rem, 23vw, 26rem);
  font-size: .26em;
  letter-spacing: -.04em;
  color: rgba(230, 247, 242, .74);
}

.tagline {
  max-width: 42rem;
  margin: 1.6rem 0 0 clamp(1rem, 11vw, 13rem);
  font-size: clamp(1.05rem, 2.1vw, 2rem);
  line-height: 1.45;
  font-weight: 600;
}

.side-claim {
  position: absolute;
  right: 12vw;
  bottom: 12vh;
  width: 18rem;
  font-family: Fraunces, serif;
  color: var(--cyan);
  font-size: clamp(1.45rem, 3vw, 3rem);
  line-height: .92;
}

.side-claim small {
  display: block;
  margin-top: .8rem;
  font: 500 .76rem/1.4 "IBM Plex Mono", monospace;
  color: rgba(230, 247, 242, .58);
}

.blob-window, .reef-orb, .membrane, .aperture, .reef-capsule {
  box-shadow: inset 0 0 55px rgba(230, 247, 242, .07), 0 28px 90px rgba(3, 23, 36, .48);
  backdrop-filter: blur(14px);
}

.hero-mask {
  position: absolute;
  width: 58vw;
  height: 74vh;
  right: -9vw;
  top: 9vh;
  background: radial-gradient(circle at 32% 32%, rgba(36, 230, 210, .28), transparent 28%), linear-gradient(140deg, rgba(10, 107, 120, .44), rgba(6, 58, 92, .22));
  border-radius: 61% 39% 48% 52% / 33% 56% 44% 67%;
  clip-path: ellipse(48% 42% at 55% 50%);
  z-index: 0;
}

.section-ripple, .cursor-ripple, .ripple-burst {
  position: absolute;
  border: 1px solid rgba(36, 230, 210, .48);
  border-radius: 50%;
  pointer-events: none;
}

.origin-ripple {
  width: 8rem;
  height: 4rem;
  left: 38vw;
  top: 43vh;
  z-index: 3;
  animation: pressureRipple 6.5s ease-out infinite;
}

.probability-reef { min-height: 115vh; }

.chapter { position: relative; z-index: 2; }
.chapter-left { width: min(36rem, 86vw); margin: 6vh 0 0 4vw; }

h2 {
  margin: 0;
  font-family: "Noto Sans KR", sans-serif;
  font-size: clamp(3rem, 8.5vw, 9.5rem);
  line-height: .88;
  letter-spacing: -.065em;
  font-weight: 900;
}

.chapter p:not(.coordinate), .decision-text p, .final-copy p:not(.coordinate), .reef-capsule p {
  color: rgba(230, 247, 242, .78);
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 1.75;
}

.capsule-field {
  position: relative;
  height: 62vh;
  margin-top: -2rem;
}

.reef-capsule {
  position: absolute;
  width: clamp(16rem, 25vw, 27rem);
  padding: clamp(1.3rem, 2vw, 2.2rem);
  background: linear-gradient(145deg, rgba(230, 247, 242, .12), rgba(10, 107, 120, .16));
  border: 1px solid rgba(36, 230, 210, .18);
  transition: transform .9s ease, background .9s ease;
}

.reef-capsule:hover { transform: translateY(-.8rem) scale(1.02); background: linear-gradient(145deg, rgba(36, 230, 210, .18), rgba(255, 122, 47, .1)); }
.reef-capsule span { font-family: "IBM Plex Mono", monospace; color: var(--lime); }
.reef-capsule h3 { margin: .6rem 0; font-size: clamp(1.5rem, 2.5vw, 2.6rem); letter-spacing: -.05em; }
.capsule-one { left: 51vw; top: -8vh; border-radius: 48% 52% 38% 62% / 57% 36% 64% 43%; }
.capsule-two { left: 30vw; top: 18vh; border-radius: 67% 33% 54% 46% / 35% 58% 42% 65%; }
.capsule-three { right: 7vw; top: 25vh; border-radius: 39% 61% 65% 35% / 62% 38% 48% 52%; }
.capsule-four { left: 57vw; top: 47vh; border-radius: 58% 42% 45% 55% / 48% 65% 35% 52%; }

.reef-orb { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.reef-orb-a { width: 34vw; height: 24vw; left: -8vw; bottom: 4vh; background: radial-gradient(circle, rgba(255, 94, 138, .2), transparent 68%); }
.reef-orb-b { width: 26vw; height: 36vw; right: 8vw; top: 10vh; background: radial-gradient(circle, rgba(183, 242, 92, .14), transparent 67%); }

.currents-decision { min-height: 112vh; }

.current-lane {
  position: absolute;
  width: 130vw;
  height: 18vh;
  left: -15vw;
  border-radius: 50%;
  border: 1px solid rgba(36, 230, 210, .12);
  background: linear-gradient(90deg, transparent, rgba(36, 230, 210, .12), transparent);
  transform: rotate(-16deg);
}
.lane-one { top: 18vh; }
.lane-two { top: 58vh; transform: rotate(11deg); }

.membrane-large {
  position: absolute;
  right: 10vw;
  top: 10vh;
  width: min(52rem, 70vw);
  height: 54vh;
  padding: clamp(2rem, 5vw, 5rem);
  display: grid;
  align-content: center;
  background: radial-gradient(circle at 30% 25%, rgba(36, 230, 210, .2), transparent 33%), linear-gradient(150deg, rgba(6, 58, 92, .5), rgba(3, 23, 36, .15));
  border: 1px solid rgba(230, 247, 242, .13);
  border-radius: 65% 35% 43% 57% / 46% 58% 42% 54%;
}

.curved-note {
  position: absolute;
  font-family: Fraunces, serif;
  color: var(--lime);
  font-size: clamp(1.8rem, 4vw, 5rem);
  line-height: .95;
}
.note-one { left: 9vw; top: 18vh; transform: rotate(-12deg); }
.note-two { left: 15vw; bottom: 18vh; width: 30rem; color: var(--rose); transform: rotate(8deg); }

.decision-text { position: absolute; right: 14vw; bottom: 10vh; width: min(34rem, 72vw); }

.future-school { min-height: 105vh; display: grid; place-items: center start; }

.aperture {
  position: absolute;
  left: 42vw;
  top: 18vh;
  width: clamp(18rem, 38vw, 40rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50% 44% 58% 42% / 48% 58% 42% 52%;
  background: radial-gradient(circle at 50% 50%, rgba(36, 230, 210, .55), rgba(10, 107, 120, .18) 38%, rgba(3, 23, 36, .18) 68%);
  border: 1px solid rgba(36, 230, 210, .28);
  animation: aperturePulse 8s ease-in-out infinite;
}

.aperture span { font-family: "Noto Sans KR", sans-serif; font-weight: 900; font-size: clamp(3rem, 8vw, 8rem); letter-spacing: -.08em; }

.final-copy { position: relative; z-index: 3; width: min(45rem, 82vw); margin-left: 5vw; }
.final-copy h2 { font-size: clamp(2.6rem, 6vw, 6.4rem); }

.quiet-entry {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 1rem 1.5rem;
  border: 1px solid rgba(36, 230, 210, .45);
  border-radius: 999px;
  color: var(--cyan);
  font-family: Fraunces, serif;
  background: rgba(3, 23, 36, .24);
}

.fish { position: absolute; width: 4.5rem; height: 1.55rem; z-index: 2; filter: drop-shadow(0 0 14px rgba(36, 230, 210, .35)); animation: swim 18s linear infinite; }
.fish span, .fish::before, .fish::after { content: ""; position: absolute; display: block; }
.fish span { inset: 0 24% 0 0; border-radius: 70% 44% 48% 62% / 50%; background: var(--mist); }
.fish::before { right: 0; top: 18%; border-left: 1.2rem solid currentColor; border-top: .5rem solid transparent; border-bottom: .5rem solid transparent; }
.fish::after { left: 28%; top: 38%; width: .25rem; height: .25rem; border-radius: 50%; background: #031724; }
.needlefish { width: 8rem; height: .75rem; color: #E6F7F2; opacity: .8; }
.needlefish span { background: linear-gradient(90deg, transparent, #E6F7F2, #24E6D2); }
.reef-fish { color: #FF7A2F; }
.reef-fish span { background: #FF7A2F; }
.cyan-fish { color: #24E6D2; opacity: .62; }
.cyan-fish span { background: rgba(36, 230, 210, .6); }
.lime-fry { width: 2.2rem; height: .8rem; color: #B7F25C; }
.lime-fry span { background: #B7F25C; }
.fish-a { left: -10vw; top: 38vh; animation-duration: 21s; }
.fish-b { right: 12vw; top: 61vh; animation-duration: 26s; animation-delay: -7s; }
.fish-c { left: -8vw; top: 28vh; animation-delay: -3s; }
.fish-d { right: 18vw; bottom: 13vh; animation-duration: 15s; }
.fish-e { left: -14vw; top: 51vh; animation-duration: 23s; }
.fish-f { right: -8vw; top: 31vh; animation-direction: reverse; }

.orbit { position: absolute; left: 42vw; top: 18vh; width: clamp(18rem, 38vw, 40rem); aspect-ratio: 1; border-radius: 50%; animation: orbit 18s linear infinite; }
.orbit-two { animation-duration: 27s; animation-direction: reverse; }
.orbit-three { animation-duration: 34s; }
.orbit .fish { left: 50%; top: -.4rem; animation: none; }

.cursor-ripple { position: fixed; left: 0; top: 0; width: 2rem; height: 1rem; opacity: 0; z-index: 6; transform: translate(-50%, -50%) scale(1); transition: opacity .45s ease; }
.ripple-burst { z-index: 4; animation: burst 1.4s ease-out forwards; }

.reveal-phrase { opacity: .72; transition: opacity 1.2s ease, filter 1.2s ease; }
.reveal-phrase.awake { opacity: 1; filter: drop-shadow(0 0 14px rgba(36, 230, 210, .35)); }

@keyframes meshDrift { to { transform: translate3d(6vw, -4vh, 0) rotate(9deg) scale(1.08); } }
@keyframes planktonRise { to { background-position: 0 -40vw, 4vw -34vw; } }
@keyframes pressureRipple { from { transform: scale(.25); opacity: .85; } to { transform: scale(8, 5); opacity: 0; } }
@keyframes swim { from { transform: translateX(0); } to { transform: translateX(125vw); } }
@keyframes aperturePulse { 50% { transform: scale(1.04) rotate(2deg); box-shadow: inset 0 0 80px rgba(230, 247, 242, .16), 0 0 90px rgba(36, 230, 210, .25); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes burst { from { width: 1rem; height: .5rem; opacity: .8; } to { width: 16rem; height: 8rem; opacity: 0; } }

@media (max-width: 820px) {
  .depth-nav { display: none; }
  .scene { padding-right: 1.2rem; }
  .side-claim, .decision-text, .membrane-large, .aperture, .orbit { position: relative; left: auto; right: auto; top: auto; bottom: auto; }
  .pressure-gate, .future-school { display: block; }
  .side-claim { margin: 4rem 0 0 1rem; }
  .capsule-field { height: auto; display: grid; gap: 1rem; margin-top: 2rem; }
  .reef-capsule { position: relative; left: auto; right: auto; top: auto; width: min(100%, 28rem); }
  .capsule-two, .capsule-four { justify-self: end; }
  .membrane-large { width: 100%; height: auto; margin-top: 4rem; }
  .curved-note { position: relative; left: auto; top: auto; bottom: auto; width: auto; margin: 2rem 0; }
  .decision-text { width: auto; margin-top: 2rem; }
  .aperture, .orbit { width: min(86vw, 28rem); margin: 2rem auto; }
  .orbit { position: absolute; left: 7vw; top: 24vh; }
}