:root {
  /* IntersectionObserver` on each section. The active indicator transitions from a hollow circle (`border: 1px solid #3cb371 IntersectionObserver` with `threshold: 0.3` */
  --sidebar-dark: #0e160d;
  --forest: #1a2318;
  --glass: #f0f3ec;
  --moss: #1f2b22;
  --deep-label: #3d4a3f;
  --sage: #6b7e6d;
  --lichen: #8a9e8c;
  --fern: #3cb371;
  --seafoam: #7bc8a4;
  --mint: #b8e0cc;
  --pulse: #8fbc5a;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--glass);
  color: var(--deep-label);
  font-family: "Nunito Sans", Inter, Lato, sans-serif;
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0.015em;
  overflow-x: hidden;
}

.noise-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.taxonomy {
  position: fixed;
  inset: 0 auto 0 0;
  width: 240px;
  background: var(--sidebar-dark);
  color: var(--sage);
  border-right: 1px solid rgba(138, 158, 140, 0.32);
  z-index: 20;
  padding: 38px 28px 32px;
  display: flex;
  flex-direction: column;
}

.taxonomy::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(var(--forest), var(--lichen), var(--forest));
  opacity: 0.18;
}

.domain-mark {
  color: #8a9e8c;
  font-weight: 200;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 17vh;
}

.node-index {
  position: relative;
  display: grid;
  gap: 32px;
  padding-left: 4px;
}

.node-index::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 9px;
  width: 1px;
  height: calc(100% - 18px);
  background: rgba(138, 158, 140, 0.28);
}

.node-index.pulse::before { animation: linePulse 600ms ease; }

.index-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 17px;
  color: var(--sage);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 200;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 300ms ease;
}

.node-dot {
  position: relative;
  z-index: 2;
  width: 8px;
  height: 8px;
  border: 1px solid var(--fern);
  border-radius: 50%;
  background: transparent;
  transition: background 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.index-node.active { color: var(--pulse); }
.index-node.active .node-dot { background: var(--fern); box-shadow: 0 0 0 6px rgba(60, 179, 113, 0.08); }
.index-node:hover { color: var(--pulse); }
.index-node:hover .node-dot { transform: scale(1.45); }

.taxonomic-note {
  margin-top: auto;
  font-size: 0.74rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(138, 158, 140, 0.62);
}

.observation-field {
  position: relative;
  margin-left: 240px;
  width: calc(100vw - 240px);
  min-height: 100vh;
  padding: 0 clamp(2rem, 5vw, 5rem);
}

.plate {
  position: relative;
  min-height: 86vh;
  padding: clamp(3.5rem, 7vh, 6rem) 0 clamp(4rem, 8vh, 7rem);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(1rem, 2vw, 2rem);
  opacity: 0.44;
  transition: opacity 200ms ease;
}

.plate.visible { opacity: 1; }

.plate h1 {
  grid-column: 1 / 4;
  margin: 0;
  color: var(--moss);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.plate-stage {
  position: relative;
  grid-row: 2;
  width: min(62vw, 780px);
  height: min(58vh, 560px);
  align-self: center;
}

.root-stage, .diatom-stage { grid-column: 1 / 6; margin-left: 5%; }
.leaf-stage { grid-column: 2 / 7; margin-left: 2%; }
.loop-stage { grid-column: 1 / 6; margin-left: 9%; }
.spore-stage { grid-column: 2 / 7; margin-left: -2%; }

.organism-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 1px 0 rgba(14, 22, 13, 0.03));
}

.label {
  position: absolute;
  max-width: 180px;
  color: var(--lichen);
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0.015em;
}

.label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 74px;
  height: 1px;
  background: var(--lichen);
  opacity: 0.72;
  transform-origin: left center;
}

.label-a { left: 2%; top: 18%; }
.label-a::after { left: calc(100% + 12px); transform: rotate(9deg); }
.label-b { right: 0; top: 30%; }
.label-b::after { right: calc(100% + 12px); transform: rotate(174deg); }
.label-c { left: 12%; bottom: 10%; }
.label-c::after { left: calc(100% + 12px); transform: rotate(-16deg); }

.leaf-stage .label-a { left: 7%; top: 13%; }
.leaf-stage .label-b { right: 6%; top: 50%; }
.leaf-stage .label-c { left: 23%; bottom: 3%; }
.loop-stage .label-a { left: 3%; top: 11%; }
.loop-stage .label-b { right: 1%; top: 38%; }
.loop-stage .label-c { left: 34%; bottom: 2%; }
.diatom-stage .label-a { left: 4%; top: 22%; }
.diatom-stage .label-b { right: 4%; top: 18%; }
.diatom-stage .label-c { left: 48%; bottom: 4%; }
.spore-stage .label-a { left: 9%; top: 14%; }
.spore-stage .label-b { right: 2%; top: 43%; }
.spore-stage .label-c { left: 31%; bottom: 1%; }

.plate-text {
  grid-row: 3;
  grid-column: 4 / 7;
  max-width: 540px;
  margin: -1rem 0 0;
  color: var(--deep-label);
}

.plate-divider {
  width: 60vw;
  max-width: 720px;
  height: clamp(6rem, 12vh, 10rem);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sage);
  font-size: 0.8rem;
  font-weight: 200;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.plate-divider::before, .plate-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(138, 158, 140, 0.52);
}

.plate-divider span { padding: 0 18px; }

.draw-path, .draw-group path, .draw-group circle {
  transition: stroke-dashoffset 1800ms cubic-bezier(0.4, 0, 0.2, 1), opacity 800ms ease, transform 800ms ease;
}

.organism-svg:not(.drawn) .draw-path,
.organism-svg:not(.drawn) .draw-group path,
.organism-svg:not(.drawn) .draw-group circle {
  opacity: 0;
  stroke-dashoffset: var(--dash, 600);
}

.organism-svg.drawn .draw-group:nth-child(2) path,
.organism-svg.drawn .draw-group:nth-child(2) circle { transition-delay: 120ms; }
.organism-svg.drawn .draw-group:nth-child(3) path,
.organism-svg.drawn .draw-group:nth-child(3) circle { transition-delay: 320ms; }
.organism-svg.drawn .draw-group:nth-child(4) path,
.organism-svg.drawn .draw-group:nth-child(4) circle { transition-delay: 520ms; }

.loop-svg.drawn .loop-paths path { animation: flowLoop 8s linear infinite; }
.diatom-svg.drawn .spores circle { animation: poreBreath 6s ease-in-out infinite; transform-origin: center; }
.diatom-svg.drawn .spores circle:nth-child(2n) { animation-delay: 1.4s; }
.spore-svg.drawn .spore-cells circle, .root-svg.drawn .terminals circle { animation: cellPulse 7s ease-in-out infinite; transform-origin: center; }

.cursor-organism {
  position: fixed;
  left: -32px;
  top: -32px;
  width: 64px;
  height: 64px;
  z-index: 15;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  will-change: transform;
}

.cursor-organism svg { width: 100%; height: 100%; opacity: 0.6; overflow: visible; }
.cursor-organism .filaments { opacity: 0.3; transform-origin: 32px 32px; transition: transform 180ms ease; }
.cursor-organism.active { opacity: 1; }

@keyframes linePulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } }
@keyframes flowLoop { to { stroke-dashoffset: -136; } }
@keyframes poreBreath { 0%, 100% { transform: scale(0.8); opacity: 0.55; } 50% { transform: scale(1.18); opacity: 0.95; } }
@keyframes cellPulse { 0%, 100% { opacity: 0.82; } 50% { opacity: 1; } }

@media (max-width: 860px) {
  .taxonomy { width: 190px; padding-inline: 20px; }
  .observation-field { margin-left: 190px; width: calc(100vw - 190px); }
  .node-name { font-size: 0.68rem; }
  .plate { grid-template-columns: 1fr; }
  .plate h1, .plate-text, .plate-stage { grid-column: 1; }
  .plate-stage { width: 100%; margin-left: 0; }
  .plate-text { margin-top: 1rem; }
}