:root {
  --abyss: #062A3A;
  --kelp: #123F35;
  --foam: #F2F7EF;
  --current: #0B5D68;
  --lavender: #B9C7FF;
  --glass: #56C7C5;
  --coral: #FF9B7A;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --journal: 'Instrument Serif', Georgia, serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; }

body {
  background: var(--abyss);
  color: var(--foam);
  font-family: var(--body);
  cursor: grab;
  font-weight: 420;
}

body.dragging { cursor: grabbing; }

.svg-defs { position: fixed; }

.fixed-haze {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    radial-gradient(circle at 20% 12%, rgba(255,155,122,.18), transparent 26%),
    radial-gradient(circle at 78% 18%, rgba(185,199,255,.14), transparent 30%),
    linear-gradient(90deg, rgba(242,247,239,.08), transparent 18%, transparent 78%, rgba(6,42,58,.35));
  mix-blend-mode: screen;
}

.tide-voyage {
  display: flex;
  width: 400vw;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior: none;
}

.tide-voyage::-webkit-scrollbar { display: none; }

.tide-scene {
  position: relative;
  flex: 0 0 100vw;
  height: 100vh;
  overflow: hidden;
  scroll-snap-align: start;
  isolation: isolate;
}

.tide-scene::before,
.tide-scene::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 3;
}

.tide-scene::before {
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(242,247,239,.34) 1px, transparent 2px),
    radial-gradient(circle, rgba(86,199,197,.2) 1px, transparent 1.7px);
  background-size: 97px 83px, 61px 71px;
  animation: saltDrift 22s linear infinite;
  opacity: .34;
}

.tide-scene::after {
  right: -7vw;
  top: -8vh;
  width: 18vw;
  height: 116vh;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(242,247,239,.72), transparent 22%),
    radial-gradient(ellipse at 70% 42%, rgba(242,247,239,.5), transparent 24%),
    radial-gradient(ellipse at 35% 68%, rgba(242,247,239,.58), transparent 25%);
  filter: blur(10px);
  opacity: .58;
  border-radius: 48% 52% 44% 56%;
}

.dawn-scene { background: linear-gradient(125deg, #062A3A 4%, #0B5D68 48%, #56C7C5 100%); }
.shallows-scene { background: linear-gradient(135deg, #56C7C5 0%, #F2F7EF 48%, #0B5D68 100%); color: var(--abyss); }
.current-scene { background: linear-gradient(130deg, #062A3A 0%, #123F35 58%, #0B5D68 100%); }
.night-scene { background: radial-gradient(circle at 70% 25%, rgba(185,199,255,.48), transparent 18%), linear-gradient(120deg, #062A3A 0%, #0B5D68 45%, #123F35 100%); }

.dawn-scene::after,
.shallows-scene::after,
.current-scene::after {
  clip-path: polygon(14% 0, 100% 0, 86% 9%, 100% 19%, 79% 31%, 100% 42%, 83% 55%, 100% 66%, 76% 81%, 100% 100%, 10% 100%, 0 84%, 18% 72%, 0 58%, 16% 45%, 0 30%, 20% 17%, 0 4%);
}

.caustic-layer {
  position: absolute;
  inset: -20%;
  z-index: 1;
  background:
    repeating-radial-gradient(ellipse at 30% 40%, rgba(242,247,239,.22) 0 1px, transparent 2px 26px),
    repeating-linear-gradient(115deg, transparent 0 34px, rgba(242,247,239,.09) 35px 37px, transparent 38px 82px);
  filter: blur(1px);
  opacity: .52;
  animation: causticSwim 18s ease-in-out infinite alternate;
}

.caustic-layer.bright { opacity: .76; mix-blend-mode: soft-light; }
.caustic-layer.deep { opacity: .34; }
.caustic-layer.night { opacity: .26; background-color: rgba(185,199,255,.08); }

.current-ribbon {
  position: absolute;
  z-index: 4;
  width: min(760px, 72vw);
  padding: clamp(28px, 5vw, 76px);
  border: 1px solid rgba(242,247,239,.32);
  border-radius: 64% 36% 58% 42% / 38% 58% 42% 62%;
  background: linear-gradient(145deg, rgba(242,247,239,.17), rgba(86,199,197,.12));
  box-shadow: inset 0 0 60px rgba(242,247,239,.12), 0 30px 90px rgba(6,42,58,.26);
  backdrop-filter: blur(12px);
  animation: bob 7s ease-in-out infinite;
}

.ribbon-large { left: 10vw; top: 16vh; }
.pale-pool { left: 12vw; top: 18vh; background: rgba(242,247,239,.62); color: var(--abyss); border-color: rgba(6,42,58,.16); }
.dark-ribbon { left: 28vw; top: 20vh; background: linear-gradient(130deg, rgba(6,42,58,.58), rgba(18,63,53,.5)); }
.moon-ribbon { left: 16vw; top: 18vh; background: linear-gradient(140deg, rgba(185,199,255,.18), rgba(6,42,58,.48)); }

.scene-kicker {
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: 12px;
  color: var(--coral);
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  line-height: .9;
  font-weight: 800;
  letter-spacing: -.06em;
  filter: url(#water-warp);
  font-variation-settings: 'SOFT' 80, 'WONK' 1;
}

.wordmark { font-size: clamp(76px, 14vw, 210px); }
h2 { font-size: clamp(58px, 9vw, 138px); max-width: 780px; }

p {
  font-size: clamp(17px, 1.8vw, 25px);
  line-height: 1.55;
  max-width: 620px;
}

.tide-fragment { font-family: var(--journal); font-size: clamp(24px, 3vw, 42px); }

.tide-quote {
  position: absolute;
  right: 10vw;
  bottom: 13vh;
  z-index: 4;
  max-width: 440px;
  margin: 0;
  font-family: var(--journal);
  font-size: clamp(32px, 4vw, 64px);
  line-height: 1.03;
  color: var(--abyss);
  animation: blurClear 6s ease-in-out infinite alternate;
}

.bubble-note {
  position: absolute;
  z-index: 5;
  width: 124px;
  height: 124px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  border: 1px solid rgba(242,247,239,.45);
  background: radial-gradient(circle at 35% 25%, rgba(242,247,239,.82), rgba(86,199,197,.18) 42%, rgba(6,42,58,.08) 72%);
  color: var(--abyss);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: inset -16px -20px 32px rgba(6,42,58,.18), 0 20px 48px rgba(6,42,58,.2);
  animation: bubbleRise 8s ease-in-out infinite;
}

.dawn-bubble { right: 18vw; top: 18vh; }
.coord-bubble { left: 47vw; bottom: 13vh; animation-delay: -2s; }
.bottle-bubble { right: 14vw; top: 18vh; animation-delay: -3s; }
.night-bubble { right: 18vw; bottom: 15vh; animation-delay: -4s; color: var(--foam); background: radial-gradient(circle at 35% 25%, rgba(185,199,255,.58), rgba(86,199,197,.16), rgba(6,42,58,.2)); }

.shell-pocket, .moonpool-button {
  position: absolute;
  z-index: 6;
  right: 12vw;
  bottom: 15vh;
  padding: 18px 30px;
  border-radius: 999px 999px 999px 24px;
  border: 1px solid rgba(242,247,239,.48);
  background: rgba(242,247,239,.18);
  color: var(--foam);
  font-family: var(--body);
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.moonpool-button { cursor: pointer; background: rgba(185,199,255,.14); }
.moonpool-button.open { box-shadow: 0 0 80px rgba(185,199,255,.85), inset 0 0 28px rgba(242,247,239,.22); }
.moon-glow.open { transform: scale(1.18); filter: blur(0); box-shadow: 0 0 120px rgba(185,199,255,.82); }

.wave-glyph {
  position: absolute;
  z-index: 4;
  fill: none;
  stroke: rgba(242,247,239,.7);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 700;
  animation: drawWave 9s ease-in-out infinite alternate;
}

.wave-one { right: 6vw; bottom: 28vh; width: 34vw; }
.wave-two { left: 6vw; bottom: 13vh; width: 40vw; stroke: rgba(86,199,197,.74); }

.foam-mask {
  position: absolute;
  z-index: 2;
  background: radial-gradient(ellipse, rgba(242,247,239,.55), transparent 65%);
  filter: blur(16px);
  animation: foamPulse 9s ease-in-out infinite alternate;
}
.foam-left { left: -10vw; top: 4vh; width: 44vw; height: 40vh; }
.foam-bridge { left: -4vw; bottom: -8vh; width: 62vw; height: 34vh; }

.fish-school { position: absolute; inset: 0; z-index: 3; }
.fish-school span {
  position: absolute;
  width: 28px;
  height: 8px;
  border-radius: 50% 10% 50% 10%;
  background: rgba(242,247,239,.78);
  box-shadow: 14px 0 0 -4px rgba(6,42,58,.2);
  animation: fishDrift 13s linear infinite;
}
.fish-school span:nth-child(1) { top: 24%; left: 64%; }
.fish-school span:nth-child(2) { top: 30%; left: 70%; animation-delay: -2s; }
.fish-school span:nth-child(3) { top: 36%; left: 60%; animation-delay: -4s; }
.fish-school span:nth-child(4) { top: 46%; left: 78%; animation-delay: -6s; }
.fish-school span:nth-child(5) { top: 53%; left: 68%; animation-delay: -8s; }
.fish-school span:nth-child(6) { top: 62%; left: 84%; animation-delay: -10s; }

.scallop-arcs { position: absolute; left: 8vw; bottom: 8vh; z-index: 4; display: flex; gap: 16px; }
.scallop-arcs span { width: 72px; height: 36px; border: 2px solid rgba(6,42,58,.28); border-bottom: 0; border-radius: 72px 72px 0 0; }

.tide-rings {
  position: absolute;
  right: 23vw;
  bottom: 12vh;
  z-index: 2;
  width: 310px;
  height: 310px;
  border-radius: 50%;
}

.tide-rings span {
  position: absolute;
  inset: 50%;
  border: 1px solid rgba(242,247,239,.34);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ringRipple 8s ease-out infinite;
}

.tide-rings span:nth-child(2) { animation-delay: -2.6s; border-color: rgba(86,199,197,.38); }
.tide-rings span:nth-child(3) { animation-delay: -5.2s; border-color: rgba(255,155,122,.3); }

.salt-crystals span {
  position: absolute;
  z-index: 4;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, rgba(242,247,239,.9), rgba(185,199,255,.28));
  clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%);
  animation: crystalTwinkle 5s ease-in-out infinite;
}

.salt-crystals span:nth-child(1) { right: 24vw; top: 20vh; }
.salt-crystals span:nth-child(2) { right: 17vw; top: 38vh; animation-delay: -1s; transform: scale(.7); }
.salt-crystals span:nth-child(3) { left: 36vw; top: 14vh; animation-delay: -2s; transform: scale(.5); }
.salt-crystals span:nth-child(4) { right: 34vw; bottom: 28vh; animation-delay: -3s; }
.salt-crystals span:nth-child(5) { left: 72vw; bottom: 18vh; animation-delay: -4s; transform: scale(.65); }

.kelp-field i {
  position: absolute;
  bottom: -8vh;
  z-index: 2;
  width: 34px;
  height: 74vh;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(90deg, transparent, rgba(86,199,197,.28), rgba(18,63,53,.72));
  transform-origin: bottom center;
  animation: kelpSway 6s ease-in-out infinite alternate;
}
.kelp-field i:nth-child(1) { left: 8vw; height: 62vh; }
.kelp-field i:nth-child(2) { left: 16vw; height: 78vh; animation-delay: -1s; }
.kelp-field i:nth-child(3) { right: 30vw; height: 70vh; animation-delay: -2s; }
.kelp-field i:nth-child(4) { right: 14vw; height: 83vh; animation-delay: -3s; }
.kelp-field i:nth-child(5) { right: 7vw; height: 58vh; animation-delay: -4s; }

.tide-log {
  position: absolute;
  left: 9vw;
  top: 17vh;
  z-index: 4;
  max-width: 300px;
  font-family: var(--journal);
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.04;
  color: rgba(242,247,239,.74);
  transform: rotate(-7deg);
  animation: logFloat 9s ease-in-out infinite alternate;
}

.moon-glow {
  position: absolute;
  right: 13vw;
  top: 10vh;
  z-index: 2;
  width: 25vw;
  height: 25vw;
  border-radius: 50%;
  background: radial-gradient(circle, #F2F7EF 0 18%, #B9C7FF 19% 28%, rgba(185,199,255,.32) 29% 56%, transparent 70%);
  filter: blur(2px);
  animation: moonBreathe 8s ease-in-out infinite alternate;
  transition: transform .8s ease, filter .8s ease, box-shadow .8s ease;
}

.moon-path {
  position: absolute;
  left: 47vw;
  bottom: 0;
  z-index: 2;
  width: 34vw;
  height: 72vh;
  transform: skewX(-14deg);
  opacity: .72;
}

.moon-path span {
  position: absolute;
  left: 50%;
  width: 70%;
  height: 8vh;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(242,247,239,.42), rgba(185,199,255,.18) 48%, transparent 72%);
  transform: translateX(-50%);
  animation: moonPathDrift 6s ease-in-out infinite alternate;
}

.moon-path span:nth-child(1) { bottom: 8vh; width: 92%; }
.moon-path span:nth-child(2) { bottom: 20vh; width: 74%; animation-delay: -1s; }
.moon-path span:nth-child(3) { bottom: 32vh; width: 58%; animation-delay: -2s; }
.moon-path span:nth-child(4) { bottom: 44vh; width: 44%; animation-delay: -3s; }
.moon-path span:nth-child(5) { bottom: 56vh; width: 32%; animation-delay: -4s; }

.jelly-cloud span {
  position: absolute;
  z-index: 3;
  width: 90px;
  height: 70px;
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 50% 20%, rgba(242,247,239,.5), rgba(185,199,255,.18) 62%, transparent 70%);
  border-bottom: 1px solid rgba(242,247,239,.28);
  animation: jellyPulse 5s ease-in-out infinite;
}
.jelly-cloud span:nth-child(1) { left: 56vw; top: 50vh; }
.jelly-cloud span:nth-child(2) { left: 68vw; top: 62vh; transform: scale(.75); animation-delay: -1s; }
.jelly-cloud span:nth-child(3) { left: 78vw; top: 43vh; transform: scale(.6); animation-delay: -2s; }
.jelly-cloud span:nth-child(4) { left: 48vw; top: 70vh; transform: scale(.5); animation-delay: -3s; }

.tide-dial {
  position: fixed;
  right: 28px;
  top: 26px;
  z-index: 20;
}

.dial-ring {
  position: relative;
  width: 132px;
  height: 132px;
  border: 1px solid rgba(242,247,239,.42);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6,42,58,.32), rgba(242,247,239,.08));
  backdrop-filter: blur(13px);
  animation: dialTurn 36s linear infinite;
}

.dial-ring::before {
  content: '';
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px dashed rgba(86,199,197,.55);
}

.orbit { position: absolute; width: 11px; height: 11px; border-radius: 50%; left: 58px; top: -6px; transform-origin: 8px 72px; }
.sun-dot { background: var(--coral); box-shadow: 0 0 18px var(--coral); }
.moon-dot { background: var(--lavender); box-shadow: 0 0 18px var(--lavender); transform: rotate(180deg); }

.dial-glyph {
  position: absolute;
  width: 46px;
  height: 22px;
  border: 0;
  background: transparent;
  color: rgba(242,247,239,.64);
  font: 10px var(--body);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.dial-glyph:nth-of-type(1) { left: 43px; top: 8px; }
.dial-glyph:nth-of-type(2) { right: -8px; top: 55px; }
.dial-glyph:nth-of-type(3) { left: 43px; bottom: 8px; }
.dial-glyph:nth-of-type(4) { left: -8px; top: 55px; }
.dial-glyph.active { color: var(--foam); text-shadow: 0 0 14px var(--glass); }

.drag-hint {
  position: fixed;
  left: 28px;
  bottom: 24px;
  z-index: 20;
  color: rgba(242,247,239,.74);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .2em;
  transition: opacity .6s ease, transform .6s ease;
}

@keyframes causticSwim { to { transform: translate3d(6%, -4%, 0) rotate(2deg) scale(1.04); } }
@keyframes saltDrift { to { background-position: 220px -160px, -140px 190px; } }
@keyframes bob { 50% { transform: translateY(-18px) rotate(-1deg); border-radius: 45% 55% 39% 61% / 55% 37% 63% 45%; } }
@keyframes bubbleRise { 50% { transform: translate3d(12px, -24px, 0) scale(1.04); } }
@keyframes drawWave { from { stroke-dashoffset: 700; } to { stroke-dashoffset: 0; } }
@keyframes foamPulse { to { transform: scale(1.12) translateX(24px); opacity: .8; } }
@keyframes fishDrift { to { transform: translateX(-58vw) translateY(10vh); } }
@keyframes kelpSway { to { transform: skewX(8deg) translateX(10px); } }
@keyframes moonBreathe { to { transform: scale(1.06); filter: blur(5px); } }
@keyframes jellyPulse { 50% { transform: translateY(-18px) scale(1.08); opacity: .7; } }
@keyframes dialTurn { to { transform: rotate(360deg); } }
@keyframes blurClear { from { filter: blur(7px); opacity: .62; } to { filter: blur(0); opacity: 1; } }
@keyframes ringRipple { from { width: 20px; height: 20px; opacity: .9; } to { width: 310px; height: 310px; opacity: 0; } }
@keyframes crystalTwinkle { 50% { opacity: .28; transform: rotate(45deg) scale(1.2); } }
@keyframes logFloat { to { transform: translateY(22px) rotate(-4deg); } }
@keyframes moonPathDrift { to { transform: translateX(-50%) translateY(-12px) scaleX(.88); opacity: .5; } }

@media (max-width: 760px) {
  .current-ribbon { width: 86vw; left: 7vw; top: 18vh; padding: 28px; }
  .dark-ribbon, .moon-ribbon, .pale-pool { left: 7vw; }
  .tide-dial { transform: scale(.82); transform-origin: top right; }
  .wordmark { font-size: 70px; }
  h2 { font-size: 56px; }
  .tide-quote { left: 10vw; right: 10vw; bottom: 10vh; }
  .wave-glyph { width: 70vw; }
}