:root {
  --graphite-kelp: #241E18;
  --sepia-foam: #E7D0A6;
  --tea-tide: #A9784B;
  --seafoam-patina: #73C7B8;
  --oxidized-aqua: #2F8D91;
  --shell-blush: #F2B9A1;
  --ink-carbon: #10100E;
  --depth-near: 70px;
  --depth-mid: 34px;
  --depth-far: -28px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink-carbon);
  background:
    radial-gradient(circle at 30% 20%, rgba(115,199,184,.28), transparent 36%),
    radial-gradient(circle at 82% 14%, rgba(242,185,161,.24), transparent 28%),
    linear-gradient(180deg, #E7D0A6 0%, #d8bd90 42%, #6b5a45 72%, #241E18 100%);
  font-family: "Alegreya Sans", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: .2;
  background-image:
    linear-gradient(rgba(36,30,24,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,30,24,.12) 1px, transparent 1px);
  background-size: 38px 38px;
  mix-blend-mode: multiply;
}

.aquarium {
  position: relative;
  min-height: 100vh;
  perspective: 1000px;
  isolation: isolate;
}

.depth {
  position: fixed;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
}

.depth-far { z-index: 0; transform: translateZ(var(--depth-far)); }
.depth-near { z-index: 8; transform: translateZ(var(--depth-near)); }
main { position: relative; z-index: 2; }

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(28px, 6vw, 90px);
  overflow: hidden;
}

.dawn {
  background:
    radial-gradient(circle at 20% 20%, rgba(115,199,184,.42), transparent 35%),
    radial-gradient(circle at 75% 12%, rgba(242,185,161,.36), transparent 25%),
    linear-gradient(180deg, rgba(231,208,166,.94), rgba(231,208,166,.55) 58%, rgba(47,141,145,.28));
}

.title-wrap {
  width: min(1120px, 96vw);
  transform: rotate(-2deg);
  filter: drop-shadow(0 28px 55px rgba(36,30,24,.2));
}

.kicker, .depth-label, .chip {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.kicker {
  margin: 0 0 -1.5vw 1vw;
  color: var(--oxidized-aqua);
  font-size: clamp(13px, 1.3vw, 19px);
}

h1, h2 {
  font-family: "Fraunces", serif;
  font-variation-settings: "SOFT" 70, "WONK" 1;
  margin: 0;
  line-height: .86;
}

h1 {
  font-size: clamp(82px, 18vw, 270px);
  letter-spacing: .025em;
  color: var(--graphite-kelp);
  text-shadow: 12px 18px 0 rgba(169,120,75,.18), -5px -4px 0 rgba(115,199,184,.22);
}

.opening-note {
  width: min(560px, 84vw);
  margin: -1vw 0 0 auto;
  padding: 20px 24px;
  border: 1px solid rgba(47,141,145,.34);
  border-radius: 28px 12px 34px 18px;
  background: rgba(231,208,166,.48);
  backdrop-filter: blur(9px);
  color: var(--graphite-kelp);
  font-size: clamp(20px, 2.2vw, 30px);
}

.depth-label {
  position: absolute;
  z-index: 4;
  color: rgba(36,30,24,.62);
  font-size: 12px;
  padding: 9px 13px;
  border: 1px solid rgba(36,30,24,.18);
  border-radius: 999px;
  background: rgba(231,208,166,.28);
  backdrop-filter: blur(10px);
}

.label-dawn { top: 28px; left: 32px; }
.label-tide { top: 9%; right: 12%; }
.label-archive { top: 7%; left: 10%; color: rgba(231,208,166,.76); }
.label-night { top: 11%; right: 10%; color: rgba(231,208,166,.62); border-color: rgba(231,208,166,.18); }

.bubble-lens {
  position: absolute;
  z-index: 5;
  border-radius: 48% 52% 55% 45% / 52% 45% 55% 48%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.78), transparent 10%),
    radial-gradient(circle at 64% 72%, rgba(242,185,161,.18), transparent 19%),
    radial-gradient(circle at 50% 50%, rgba(115,199,184,.16), rgba(115,199,184,.03) 62%, rgba(255,255,255,.28));
  border: 2px solid rgba(115,199,184,.55);
  box-shadow: inset -18px -20px 45px rgba(47,141,145,.17), inset 18px 20px 40px rgba(255,255,255,.2), 0 25px 70px rgba(47,141,145,.2);
  backdrop-filter: blur(5px) saturate(1.18);
  animation: bubbleRise 13s ease-in-out infinite, elasticBlob 7s ease-in-out infinite;
  transition: transform .8s cubic-bezier(.18,1.6,.32,1), border-radius .8s cubic-bezier(.18,1.6,.32,1);
}

.bubble-lens:hover, .bubble-lens.is-wobbling {
  transform: scale(1.08, .93) rotate(5deg);
  border-radius: 56% 44% 49% 51% / 40% 58% 42% 60%;
}

.bubble-lens span, .bubble-lens i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--graphite-kelp);
  opacity: .34;
  box-shadow: 18px 14px 0 rgba(36,30,24,.28), 34px -8px 0 rgba(36,30,24,.18), 55px 18px 0 rgba(36,30,24,.2);
}
.bubble-lens span { left: 30%; top: 45%; }
.bubble-lens i:first-of-type { left: 52%; top: 36%; }
.bubble-lens i:last-of-type { left: 64%; top: 61%; }

.lens-giant { width: clamp(240px, 32vw, 520px); height: clamp(240px, 32vw, 520px); right: 7vw; top: 18vh; }
.lens-pearl { width: clamp(130px, 16vw, 260px); height: clamp(130px, 16vw, 260px); left: 8vw; bottom: 10vh; animation-delay: -4s; }
.lens-small { width: 112px; height: 112px; left: 24vw; top: 17vh; animation-delay: -7s; }

.sepia-shadow {
  position: absolute;
  width: 60vw;
  height: 16vh;
  border-radius: 50%;
  background: repeating-linear-gradient(90deg, rgba(169,120,75,.18) 0 28px, transparent 28px 55px);
  filter: blur(8px);
  opacity: .65;
  animation: waveDrift 12s ease-in-out infinite;
}
.shadow-one { top: 22vh; left: -10vw; transform: rotate(-6deg); }
.shadow-two { bottom: 18vh; right: -12vw; transform: rotate(7deg); animation-delay: -6s; }

.waterline {
  position: absolute;
  left: -5vw;
  width: 110vw;
  height: 64px;
  background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 18px, rgba(115,199,184,.25) 19px 21px, transparent 22px 44px);
  opacity: .8;
  animation: waveDrift 9s ease-in-out infinite;
}
.waterline-top { top: 9vh; }
.waterline-mid { bottom: 13vh; opacity: .35; }

.tidebook {
  min-height: 128vh;
  background:
    radial-gradient(circle at 84% 22%, rgba(242,185,161,.24), transparent 30%),
    linear-gradient(180deg, rgba(47,141,145,.28), rgba(231,208,166,.48) 40%, rgba(169,120,75,.22));
}

.fragment, .specimen, .night-pool {
  position: absolute;
  border: 1px solid rgba(47,141,145,.34);
  background:
    radial-gradient(circle at 30% 20%, rgba(115,199,184,.28), transparent 36%),
    rgba(231,208,166,.68);
  backdrop-filter: blur(14px);
  box-shadow: 0 28px 70px rgba(36,30,24,.18), inset 0 0 0 1px rgba(255,255,255,.18);
  opacity: 0;
  filter: blur(10px);
  transform: translateY(54px) rotate(var(--rot, 0deg));
  transition: opacity 1s ease, filter 1s ease, transform 1.1s cubic-bezier(.18,1,.32,1);
}

.fragment.is-visible, .specimen.is-visible, .night-pool.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) rotate(var(--rot, 0deg));
}

.fragment {
  width: min(520px, 82vw);
  padding: clamp(24px, 4vw, 48px);
  border-radius: 38px 18px 44px 20px;
}
.fragment h2 { font-size: clamp(36px, 5vw, 72px); color: var(--graphite-kelp); }
.fragment p, .specimen p, .night-pool p { font-size: clamp(19px, 1.7vw, 25px); line-height: 1.28; }
.fragment-breath { top: 15%; left: 7%; --rot: -4deg; }
.fragment-ink { top: 39%; right: 7%; --rot: 3deg; background-color: rgba(242,185,161,.38); }
.fragment-shell { bottom: 12%; left: 20%; --rot: -2deg; }

.chip {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(169,120,75,.18);
  color: var(--tea-tide);
  font-size: 11px;
}
.chip.blush { background: rgba(242,185,161,.35); color: var(--graphite-kelp); }
.chip.aqua { background: rgba(115,199,184,.24); color: var(--oxidized-aqua); }

.glass-plate {
  position: absolute;
  border: 1px solid rgba(115,199,184,.25);
  background: rgba(115,199,184,.08);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 48px rgba(115,199,184,.12);
}
.plate-one { width: 44vw; height: 42vh; left: 4vw; bottom: 15vh; border-radius: 50px 20px 70px 28px; transform: rotate(7deg); }
.plate-two { width: 36vw; height: 52vh; right: 5vw; top: 13vh; border-radius: 24px 70px 30px 58px; transform: rotate(-5deg); }

.archive {
  min-height: 120vh;
  background:
    radial-gradient(circle at 15% 25%, rgba(115,199,184,.18), transparent 28%),
    linear-gradient(180deg, rgba(169,120,75,.36), rgba(36,30,24,.72));
}

.archive-stack { position: relative; width: min(1100px, 94vw); height: 820px; }
.specimen { padding: 28px; border-radius: 32px; color: var(--sepia-foam); }
.specimen h2 { font-size: clamp(34px, 4.2vw, 64px); color: var(--sepia-foam); }
.specimen-cycle { width: 520px; min-height: 360px; left: 5%; top: 8%; --rot: -3deg; background-color: rgba(36,30,24,.48); }
.specimen-wave { width: 420px; min-height: 360px; right: 8%; top: 22%; --rot: 4deg; background-color: rgba(47,141,145,.32); }
.specimen-relic { width: 430px; min-height: 330px; left: 32%; bottom: 4%; --rot: -6deg; background-color: rgba(16,16,14,.5); }

.cycle-drawing { width: 100%; height: 210px; }
.cycle-drawing path, .cycle-drawing circle { fill: none; stroke: var(--seafoam-patina); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.cycle-drawing circle { fill: rgba(115,199,184,.12); }

.retro-waves {
  height: 120px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 20px 20px, rgba(242,185,161,.45) 0 8px, transparent 9px) 0 0 / 48px 48px,
    repeating-linear-gradient(135deg, rgba(231,208,166,.65) 0 12px, rgba(47,141,145,.35) 12px 24px, rgba(36,30,24,.2) 24px 36px);
  animation: patternSlide 10s linear infinite;
}

.shell-spiral {
  display: block;
  width: 150px;
  height: 150px;
  margin: 4px auto 16px;
  border-radius: 50%;
  background: conic-gradient(from 10deg, var(--shell-blush), var(--tea-tide), var(--sepia-foam), var(--shell-blush));
  mask: radial-gradient(circle at 50% 50%, transparent 0 13px, #000 14px 22px, transparent 23px 32px, #000 33px 46px, transparent 47px 58px, #000 59px 74px);
}

.night {
  background:
    radial-gradient(circle at 50% 20%, rgba(47,141,145,.16), transparent 34%),
    linear-gradient(180deg, rgba(36,30,24,.84), #10100E 82%);
  color: var(--sepia-foam);
}

.night-pool {
  position: relative;
  width: min(850px, 90vw);
  padding: clamp(32px, 6vw, 78px);
  border-radius: 60px 22px 70px 30px;
  background:
    radial-gradient(circle at 28% 20%, rgba(115,199,184,.18), transparent 38%),
    rgba(16,16,14,.58);
  border-color: rgba(231,208,166,.2);
  color: var(--sepia-foam);
}
.night-pool h2 { font-size: clamp(46px, 7vw, 105px); color: var(--sepia-foam); }

.night-bubble { z-index: 1; opacity: .58; animation-duration: 16s; }
.bubble-a { width: 155px; height: 155px; left: 12%; bottom: -8%; }
.bubble-b { width: 96px; height: 96px; right: 20%; bottom: 10%; animation-delay: -6s; }
.bubble-c { width: 230px; height: 230px; right: 6%; top: 16%; animation-delay: -10s; }

.halftone, .checker, .carbon-ring, .wave-map { position: absolute; opacity: .32; }
.halftone { border-radius: 50%; background: radial-gradient(circle, rgba(36,30,24,.32) 0 2px, transparent 3px) 0 0 / 18px 18px; }
.sand-a { width: 330px; height: 330px; left: 4vw; top: 24vh; }
.sand-b { width: 260px; height: 260px; right: 10vw; bottom: 18vh; }
.checker { background: conic-gradient(rgba(169,120,75,.36) 25%, transparent 0 50%, rgba(169,120,75,.36) 0 75%, transparent 0) 0 0 / 42px 42px; }
.checker-one { width: 280px; height: 180px; right: 8vw; top: 11vh; transform: rotate(12deg); }
.checker-two { width: 340px; height: 170px; left: 15vw; bottom: 8vh; transform: rotate(-8deg); }
.carbon-ring { fill: none; stroke: var(--tea-tide); stroke-width: 5; animation: orbit 28s linear infinite; }
.carbon-ring circle { fill: var(--tea-tide); stroke: none; }
.ring-a { width: 230px; right: 19vw; top: 42vh; }
.ring-b { width: 170px; left: 9vw; top: 58vh; animation-duration: 22s; animation-direction: reverse; }
.wave-map { width: 70vw; left: 15vw; top: 8vh; fill: none; stroke: var(--oxidized-aqua); stroke-width: 6; stroke-linecap: round; animation: waveDrift 14s ease-in-out infinite; }

.micro-bubble {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(115,199,184,.48);
  background: rgba(255,255,255,.08);
  box-shadow: inset 5px 6px 14px rgba(255,255,255,.18);
  animation: microRise 11s ease-in-out infinite;
}
.mb-1 { width: 24px; height: 24px; left: 8%; bottom: 12%; }
.mb-2 { width: 42px; height: 42px; left: 28%; bottom: 2%; animation-delay: -2s; }
.mb-3 { width: 18px; height: 18px; left: 55%; bottom: 9%; animation-delay: -4s; }
.mb-4 { width: 36px; height: 36px; left: 76%; bottom: 4%; animation-delay: -7s; }
.mb-5 { width: 58px; height: 58px; right: 6%; bottom: 18%; animation-delay: -3s; }
.mb-6 { width: 20px; height: 20px; left: 44%; bottom: 20%; animation-delay: -9s; }

@keyframes bubbleRise { 0%,100% { translate: 0 0; } 50% { translate: 0 -28px; } }
@keyframes elasticBlob { 0%,100% { border-radius: 48% 52% 55% 45% / 52% 45% 55% 48%; } 50% { border-radius: 56% 44% 48% 52% / 45% 55% 45% 55%; } }
@keyframes waveDrift { 0%,100% { translate: -2vw 0; } 50% { translate: 3vw 12px; } }
@keyframes patternSlide { to { background-position: 48px 48px, 72px 0; } }
@keyframes orbit { to { rotate: 360deg; } }
@keyframes microRise { 0% { transform: translateY(10vh) scale(.75); opacity: 0; } 20%, 70% { opacity: .75; } 100% { transform: translateY(-105vh) scale(1.18); opacity: 0; } }

@media (max-width: 760px) {
  .scene { padding: 28px 18px; }
  .fragment, .specimen { position: relative; inset: auto; width: 100%; margin: 28px 0; }
  .tidebook, .archive { display: block; padding-top: 96px; min-height: auto; }
  .archive-stack { height: auto; width: 100%; }
  .glass-plate, .checker-two { display: none; }
  .opening-note { margin-top: 18px; }
  .lens-giant { right: -24vw; top: 30vh; }
}