/* Typography note: Bebas Neue, Work Sans, IBM Plex Mono" are specified as (Google Fonts in DESIGN.md; standard fallbacks are used here without fetching external assets. Work Sans balances the industrial precision of Bebas Neue with warmth and legibility. Zoom focus is triggered with IntersectionObserver. and transition timing follows `cubic-bezier(0.22, 0.68, 0.35, 1.0)`. */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --abyss-black: #0a0e17;
  --station-deep: #0d1520;
  --station-blue: #111b2b;
  --station-teal: #0e1822;
  --bright-frost: #e4f0f8;
  --pale-mist: #c8d8e4;
  --coral-reef: #e8734a;
  --lagoon-teal: #2dd4a8;
  --parrotfish-gold: #f0c040;
  --frost-cyan: #78dce8;
  --frost-glass: rgba(180, 210, 230, 0.04);
  --frost-glass-strong: rgba(180, 210, 230, 0.06);
  --ice-edge: rgba(160, 200, 220, 0.12);
  --ice-edge-bright: rgba(160, 200, 220, 0.25);
  --deep-glow: rgba(45, 212, 168, 0.08);
  --display: "Bebas Neue", "Arial Narrow", "Impact", sans-serif;
  --body: "Work Sans", "Inter", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", "Consolas", monospace;
}

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--pale-mist);
  font-family: var(--body);
  font-weight: 300;
  line-height: 1.72;
  background: linear-gradient(180deg, #0a0e17 0%, #0d1520 30%, #111b2b 60%, #0e1822 85%, #0a0e17 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(rgba(120, 220, 232, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 220, 232, 0.028) 1px, transparent 1px),
    radial-gradient(circle at 50% 20%, rgba(120, 220, 232, 0.08), transparent 34%);
  background-size: 86px 86px, 86px 86px, 100% 100%;
  mask-image: linear-gradient(180deg, transparent, black 18%, black 88%, transparent);
}

main, section { position: relative; z-index: 1; }

h1, h2 {
  color: var(--bright-frost);
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.94;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 0 30px rgba(120, 220, 232, 0.15);
}

p { font-size: clamp(1rem, 1.2vw, 1.15rem); margin: 0 0 1.35rem; }

.system-label, .nav-echo {
  font-family: var(--mono);
  color: var(--frost-cyan);
  font-size: clamp(0.75rem, 0.9vw, 0.85rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.descent {
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 72%, rgba(45, 212, 168, 0.09), transparent 27%),
    radial-gradient(circle at 82% 24%, rgba(120, 220, 232, 0.07), transparent 32%),
    linear-gradient(180deg, #0a0e17 0%, #0d1520 38%, #111b2b 70%, #0e1822 100%);
}

.hero-panel {
  width: min(1120px, 88vw);
  padding: clamp(2rem, 6vw, 5.5rem);
  border: 1px solid rgba(160, 200, 220, 0.10);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(180, 210, 230, 0.055), rgba(180, 210, 230, 0.018));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(228, 240, 248, 0.08), 0 30px 100px rgba(0, 0, 0, 0.28);
}

.hero-panel h1 { font-size: clamp(4rem, 12vw, 9rem); letter-spacing: 0.15em; }
.hero-copy { max-width: 660px; margin-top: 1rem; color: var(--bright-frost); font-size: clamp(1.1rem, 2vw, 1.55rem); }

.marine-snow, .marine-snow::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    radial-gradient(circle, rgba(120, 220, 232, 0.38) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(200, 216, 228, 0.22) 0 1.5px, transparent 2.5px);
  background-size: 130px 180px, 210px 250px;
  animation: snowRise 70s linear infinite;
}
.marine-snow::before { animation-duration: 105s; opacity: 0.55; transform: translateY(30%); }

.organism {
  position: absolute;
  border-radius: 999px;
  filter: blur(24px);
  opacity: 0.38;
  animation: organismDrift 34s ease-in-out infinite alternate;
}
.organism-a { width: 180px; height: 180px; left: 8%; top: 18%; background: radial-gradient(circle, rgba(45, 212, 168, 0.45), transparent 65%); }
.organism-b { width: 260px; height: 140px; right: 7%; top: 56%; background: radial-gradient(circle, rgba(120, 220, 232, 0.34), transparent 70%); animation-duration: 46s; }
.organism-c { width: 130px; height: 320px; left: 62%; top: 4%; background: radial-gradient(circle, rgba(232, 115, 74, 0.16), transparent 67%); animation-duration: 58s; }

.observation {
  min-height: 250vh;
  padding: clamp(5rem, 9vh, 8rem) 2rem;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(17, 27, 43, 0.35), rgba(10, 14, 23, 0.52));
}

.editorial-flow {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 5%;
  row-gap: clamp(3rem, 8vh, 7rem);
}

.frost-panel {
  position: relative;
  background: var(--frost-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(160, 200, 220, 0.10);
  border-radius: 12px;
  transition: border-color 0.6s ease, box-shadow 0.6s ease, transform 0.8s cubic-bezier(0.22, 0.68, 0.35, 1.0), opacity 0.8s cubic-bezier(0.22, 0.68, 0.35, 1.0);
}

.frost-panel:hover { border-color: rgba(160, 200, 220, 0.22); box-shadow: 0 0 40px rgba(45, 212, 168, 0.06); }

.observation-panel {
  padding: clamp(3rem, 6vh, 5rem);
  opacity: 0;
  transform: scale(0.92);
}
.observation-panel.in-view { opacity: 1; transform: scale(1); }
.observation-panel:nth-of-type(odd) { grid-column: 1 / span 1; justify-self: start; width: min(60vw, 680px); }
.observation-panel:nth-of-type(even) { grid-column: 2 / span 1; justify-self: end; width: min(35vw, 470px); }
.observation-panel h2 { font-size: clamp(1.8rem, 4vw, 3.5rem); margin: 0.65rem 0 1.5rem; }
.observation-panel p:last-child { margin-bottom: 0; }

.section-divider {
  grid-column: 1 / -1;
  height: 1px;
  width: min(60%, 680px);
  justify-self: center;
  background: linear-gradient(90deg, transparent, var(--frost-cyan), transparent);
  opacity: 0.42;
  animation: dividerPulse 4s ease-in-out infinite;
}

.port-arc { position: absolute; width: 78px; height: 78px; pointer-events: none; opacity: 0.55; }
.arc-top { top: 14px; left: 14px; border-top: 1px solid rgba(120, 220, 232, 0.45); border-left: 1px solid rgba(120, 220, 232, 0.28); border-radius: 14px 0 0 0; }
.arc-bottom { right: 14px; bottom: 14px; border-right: 1px solid rgba(120, 220, 232, 0.28); border-bottom: 1px solid rgba(120, 220, 232, 0.45); border-radius: 0 0 14px 0; }

.plankton-cloud { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: 0.11; animation: cloudDrift 100s linear infinite; }
.cloud-one { width: 420px; height: 420px; top: 8%; left: -80px; background: radial-gradient(circle, var(--lagoon-teal), transparent 70%); }
.cloud-two { width: 520px; height: 320px; top: 45%; right: -160px; background: radial-gradient(circle, var(--frost-cyan), transparent 70%); animation-duration: 120s; }
.cloud-three { width: 280px; height: 500px; bottom: 4%; left: 24%; background: radial-gradient(circle, var(--coral-reef), transparent 72%); animation-duration: 90s; }

.aquarium {
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 40% 42%, rgba(45, 212, 168, 0.10), transparent 32%),
    linear-gradient(180deg, #0a0e17 0%, #111b2b 48%, #0e1822 100%);
}

.aquarium-window { position: relative; width: 100%; height: 100%; }
.aquarium-window::before {
  content: "";
  position: absolute;
  inset: 8vh 5vw;
  border-radius: 34px;
  border: 1px solid rgba(160, 200, 220, 0.13);
  background: radial-gradient(circle at 50% 50%, rgba(180, 210, 230, 0.035), transparent 70%);
  box-shadow: inset 0 0 80px rgba(120, 220, 232, 0.035);
}

.aquarium-note { position: absolute; z-index: 7; padding: clamp(1.3rem, 3vh, 2.4rem); opacity: 0; transform: scale(0.92); }
.aquarium-note.in-view, .continuum-panel.in-view { opacity: 1; transform: scale(1); }
.note-one { top: 15vh; left: 8vw; width: min(560px, 82vw); }
.note-one h2 { font-size: clamp(2rem, 5vw, 4.8rem); margin-top: 0.7rem; }
.note-two { right: 8vw; bottom: 14vh; width: min(460px, 80vw); }
.note-two p { margin: 0; }

.continuum {
  min-height: 50vh;
  display: grid;
  place-items: center;
  padding: clamp(4rem, 8vh, 7rem) 2rem;
  background: linear-gradient(180deg, #0e1822 0%, #0a0e17 100%);
}
.continuum-panel { width: min(1120px, 100%); padding: clamp(3rem, 6vh, 5rem); text-align: center; opacity: 0; transform: scale(0.92); }
.continuum-panel h2 { font-size: clamp(2.6rem, 6vw, 5rem); margin: 0.7rem 0 1.6rem; }
.continuum-panel p { max-width: 790px; margin-left: auto; margin-right: auto; }
.closing-line { color: var(--bright-frost); font-style: italic; }
.nav-echo { padding-top: 1.4rem; border-top: 1px solid var(--ice-edge); opacity: 0.72; }

.fish {
  --fish-color: var(--coral-reef);
  --top: 50%;
  --size: 64px;
  position: absolute;
  top: var(--top);
  left: calc(-1.8 * var(--size));
  width: var(--size);
  height: calc(var(--size) * 0.52);
  z-index: 5;
  animation: swim var(--duration, 30s) linear infinite;
  animation-delay: var(--delay, 0s);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--fish-color), transparent 45%));
}
.fish-teal { --fish-color: #2dd4a8; }
.fish-coral { --fish-color: #e8734a; }
.fish-gold { --fish-color: #f0c040; }
.fish-cyan { --fish-color: #78dce8; }
.fish-body, .fish-tail, .fish-fin { position: absolute; display: block; background: var(--fish-color); }
.fish-body { inset: 18% 18% 18% 16%; clip-path: polygon(0 50%, 20% 12%, 74% 0, 100% 50%, 74% 100%, 20% 88%); opacity: 0.9; }
.fish-tail { right: 2%; top: 18%; width: 28%; height: 64%; clip-path: polygon(0 50%, 100% 0, 84% 50%, 100% 100%); opacity: 0.72; }
.fish-fin { left: 43%; bottom: 5%; width: 22%; height: 35%; clip-path: polygon(0 0, 100% 18%, 28% 100%); opacity: 0.62; }
.fish:nth-child(even) { animation-name: swimSoft; }

@keyframes swim {
  0% { transform: translateX(-120px) translateY(0) rotate(0deg); }
  50% { transform: translateX(52vw) translateY(-16px) rotate(3deg); }
  100% { transform: translateX(calc(100vw + 180px)) translateY(8px) rotate(-2deg); }
}
@keyframes swimSoft {
  0% { transform: translateX(-120px) translateY(8px) rotate(-2deg); }
  50% { transform: translateX(48vw) translateY(18px) rotate(2deg); }
  100% { transform: translateX(calc(100vw + 180px)) translateY(-10px) rotate(0deg); }
}
@keyframes snowRise { from { transform: translateY(18%); } to { transform: translateY(-18%); } }
@keyframes organismDrift { from { transform: translate3d(-20px, 20px, 0) scale(0.92); } to { transform: translate3d(28px, -22px, 0) scale(1.08); } }
@keyframes cloudDrift { 0% { transform: translate(0, 0); } 25% { transform: translate(40px, -30px); } 50% { transform: translate(0, -55px); } 75% { transform: translate(-35px, -22px); } 100% { transform: translate(0, 0); } }
@keyframes dividerPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } }

@media (max-width: 768px) {
  .hero-panel h1 { font-size: clamp(3.4rem, 17vw, 6rem); }
  .observation { padding: 4rem 1rem; }
  .editorial-flow { grid-template-columns: 1fr; row-gap: 2rem; }
  .observation-panel:nth-of-type(odd), .observation-panel:nth-of-type(even) { grid-column: 1; width: 100%; }
  .section-divider { width: 84%; }
  .aquarium-note { left: 1rem; right: 1rem; width: auto; }
  .note-one { top: 10vh; }
  .note-two { bottom: 10vh; }
}