:root {
  --midnight-bark: #0d1117;
  --understory: #0f1923;
  --twilight-branch: #2a3a4a;
  --aged-parchment: #e8dcc8;
  --silvered-twilight: #9aacb8;
  --aurora-mint: #5ee8a0;
  --dusk-violet: #7b5ea7;
  --amber-lamplight: #d4a574;
  --northern-verdance: #2ee88a;
  --boreal-violet: #8a5ed4;
  --deep-green: #1e3a2a;
  --leaf-green: #2a4a3a;
  --label-ground: #162230;
  --aurora-gradient: linear-gradient(180deg, #2ee88a 0%, #5ee8a0 25%, #7b5ea7 60%, #8a5ed4 100%);
}

/* Design terms: Intersection Observer scroll-triggered visibility Each has `threshold: 0.3` once Observer. (Google */

* { box-sizing: border-box; }

html { background: var(--midnight-bark); }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 22%, rgba(94, 232, 160, 0.04), transparent 28rem),
    radial-gradient(circle at 76% 52%, rgba(123, 94, 167, 0.05), transparent 34rem),
    var(--midnight-bark);
  color: var(--silvered-twilight);
  font-family: "Source Sans 3", Inter, sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

.arboretum-shell {
  position: relative;
  min-height: 400vh;
}

.canopy-header {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--midnight-bark);
}

.canopy-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40vh;
  background: var(--aurora-gradient);
  opacity: 0.15;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
  pointer-events: none;
}

.aurora-field {
  position: absolute;
  inset: -8vh -10vw auto -10vw;
  height: 52vh;
  opacity: 1;
  animation: aurora-drift 20s ease-in-out infinite alternate;
}

.aurora-field svg { width: 120%; height: 100%; }
.aurora-one { opacity: 0.15; }
.aurora-two { opacity: 0.1; }
.aurora-three { opacity: 0.08; }

.canopy-copy {
  position: relative;
  z-index: 2;
  padding-left: 12vw;
  width: min(980px, 88vw);
  animation: title-emerge 4s ease forwards;
}

.classification,
.specimen-id,
.label-block {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  line-height: 1.65;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5e8a6e;
}

h1,
h2,
h3,
.footer-mark {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--aged-parchment);
}

h1 {
  margin: 0.2rem 0 1.1rem;
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.hero-note {
  max-width: 620px;
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.8;
  color: rgba(154, 172, 184, 0.86);
}

.trunk-line {
  position: absolute;
  z-index: 1;
  left: clamp(24rem, 55vw, 55rem);
  bottom: -18vh;
  width: 1px;
  height: 38vh;
  background: linear-gradient(to bottom, rgba(232, 220, 200, 0.38), rgba(94, 232, 160, 0.18), transparent);
}

.specimen-intro {
  position: relative;
  min-height: 55vh;
  display: grid;
  place-items: center;
  padding: 18vh 10vw 10vh;
}

.specimen-intro > div {
  max-width: 820px;
}

h2 {
  margin: 0.4rem 0 0;
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: 0.015em;
}

.branch-sketch {
  position: absolute;
  fill: none;
  stroke: var(--twilight-branch);
  stroke-width: 1;
  stroke-dasharray: 8 10;
  opacity: 0.75;
}

.branch-left { left: 2vw; top: 14vh; width: min(260px, 28vw); }
.branch-right { right: 1vw; top: 4vh; width: min(300px, 30vw); }

.ring-diagram {
  position: absolute;
  fill: none;
  stroke: var(--aurora-mint);
  stroke-width: 1.2;
  opacity: 0.48;
  animation: ring-pulse 4s ease-in-out infinite;
  transform-origin: center;
}

.ring-diagram circle:nth-child(1) { stroke-dasharray: 8 7; stroke: #2ee88a; }
.ring-diagram circle:nth-child(2) { stroke-dasharray: 3 9; stroke: #5ee8a0; }
.ring-diagram circle:nth-child(3) { stroke-dasharray: 16 11; stroke: #7b5ea7; }
.ring-diagram circle:nth-child(4) { stroke-dasharray: 5 5; stroke: #8a5ed4; }
.ring-a { right: 12vw; bottom: 2vh; width: 180px; animation-delay: 1.5s; }
.ring-b { left: 14vw; top: 12vh; width: 220px; animation-delay: 3s; }

.specimen-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 150px;
  gap: clamp(1rem, 2vw, 1.8rem);
  padding: 6vh 7vw 18vh;
}

.specimen-grid::before,
.specimen-grid::after {
  content: "";
  position: absolute;
  width: 34vw;
  height: 34vw;
  border: 1px solid rgba(42, 58, 74, 0.45);
  border-radius: 50%;
  pointer-events: none;
  animation: ring-pulse 4s ease-in-out infinite;
}

.specimen-grid::before { left: -18vw; top: 14vh; }
.specimen-grid::after { right: -20vw; bottom: 20vh; animation-delay: 1.5s; }

.specimen-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1.5rem;
  border: 2px solid var(--twilight-branch);
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 62px, rgba(42, 58, 74, 0.42) 63px, transparent 64px),
    radial-gradient(circle at 50% 18%, rgba(212, 165, 116, 0.07), transparent 12rem),
    var(--understory);
  opacity: 0.15;
  transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1), border-color 1.8s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 1.8s ease;
}

.specimen-card.is-visible {
  opacity: 1;
  border-color: var(--aurora-mint);
  box-shadow: 0 0 38px rgba(94, 232, 160, 0.07), inset 0 0 44px rgba(94, 232, 160, 0.025);
}

.specimen-card.examined {
  border-color: var(--twilight-branch);
}

.specimen-card.tall { grid-row: span 4; }
.specimen-card.medium { grid-row: span 3; }
.specimen-card.wide { grid-column: span 2; grid-row: span 3; }

.specimen-id { margin: 0 0 1rem; }

.specimen-stage {
  position: relative;
  flex: 1;
  min-height: 140px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid rgba(42, 58, 74, 0.72);
  background: radial-gradient(circle at center, rgba(94, 232, 160, 0.055), transparent 70%);
}

.tree-shape {
  position: relative;
  width: min(45%, 145px);
  height: 78%;
  min-height: 128px;
  background: var(--deep-green);
  clip-path: polygon(48% 0, 62% 22%, 56% 22%, 72% 48%, 62% 48%, 83% 77%, 56% 77%, 56% 100%, 43% 100%, 43% 77%, 17% 77%, 38% 48%, 29% 48%, 45% 22%, 38% 22%);
  filter: drop-shadow(0 18px 12px rgba(0, 0, 0, 0.3));
}

.oak .tree-shape,
.zelkova .tree-shape {
  width: min(58%, 230px);
  clip-path: polygon(45% 100%, 45% 70%, 24% 76%, 30% 60%, 8% 54%, 27% 42%, 17% 28%, 39% 29%, 50% 9%, 62% 29%, 84% 27%, 74% 42%, 94% 54%, 70% 61%, 77% 77%, 55% 70%, 55% 100%);
}

.maple .tree-shape,
.cherry .tree-shape {
  background: var(--leaf-green);
  clip-path: polygon(48% 100%, 48% 70%, 28% 78%, 36% 62%, 15% 61%, 35% 49%, 20% 37%, 43% 40%, 50% 16%, 58% 40%, 82% 36%, 66% 49%, 86% 61%, 65% 62%, 73% 79%, 53% 70%, 53% 100%);
}

.birch .tree-shape {
  width: min(32%, 90px);
  background: linear-gradient(90deg, #2a4a3a 0 12%, #1e3a2a 12% 27%, #2a4a3a 27% 100%);
  clip-path: polygon(44% 100%, 44% 15%, 28% 24%, 39% 7%, 50% 0, 61% 8%, 72% 24%, 56% 15%, 56% 100%);
}

.ginkgo .tree-shape {
  clip-path: polygon(48% 100%, 48% 68%, 22% 68%, 10% 50%, 17% 28%, 38% 17%, 50% 31%, 63% 17%, 84% 29%, 91% 50%, 77% 68%, 53% 68%, 53% 100%);
}

.yew .tree-shape { width: min(38%, 110px); }

.pressed-leaf {
  position: absolute;
  width: min(42%, 150px);
  max-height: 82%;
  right: 10%;
  top: 9%;
  opacity: 0.3;
  fill: rgba(94, 232, 160, 0.2);
  stroke: rgba(94, 232, 160, 0.55);
  stroke-width: 1.2;
}

.oak-leaf,
.maple-leaf,
.ginkgo-leaf { left: 10%; right: auto; top: 12%; }
.needle-leaf { right: 16%; }

.label-block {
  margin: 0 0 1rem;
  padding: 0.72rem 0.85rem;
  background: var(--label-ground);
  border-left: 1px solid rgba(212, 165, 116, 0.55);
}

h3 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.55rem, 2.8vw, 2.45rem);
  line-height: 1;
  font-weight: 700;
  color: var(--amber-lamplight);
}

.specimen-card p:last-child {
  margin: 0;
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: var(--silvered-twilight);
}

.between-rings {
  position: relative;
  min-height: 70vh;
}

.root-system {
  position: relative;
  min-height: 85vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(to bottom, transparent, rgba(15, 25, 35, 0.45)),
    var(--midnight-bark);
}

.root-system svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--deep-green);
  stroke-width: 2;
  opacity: 0.62;
}

.root-system .classification {
  position: absolute;
  top: 36%;
  color: rgba(94, 138, 110, 0.55);
}

.footer-mark {
  position: relative;
  margin: 0;
  font-size: clamp(2rem, 7vw, 6rem);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: rgba(232, 220, 200, 0.075);
}

@keyframes ring-pulse {
  0%, 100% { transform: scale(0.98); opacity: 0.4; }
  50% { transform: scale(1.02); opacity: 0.7; }
}

@keyframes aurora-drift {
  0% { transform: translateX(-5vw) scaleX(1); }
  100% { transform: translateX(5vw) scaleX(1.15); }
}

@keyframes title-emerge {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@media (max-width: 760px) {
  .canopy-copy { padding-left: 8vw; width: 92vw; }
  .trunk-line { left: 78vw; }
  .specimen-grid { grid-template-columns: 1fr; grid-auto-rows: auto; padding-inline: 6vw; }
  .specimen-card,
  .specimen-card.tall,
  .specimen-card.medium,
  .specimen-card.wide { grid-column: span 1; grid-row: auto; min-height: 540px; }
  .specimen-card.wide { min-height: 500px; }
  .branch-left, .branch-right { opacity: 0.32; width: 54vw; }
  .ring-a { right: 4vw; width: 130px; }
}