:root {
  --loam: #07110D;
  --moss: #0F3D2E;
  --amethyst: #6E2C5C;
  --topaz: #B28A2E;
  --vellum: #D8C7A3;
  --oxide: #2F6F5E;
  --lichen: #A6C77B;
  --display: Jost, Poppins, Futura, "Century Gothic", "Avenir Next", sans-serif;
  --label: "League Spartan", Poppins, Futura, "Arial Narrow", sans-serif;
  --body: "Alegreya Sans", Inter, "Avenir Next", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: #07110D;
  color: #D8C7A3;
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 47%, rgba(178, 138, 46, .12) 0 1px, transparent 2px),
    radial-gradient(circle at 19% 82%, rgba(166, 199, 123, .08) 0 1px, transparent 2px),
    radial-gradient(circle at 63% 16%, rgba(110, 44, 92, .09), transparent 28%),
    linear-gradient(130deg, rgba(15, 61, 46, .32), transparent 38%, rgba(7, 17, 13, .84));
  mix-blend-mode: screen;
  opacity: .8;
  z-index: 1;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .26;
  background-image:
    radial-gradient(circle at 12% 17%, rgba(216, 199, 163, .18) 0 1px, transparent 1.6px),
    radial-gradient(circle at 78% 71%, rgba(166, 199, 123, .13) 0 1px, transparent 1.7px),
    radial-gradient(circle at 42% 49%, rgba(47, 111, 94, .2) 0 .8px, transparent 1.4px);
  background-size: 79px 83px, 113px 127px, 43px 47px;
}

.pressed-shadow {
  position: fixed;
  width: 18rem;
  height: 34rem;
  pointer-events: none;
  z-index: 0;
  opacity: .13;
  filter: blur(1px);
  border-left: 1px solid #2F6F5E;
  border-right: 1px solid #0F3D2E;
  transform: rotate(-18deg);
}

.pressed-shadow-one { left: 9vw; top: 130vh; }
.pressed-shadow-two { right: 6vw; top: 272vh; transform: rotate(22deg); border-color: #6E2C5C; }

.field-index {
  position: fixed;
  left: 3.2vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.index-mark {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(216, 199, 163, .48);
  cursor: pointer;
  font-family: var(--label);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 0 0 0 1rem;
  position: relative;
  writing-mode: vertical-rl;
  transition: color .5s ease, transform .5s ease;
}

.index-mark::before {
  content: "";
  position: absolute;
  left: .12rem;
  top: 0;
  width: 2px;
  height: 1.9rem;
  background: #2F6F5E;
  box-shadow: 0 0 0 transparent;
  transition: height .5s ease, background .5s ease, box-shadow .5s ease;
}

.index-mark.active { color: #D8C7A3; transform: translateX(.18rem); }
.index-mark.active::before { height: 3.8rem; background: #B28A2E; box-shadow: 0 0 18px rgba(178, 138, 46, .55); }

.field-book { position: relative; z-index: 3; }

.chamber {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.wordmark {
  position: absolute;
  left: 14vw;
  top: 18vh;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .48em;
  font-size: clamp(1.1rem, 2.6vw, 2.7rem);
  color: #D8C7A3;
  opacity: 0;
  transform: translateY(14px);
  animation: wordmarkIn 1.7s ease .45s forwards;
}

.micro-note,
.annotation,
.stamp,
.closing-line {
  font-family: var(--body);
  color: rgba(216, 199, 163, .72);
}

.trace-note {
  position: absolute;
  right: 14vw;
  bottom: 20vh;
  font-size: .95rem;
  letter-spacing: .08em;
  opacity: 0;
  animation: noteIn 1.2s ease 1.6s forwards;
}

.monopole-point,
.monopole-echo,
.final-seed {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #B28A2E;
  box-shadow: 0 0 12px rgba(178, 138, 46, .95), 0 0 38px rgba(178, 138, 46, .42), 0 0 88px rgba(166, 199, 123, .12);
}

.monopole-point { left: 77.2vw; top: 48.2vh; }
.monopole-point span {
  position: absolute;
  inset: -1.4rem;
  border: 1px solid rgba(178, 138, 46, .24);
  border-radius: 50%;
  animation: pulse 4.8s ease-in-out infinite;
}

svg { overflow: visible; }

.field-svg,
.leader-svg,
.contour-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.draw-line {
  fill: none;
  stroke: #2F6F5E;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .86;
  stroke-dasharray: var(--path-length, 900);
  stroke-dashoffset: var(--path-length, 900);
  transition: stroke-dashoffset 2.4s cubic-bezier(.22, .72, .15, 1), opacity .9s ease;
}

.chamber.active .draw-line,
.draw-line.visible { stroke-dashoffset: 0; }

.primary-line { stroke: #D8C7A3; stroke-width: 1.05; }
.faint-line { stroke: #2F6F5E; opacity: .37; }
.root-line { stroke: #A6C77B; opacity: .52; }
.delay-one { transition-delay: .42s; }
.delay-two { transition-delay: .82s; }
.delay-three { transition-delay: 1.12s; }
.delay-four { transition-delay: 1.42s; }

.annotation {
  position: absolute;
  max-width: 16rem;
  padding: .8rem .95rem;
  border-left: 1px solid rgba(178, 138, 46, .6);
  background: linear-gradient(90deg, rgba(15, 61, 46, .58), rgba(15, 61, 46, .06));
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .9s ease, transform .9s ease;
}

.chamber.active .annotation { opacity: 1; transform: translateY(0); }
.annotation b {
  display: block;
  margin-bottom: .35rem;
  color: #A6C77B;
  font-family: var(--label);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.annotation span { display: block; line-height: 1.45; font-size: .98rem; }
.annotation-trace { left: 12vw; bottom: 16vh; transition-delay: 1.2s; }

.specimen { background: radial-gradient(circle at 33% 58%, rgba(15, 61, 46, .35), transparent 34%); }
.plate {
  position: absolute;
  left: 14vw;
  top: 9vh;
  width: min(42vw, 35rem);
  height: 82vh;
  border: 1px solid rgba(216, 199, 163, .16);
  background: linear-gradient(145deg, rgba(216, 199, 163, .05), rgba(15, 61, 46, .14));
  box-shadow: inset 0 0 0 1px rgba(47, 111, 94, .18);
}

.botanical { width: 100%; height: 100%; padding: 6%; }
.plant-line { stroke: #D8C7A3; stroke-width: 1.5; }
.leaf { fill: rgba(47, 111, 94, .42); stroke: #A6C77B; stroke-width: 1.2; }
.leaf.small { fill: rgba(15, 61, 46, .6); }
.leaf-vein, .compass-ticks path { fill: none; stroke: #D8C7A3; stroke-width: .75; opacity: .62; }
.dew { fill: #B28A2E; opacity: .92; filter: drop-shadow(0 0 5px rgba(178, 138, 46, .7)); }
.leaf-cluster { transform-box: fill-box; transform-origin: 70% 80%; transition: transform 2.2s ease; }
.chamber.active .lean-left { transform: rotate(-2deg) translateX(3px); }
.chamber.active .lean-right { transform: rotate(2.2deg) translateX(-4px); }
.chamber.active .slow { transition-delay: .9s; }

.specimen-label { right: 13vw; top: 22vh; transition-delay: .5s; }
.leader-line { stroke: #D8C7A3; opacity: .45; stroke-width: .8; }
.stamp {
  position: absolute;
  right: 18vw;
  bottom: 18vh;
  width: 6.4rem;
  height: 6.4rem;
  border: 1px solid rgba(110, 44, 92, .9);
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--label);
  color: #D8C7A3;
  letter-spacing: .17em;
  text-transform: uppercase;
  font-size: .64rem;
  transform: rotate(-12deg);
  opacity: .72;
}

.bend { background: radial-gradient(circle at 77% 48%, rgba(178, 138, 46, .08), transparent 22%), radial-gradient(circle at 27% 75%, rgba(110, 44, 92, .17), transparent 24%); }
.contour { stroke: #2F6F5E; opacity: .58; }
.contour.amethyst { stroke: #6E2C5C; opacity: .66; }
.mycelium { stroke: #A6C77B; opacity: .35; stroke-width: .8; }
.monopole-echo { left: 77vw; top: 47vh; width: 9px; height: 9px; animation: pulse 5.2s ease-in-out infinite; }
.bend-note { left: 15vw; top: 19vh; transition-delay: .35s; }
.mineral-slice {
  position: absolute;
  right: 12vw;
  bottom: 13vh;
  width: 18rem;
  height: 8rem;
  border: 1px solid rgba(216, 199, 163, .13);
  border-radius: 50%;
  transform: rotate(-8deg);
  background: radial-gradient(ellipse at 50% 50%, rgba(15, 61, 46, .7), rgba(7, 17, 13, .05) 68%);
}
.mineral-slice i {
  position: absolute;
  inset: calc(8% * var(--n, 1));
  border: 1px solid rgba(47, 111, 94, .32);
  border-radius: 50%;
}
.mineral-slice i:nth-child(1) { --n: 1; border-color: rgba(178, 138, 46, .32); }
.mineral-slice i:nth-child(2) { --n: 2; }
.mineral-slice i:nth-child(3) { --n: 3; border-color: rgba(110, 44, 92, .43); }
.mineral-slice i:nth-child(4) { --n: 4; }

.signal { background: linear-gradient(180deg, #07110D, #050A08); }
.blank-plate {
  position: absolute;
  left: 18vw;
  top: 15vh;
  width: 62vw;
  height: 64vh;
  border: 1px solid rgba(216, 199, 163, .11);
  background: linear-gradient(120deg, rgba(216, 199, 163, .035), rgba(7, 17, 13, .15));
}
.final-paths { position: absolute; inset: 0; width: 100%; height: 100%; }
.final-line { stroke: #D8C7A3; opacity: .5; }
.final-seed { left: 72%; top: 18%; width: 10px; height: 10px; }
.signal-note { right: 11vw; top: 21vh; }
.closing-line {
  position: absolute;
  left: 17vw;
  bottom: 13vh;
  max-width: 31rem;
  font-size: clamp(1.15rem, 2vw, 2rem);
  line-height: 1.35;
  letter-spacing: .03em;
  color: rgba(216, 199, 163, .78);
}

@keyframes wordmarkIn { to { opacity: .93; transform: translateY(0); } }
@keyframes noteIn { to { opacity: .74; transform: translateY(0); } }
@keyframes pulse {
  0%, 100% { transform: scale(.86); opacity: .72; }
  50% { transform: scale(1.25); opacity: 1; }
}

@media (max-width: 760px) {
  .field-index { left: 1rem; gap: .9rem; }
  .wordmark { left: 18vw; top: 17vh; letter-spacing: .26em; }
  .monopole-point { left: 69vw; top: 50vh; }
  .annotation-trace, .bend-note { left: 19vw; }
  .trace-note { right: 7vw; bottom: 26vh; }
  .plate { left: 19vw; width: 69vw; height: 63vh; top: 12vh; }
  .specimen-label { right: 5vw; top: 76vh; }
  .stamp { right: 9vw; bottom: 7vh; }
  .mineral-slice { right: 5vw; width: 12rem; }
  .blank-plate { left: 18vw; width: 72vw; }
  .closing-line { left: 18vw; right: 8vw; }
}