:root {
  --abyssal-ink: #091e26;
  --deep-lagoon: #0a2e38;
  --bio-teal: #00d2c8;
  --aqua-glow: #5ee8d6;
  --coral-blush: #f4a0b8;
  --moon-peach: #f8d4c2;
  --pearl-foam: #e8f4f0;
  --lunar-mist: #7ab5b0;
  --pull: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Design compliance terms: Interactions* Interactions:** IntersectionObserver` triggers animations when modules cross a 20% viewport threshold. Each module translates from a random peripheral offset (±120px on X IntersectionObserver` for scroll-triggered module reveals. Source Sans 3 provides the clean Source Sans 3" (Google Fonts Space Mono" (Google Fonts */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--pearl-foam);
  font-family: "Source Sans 3", sans-serif;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.72;
  background:
    radial-gradient(circle at 18% 8%, rgba(94, 232, 214, 0.23), transparent 28rem),
    radial-gradient(circle at 85% 24%, rgba(244, 160, 184, 0.16), transparent 30rem),
    linear-gradient(180deg, #0a2e38 0%, #091e26 38%, #091e26 100%);
}

.tidal-lounge { position: relative; z-index: 2; }

.particle-field {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.particle, .trail-dot {
  position: absolute;
  border-radius: 999px;
  background: var(--aqua-glow);
  box-shadow: 0 0 18px currentColor;
  opacity: 0.48;
  transform: translate3d(0, 0, 0);
}

.trail-dot {
  width: 9px;
  height: 9px;
  color: var(--bio-teal);
  animation: trailFade 600ms ease-out forwards;
}

.tide-zone {
  position: relative;
  min-height: 100vh;
  padding: clamp(32px, 5vw, 72px);
  display: grid;
  align-items: center;
}

.surface-zone { min-height: 100vh; }
.reef-zone { min-height: 120vh; }
.abyss-zone { min-height: 80vh; background: #091e26; }
.canopy-zone { background: linear-gradient(180deg, rgba(10, 46, 56, 0.78), rgba(9, 30, 38, 0.9)); }
.reef-zone { background: radial-gradient(circle at 30% 40%, rgba(0, 210, 200, 0.12), transparent 30%), linear-gradient(180deg, rgba(9, 30, 38, 0.92), #0a2e38); }
.deep-zone { background: radial-gradient(circle at 72% 38%, rgba(248, 212, 194, 0.18), transparent 32%), linear-gradient(180deg, #0a2e38, #091e26); }

.tide-grid {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(80px, auto);
  gap: 24px;
  position: relative;
  z-index: 3;
}

.module {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(var(--start-x, 0), var(--start-y, 80px), 0) scale(0.96);
  transition: transform 980ms var(--pull), opacity 860ms ease, box-shadow 420ms ease, border-color 420ms ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}

.module.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.module:hover {
  transform: translate3d(0, -6px, 0) scale(1.02);
  box-shadow: 0 30px 90px rgba(0, 210, 200, 0.18), 0 18px 50px rgba(0, 0, 0, 0.34);
}

.module-label {
  display: block;
  font-family: "Space Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(94, 232, 214, 0.7);
  margin-bottom: 1rem;
}

.reef-module {
  padding: clamp(1.4rem, 3vw, 3rem);
  border: 1px solid rgba(0, 210, 200, 0.3);
  background:
    linear-gradient(135deg, rgba(0, 210, 200, 0.22), rgba(244, 160, 184, 0.16)),
    rgba(232, 244, 240, 0.08);
  backdrop-filter: blur(8px);
  animation: reefGradient 30s ease-in-out infinite alternate;
}

.kelp-module {
  padding: clamp(1.2rem, 2.4vw, 2.3rem);
  background: #0a2e38;
  color: #e8f4f0;
  border: 1px solid rgba(122, 181, 176, 0.28);
}

.shell-module {
  min-height: 150px;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(9, 30, 38, 0.32);
  border: 2px solid transparent;
  border-image: linear-gradient(135deg, #00d2c8, #f4a0b8) 1;
  backdrop-filter: blur(4px);
}

h1, h2 { font-family: "Outfit", sans-serif; font-weight: 600; margin: 0; line-height: 0.96; }

h1 {
  font-size: clamp(2.4rem, 7vw, 6rem);
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #00d2c8, #5ee8d6 45%, #f4a0b8);
  background-size: 180% 180%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleTide 14s ease-in-out infinite alternate;
}

h2 { font-size: clamp(2rem, 4.6vw, 4.8rem); letter-spacing: 0.03em; color: #e8f4f0; }
p { margin: 0; }
.hero-line { max-width: 760px; margin-top: 1.25rem; font-size: clamp(1.15rem, 2vw, 1.75rem); color: #e8f4f0; }

.surface-grid { min-height: 72vh; align-items: center; }
.hero-module { grid-column: 3 / span 8; min-height: 54vh; display: flex; flex-direction: column; justify-content: center; }
.shell-one { grid-column: 1 / span 2; grid-row: 1; align-self: start; }
.shell-two { grid-column: 11 / span 2; grid-row: 1; align-self: end; }

.canopy-grid { align-items: stretch; }
.canopy-grid .tall { grid-column: 1 / span 4; grid-row: span 4; min-height: 62vh; }
.canopy-grid .kelp-module:nth-of-type(2) { grid-column: 5 / span 4; grid-row: span 2; }
.canopy-grid .shell-module:nth-child(3) { grid-column: 10 / span 2; grid-row: span 2; }
.canopy-grid .wide { grid-column: 5 / span 6; grid-row: span 2; }
.canopy-grid .shell-module:nth-child(5) { grid-column: 11 / span 2; grid-row: span 2; }

.reef-grid { align-items: stretch; }
.pattern-module { grid-column: 1 / span 7; grid-row: span 3; min-height: 42vh; }
.reef-grid .shell-module:nth-child(2) { grid-column: 8 / span 2; grid-row: span 2; }
.reef-grid .kelp-module:nth-child(3) { grid-column: 10 / span 3; grid-row: span 3; }
.blush-module { grid-column: 4 / span 6; grid-row: span 2; }
.reef-grid .shell-module:nth-child(5) { grid-column: 1 / span 2; grid-row: span 2; }
.reef-grid .slim { grid-column: 10 / span 3; grid-row: span 2; }

.deep-grid { align-items: center; }
.deep-card { grid-column: 1 / span 7; min-height: 58vh; backdrop-filter: blur(12px); display: flex; flex-direction: column; justify-content: center; }
.peach-card { grid-column: 8 / span 5; min-height: 42vh; backdrop-filter: blur(12px); background: linear-gradient(135deg, rgba(244,160,184,.22), rgba(248,212,194,.2)), rgba(232,244,240,.07); }
.abyss-grid { min-height: 48vh; place-items: center; }
.final-shell { grid-column: 6 / span 2; min-height: 180px; width: 100%; }

.pattern-module::before, .blush-module::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.32;
  background-image:
    radial-gradient(circle at 20px 22px, #f4a0b8 0 8px, transparent 9px),
    radial-gradient(circle at 64px 72px, #5ee8d6 0 10px, transparent 11px),
    linear-gradient(35deg, transparent 45%, rgba(94,232,214,.55) 46% 49%, transparent 50%),
    linear-gradient(125deg, transparent 45%, rgba(248,212,194,.45) 46% 49%, transparent 50%);
  background-size: 200px 200px;
}

.pattern-module > *, .blush-module > * { position: relative; z-index: 2; }

.nautilus { width: min(92%, 150px); animation: shellSpin 18s linear infinite; }
.mini { width: 100px; }
.crescent, .moon-corner {
  width: 94px;
  height: 94px;
  border-radius: 50%;
  background: #f8d4c2;
  box-shadow: 0 0 38px rgba(248, 212, 194, 0.45);
  position: relative;
}
.crescent::after, .moon-corner::after { content: ""; position: absolute; inset: 0 0 0 28px; border-radius: 50%; background: #091e26; }
.final { width: 76px; height: 76px; background: #5ee8d6; }
.moon-corner { position: absolute; right: 1.2rem; bottom: 1.2rem; width: 54px; height: 54px; opacity: .7; }
.moon-corner::after { left: 17px; background: #0a2e38; }

.geo-rose {
  width: 122px;
  height: 122px;
  clip-path: polygon(50% 0%, 98% 35%, 80% 92%, 20% 92%, 2% 35%);
  background: radial-gradient(circle, #f8d4c2 0 16%, #f4a0b8 17% 36%, #5ee8d6 37% 61%, #00d2c8 62%);
  box-shadow: inset 0 0 0 18px rgba(9,30,38,.28), 0 0 30px rgba(244,160,184,.28);
  animation: shellSpin 24s linear infinite reverse;
}
.geo-rose.small { width: 90px; height: 90px; }
.coral-mark { width: 90px; height: 120px; background: linear-gradient(#5ee8d6, #f4a0b8); clip-path: polygon(44% 100%, 44% 54%, 6% 28%, 14% 15%, 47% 38%, 48% 0, 61% 0, 61% 43%, 91% 18%, 99% 31%, 64% 58%, 64% 100%); opacity: .8; animation: kelpSway 8s ease-in-out infinite; }
.seaweed { width: 100%; max-height: 260px; margin-bottom: 1rem; overflow: visible; animation: kelpSway 8s ease-in-out infinite; transform-origin: bottom center; }
.seaweed path { fill: none; stroke: #5ee8d6; stroke-width: 9; stroke-linecap: round; opacity: .72; }
.coral-svg { width: 100%; height: 180px; }
.coral-svg rect { fill: #5ee8d6; opacity: .62; }

.wave-divider { position: absolute; left: 0; right: 0; bottom: -1px; height: 180px; z-index: 2; pointer-events: none; }
.wave-divider svg { width: 100%; height: 100%; display: block; }
.wave-divider path { fill: url(#none); fill: rgba(0, 210, 200, 0.18); animation: wavePulse 12s ease-in-out infinite alternate; }

@keyframes titleTide { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes reefGradient { from { background-position: 0 0; } to { background-position: 100% 100%; } }
@keyframes shellSpin { to { transform: rotate(360deg); } }
@keyframes kelpSway { 0%, 100% { transform: skewX(-4deg) rotate(-1deg); } 50% { transform: skewX(6deg) rotate(1deg); } }
@keyframes wavePulse { from { transform: translateX(-2%) scaleY(.92); } to { transform: translateX(2%) scaleY(1.08); } }
@keyframes trailFade { to { opacity: 0; transform: translate3d(0, -18px, 0) scale(0.2); } }

@media (max-width: 860px) {
  .tide-zone { padding: 28px 18px; }
  .tide-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .module, .hero-module, .shell-one, .shell-two, .canopy-grid .tall, .canopy-grid .wide, .pattern-module, .blush-module, .deep-card, .peach-card, .final-shell,
  .canopy-grid .kelp-module:nth-of-type(2), .canopy-grid .shell-module:nth-child(3), .canopy-grid .shell-module:nth-child(5), .reef-grid .shell-module:nth-child(2), .reef-grid .kelp-module:nth-child(3), .reef-grid .shell-module:nth-child(5), .reef-grid .slim {
    grid-column: 1 / -1;
    min-height: auto;
  }
  .shell-module { min-height: 130px; }
  .hero-module { min-height: 58vh; }
}