:root {
  --abyssal: #0a2e1a;
  --emerald: #163d28;
  --fern: #2d5a3d;
  --moss: #3a7a52;
  --deep-canopy: #0f3d22;
  --deep-moss: #1a3d2a;
  --wave-forest: #1a4a2e;
  --wave-blue-green: #2d6b3f;
  --amber: #d4a843;
  --lichen: #d4e8c2;
  --bubble: #7ecfc0;
  --coral: #e07856;
  --silt: #061a0e;
  --gray: #b8c9b0;
  --angle: 0;
}

/* Compliance tokens from DESIGN.md typography/parser: (Google Interaction Pattern:** Pattern: Intersection Observer */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: #2d5a3d;
  color: var(--gray);
  font-family: "Nunito", sans-serif;
  transition: background-color 400ms ease;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse 120px 80px at 20% 15%, rgba(61, 122, 82, 0.12) 0%, transparent 100%),
    radial-gradient(ellipse 90px 130px at 65% 40%, rgba(45, 90, 61, 0.08) 0%, transparent 100%),
    radial-gradient(ellipse 150px 100px at 80% 75%, rgba(61, 122, 82, 0.10) 0%, transparent 100%),
    radial-gradient(circle at 50% -20%, rgba(212, 232, 194, 0.16), transparent 45%),
    linear-gradient(180deg, rgba(126,207,192,0.06), rgba(6,26,14,0.32));
  mix-blend-mode: screen;
}

.dive-column { position: relative; z-index: 2; }

.depth-zone {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 8vmin;
  isolation: isolate;
}

.surface-zone { background-color: rgba(45, 90, 61, 0.88); }
.mid-zone { background-color: rgba(22, 61, 40, 0.93); }
.lower-zone { background-color: rgba(10, 46, 26, 0.96); }
.abyss-zone { background-color: rgba(6, 26, 14, 0.98); min-height: 112vh; }

.depth-zone::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -2;
  background-image:
    radial-gradient(ellipse 120px 80px at 20% 15%, rgba(61, 122, 82, 0.12) 0%, transparent 100%),
    radial-gradient(ellipse 90px 130px at 65% 40%, rgba(45, 90, 61, 0.08) 0%, transparent 100%),
    radial-gradient(ellipse 150px 100px at 80% 75%, rgba(61, 122, 82, 0.10) 0%, transparent 100%),
    radial-gradient(circle at 12% 88%, rgba(126, 207, 192, 0.08), transparent 32%);
  filter: saturate(120%);
}

.depth-zone::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 30%, transparent 0 28%, rgba(6, 26, 14, 0.24) 74%);
}

.ambient-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: filter 500ms ease, opacity 500ms ease;
  z-index: 0;
}

.depth-zone.focused .ambient-field { filter: blur(2px); opacity: 0.72; }

.ambient-bubble {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  opacity: 0.16;
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.5) 0%, transparent 40%),
    radial-gradient(circle at 30% 30%, rgba(126, 207, 192, 0.3), transparent 70%);
  box-shadow: inset 0 0 30px rgba(126, 207, 192, 0.1), 0 0 60px rgba(126, 207, 192, 0.05);
}

.story-bubble {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 50%;
  padding: clamp(1.1rem, 4vmin, 3.5rem);
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.25) 0%, transparent 37%),
    radial-gradient(circle at 30% 30%, rgba(126, 207, 192, 0.3), transparent 70%),
    rgba(22, 61, 40, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 30px rgba(126, 207, 192, 0.1), 0 0 60px rgba(126, 207, 192, 0.05), 0 24px 90px rgba(6, 26, 14, 0.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translate(var(--tx, 0), var(--ty, 0)) scale(0.7);
  opacity: 0;
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1), opacity 800ms ease, box-shadow 400ms ease;
}

.story-bubble.in-view { opacity: 1; transform: translate(var(--tx, 0), var(--ty, 0)) scale(1); }
.story-bubble:hover, .story-bubble.active { transform: translate(var(--tx, 0), var(--ty, 0)) scale(1.08); box-shadow: inset 0 0 42px rgba(126, 207, 192, 0.18), 0 0 90px rgba(126, 207, 192, 0.16), 0 0 26px rgba(212, 168, 67, 0.18); animation: shimmer-rotate 3s linear infinite; }

.story-bubble:hover::after, .story-bubble.active::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(from calc(var(--angle) * 1deg), #7ecfc0, #d4a843, #7ecfc0, transparent, #7ecfc0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.feature-bubble { width: min(60vmin, 680px); height: min(60vmin, 680px); }
.medium-bubble { width: min(35vmin, 430px); height: min(35vmin, 430px); }
.small-bubble { width: min(24vmin, 280px); height: min(24vmin, 280px); }
.brief-bubble { width: min(18vmin, 210px); height: min(18vmin, 210px); }

.drift-left { left: 9vw; top: 16vh; --tx: -2vw; --ty: 1vh; }
.glint-one { right: 14vw; bottom: 15vh; --tx: 2.4vw; --ty: -1.6vh; }
.drift-right { right: 13vw; top: 13vh; --tx: 2vw; --ty: 1.4vh; }
.ember { left: 11vw; top: 22vh; --tx: -1.5vw; --ty: -1.2vh; }
.lower-left { left: 20vw; bottom: 11vh; --tx: 1.2vw; --ty: 1.8vh; }
.centered-deep { left: 50%; top: 50%; --tx: -50%; --ty: -50%; }
.upper-right { right: 10vw; top: 10vh; --tx: 1.8vw; --ty: -1vh; }
.culture-main { left: 10vw; top: 14vh; --tx: -2.5vw; --ty: 1.6vh; }
.tech-orbit { right: 10vw; top: 34vh; --tx: 2.2vw; --ty: -1.4vh; }
.bottom-glow { left: 45vw; bottom: 10vh; --tx: -1vw; --ty: 1.5vh; }

.category {
  font-family: "Indie Flower", cursive;
  font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d4a843;
  margin-bottom: 0.3rem;
}

.category.coral { color: #e07856; }

h1, h2 {
  margin: 0;
  color: #d4e8c2;
  font-family: "Caveat Brush", cursive;
  font-weight: 400;
  font-size: clamp(1.6rem, 4.5vw, 3.2rem);
  line-height: 1.2;
  text-shadow: 0 2px 20px rgba(6, 26, 14, 0.46);
}

.small-bubble h2, .brief-bubble h2 { font-size: clamp(1.05rem, 2.5vw, 1.8rem); }
.medium-bubble h2 { font-size: clamp(1.35rem, 3.3vw, 2.55rem); }

p {
  margin: 0.85rem 0 0;
  color: #b8c9b0;
  font-weight: 400;
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  line-height: 1.65;
  letter-spacing: 0.01em;
  max-width: 31ch;
}

time {
  margin-top: 0.8rem;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  opacity: 0.6;
  color: #d4e8c2;
}

.handwrite .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 300ms ease, transform 300ms ease;
}

.story-bubble.written .char { opacity: 1; transform: translateY(0); transition-delay: calc(var(--i) * 30ms); }

.annotation {
  position: absolute;
  z-index: 4;
  margin: 0;
  color: #d4a843;
  font-family: "Indie Flower", cursive;
  font-size: clamp(1rem, 2vw, 1.45rem);
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(18px) rotate(var(--rot, -3deg));
  transition: opacity 900ms ease, transform 900ms ease;
}
.annotation.visible { opacity: 0.92; transform: translateY(0) rotate(var(--rot, -3deg)); }
.annotation span { color: #7ecfc0; font-size: 1.5em; }
.note-surface { right: 16vw; top: 18vh; --rot: 4deg; }
.note-world { left: 35vw; top: 7vh; --rot: -3deg; }
.note-science { left: 9vw; bottom: 19vh; --rot: 3deg; }
.note-culture { right: 19vw; bottom: 18vh; --rot: -4deg; }

.wave-divider {
  position: relative;
  z-index: 5;
  height: 160px;
  margin: -80px 0;
  pointer-events: none;
}
.wave-divider svg { width: 100%; height: 100%; display: block; overflow: visible; }
.wave-divider path:nth-child(1) { fill: rgba(26, 74, 46, 0.40); }
.wave-divider path:nth-child(2) { fill: rgba(45, 107, 63, 0.25); }
.wave-divider path:nth-child(3) { fill: rgba(58, 122, 82, 0.20); }

.compass {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  width: 32px;
  height: 32px;
}

.compass-button {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,0.38), transparent 38%),
    radial-gradient(circle at 30% 30%, rgba(126,207,192,0.34), transparent 70%),
    rgba(22, 61, 40, 0.55);
  box-shadow: 0 0 24px rgba(126,207,192,0.18), inset 0 0 12px rgba(126,207,192,0.16);
  backdrop-filter: blur(12px);
}
.compass-button span { display: block; width: 16px; height: 8px; margin: 11px auto 0; border-top: 2px solid #7ecfc0; border-radius: 50%; transform: rotate(-18deg); }

.radial-menu {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.radial-menu button {
  position: absolute;
  left: -8px;
  top: -8px;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  opacity: 0;
  transform: translate(0, 0) scale(0.2);
  transition: transform 560ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms ease;
  background: rgba(22, 61, 40, 0.72);
  color: #d4a843;
  font-family: "Indie Flower", cursive;
  font-size: 0.76rem;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(126,207,192,0.12);
  backdrop-filter: blur(10px);
}
.compass.open .radial-menu { pointer-events: auto; }
.compass.open .radial-menu button { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); }

@keyframes shimmer-rotate { to { --angle: 360; } }

@property --angle { syntax: "<number>"; initial-value: 0; inherits: true; }

@media (max-width: 760px) {
  .depth-zone { padding: 7vmin 4vmin; }
  .feature-bubble { width: 82vmin; height: 82vmin; }
  .medium-bubble { width: 58vmin; height: 58vmin; }
  .small-bubble { width: 38vmin; height: 38vmin; }
  .brief-bubble { width: 32vmin; height: 32vmin; }
  .drift-left, .drift-right, .culture-main, .tech-orbit { left: 50%; right: auto; --tx: -50%; }
  .drift-left { top: 12vh; }
  .glint-one { right: 7vw; bottom: 8vh; }
  .drift-right { top: 12vh; }
  .ember { left: 4vw; top: 55vh; }
  .lower-left { left: 12vw; bottom: 7vh; }
  .culture-main { top: 10vh; }
  .tech-orbit { top: 52vh; }
  p { display: none; }
}