:root {
  /* Interactive Elements Intersection Observer triggers station entrance animations at `threshold: 0.3`. */
  --bench-dark: #3d2a1a;
  --bench-light: #4e3524;
  --parchment: #f2dcc4;
  --burnt-sienna: #c45a2d;
  --amber: #d4943a;
  --spectral-teal: #3a8a7a;
  --moss: #5e7a52;
  --ink: #1a0f08;
  --lichen: #a89880;
  --text-dark: #2e1e10;
  --annotation: #8b5e3c;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: y proximity; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Nunito", Inter, sans-serif;
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  line-height: 1.72;
  color: var(--text-dark);
  background: var(--bench-dark);
  perspective: 1200px;
}

.defs { position: absolute; pointer-events: none; }

.background-plane {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 12% 22%, rgba(212,148,58,0.12), transparent 24%),
    radial-gradient(circle at 78% 64%, rgba(58,138,122,0.10), transparent 30%),
    repeating-linear-gradient(92deg, rgba(168,152,128,0.08) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(176deg, var(--bench-dark) 0 18px, var(--bench-light) 19px 31px, #2c1b10 32px 38px);
  filter: contrast(1.08) saturate(0.94);
}

.background-plane::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.23;
  background-image:
    linear-gradient(110deg, transparent 0 44%, rgba(242,220,196,0.08) 45%, transparent 46% 100%),
    radial-gradient(ellipse at 24% 35%, transparent 0 18%, rgba(26,15,8,0.38) 19%, transparent 21%),
    radial-gradient(ellipse at 71% 49%, transparent 0 12%, rgba(26,15,8,0.26) 13%, transparent 16%);
  mix-blend-mode: overlay;
}

.field-veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.28;
}
.field-veil svg { width: 100%; height: 100%; }
.field-veil path {
  fill: none;
  stroke: var(--spectral-teal);
  stroke-width: 1.5;
  stroke-dasharray: 12 22;
  animation: veilDrift 18s linear infinite;
}

.content-plane { position: relative; z-index: 2; }
.discovery-station {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1.2rem, 4vw, 4rem);
  scroll-snap-align: start;
  overflow: hidden;
}
.station-inner { width: min(1180px, 100%); position: relative; }

h1, h2 {
  font-family: "Baloo 2", "Nunito", sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.04;
}

.opening-artifact { text-align: center; transform-style: preserve-3d; }
.specimen-jar {
  width: 190px;
  height: 245px;
  margin: 0 auto;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 34px 34px 24px 24px;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.34), transparent 30% 70%, rgba(255,255,255,0.12)),
    radial-gradient(circle at 50% 52%, rgba(58,138,122,0.28), transparent 47%),
    rgba(242,220,196,0.68);
  border: 1px solid rgba(242,220,196,0.55);
  box-shadow: 0 22px 42px rgba(26,15,8,0.48), inset 8px 6px 22px rgba(255,255,255,0.20), inset -12px -18px 26px rgba(26,15,8,0.13);
  backdrop-filter: blur(1px);
}
.hero-jar { opacity: 0; animation: jarArrive 900ms ease-out 800ms forwards; }
.jar-lid {
  position: absolute;
  top: -18px;
  left: 18px;
  right: 18px;
  height: 34px;
  border-radius: 10px 10px 6px 6px;
  background: repeating-linear-gradient(90deg, var(--bench-dark) 0 8px, var(--bench-light) 9px 17px);
  box-shadow: 0 7px 13px rgba(26,15,8,0.34);
}
.glass-shine { position: absolute; inset: 28px auto auto 34px; width: 34px; height: 145px; border-radius: 50%; background: rgba(255,255,255,0.18); transform: rotate(12deg); }
.monopole-pulse { width: 160px; height: 160px; overflow: visible; }
.pulse-field path { stroke-dasharray: 75; animation: radialBreath 4s ease-in-out infinite; transform-origin: 90px 90px; }
.orb-core { filter: drop-shadow(0 0 14px rgba(196,90,45,0.9)); animation: orbPulse 4s ease-in-out infinite; }
.orb-glow { animation: haloPulse 4s ease-in-out infinite; transform-origin: 90px 90px; }
.opening-note {
  min-height: 2.3em;
  margin: 2.3rem auto 0;
  color: var(--parchment);
  font-family: "Caveat", cursive;
  font-size: clamp(1.45rem, 3.4vw, 2.35rem);
  text-shadow: 0 3px 12px rgba(26,15,8,0.65);
}

.scattered-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: clamp(1rem, 3vw, 2.4rem);
  align-items: center;
  transform-style: preserve-3d;
}
.paper-card {
  position: relative;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(139,94,60,0.15) 24px 25px),
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.32), transparent 28%),
    linear-gradient(135deg, #fff0d2, var(--parchment) 58%, #dec39e);
  border: 1px solid rgba(139,94,60,0.36);
  border-radius: 11px;
  clip-path: polygon(1% 2%, 98% 0, 100% 4%, 99% 96%, 96% 100%, 4% 99%, 0 96%, 1% 55%, 0 51%);
  box-shadow: 6px 11px 27px rgba(26,15,8,0.38);
}
.note-card {
  min-height: 470px;
  padding: clamp(1.1rem, 2.4vw, 1.7rem);
  opacity: 0;
  transition: opacity 620ms ease, transform 820ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.note-card h1, .diagram-sheet h1 {
  margin: 0 0 1rem;
  color: var(--ink);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 700;
}
.note-card h1 { font-size: clamp(1.8rem, 3.1vw, 2.55rem); }
.card-a { transform: translate3d(-70px, 54px, -40px) rotate(-7deg); }
.card-b { transform: translate3d(0, -72px, 55px) rotate(3deg); z-index: 2; }
.card-c { transform: translate3d(70px, 44px, -20px) rotate(6deg); }
.is-visible .card-a { opacity: 1; transform: translate3d(-16px, 20px, 0) rotate(-3deg); }
.is-visible .card-b { opacity: 1; transform: translate3d(0, -18px, 55px) rotate(1.5deg); transition-delay: 120ms; }
.is-visible .card-c { opacity: 1; transform: translate3d(16px, 13px, 0) rotate(2.6deg); transition-delay: 240ms; }
.wax-stamp {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--parchment);
  font-family: "Caveat", cursive;
  font-size: 1.35rem;
  background: radial-gradient(circle at 36% 28%, var(--amber), var(--burnt-sienna) 62%, #873a20);
  box-shadow: inset 0 -3px 8px rgba(26,15,8,0.28), 0 3px 8px rgba(26,15,8,0.26);
}
.journal-drawing {
  width: 100%;
  height: 155px;
  margin: 0.35rem 0 0.45rem;
  border: 1px dashed rgba(139,94,60,0.34);
  border-radius: 8px;
  background: rgba(255,255,255,0.18);
}
.annotation {
  margin: 0.3rem 0 0.7rem;
  font-family: "Caveat", cursive;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: var(--annotation);
  transform: rotate(-1deg);
}
.note-card p:not(.annotation), .specimen-note p { margin: 0; color: var(--text-dark); font-weight: 400; }

.wide-artifact { display: grid; place-items: center; }
.diagram-sheet {
  width: 100%;
  padding: clamp(1.2rem, 3.8vw, 3rem);
  opacity: 0;
  transform: translateY(70px) rotate(-1deg);
  transition: opacity 720ms ease, transform 900ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.station-three.is-visible .diagram-sheet { opacity: 1; transform: translateY(0) rotate(-0.6deg); }
.large-field { width: 100%; height: auto; min-height: 330px; }
.traced-fields path, .closing-path {
  stroke-dasharray: 540;
  stroke-dashoffset: 540;
}
.station-three.is-visible .traced-fields path { animation: drawField 3s ease forwards, fieldGlow 4s ease-in-out infinite 3s; }
.station-three.is-visible .traced-fields path:nth-child(2) { animation-delay: 130ms, 3.1s; }
.station-three.is-visible .traced-fields path:nth-child(3) { animation-delay: 260ms, 3.2s; }
.station-three.is-visible .traced-fields path:nth-child(4) { animation-delay: 390ms, 3.3s; }
.station-three.is-visible .traced-fields path:nth-child(5) { animation-delay: 520ms, 3.4s; }
.station-three.is-visible .traced-fields path:nth-child(6) { animation-delay: 650ms, 3.5s; }
.station-three.is-visible .traced-fields path:nth-child(7) { animation-delay: 780ms, 3.6s; }
.station-three.is-visible .traced-fields path:nth-child(8) { animation-delay: 910ms, 3.7s; }
.diagram-core { filter: drop-shadow(0 0 16px rgba(196,90,45,0.8)); animation: orbPulse 4s ease-in-out infinite; }
.diagram-halo { animation: haloPulse 4s ease-in-out infinite; transform-origin: 450px 210px; }

.ring-lab { color: var(--parchment); }
.station-title {
  margin: 0 0 2rem;
  text-align: center;
  color: var(--parchment);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  text-shadow: 0 5px 18px rgba(26,15,8,0.72);
}
.curiosity-ring {
  position: relative;
  min-height: 590px;
  display: grid;
  place-items: center;
}
.central-relic { width: 170px; height: 205px; opacity: 0; transform: scale(0.76); transition: opacity 600ms ease, transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.station-four.is-visible .central-relic { opacity: 1; transform: scale(1); }
.search-pulse { width: 145px; height: 145px; }
.scan-ring { animation: scanPulse 2.6s ease-out infinite; transform-origin: 80px 80px; }
.specimen-note {
  position: absolute;
  width: min(245px, 42vw);
  padding: 1rem 1.1rem;
  background: rgba(242,220,196,0.94);
  border: 1px solid rgba(139,94,60,0.33);
  border-radius: 10px;
  box-shadow: 5px 10px 22px rgba(26,15,8,0.35);
  opacity: 0;
  transition: opacity 560ms ease, transform 780ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.specimen-note h2 { margin: 0 0 0.25rem; color: var(--burnt-sienna); font-size: 1.6rem; }
.specimen-note p { font-size: 0.92rem; line-height: 1.52; }
.note-north { top: 0; left: 50%; transform: translate(-50%, -45px) rotate(-4deg); }
.note-east { top: 45%; right: 0; transform: translate(60px, -50%) rotate(5deg); }
.note-south { bottom: 0; left: 50%; transform: translate(-50%, 55px) rotate(3deg); }
.note-west { top: 45%; left: 0; transform: translate(-60px, -50%) rotate(-5deg); }
.station-four.is-visible .specimen-note { opacity: 1; }
.station-four.is-visible .note-north { transform: translate(-50%, 0) rotate(-3deg); transition-delay: 160ms; }
.station-four.is-visible .note-east { transform: translate(0, -50%) rotate(3deg); transition-delay: 300ms; }
.station-four.is-visible .note-south { transform: translate(-50%, 0) rotate(2deg); transition-delay: 440ms; }
.station-four.is-visible .note-west { transform: translate(0, -50%) rotate(-3deg); transition-delay: 580ms; }

.station-five { background: radial-gradient(circle at 50% 35%, rgba(58,138,122,0.13), transparent 35%), var(--ink); }
.closing-meditation { text-align: center; color: var(--parchment); }
.closing-trace { width: min(900px, 100%); height: auto; overflow: visible; filter: drop-shadow(0 0 18px rgba(58,138,122,0.35)); }
.station-five.is-visible .closing-path { animation: drawField 5s ease forwards; }
.closing-meditation h1 {
  margin: 1.2rem 0 0;
  color: var(--parchment);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 500;
  opacity: 0;
  transform: translateY(22px);
}
.station-five.is-visible .closing-meditation h1 { animation: fadeUp 900ms ease 4.8s forwards; }

.foreground-plane { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.spore {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,148,58,0.76), rgba(212,148,58,0) 72%);
  box-shadow: 0 0 16px rgba(212,148,58,0.45);
}
.spore-a { left: 11%; top: 74%; animation: sporeFloat 10s ease-in-out infinite; }
.spore-b { left: 72%; top: 19%; width: 6px; height: 6px; animation: sporeFloat 13s ease-in-out -3s infinite reverse; }
.spore-c { left: 89%; top: 62%; width: 11px; height: 11px; animation: sporeFloat 12s ease-in-out -5s infinite; }
.spore-d { left: 29%; top: 31%; width: 5px; height: 5px; animation: sporeFloat 9s ease-in-out -1s infinite reverse; }
.mushroom { position: absolute; width: 108px; opacity: 0.64; filter: drop-shadow(0 10px 13px rgba(26,15,8,0.38)); }
.mushroom-a { left: -18px; bottom: 14%; transform: rotate(-9deg); animation: fungusBob 9s ease-in-out infinite; }
.mushroom-b { right: -18px; top: 23%; transform: rotate(10deg); animation: fungusBob 11s ease-in-out -2s infinite; }

.compass {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 4;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.7) rotate(-30deg);
  animation: compassArrive 800ms ease-out 4.1s forwards;
  filter: drop-shadow(0 5px 12px rgba(26,15,8,0.45));
}
.compass svg { width: 100%; height: 100%; }
.needle, .needle-tail { transform-origin: 42px 42px; transition: transform 120ms linear; }

@keyframes jarArrive { to { opacity: 1; transform: translateY(0) scale(1); } from { opacity: 0; transform: translateY(28px) scale(0.92); } }
@keyframes radialBreath { 0%,100% { stroke-dashoffset: 62; opacity: 0.58; transform: scale(0.92); } 50% { stroke-dashoffset: 0; opacity: 1; transform: scale(1.04); } }
@keyframes orbPulse { 0%,100% { transform: scale(0.88); fill: var(--burnt-sienna); } 50% { transform: scale(1.2); fill: var(--amber); } }
@keyframes haloPulse { 0%,100% { transform: scale(0.8); opacity: 0.22; } 50% { transform: scale(1.2); opacity: 0.54; } }
@keyframes drawField { to { stroke-dashoffset: 0; } }
@keyframes fieldGlow { 0%,100% { stroke: var(--spectral-teal); opacity: 0.72; } 50% { stroke: var(--amber); opacity: 1; } }
@keyframes scanPulse { 0% { transform: scale(0.65); opacity: 1; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes sporeFloat { 0%,100% { transform: translate3d(0, 0, 0); opacity: 0.26; } 50% { transform: translate3d(42px, -95px, 0); opacity: 0.9; } }
@keyframes fungusBob { 0%,100% { translate: 0 0; } 50% { translate: 0 -18px; } }
@keyframes veilDrift { to { stroke-dashoffset: -340; } }
@keyframes compassArrive { to { opacity: 1; transform: scale(1) rotate(0); } }

@media (max-width: 860px) {
  .scattered-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .note-card, .card-a, .card-b, .card-c, .is-visible .card-a, .is-visible .card-b, .is-visible .card-c { min-height: auto; transform: rotate(-1deg); }
  .curiosity-ring { min-height: auto; display: grid; gap: 1rem; padding-top: 0; }
  .central-relic, .specimen-note, .note-north, .note-east, .note-south, .note-west,
  .station-four.is-visible .note-north, .station-four.is-visible .note-east, .station-four.is-visible .note-south, .station-four.is-visible .note-west {
    position: relative; inset: auto; width: min(100%, 360px); transform: none; margin: 0 auto;
  }
  .station-four.is-visible .specimen-note { transform: none; }
  .large-field { min-height: 220px; }
  .compass { width: 62px; height: 62px; }
}