:root {
  --midnight: #061433;
  --ink: #020817;
  --cobalt: #1D4ED8;
  --teal: #22D3C5;
  --coral: #FF7A59;
  --yellow: #F8D84A;
  --cream: #F6E9CF;
  --violet: #8B5CF6;
  --hand: 'Patrick Hand', 'Comic Sans MS', 'Bradley Hand', cursive;
  --loose: 'Gaegu', 'Comic Sans MS', cursive;
  --body: 'DM Sans', Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--ink); color: var(--cream); overflow: hidden; }

body {
  font-family: var(--body);
  cursor: none;
  background:
    radial-gradient(circle at 16% 82%, rgba(34, 211, 197, .22), transparent 24%),
    radial-gradient(circle at 79% 18%, rgba(139, 92, 246, .24), transparent 28%),
    linear-gradient(145deg, var(--ink) 0%, var(--midnight) 48%, #030b1f 100%);
}

button { font: inherit; cursor: none; }

.aquarium-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 8; opacity: .23;
  background-image:
    linear-gradient(rgba(246, 233, 207, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 233, 207, .035) 1px, transparent 1px),
    radial-gradient(circle, rgba(246, 233, 207, .08) 1px, transparent 1.5px);
  background-size: 64px 64px, 64px 64px, 7px 7px;
  mix-blend-mode: screen;
}

.bubble-field { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.bubble { position: absolute; width: var(--s); height: var(--s); border: 1px solid rgba(246, 233, 207, .42); border-radius: 50%; left: var(--x); top: 105%; opacity: .72; animation: bubbleRise var(--d) linear infinite; animation-delay: var(--delay); }
@keyframes bubbleRise { to { transform: translate3d(var(--drift), -124vh, 0) scale(1.25); opacity: 0; } }

.cursor-goby { position: fixed; left: 0; top: 0; width: 38px; height: 20px; z-index: 20; pointer-events: none; transform: translate3d(-80px,-80px,0); transition: filter .2s ease; }
.cursor-goby span, .fish, .shadow-fish, .nav-fish::before { display: block; width: 100%; height: 100%; clip-path: polygon(0 50%, 25% 15%, 77% 22%, 100% 50%, 77% 78%, 25% 85%); background: linear-gradient(90deg, var(--teal), var(--yellow)); box-shadow: 0 0 18px rgba(34, 211, 197, .65); }
.cursor-goby::after { content: ''; position: absolute; left: 20px; top: 7px; width: 4px; height: 4px; background: var(--ink); border-radius: 50%; }

.fish-nav { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); display: grid; gap: 18px; z-index: 12; }
.nav-fish { position: relative; width: 62px; height: 34px; border: 0; background: transparent; color: var(--cream); font-family: var(--loose); }
.nav-fish::before { content: ''; position: absolute; inset: 3px 8px; opacity: .58; background: linear-gradient(90deg, var(--cobalt), var(--violet)); transition: transform .3s ease, opacity .3s ease; }
.nav-fish span { position: relative; z-index: 1; font-weight: 700; text-shadow: 0 2px 4px var(--ink); }
.nav-fish.is-active::before, .nav-fish:hover::before { opacity: 1; transform: translateX(-8px) rotate(-7deg); background: linear-gradient(90deg, var(--coral), var(--yellow)); }

.tank { height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; position: relative; }
.pane { min-height: 100vh; position: relative; scroll-snap-align: start; overflow: hidden; padding: clamp(30px, 5vw, 74px); }
.pane::before { content: ''; position: absolute; inset: -20%; background: radial-gradient(circle at 35% 20%, rgba(29, 78, 216, .18), transparent 34%), radial-gradient(circle at 70% 80%, rgba(2, 8, 23, .4), transparent 42%); pointer-events: none; }

.hero-pane { display: grid; align-content: center; }
.wordmark { position: relative; z-index: 3; margin: 0; font-family: var(--hand); font-size: clamp(76px, 16vw, 218px); line-height: .78; letter-spacing: .015em; color: var(--cream); text-shadow: 2px 3px 0 rgba(255, 122, 89, .35), -2px -2px 0 rgba(34, 211, 197, .22), 0 0 40px rgba(29, 78, 216, .7); transform: rotate(-2deg); animation: waxIn 1.3s steps(12) both; }
@keyframes waxIn { from { clip-path: inset(0 100% 0 0); filter: blur(2px); } to { clip-path: inset(0); filter: blur(0); } }
.hero-underline { position: relative; z-index: 3; width: min(58vw, 720px); height: 80px; margin-left: 4vw; overflow: visible; }
.hero-underline path, .final-underline path { fill: none; stroke: var(--coral); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 760; stroke-dashoffset: 760; filter: drop-shadow(0 0 8px rgba(255,122,89,.55)); animation: drawLine 1.55s .75s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.hero-copy { position: relative; z-index: 3; max-width: 570px; margin: 6px 0 22px 6vw; font-size: clamp(18px, 2vw, 25px); line-height: 1.35; color: rgba(246, 233, 207, .86); }
.swim-next { position: relative; z-index: 4; width: max-content; margin-left: 6vw; border: 1px solid rgba(246,233,207,.42); border-radius: 999px; padding: 10px 18px; color: var(--cream); background: rgba(6,20,51,.46); box-shadow: inset 0 0 18px rgba(34,211,197,.12); font-family: var(--loose); font-size: 22px; transition: transform .25s ease, background .25s ease; }
.swim-next:hover { transform: rotate(-2deg) translateY(-4px); background: rgba(29, 78, 216, .4); }

.specimen-label { position: relative; z-index: 4; display: inline-block; width: max-content; max-width: 84vw; padding: 6px 12px; background: var(--cream); color: var(--ink); font-family: var(--loose); font-size: 20px; box-shadow: 5px 7px 0 rgba(2,8,23,.38); }
.tilted { transform: rotate(-4deg); margin-left: 3vw; }

.honeycomb { position: absolute; z-index: 2; }
.hero-comb { right: 5vw; bottom: 7vh; width: min(610px, 50vw); height: 520px; }
.reef-comb, .deep-comb { inset: 18vh 6vw 8vh 5vw; }
.hex { position: absolute; clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); padding: 42px 34px; display: grid; place-content: center; text-align: center; min-height: 170px; border: 0; isolation: isolate; animation: floatCell 7s ease-in-out infinite; }
.hex::before { content: ''; position: absolute; inset: 5px; clip-path: inherit; border: 2px solid rgba(246,233,207,.6); background: linear-gradient(140deg, rgba(246,233,207,.06), rgba(34,211,197,.08)); z-index: -1; }
.hex::after { content: ''; position: absolute; inset: 17px; clip-path: inherit; border: 1px dashed rgba(246,233,207,.34); z-index: -1; }
.hex h2, .hex h3 { margin: 0 0 8px; font-family: var(--hand); line-height: .95; }
.hex h2 { font-size: 34px; }.hex h3 { font-size: 28px; }
.hex p { margin: 0; font-size: 15px; line-height: 1.35; }
.hex-number { position: absolute; top: 25px; left: 32px; font-family: var(--loose); color: var(--coral); font-size: 24px; }
@keyframes floatCell { 50% { transform: translateY(-16px) rotate(var(--r, 0deg)); } }

.h1 { width: 245px; height: 220px; left: 35px; top: 72px; --r: -3deg; animation-delay: .1s; }
.h2 { width: 198px; height: 178px; left: 260px; top: 8px; --r: 5deg; animation-delay: .5s; }
.h3 { width: 285px; height: 252px; left: 244px; top: 205px; --r: 2deg; animation-delay: .9s; }
.h4 { width: 164px; height: 148px; left: 82px; top: 315px; --r: -7deg; animation-delay: 1.4s; }
.hex-paper { background: linear-gradient(145deg, var(--cream), #e5d0a8); color: var(--ink); filter: drop-shadow(14px 16px 0 rgba(2,8,23,.34)); }
.hex-glass { background: rgba(29,78,216,.18); color: var(--cream); backdrop-filter: blur(8px); box-shadow: inset 0 0 34px rgba(34,211,197,.14); }
.hex-teal { background: rgba(34,211,197,.72); color: var(--ink); }
.hex-violet { background: rgba(139,92,246,.78); color: var(--cream); }
.hex-yellow { background: rgba(248,216,74,.9); color: var(--ink); }
.hex-cobalt { background: rgba(29,78,216,.76); color: var(--cream); }
.hex-coral { background: rgba(255,122,89,.88); color: var(--ink); }
.hex-empty { background: rgba(246,233,207,.04); }
.ripple { width: 80px; height: 80px; border: 2px solid var(--teal); border-radius: 50%; box-shadow: 0 0 0 18px rgba(34,211,197,.12), 0 0 0 38px rgba(34,211,197,.06); }

.fish { width: 54px; height: 30px; margin: 0 auto 10px; }
.clownfish { background: linear-gradient(90deg, var(--coral) 0 42%, var(--cream) 43% 50%, var(--coral) 51%); }
.angelfish { background: linear-gradient(90deg, var(--violet), var(--teal)); transform: rotate(-12deg); }
.tang { background: linear-gradient(90deg, var(--yellow), var(--coral)); }
.shadow-fish { position: absolute; width: 160px; height: 72px; opacity: .13; filter: blur(1px); background: var(--cream); animation: shadowSwim 24s linear infinite; }
.fish-a { left: -12vw; top: 21vh; }.fish-b { left: 110vw; bottom: 18vh; animation-direction: reverse; animation-duration: 30s; }
@keyframes shadowSwim { to { transform: translateX(126vw); } }

.current-line { position: absolute; width: 58vw; height: 160px; border-bottom: 2px solid rgba(34,211,197,.3); border-radius: 50%; transform: rotate(-17deg); }
.current-one { right: 10vw; top: 12vh; }
.pane-title { position: relative; z-index: 4; max-width: 760px; }
.pane-title h2, .final-card h2 { font-family: var(--hand); font-size: clamp(44px, 7vw, 94px); line-height: .9; margin: 22px 0; color: var(--cream); }
.underlined { display: inline; background-image: linear-gradient(var(--yellow), var(--yellow)); background-size: 0 12px; background-position: 0 86%; background-repeat: no-repeat; transition: background-size .8s cubic-bezier(.2,.7,.1,1); }
.is-visible .underlined, .underlined:hover { background-size: 100% 12px; }

.hex-large { width: 390px; height: 346px; left: 4vw; top: 20vh; transform: rotate(-5deg); }
.side-note { width: 284px; height: 252px; left: 38vw; top: 8vh; }
.artifact { width: 330px; height: 292px; right: 4vw; top: 25vh; }
.tiny-fact { width: 230px; height: 204px; left: 50vw; bottom: 2vh; }
.tape { position: absolute; width: 86px; height: 28px; background: rgba(246,233,207,.64); box-shadow: 0 3px 0 rgba(2,8,23,.18); }
.tape-a { left: 48px; top: 18px; transform: rotate(-12deg); }.tape-b { right: 56px; bottom: 24px; transform: rotate(10deg); }

.reef-pane { background: linear-gradient(180deg, rgba(2,8,23,0), rgba(2,8,23,.42)); }
.diagonal-caption { position: absolute; left: 8vw; top: 16vh; color: var(--teal); font-family: var(--loose); font-size: 25px; transform: rotate(-9deg); z-index: 4; }
.wide-cell { width: 480px; height: 425px; left: 10vw; bottom: 5vh; }
.scrap-one { width: 260px; height: 230px; left: 2vw; top: 20vh; }
.scrap-two { width: 315px; height: 280px; right: 18vw; top: 9vh; }
.scrap-three { width: 300px; height: 266px; right: 5vw; bottom: 9vh; }
.scale-pattern { position: absolute; inset: 30px; opacity: .18; background: radial-gradient(circle at 50% 0, var(--cream) 18%, transparent 19%) 0 0/32px 24px; }

.depths-pane { display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, rgba(29,78,216,.18), transparent 34%), linear-gradient(180deg, var(--midnight), var(--ink)); }
.final-card { position: relative; z-index: 4; width: min(780px, 86vw); padding: clamp(28px, 5vw, 56px); background: rgba(6,20,51,.62); border: 1px solid rgba(246,233,207,.28); box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 60px rgba(34,211,197,.08); transform: rotate(-1deg); }
.final-card p { font-size: clamp(18px, 2vw, 24px); line-height: 1.45; color: rgba(246,233,207,.85); }
.final-underline { width: 78%; height: 70px; overflow: visible; }
.final-underline path { stroke: var(--teal); animation-delay: .15s; }
.return { margin-left: 0; }
.large-glass-hex { position: absolute; width: 42vw; height: 42vw; clip-path: polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%); border: 2px solid rgba(34,211,197,.18); background: rgba(246,233,207,.025); left: -9vw; bottom: -13vw; animation: floatCell 11s ease-in-out infinite; }
.large-glass-hex.second { left: auto; right: -8vw; top: -10vw; width: 34vw; height: 34vw; border-color: rgba(139,92,246,.2); }

@media (max-width: 860px) {
  body { cursor: auto; }
  button { cursor: pointer; }
  .cursor-goby { display: none; }
  .fish-nav { right: 8px; transform: translateY(-50%) scale(.82); }
  .pane { padding: 28px 22px; }
  .hero-comb, .reef-comb, .deep-comb { position: relative; inset: auto; width: 100%; height: 720px; margin-top: 25px; }
  .hero-copy, .swim-next { margin-left: 0; }
  .hex { transform: scale(.82); }
  .h1 { left: 0; top: 0; }.h2 { left: 150px; top: 145px; }.h3 { left: 20px; top: 305px; }.h4 { left: 205px; top: 455px; }
  .hex-large { left: -30px; top: 20px; }.side-note { left: 165px; top: 240px; }.artifact { left: -14px; top: 430px; right: auto; }.tiny-fact { left: 178px; top: 580px; bottom: auto; }
  .wide-cell { left: -55px; bottom: 30px; }.scrap-one { left: 6px; top: 5px; }.scrap-two { left: 140px; top: 220px; right: auto; }.scrap-three { left: 24px; bottom: 255px; right: auto; }
}