:root {
  /* Compliance tokens from DESIGN.md: (Google IntersectionObserver trigger with `rootMargin: '100px'` animations slightly elements viewport. */
  --abyss: #0b1628;
  --biolum: #42e6d5;
  --undertow: #3b1548;
  --deep-water: #134e5e;
  --coral-light: #f7a8c4;
  --crystal-edge: #7fdbca;
  --shore: #d4e8e4;
  --sunlight: #fbbf24;
  --amethyst: #c084fc;
  --depth: 0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: #0b1628;
  color: #d4e8e4;
  font-family: "Nunito", "Inter", sans-serif;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  font-weight: 300;
  line-height: 1.85;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.33;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 14% 18%, rgba(66, 230, 213, 0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 42%, rgba(247, 168, 196, 0.14) 0 1px, transparent 3px),
    radial-gradient(circle at 45% 76%, rgba(192, 132, 252, 0.11) 0 2px, transparent 4px);
  background-size: 170px 210px, 230px 260px, 310px 330px;
  animation: particulate 28s linear infinite;
}

.layer-abyss {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% calc(5% + (var(--depth) * 11%)), rgba(247, 168, 196, 0.16), transparent 34%),
    radial-gradient(circle at calc(18% + (var(--depth) * 8%)) 64%, rgba(66, 230, 213, 0.14), transparent 32%),
    linear-gradient(180deg, #0b1628 0%, #134e5e 40%, #3b1548 100%);
  filter: hue-rotate(calc(var(--depth) * 5deg)) saturate(calc(1 + var(--depth) * 0.08));
}

.layer-abyss::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    repeating-linear-gradient(102deg, transparent 0 35px, rgba(127, 219, 202, 0.025) 36px, transparent 38px),
    radial-gradient(ellipse at 50% 0%, rgba(212, 232, 228, 0.08), transparent 60%);
  animation: waterSheen 24s ease-in-out infinite alternate;
}

.layer-crystal { position: relative; z-index: 1; }
.layer-svg { position: fixed; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.layer-text { position: relative; z-index: 3; }

.zone {
  min-height: 100vh;
  position: relative;
  display: grid;
  align-items: center;
  padding: clamp(2rem, 5vw, 6rem);
}

.zone-entry { justify-items: center; }
.zone-glass, .zone-kinetic { justify-items: start; }
.zone-facets { justify-items: end; }
.zone-return { justify-items: center; }

.panel {
  width: min(760px, 92vw);
  padding: clamp(1.5rem, 4vw, 3.8rem);
  border: 1px solid rgba(127, 219, 202, 0.42);
  border-radius: 2px 4px 3px 5px;
  background: linear-gradient(135deg, rgba(127, 219, 202, 0.08) 0%, rgba(247, 168, 196, 0.05) 100%), rgba(11, 22, 40, 0.48);
  box-shadow: 0 0 30px rgba(66, 230, 213, 0.08), inset 0 0 15px rgba(127, 219, 202, 0.04), 18px 24px 90px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);
  transform: rotate(var(--tilt, 0.35deg));
}

.panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 4px 2px 5px 3px;
  pointer-events: none;
  background: linear-gradient(90deg, #f7a8c4 0%, #42e6d5 50%, #c084fc 100%);
  opacity: 0.18;
  clip-path: polygon(0 0, 100% 0, 100% 1px, 0 2px, 0 100%, 1px 100%, 1px 0);
}

.panel-entry { --tilt: -0.45deg; text-align: center; }
.panel-left { --tilt: 0.65deg; margin-left: min(6vw, 6rem); }
.panel-right { --tilt: -0.72deg; margin-right: min(6vw, 6rem); }
.panel-tilt { --tilt: -0.38deg; }
.panel-final { --tilt: 0.28deg; text-align: center; }

.hand-note {
  margin-bottom: 0.9rem;
  color: #7fdbca;
  font-family: "Caveat", cursive;
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  transform: rotate(-1.5deg);
  text-shadow: 0 0 14px rgba(66, 230, 213, 0.28);
}

.crystalline-title {
  margin-bottom: clamp(1.1rem, 3vw, 2.1rem);
  color: #f7a8c4;
  font-family: "Poiret One", "Inter", sans-serif;
  font-size: clamp(2.8rem, 8vw, 7rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 28px rgba(247, 168, 196, 0.22), 0 0 52px rgba(66, 230, 213, 0.12);
}

.crystalline-title .crystal-char {
  display: inline-block;
  opacity: 0;
  transform: scale(0.3) translateY(15px);
  filter: blur(4px) brightness(1);
  transition: opacity 600ms cubic-bezier(0.65, 0, 0.35, 1), transform 600ms cubic-bezier(0.65, 0, 0.35, 1), filter 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

.crystalline-title.is-visible .crystal-char {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0) brightness(1.34);
}

.crystalline-title .char-space { width: 0.55em; }

.lead {
  max-width: 56ch;
  margin: 0 auto 2rem;
  color: #d4e8e4;
  font-size: clamp(1.04rem, 1.6vw, 1.38rem);
}

p { color: #d4e8e4; }
p + p { margin-top: 1.1rem; }
em { color: #f7a8c4; font-style: normal; }

.panel p:not(.hand-note), .glyph-row, .inline-etch {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 800ms ease, transform 800ms ease, filter 220ms ease;
}

.panel.is-visible p:not(.hand-note), .panel.is-visible .glyph-row, .panel.is-visible .inline-etch {
  opacity: 1;
  transform: translateY(0);
}

.terminal-line {
  display: inline-block;
  margin-top: 1.4rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(251, 191, 36, 0.34);
  color: #fbbf24;
  font-family: "Fira Code", monospace;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  background: rgba(59, 21, 72, 0.25);
}

.inline-etch, .glyph, .layer-svg g { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.inline-etch { display: block; margin: 2rem auto 0; overflow: visible; }
.inline-etch path, .inline-etch circle, .inline-etch line, .inline-etch polygon { stroke: url(#heroCrystal); stroke-width: 2; }
.side-jelly { position: absolute; right: clamp(-3rem, -4vw, -1rem); bottom: -4rem; width: clamp(110px, 18vw, 180px); opacity: 0.78; }
.side-jelly path { stroke: #f7a8c4; }
.kelp-divider { width: 100%; max-width: 620px; }
.kelp-divider path { stroke: #42e6d5; stroke-width: 2; }
.closing-crystal { width: min(300px, 70vw); }
.closing-crystal path { stroke: #7fdbca; }
.hero-crystal { width: min(360px, 78vw); }

.glyph-row {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;
  margin-top: 2rem;
}

.glyph { width: 80px; height: 80px; filter: drop-shadow(0 0 12px rgba(66, 230, 213, 0.28)); }
.glyph path, .glyph circle { stroke: #7fdbca; stroke-width: 1.8; }
.glyph:nth-child(2) path, .glyph:nth-child(2) circle { stroke: #42e6d5; }
.glyph:nth-child(3) path { stroke: #fbbf24; }

.draw-svg path, .draw-svg circle, .draw-svg line, .draw-svg polygon {
  stroke-dasharray: var(--dash, 600);
  stroke-dashoffset: var(--dash, 600);
  transition: stroke-dashoffset var(--draw-duration, 1700ms) cubic-bezier(0.65, 0, 0.35, 1), filter 200ms ease;
  filter: brightness(0.92);
}

.draw-svg.is-drawn path, .draw-svg.is-drawn circle, .draw-svg.is-drawn line, .draw-svg.is-drawn polygon {
  stroke-dashoffset: 0;
  filter: brightness(1.3);
}

.layer-svg path, .layer-svg circle { stroke: url(#vaporwaveStroke); stroke-width: 2; vector-effect: non-scaling-stroke; }
.jellyfish-lantern path:first-child { fill: rgba(247, 168, 196, 0.08); }
.mote { fill: url(#moteGlow); stroke: none; opacity: 0.62; }

.drift { transform-box: fill-box; transform-origin: center; }
.drift-a { animation: driftA 46s ease-in-out infinite; }
.drift-b { animation: driftB 58s ease-in-out infinite; }
.drift-c { animation: driftC 66s ease-in-out infinite; }
.m1 { animation: moteDrift 21s ease-in-out infinite; }
.m2 { animation: moteDrift 28s ease-in-out infinite reverse; }
.m3 { animation: moteDrift 25s ease-in-out infinite; }
.m4 { animation: moteDrift 32s ease-in-out infinite reverse; }
.m5 { animation: moteDrift 30s ease-in-out infinite; }
.m6 { animation: moteDrift 24s ease-in-out infinite reverse; }

.depth-indicator {
  position: fixed;
  z-index: 4;
  top: 50%;
  right: clamp(1rem, 2.2vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  transform: translateY(-50%);
}

.depth-dot {
  width: 13px;
  height: 13px;
  border: 1px solid #7fdbca;
  border-radius: 50%;
  background: rgba(11, 22, 40, 0.35);
  cursor: pointer;
  opacity: 0.62;
  transition: transform 240ms ease, background 240ms ease, box-shadow 240ms ease, filter 150ms ease;
}

.depth-dot:hover { filter: brightness(1.15); }
.depth-dot.active { background: #42e6d5; border-color: #42e6d5; box-shadow: 0 0 18px rgba(66, 230, 213, 0.78); opacity: 1; transform: scale(1.35); }
.depth-dot.pulse { animation: dotPulse 620ms ease; }

@keyframes particulate { to { background-position: 170px 210px, -230px 260px, 310px -330px; } }
@keyframes waterSheen { from { transform: translate3d(-2%, -1%, 0) rotate(-1deg); } to { transform: translate3d(2%, 1%, 0) rotate(1deg); } }
@keyframes driftA { 0%,100% { transform: translate(0,0) rotate(-2deg); } 50% { transform: translate(24px,-42px) rotate(3deg); } }
@keyframes driftB { 0%,100% { transform: translate(0,0); } 45% { transform: translate(-38px,22px); } 75% { transform: translate(16px,-18px); } }
@keyframes driftC { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(36px,-20px) scale(1.03); } }
@keyframes moteDrift { 0%,100% { transform: translate(0,0); opacity: 0.35; } 50% { transform: translate(44px,-70px); opacity: 0.82; } }
@keyframes dotPulse { 0%,100% { box-shadow: 0 0 12px rgba(66, 230, 213, 0.4); } 50% { box-shadow: 0 0 26px rgba(66, 230, 213, 0.95), 0 0 5px #f7a8c4; } }

@media (max-width: 760px) {
  .zone { padding: 5.5rem 1rem; justify-items: center; }
  .panel-left, .panel-right { margin-left: 0; margin-right: 0; }
  .crystalline-title { letter-spacing: 0.1em; }
  .side-jelly { position: relative; right: auto; bottom: auto; }
  .depth-indicator { right: auto; top: auto; bottom: 1.2rem; left: 50%; flex-direction: row; transform: translateX(-50%); }
}