:root {
  --abyss: #061018;
  --teal: #00C2B8;
  --ultra: #123D8C;
  --lime: #C9FF5A;
  --shell: #F2E7D2;
  --coral: #FF6B4A;
  --violet: #6D4BFF;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --studio: "Syne", "Arial Black", system-ui, sans-serif;
  --body: "Noto Sans KR", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--abyss); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--shell);
  font-family: var(--body);
  background: var(--abyss);
  overflow-x: hidden;
}

.abyss {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 16%, rgba(18,61,140,.78), transparent 31%),
    radial-gradient(circle at 84% 22%, rgba(109,75,255,.32), transparent 34%),
    radial-gradient(circle at 50% 112%, rgba(0,194,184,.24), transparent 36%),
    linear-gradient(145deg, #061018 0%, #081829 46%, #02070b 100%);
}
.caustics { position: absolute; inset: -10%; width: 120%; height: 120%; fill: none; stroke-linecap: round; opacity: .5; filter: blur(.25px); }
.caustics path { stroke: var(--teal); stroke-width: 1.25; stroke-dasharray: 7 24; animation: causticShift 18s linear infinite; }
.caustics-two { transform: rotate(-8deg); opacity: .26; }
.caustics-two path { stroke: var(--violet); animation-duration: 25s; }
.oil-halo { position: absolute; border-radius: 46% 54% 62% 38% / 44% 38% 62% 56%; filter: blur(28px); mix-blend-mode: screen; opacity: .34; animation: haloFloat 18s ease-in-out infinite alternate; }
.halo-one { width: 44vw; height: 30vw; left: -8vw; bottom: 6vh; background: radial-gradient(circle at 38% 42%, rgba(0,194,184,.36), transparent 58%), radial-gradient(circle at 65% 30%, rgba(255,107,74,.22), transparent 64%); }
.halo-two { width: 38vw; height: 42vw; right: -10vw; top: 12vh; background: radial-gradient(circle at 55% 45%, rgba(109,75,255,.38), transparent 60%), radial-gradient(circle at 30% 70%, rgba(201,255,90,.16), transparent 62%); animation-delay: -7s; }
.grain { position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(rgba(242,231,210,.45) 1px, transparent 1px); background-size: 5px 5px; mix-blend-mode: screen; }
.plankton-field { position: absolute; inset: 0; }
.plankton { position: absolute; width: var(--size); height: var(--size); left: var(--x); top: var(--y); border-radius: 50%; background: var(--color); box-shadow: 0 0 13px currentColor; opacity: .78; animation: planktonDrift var(--speed) ease-in-out infinite alternate; animation-delay: var(--delay); }
.cursor-reef { position: fixed; width: 280px; height: 280px; border-radius: 43% 57% 64% 36% / 46% 37% 63% 54%; pointer-events: none; background: radial-gradient(circle, rgba(0,194,184,.18), rgba(109,75,255,.09) 45%, transparent 70%); transform: translate(-50%, -50%); filter: blur(4px); opacity: .85; }

.tide-gauge { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; gap: 18px; padding: 18px 13px; border-left: 1px solid rgba(242,231,210,.25); background: rgba(6,16,24,.30); backdrop-filter: blur(12px); border-radius: 28px; }
.gauge-caption { writing-mode: vertical-rl; font: 800 10px/1 var(--studio); letter-spacing: .18em; color: rgba(242,231,210,.62); text-transform: uppercase; }
.gauge-mark { position: relative; width: 14px; height: 14px; border: 1px solid rgba(242,231,210,.5); border-radius: 50%; color: var(--shell); text-decoration: none; background: rgba(18,61,140,.55); transition: .35s ease; }
.gauge-mark::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid transparent; transition: .35s ease; }
.gauge-mark span { position: absolute; right: 24px; top: 50%; transform: translateY(-50%) scaleX(.9); transform-origin: right; white-space: nowrap; opacity: 0; font: 800 11px/1 var(--studio); letter-spacing: .14em; text-transform: uppercase; color: var(--shell); transition: .35s ease; }
.gauge-mark:hover span, .gauge-mark.active span { opacity: 1; transform: translateY(-50%) scaleX(1); }
.gauge-mark.active { background: var(--teal); box-shadow: 0 0 18px var(--teal), 0 0 0 7px rgba(0,194,184,.13); border-color: var(--lime); }
.gauge-mark.active::after { border-color: rgba(201,255,90,.46); }

.tidal-tour { position: relative; }
.scene { min-height: 100vh; position: relative; isolation: isolate; overflow: hidden; padding: 9vw 10vw; }
.scene::before { content: ""; position: absolute; inset: 6vh 7vw; z-index: -1; border: 1px solid rgba(242,231,210,.12); background: linear-gradient(135deg, rgba(18,61,140,.22), rgba(6,16,24,.58)), radial-gradient(circle at 70% 30%, rgba(0,194,184,.14), transparent 35%); border-radius: 46% 54% 62% 38% / 35% 47% 53% 65%; animation: roomBreathe 13s ease-in-out infinite alternate; box-shadow: inset 0 0 90px rgba(0,194,184,.08), 0 30px 120px rgba(0,0,0,.38); }
.curtain { position: absolute; top: -8vh; bottom: -8vh; width: 22vw; opacity: .24; filter: blur(1px); background: linear-gradient(90deg, transparent, rgba(0,194,184,.36), transparent); clip-path: polygon(0 0, 72% 12%, 50% 36%, 100% 62%, 44% 100%, 0 86%); animation: curtainOpen linear both; animation-timeline: view(); animation-range: entry 0% cover 72%; }
.seam-left { left: -4vw; }
.seam-right { right: -5vw; transform: scaleX(-1); }
.studio-label { margin: 0 0 20px; font: 800 12px/1.2 var(--studio); letter-spacing: .22em; text-transform: uppercase; color: var(--teal); }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 900; letter-spacing: -.065em; color: var(--shell); text-shadow: 0 9px 35px rgba(0,0,0,.55); }
h1 { font-size: clamp(72px, 16vw, 240px); line-height: .77; font-variation-settings: "SOFT" 80, "WONK" 1; }
h2 { font-size: clamp(46px, 9vw, 128px); line-height: .84; max-width: 880px; }
.scene-copy, .k-note { max-width: 560px; font-size: clamp(16px, 1.5vw, 23px); line-height: 1.55; color: rgba(242,231,210,.78); }
.k-note { color: var(--lime); font-size: 15px; letter-spacing: .04em; }
.membrane, .crescent-pane, .motion-tank-shell, .archive-cavity, .edit-bay { background: rgba(6,16,24,.52); border: 1px solid rgba(242,231,210,.14); backdrop-filter: blur(18px); box-shadow: inset 0 0 50px rgba(0,194,184,.08), 0 24px 70px rgba(0,0,0,.35); }
.hero-pool { width: min(970px, 78vw); padding: clamp(34px, 6vw, 82px); border-radius: 39% 61% 48% 52% / 58% 38% 62% 42%; transform: rotate(-2deg); }
.hero-pool h1 { transform: rotate(2deg); }
.lobby .scene-copy { transform: rotate(2deg); }
.reflection-word { position: absolute; left: 15vw; bottom: 10vh; font: 900 clamp(50px, 9vw, 150px)/.8 var(--display); letter-spacing: -.07em; color: rgba(0,194,184,.1); transform: scaleY(-1) skewX(-8deg); filter: blur(2px); }
.porthole { position: absolute; border-radius: 50%; border: 1px solid rgba(242,231,210,.24); background: radial-gradient(circle at 34% 24%, rgba(242,231,210,.8), rgba(0,194,184,.28) 18%, rgba(18,61,140,.45) 55%, rgba(6,16,24,.88)); box-shadow: inset -20px -30px 50px rgba(0,0,0,.42), 0 0 42px rgba(0,194,184,.2); transition: transform .6s ease, filter .6s ease; }
.porthole:hover { transform: scale(1.08) rotate(5deg); filter: saturate(1.28); }
.porthole span { position: absolute; inset: 17%; border-radius: 50%; border: 1px dashed rgba(201,255,90,.45); animation: slowSpin 19s linear infinite; }
.porthole i { position: absolute; inset: 34% 26%; border-radius: 50%; background: rgba(242,231,210,.25); transform: rotate(-24deg); }
.lens-one { width: 260px; height: 260px; right: 13vw; bottom: 12vh; }
.lens-two { width: 210px; height: 210px; left: 13vw; bottom: 13vh; }
.artifact { position: absolute; padding: 10px 16px; border: 1px solid rgba(242,231,210,.22); border-radius: 999px; background: rgba(242,231,210,.08); color: var(--shell); font: 800 12px/1 var(--studio); letter-spacing: .12em; text-transform: uppercase; transform: translateY(var(--sway, 0)) rotate(var(--r, -7deg)); animation: drift 9s ease-in-out infinite alternate; }
.ruler { --r: 9deg; left: 10vw; bottom: 16vh; color: var(--coral); }
.acetate { --r: -13deg; right: 17vw; top: 18vh; }
.brush-fin { --r: 7deg; right: 22vw; bottom: 18vh; color: var(--lime); }
.metronome { left: 11vw; bottom: 20vh; color: var(--teal); }
.kelp { right: 12vw; top: 22vh; color: var(--lime); }
.edit-mark { right: 18vw; bottom: 22vh; color: var(--coral); }
.tool-icon.compass { position: absolute; left: 36vw; top: 18vh; width: 92px; height: 92px; border: 2px solid rgba(255,107,74,.5); border-radius: 50%; transform: rotate(28deg); }
.tool-icon.compass::before { content: ""; position: absolute; left: 44px; top: -18px; width: 2px; height: 126px; background: var(--coral); transform: rotate(42deg); }

.pigment::before { border-radius: 63% 37% 41% 59% / 46% 61% 39% 54%; background: radial-gradient(circle at 28% 54%, rgba(255,107,74,.22), transparent 26%), radial-gradient(circle at 65% 30%, rgba(201,255,90,.15), transparent 28%), rgba(18,61,140,.32); }
.crescent-pane { margin-left: auto; width: min(780px, 74vw); padding: 54px; border-radius: 58% 42% 30% 70% / 34% 54% 46% 66%; }
.ink-cloud { position: absolute; border-radius: 44% 56% 70% 30% / 42% 34% 66% 58%; filter: blur(12px); mix-blend-mode: screen; animation: cloudPulse 12s ease-in-out infinite alternate; }
.cloud-a { width: 360px; height: 310px; left: 12vw; top: 24vh; background: rgba(255,107,74,.28); }
.cloud-b { width: 460px; height: 380px; left: 24vw; bottom: 10vh; background: rgba(109,75,255,.25); animation-delay: -5s; }
.cloud-c { width: 260px; height: 220px; right: 26vw; top: 12vh; background: rgba(201,255,90,.18); animation-delay: -8s; }
.swatch { position: absolute; width: 150px; height: 150px; display: grid; place-items: center; border-radius: 45% 55% 49% 51% / 57% 39% 61% 43%; color: #061018; font: 900 13px/1 var(--studio); animation: drift 8s ease-in-out infinite alternate; box-shadow: 0 24px 70px rgba(0,0,0,.32); }
.swatch-teal { background: var(--teal); left: 16vw; top: 52vh; }
.swatch-lime { background: var(--lime); left: 32vw; top: 21vh; animation-delay: -2s; }
.swatch-coral { background: var(--coral); right: 18vw; bottom: 11vh; animation-delay: -4s; }
.bathymetry { position: absolute; left: 8vw; bottom: 8vh; width: 38vw; height: 28vh; opacity: .28; background: repeating-radial-gradient(ellipse at 38% 56%, transparent 0 18px, rgba(242,231,210,.58) 19px 20px, transparent 21px 34px); clip-path: ellipse(46% 38% at 50% 50%); }

.motion::before { border-radius: 32% 68% 62% 38% / 50% 34% 66% 50%; background: linear-gradient(120deg, rgba(109,75,255,.2), rgba(18,61,140,.42)), radial-gradient(circle at 75% 58%, rgba(0,194,184,.16), transparent 32%); }
.motion-tank-shell { width: min(740px, 70vw); padding: 58px; border-radius: 42% 58% 66% 34% / 55% 42% 58% 45%; }
.timeline-orbit { position: absolute; width: 48vw; height: 48vw; max-width: 590px; max-height: 590px; right: 6vw; bottom: 6vh; border: 1px dashed rgba(0,194,184,.5); border-radius: 50%; animation: slowSpin 28s linear infinite; }
.timeline-orbit::before { content: ""; position: absolute; inset: 16%; border: 1px dashed rgba(201,255,90,.28); border-radius: 50%; }
.buoy { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 28% 24%, var(--shell), var(--coral) 38%, var(--violet)); box-shadow: 0 0 30px rgba(255,107,74,.45); }
.b1 { left: 50%; top: -17px; } .b2 { right: 5%; bottom: 18%; } .b3 { left: 10%; bottom: 8%; }
.projection-cone { position: absolute; right: 19vw; top: 16vh; width: 36vw; height: 52vh; background: linear-gradient(100deg, rgba(0,194,184,.2), transparent 68%); clip-path: polygon(0 45%, 100% 0, 100% 100%); filter: blur(8px); }
.wake-lines { position: absolute; right: 19vw; bottom: 19vh; width: 34vw; height: 22vh; transform: rotate(-12deg); }
.wake-lines span { display: block; height: 33%; border-top: 1px solid rgba(242,231,210,.2); border-radius: 50%; animation: wake 4s ease-in-out infinite alternate; }
.wake-lines span:nth-child(2) { animation-delay: -1s; } .wake-lines span:nth-child(3) { animation-delay: -2s; }

.archive::before { border-radius: 54% 46% 73% 27% / 31% 61% 39% 69%; }
.archive-cavity { margin: 4vh auto 0; width: min(840px, 72vw); padding: 58px; border-radius: 70% 30% 45% 55% / 48% 58% 42% 52%; text-align: center; }
.archive-cavity .scene-copy { margin-left: auto; margin-right: auto; }
.shell-card { position: absolute; width: 230px; height: 170px; display: grid; place-items: center; color: var(--shell); border: 1px solid rgba(242,231,210,.17); background: linear-gradient(145deg, rgba(242,231,210,.11), rgba(18,61,140,.42)); box-shadow: 0 26px 70px rgba(0,0,0,.4); transition: transform .55s ease, border-radius .55s ease; }
.shell-card:hover { transform: rotate(0deg) scale(1.08); border-radius: 50%; }
.shell-card span { font: 900 12px/1 var(--studio); letter-spacing: .14em; text-transform: uppercase; }
.shell-one { left: 13vw; top: 20vh; border-radius: 64% 36% 48% 52% / 42% 55% 45% 58%; transform: rotate(-12deg); }
.shell-two { right: 15vw; top: 22vh; border-radius: 44% 56% 70% 30% / 52% 45% 55% 48%; transform: rotate(10deg); }
.shell-three { right: 25vw; bottom: 12vh; border-radius: 70% 30% 37% 63% / 32% 67% 33% 68%; transform: rotate(-7deg); }
.maquette { position: absolute; left: 30vw; bottom: 8vh; width: 150px; height: 115px; border-radius: 50% 50% 44% 56% / 62% 60% 40% 38%; background: linear-gradient(145deg, rgba(242,231,210,.26), rgba(255,107,74,.12)); box-shadow: inset -20px -18px 40px rgba(6,16,24,.58); }

.edit::before { inset: 10vh 5vw; border-radius: 31% 69% 35% 65% / 61% 28% 72% 39%; background: radial-gradient(circle at 50% 42%, rgba(109,75,255,.32), transparent 35%), rgba(6,16,24,.7); }
.edit-bay { width: min(940px, 78vw); padding: 68px; border-radius: 38% 62% 44% 56% / 56% 37% 63% 44%; }
.film-jelly { position: absolute; right: 10vw; top: 16vh; width: 170px; height: 62vh; padding: 18px; border-radius: 999px; background: rgba(242,231,210,.08); border: 1px solid rgba(242,231,210,.16); display: flex; flex-direction: column; justify-content: space-around; transform: rotate(8deg); animation: jellySway 7s ease-in-out infinite alternate; }
.film-jelly span { height: 64px; border-radius: 50%; background: radial-gradient(circle, rgba(0,194,184,.45), rgba(109,75,255,.25), rgba(6,16,24,.5)); border: 1px solid rgba(201,255,90,.26); }
.final-note { position: absolute; left: 12vw; bottom: 9vh; color: var(--lime); font: 800 12px/1 var(--studio); letter-spacing: .18em; text-transform: uppercase; }
.edit-ripple { position: absolute; inset: 18vh 24vw 10vh 8vw; border-radius: 50%; border: 1px solid rgba(109,75,255,.35); opacity: .32; animation: ripple 5s ease-out infinite; }

.pause-bubble { position: fixed; z-index: 30; left: 0; top: 0; padding: 10px 14px; border-radius: 999px; background: rgba(6,16,24,.72); border: 1px solid rgba(0,194,184,.42); color: var(--shell); font: 800 11px/1 var(--studio); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; opacity: 0; transform: translate(-50%, -140%) scale(.8); transition: opacity .25s ease, transform .25s ease; }
.pause-bubble.show { opacity: 1; transform: translate(-50%, -140%) scale(1); }
.is-visible .studio-label, .is-visible h1, .is-visible h2, .is-visible .scene-copy { animation: surface .9s ease both; }
.is-visible h1, .is-visible h2 { animation-delay: .08s; }
.is-visible .scene-copy { animation-delay: .18s; }

@keyframes causticShift { to { stroke-dashoffset: -240; transform: translate3d(3%, -2%, 0); } }
@keyframes roomBreathe { to { border-radius: 58% 42% 40% 60% / 48% 62% 38% 52%; transform: translate3d(1.5vw, -1vh, 0) scale(1.025); } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes drift { to { transform: translate3d(var(--sway, 0), -24px, 0) rotate(calc(var(--r, -7deg) * -1)); } }
@keyframes cloudPulse { to { transform: translate3d(8vw, -6vh, 0) scale(1.2); opacity: .68; } }
@keyframes surface { from { opacity: 0; transform: translateY(26px) scale(.98); filter: blur(8px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes planktonDrift { to { transform: translate3d(42px, -72px, 0) scale(1.5); opacity: .35; } }
@keyframes haloFloat { to { transform: translate3d(7vw, -4vh, 0) rotate(12deg) scale(1.12); } }
@keyframes curtainOpen { from { transform: translateX(0) scaleX(.72); } to { transform: translateX(7vw) scaleX(1.16); } }
@keyframes wake { to { transform: translateX(36px) scaleX(1.12); border-color: rgba(0,194,184,.45); } }
@keyframes jellySway { to { transform: rotate(-5deg) translateY(26px); border-radius: 46% 54% 50% 50% / 55% 58% 42% 45%; } }
@keyframes ripple { from { transform: scale(.82); opacity: .42; } to { transform: scale(1.28); opacity: 0; } }

@media (max-width: 760px) {
  .tide-gauge { right: 10px; gap: 12px; }
  .gauge-mark span, .gauge-caption { display: none; }
  .scene { padding: 18vh 7vw 12vh; }
  .hero-pool, .crescent-pane, .motion-tank-shell, .archive-cavity, .edit-bay { width: 88vw; padding: 32px; }
  .timeline-orbit, .lens-one, .lens-two, .film-jelly { opacity: .55; transform: scale(.7); }
  .shell-card, .swatch { transform: scale(.75); }
  .reflection-word, .bathymetry, .tool-icon.compass { display: none; }
}