:root {
  /* Typography reference: Roboto Slab* Slab** and IBM Plex Sans* Sans** */
  --abyss-navy: #031826;
  --pelagic-blue: #063A52;
  --reef-teal: #0B7A88;
  --biolume-aqua: #4EE7D8;
  --parrotfish-coral: #FF6B5E;
  --moorish-gold: #C9A45C;
  --moonfoam: #E7F6F2;
  --ink-grain: #00070B;
  --display: "Roboto Slab", Georgia, serif;
  --sans: "IBM Plex Sans", Inter, system-ui, sans-serif;
  --accent: "Fraunces", Georgia, serif;
  --scroll-depth: 0px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--ink-grain);
  color: var(--moonfoam);
  font-family: var(--sans);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 12%, rgba(78, 231, 216, 0.12), transparent 28rem),
    radial-gradient(circle at 8% 35%, rgba(11, 122, 136, 0.22), transparent 32rem),
    linear-gradient(180deg, var(--ink-grain) 0%, var(--abyss-navy) 31%, #02101a 66%, var(--ink-grain) 100%);
}

.grain-field,
.caustic-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.grain-field {
  opacity: 0.28;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(231, 246, 242, 0.8) 0 1px, transparent 1.8px),
    radial-gradient(circle at 70% 60%, rgba(78, 231, 216, 0.7) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 45% 75%, rgba(201, 164, 92, 0.55) 0 0.7px, transparent 1.5px);
  background-size: 43px 47px, 61px 59px, 97px 89px;
  transform: translate3d(0, calc(var(--scroll-depth) * -0.018), 0);
}

.caustic-field {
  z-index: 2;
  opacity: 0.42;
  background:
    repeating-linear-gradient(108deg, transparent 0 64px, rgba(78, 231, 216, 0.045) 65px 67px, transparent 68px 132px),
    linear-gradient(90deg, transparent 15%, rgba(6, 58, 82, 0.2), transparent 70%);
  filter: blur(0.4px);
  transform: translate3d(calc(var(--mouse-x, 0px) * -0.01), calc(var(--scroll-depth) * -0.026), 0);
}

.depth-nav {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 30;
  display: grid;
  gap: 0.75rem;
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  color: rgba(231, 246, 242, 0.58);
  text-align: right;
}

.depth-nav span {
  padding-right: 0.8rem;
  border-right: 1px solid rgba(201, 164, 92, 0.52);
}

.scene {
  position: relative;
  min-height: 100vh;
  padding: clamp(2rem, 5vw, 5.5rem);
  isolation: isolate;
  overflow: hidden;
  perspective: 1200px;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(circle at 50% 110%, rgba(11, 122, 136, 0.16), transparent 42rem);
}

.light-shaft {
  position: absolute;
  top: -20vh;
  width: 24vw;
  height: 145vh;
  opacity: 0.34;
  background: linear-gradient(180deg, rgba(78, 231, 216, 0.16), transparent 78%);
  filter: blur(16px);
  transform: rotate(11deg);
}

.shaft-one { left: 12vw; }
.shaft-two { left: 56vw; opacity: 0.22; }

.reef-module {
  position: absolute;
  border: 1px solid rgba(78, 231, 216, 0.18);
  background:
    linear-gradient(135deg, rgba(231, 246, 242, 0.075), transparent 36%),
    linear-gradient(180deg, rgba(6, 58, 82, 0.72), rgba(3, 24, 38, 0.54));
  box-shadow:
    0 2rem 5rem rgba(0, 7, 11, 0.58),
    inset 0 0 0 1px rgba(231, 246, 242, 0.045),
    inset 0 -1rem 4rem rgba(0, 7, 11, 0.25);
  backdrop-filter: blur(5px);
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(0.19, 1, 0.22, 1), border-color 600ms ease, box-shadow 600ms ease;
}

.reef-module::after {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1px solid rgba(201, 164, 92, 0.35);
  background: linear-gradient(90deg, rgba(255, 107, 94, 0), rgba(255, 107, 94, 0.16), rgba(255, 107, 94, 0));
  opacity: 0;
  transition: opacity 500ms ease;
}

.reef-module:hover {
  border-color: rgba(78, 231, 216, 0.48);
  box-shadow: 0 2.7rem 6rem rgba(0, 7, 11, 0.7), 0 0 2rem rgba(78, 231, 216, 0.12);
}

.reef-module:hover::after { opacity: 1; }

.plaque,
.eyebrow {
  font-family: var(--sans);
  font-size: clamp(0.62rem, 0.78vw, 0.82rem);
  letter-spacing: 0.24em;
  color: var(--moorish-gold);
  text-transform: uppercase;
}

.plaque {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.hero-pane {
  height: clamp(18rem, 35vw, 34rem);
  top: 17vh;
}

.pane-left {
  left: -6vw;
  width: 58vw;
  transform: perspective(1000px) rotateX(6deg) rotateY(-11deg) rotateZ(-2deg);
}

.pane-right {
  right: -4vw;
  width: 52vw;
  transform: perspective(1000px) rotateX(-3deg) rotateY(10deg) rotateZ(3deg);
}

.hero-title {
  position: absolute;
  z-index: 5;
  left: clamp(1.5rem, 6vw, 7rem);
  top: 24vh;
  font-family: var(--display);
  font-size: clamp(4.4rem, 15vw, 16rem);
  font-weight: 900;
  letter-spacing: -0.075em;
  line-height: 0.82;
  color: var(--moonfoam);
  text-shadow: 0 1.2rem 2.7rem rgba(0, 7, 11, 0.86), 0 0 2rem rgba(78, 231, 216, 0.12);
  transform: translate3d(0, calc(var(--scroll-depth) * 0.022), 0);
}

.title-fragment {
  display: inline-block;
  clip-path: inset(-12% 0 6% 0);
}

.day {
  color: rgba(231, 246, 242, 0.82);
}

.pearl-dot {
  display: inline-block;
  color: var(--biolume-aqua);
  text-shadow: 0 0 1rem var(--biolume-aqua), 0 0 3rem rgba(78, 231, 216, 0.55);
  transform-origin: center;
}

.pearl-dot.pulse {
  animation: pearlPulse 1100ms ease-out;
}

.scene-copy {
  position: absolute;
  z-index: 6;
  max-width: 26rem;
  color: rgba(231, 246, 242, 0.76);
}

.arrival-copy {
  right: clamp(2rem, 8vw, 8rem);
  bottom: 11vh;
}

h1,
h2 {
  margin: 0.4rem 0 1rem;
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.95;
  color: var(--moonfoam);
}

h1 { font-size: clamp(2.6rem, 6vw, 6.8rem); }
h2 { font-size: clamp(2.1rem, 5vw, 5.4rem); }
p { font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.65; }

.current-lines,
.lane,
.strip,
.trail-lines span {
  position: absolute;
  background: linear-gradient(180deg, transparent, rgba(78, 231, 216, 0.54), transparent);
}

.current-lines-a {
  left: 34vw;
  top: 0;
  width: 1px;
  height: 100%;
  box-shadow: 13vw 0 rgba(11, 122, 136, 0.5), 27vw 0 rgba(201, 164, 92, 0.3);
}

.school {
  position: absolute;
  z-index: 4;
  width: min(52rem, 84vw);
  height: 12rem;
  pointer-events: none;
}

.school-hero { left: -30rem; top: 35vh; animation: swimHero 22s linear infinite; }
.school-split { right: -20rem; top: 47vh; animation: swimReverse 26s linear infinite; }
.school-scheduler { left: -16rem; bottom: 16vh; animation: swimHero 30s linear infinite; }

.fish {
  position: absolute;
  width: 4.2rem;
  height: 1.6rem;
  border-radius: 55% 45% 45% 55%;
  background: linear-gradient(90deg, rgba(78, 231, 216, 0.25), var(--biolume-aqua));
  box-shadow: 0 0 1.2rem rgba(78, 231, 216, 0.34);
  transform: translateZ(20px);
}

.fish::before,
.fish::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.fish::before {
  left: -1rem;
  border-right: 1.3rem solid rgba(201, 164, 92, 0.84);
  border-top: 0.8rem solid transparent;
  border-bottom: 0.8rem solid transparent;
}

.fish::after {
  right: 0.7rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--ink-grain);
}

.fish:nth-child(1) { top: 0.5rem; left: 4%; animation: bank 4s ease-in-out infinite; }
.fish:nth-child(2) { top: 2.9rem; left: 18%; animation: bank 5s ease-in-out infinite reverse; }
.fish:nth-child(3) { top: 5.1rem; left: 33%; animation: bank 4.7s ease-in-out infinite; }
.fish:nth-child(4) { top: 7.4rem; left: 49%; animation: bank 5.4s ease-in-out infinite reverse; }
.fish:nth-child(5) { top: 9.6rem; left: 63%; animation: bank 4.2s ease-in-out infinite; }

.wrasse { width: 5.8rem; height: 0.9rem; border-radius: 70% 30% 30% 70%; }
.angel { width: 3.2rem; height: 2.8rem; border-radius: 58% 42% 52% 48%; }
.butterfly { width: 3.7rem; height: 2rem; background: linear-gradient(90deg, var(--moorish-gold), var(--biolume-aqua)); }
.coral { background: linear-gradient(90deg, rgba(255, 107, 94, 0.35), var(--parrotfish-coral)); }
.gold { background: linear-gradient(90deg, rgba(201, 164, 92, 0.28), var(--moorish-gold)); }

.split {
  background: linear-gradient(180deg, rgba(3, 24, 38, 0.1), rgba(6, 58, 82, 0.18));
}

.lane {
  top: 6vh;
  width: 1px;
  height: 88vh;
  opacity: 0.48;
  animation: laneSlide 9s ease-in-out infinite alternate;
}

.lane span {
  position: absolute;
  top: 48%;
  left: 0.8rem;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: rgba(201, 164, 92, 0.72);
  white-space: nowrap;
}

.lane-one { left: 18vw; }
.lane-two { left: 45vw; animation-delay: -2s; }
.lane-three { left: 72vw; animation-delay: -4s; }

.gallery-pane { padding: 3rem; }
.gallery-a { width: 48vw; height: 42vh; left: 8vw; top: 14vh; transform: rotateX(8deg) rotateY(13deg) rotateZ(-3deg); }
.gallery-b { width: 31vw; min-height: 36vh; right: 11vw; top: 31vh; transform: rotateX(-7deg) rotateY(-16deg) rotateZ(2deg); }
.gallery-c { width: 41vw; height: 21vh; left: 29vw; bottom: 8vh; transform: rotateX(11deg) rotateY(-8deg) rotateZ(1deg); }

.measure {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--moorish-gold) 0 1px, transparent 1px 22px);
}
.rail-top { top: 34%; }
.rail-bottom { bottom: 35%; }

.scheduler {
  display: grid;
  place-items: center;
}

.schedule-strips {
  position: absolute;
  inset: 14vh 5vw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.strip {
  position: relative;
  height: 100%;
  border-left: 1px solid rgba(11, 122, 136, 0.52);
  border-right: 1px solid rgba(201, 164, 92, 0.13);
  background: linear-gradient(180deg, rgba(6, 58, 82, 0.08), rgba(78, 231, 216, 0.08), rgba(6, 58, 82, 0.02));
  animation: stripDrift 11s ease-in-out infinite alternate;
}

.strip:nth-child(even) { animation-direction: alternate-reverse; }

.strip span {
  position: absolute;
  top: 2rem;
  left: 1rem;
  writing-mode: vertical-rl;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: rgba(231, 246, 242, 0.48);
}

.scheduler-pane {
  position: relative;
  width: min(62rem, 78vw);
  min-height: 28rem;
  padding: clamp(3rem, 6vw, 6rem);
  transform: rotateX(8deg) rotateY(-9deg);
}

.scheduler-pane .plaque { position: static; display: block; margin-bottom: 2rem; }

.current-map {
  position: absolute;
  right: 6vw;
  bottom: 12vh;
  width: 28rem;
  height: 14rem;
  opacity: 0.6;
}

.current-map span {
  position: absolute;
  width: 100%;
  height: 1px;
  border-top: 1px solid rgba(78, 231, 216, 0.24);
  border-radius: 50%;
  transform: rotate(var(--r, 0deg));
}
.current-map span:nth-child(1) { top: 10%; --r: -8deg; }
.current-map span:nth-child(2) { top: 29%; --r: 4deg; }
.current-map span:nth-child(3) { top: 48%; --r: -3deg; }
.current-map span:nth-child(4) { top: 67%; --r: 7deg; }
.current-map span:nth-child(5) { top: 86%; --r: -6deg; }

.surface {
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(231, 246, 242, 0.16), transparent 22rem);
}

.moon-surface {
  position: absolute;
  top: 7vh;
  left: 50%;
  width: 76vw;
  height: 5rem;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(231, 246, 242, 0.42), rgba(78, 231, 216, 0.08) 42%, transparent 72%);
  filter: blur(11px);
}

.surface-bars {
  position: absolute;
  inset: 28vh 8vw auto;
  display: grid;
  gap: 1.15rem;
}

.surface-bars span {
  display: block;
  height: 1.15rem;
  background: linear-gradient(90deg, transparent, rgba(6, 58, 82, 0.84), rgba(78, 231, 216, 0.18), transparent);
  border-top: 1px solid rgba(231, 246, 242, 0.1);
  transform: scaleX(0.78);
}

.trail-lines {
  position: absolute;
  inset: 0;
}

.trail-lines span {
  width: 68vw;
  height: 1px;
  left: 17vw;
  background: linear-gradient(90deg, transparent, var(--biolume-aqua), transparent);
  opacity: 0.5;
}
.trail-lines span:nth-child(1) { top: 45vh; }
.trail-lines span:nth-child(2) { top: 52vh; left: 9vw; }
.trail-lines span:nth-child(3) { top: 60vh; left: 24vw; }

.seal-pane {
  position: relative;
  width: min(44rem, 82vw);
  padding: clamp(2.5rem, 5vw, 5rem);
  text-align: center;
  transform: rotateX(4deg);
}

.seal-pane h2 {
  font-size: clamp(3.4rem, 9vw, 9rem);
  letter-spacing: -0.065em;
}

.seal-pane h2 span { color: var(--biolume-aqua); text-shadow: 0 0 1.5rem var(--biolume-aqua); }
.tide-phrase { font-family: var(--accent); color: rgba(231, 246, 242, 0.72); }

@keyframes swimHero {
  0% { transform: translate3d(-18vw, 0, 0) rotateY(0deg); }
  100% { transform: translate3d(150vw, -5vh, 0) rotateY(0deg); }
}

@keyframes swimReverse {
  0% { transform: translate3d(22vw, 0, 0) rotateY(180deg); }
  100% { transform: translate3d(-150vw, 4vh, 0) rotateY(180deg); }
}

@keyframes bank {
  0%, 100% { transform: rotateZ(0deg) rotateX(0deg); }
  50% { transform: rotateZ(2deg) rotateX(18deg); }
}

@keyframes laneSlide {
  from { transform: translateY(-1.7rem); }
  to { transform: translateY(2.4rem); }
}

@keyframes stripDrift {
  from { transform: translateY(-2rem) rotateX(0deg); }
  to { transform: translateY(2rem) rotateX(8deg); }
}

@keyframes pearlPulse {
  0% { transform: scale(1); filter: brightness(1); }
  45% { transform: scale(1.18); filter: brightness(1.9); }
  100% { transform: scale(1); filter: brightness(1); }
}

@media (max-width: 760px) {
  .depth-nav { display: none; }
  .scene { padding: 1.4rem; }
  .hero-title { left: 1rem; top: 22vh; font-size: clamp(4rem, 18vw, 7rem); }
  .hero-pane { width: 82vw; left: 4vw; right: auto; }
  .pane-right { top: 38vh; }
  .arrival-copy { left: 1.4rem; right: 1.4rem; bottom: 6vh; }
  .gallery-a, .gallery-b, .gallery-c { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 88vw; margin: 12vh 0; }
  .split { display: grid; align-content: center; }
  .schedule-strips { grid-template-columns: repeat(2, 1fr); inset: 9vh 1rem; }
  .scheduler-pane { width: 90vw; }
}