:root {
  /* IBM Plex Mono used sparingly for specimen coordinates. */
  --mist-matcha: #DDEFD1;
  --young-leaf: #93C66B;
  --midori-core: #2F7D3B;
  --moss-velvet: #23452B;
  --jade-black: #07170F;
  --rice-paper: #F7F1DF;
  --firefly-gold: #D9F26A;
  --persimmon-seal: #E36F3D;
  --serif: Fraunces, Georgia, Cambria, "Times New Roman", serif;
  --jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--jade-black);
  background: var(--mist-matcha);
  font-family: var(--sans);
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .28;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(247,241,223,.55) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 48%, rgba(35,69,43,.18) 0 1px, transparent 1px),
    linear-gradient(110deg, transparent 0 47%, rgba(247,241,223,.25) 48% 49%, transparent 50%);
  background-size: 21px 19px, 31px 29px, 140px 100%;
  mix-blend-mode: multiply;
}

.scene {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 5rem);
}

.vine-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500vh;
  z-index: 4;
  pointer-events: none;
}

#vinePath {
  fill: none;
  stroke: rgba(47,125,59,.4);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 18;
}

.seed-dot {
  --seed-x: 12vw;
  --seed-y: 78vh;
  position: fixed;
  left: var(--seed-x);
  top: var(--seed-y);
  width: 22px;
  height: 22px;
  z-index: 8;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 32% 24%, var(--rice-paper) 0 15%, transparent 16%),
    radial-gradient(circle at 58% 65%, var(--firefly-gold), var(--young-leaf) 48%, var(--midori-core) 72%);
  box-shadow: 0 0 22px rgba(217,242,106,.55), 0 10px 20px rgba(7,23,15,.22);
  transition: width .6s ease, height .6s ease, box-shadow .6s ease, background .6s ease;
}

.seed-dot span {
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(217,242,106,.42);
  border-radius: inherit;
  animation: seedPulse 3.8s ease-in-out infinite;
}

.seed-dot.firefly {
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, var(--rice-paper) 0 12%, var(--firefly-gold) 28%, transparent 72%);
  box-shadow: 0 0 18px var(--firefly-gold), 0 0 48px rgba(217,242,106,.7);
}

.transect-nav {
  position: fixed;
  right: 1.2rem;
  top: 50%;
  z-index: 9;
  transform: translateY(-50%);
  display: grid;
  gap: .6rem;
}

.transect-nav a {
  color: currentColor;
  text-decoration: none;
  font: 600 .68rem/1 var(--mono);
  letter-spacing: .08em;
  padding: .45rem .5rem;
  border-radius: 999px;
  background: rgba(247,241,223,.52);
  backdrop-filter: blur(8px);
}

.mono { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; font-size: .74rem; }
.jp { font-family: var(--jp); letter-spacing: .08em; }

h1, h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -.055em;
}

.mist-scene {
  background:
    radial-gradient(circle at 18% 28%, rgba(247,241,223,.9), transparent 32%),
    radial-gradient(circle at 80% 5%, rgba(147,198,107,.55), transparent 38%),
    linear-gradient(135deg, var(--mist-matcha), #eef6dd 48%, var(--young-leaf));
}

.mist-copy {
  position: absolute;
  left: clamp(1.5rem, 6vw, 6rem);
  top: 18vh;
  max-width: 76rem;
}

.mist-copy h1 {
  color: rgba(47,125,59,.92);
  font-size: clamp(5rem, 17vw, 18rem);
  line-height: .72;
  text-shadow: 0 1.5rem 4rem rgba(47,125,59,.16);
}

.punct { color: var(--firefly-gold); text-shadow: 0 0 26px rgba(217,242,106,.9); }
.mist-copy .note { width: min(31rem, 78vw); font-size: 1.05rem; line-height: 1.75; }
.hanko {
  position: absolute;
  right: 15vw;
  bottom: 18vh;
  width: 4.5rem;
  height: 4.5rem;
  display: grid;
  place-items: center;
  color: var(--persimmon-seal);
  border: 3px solid var(--persimmon-seal);
  border-radius: 28% 42% 31% 38%;
  font-family: var(--jp);
  font-size: 2rem;
  transform: rotate(-9deg);
  opacity: .75;
}

.steam-field i {
  position: absolute;
  border: 2px solid rgba(247,241,223,.58);
  border-radius: 999px;
  animation: steam 11s ease-in-out infinite;
}
.steam-field i:nth-child(1){ width: 14rem; height: 5rem; left: 7%; top: 15%; }
.steam-field i:nth-child(2){ width: 21rem; height: 8rem; right: 12%; top: 21%; animation-delay: -3s; }
.steam-field i:nth-child(3){ width: 11rem; height: 4rem; left: 45%; bottom: 18%; animation-delay: -6s; }
.steam-field i:nth-child(4){ width: 28rem; height: 10rem; left: 20%; bottom: 5%; animation-delay: -1s; }
.steam-field i:nth-child(5){ width: 9rem; height: 9rem; right: 25%; bottom: 30%; animation-delay: -7s; }

.leaf-scene {
  background:
    radial-gradient(circle at 65% 33%, rgba(217,242,106,.35), transparent 25%),
    linear-gradient(160deg, var(--mist-matcha), var(--young-leaf) 42%, var(--midori-core));
}
.leaf-cluster { position: relative; min-height: 86vh; }
.leaf-plate {
  position: absolute;
  padding: 3rem 3.3rem;
  color: var(--jade-black);
  background: linear-gradient(135deg, rgba(247,241,223,.52), rgba(147,198,107,.38));
  border: 1px solid rgba(247,241,223,.5);
  border-radius: 58% 42% 54% 46% / 28% 61% 39% 72%;
  box-shadow: inset 0 0 0 1px rgba(47,125,59,.13), 0 2rem 4rem rgba(7,23,15,.13);
  transform-origin: 12% 90%;
  animation: hinge 8s ease-in-out infinite;
}
.leaf-plate::before {
  content: "";
  position: absolute;
  inset: 16% 9%;
  background: linear-gradient(100deg, transparent 49%, rgba(47,125,59,.36) 50%, transparent 51%), repeating-linear-gradient(70deg, transparent 0 32px, rgba(47,125,59,.14) 33px 35px, transparent 36px 64px);
  border-radius: inherit;
  pointer-events: none;
}
.leaf-plate > * { position: relative; }
.leaf-plate h2 { font-size: clamp(3.5rem, 9vw, 9rem); color: var(--midori-core); }
.plate-one { left: 11vw; top: 10vh; width: min(56rem, 70vw); min-height: 23rem; }
.plate-two { right: 10vw; top: 31vh; width: min(25rem, 46vw); animation-delay: -2s; }
.plate-three { left: 35vw; bottom: 6vh; width: min(30rem, 48vw); animation-delay: -5s; }
.dew-lens {
  position: absolute;
  right: 22vw;
  top: 12vh;
  width: 10rem;
  height: 10rem;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  color: var(--midori-core);
  background: radial-gradient(circle at 35% 28%, rgba(247,241,223,.95), rgba(221,239,209,.45) 38%, rgba(147,198,107,.15));
  box-shadow: inset -1rem -1rem 2rem rgba(47,125,59,.15), 0 1.5rem 3rem rgba(7,23,15,.18);
  font-family: var(--serif);
  animation: wobble 5s ease-in-out infinite;
}

.glass-scene {
  background:
    linear-gradient(90deg, rgba(247,241,223,.22) 1px, transparent 1px),
    linear-gradient(0deg, rgba(247,241,223,.22) 1px, transparent 1px),
    linear-gradient(120deg, var(--rice-paper), var(--mist-matcha) 28%, var(--young-leaf) 62%, #b9d88b);
  background-size: 6rem 6rem, 6rem 6rem, auto;
}
.glasshouse { position: absolute; inset: 5vh 6vw; transform: skewX(-8deg); }
.pane {
  position: absolute;
  border: 1px solid rgba(247,241,223,.68);
  background: linear-gradient(105deg, rgba(247,241,223,.34), rgba(221,239,209,.08), rgba(217,242,106,.24));
  box-shadow: 0 0 4rem rgba(247,241,223,.28);
  overflow: hidden;
}
.pane::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent, rgba(247,241,223,.65), transparent);
  transform: translateX(-100%);
  animation: lightBand 7s linear infinite;
}
.pane-a { left: 6%; top: 8%; width: 33%; height: 72%; }
.pane-b { left: 35%; top: 17%; width: 28%; height: 60%; }
.pane-c { right: 6%; top: 2%; width: 28%; height: 84%; }
.main-note {
  position: absolute;
  left: 13vw;
  bottom: 14vh;
  width: min(36rem, 78vw);
  padding: 2rem;
  background: rgba(247,241,223,.72);
  border-left: .35rem solid var(--persimmon-seal);
  box-shadow: .6rem .8rem 0 rgba(35,69,43,.16);
}
.main-note h2 { font-size: clamp(3rem, 8vw, 8rem); color: var(--midori-core); }
.swatches {
  position: absolute;
  right: 13vw;
  bottom: 16vh;
  display: grid;
  gap: .8rem;
}
.swatches b {
  position: relative;
  padding: .6rem .9rem .6rem 3rem;
  background: rgba(247,241,223,.72);
  font: 700 .72rem/1 var(--mono);
  text-transform: uppercase;
}
.swatches b::before { content:""; position:absolute; left:.7rem; top:.42rem; width:1.5rem; height:1.5rem; background:var(--swatch); border-radius:50%; }

.moss-scene {
  color: var(--rice-paper);
  background:
    radial-gradient(circle at 50% 82%, rgba(147,198,107,.28), transparent 32%),
    linear-gradient(180deg, var(--midori-core), var(--moss-velvet) 58%, #142b1d);
}
.moss-bed { position: absolute; inset: auto 0 0; height: 55vh; }
.moss-bed i {
  position: absolute;
  bottom: -5vh;
  border-radius: 50% 50% 45% 55%;
  background: radial-gradient(circle at 45% 25%, var(--young-leaf), var(--moss-velvet) 62%);
  box-shadow: inset 0 1rem 2rem rgba(217,242,106,.1), 0 -1rem 2rem rgba(7,23,15,.18);
  animation: breathe 6s ease-in-out infinite;
}
.moss-bed i:nth-child(1){ left: -6%; width: 28vw; height: 28vw; }
.moss-bed i:nth-child(2){ left: 12%; width: 24vw; height: 18vw; animation-delay:-2s; }
.moss-bed i:nth-child(3){ left: 28%; width: 31vw; height: 24vw; animation-delay:-4s; }
.moss-bed i:nth-child(4){ left: 55%; width: 22vw; height: 19vw; animation-delay:-1s; }
.moss-bed i:nth-child(5){ right: 5%; width: 30vw; height: 25vw; animation-delay:-3s; }
.moss-bed i:nth-child(6){ right: -9%; width: 25vw; height: 25vw; animation-delay:-5s; }
.edge-caption { position: absolute; max-width: 18rem; line-height: 1.65; }
.edge-caption.left { left: 5vw; top: 14vh; }
.edge-caption.right { right: 7vw; bottom: 20vh; text-align: right; }
.moisture span {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, var(--rice-paper), rgba(221,239,209,.3));
  animation: wobble 4s ease-in-out infinite;
}
.moisture span:nth-child(1){ left:24%; bottom:22%; }
.moisture span:nth-child(2){ left:46%; bottom:34%; animation-delay:-1s; }
.moisture span:nth-child(3){ right:28%; bottom:19%; animation-delay:-2s; }
.moisture span:nth-child(4){ right:17%; bottom:42%; animation-delay:-3s; }

.firefly-scene {
  min-height: 120vh;
  color: var(--rice-paper);
  background:
    radial-gradient(circle at 68% 42%, rgba(217,242,106,.12), transparent 30%),
    radial-gradient(circle at 18% 76%, rgba(47,125,59,.28), transparent 35%),
    var(--jade-black);
}
.jade-copy {
  position: absolute;
  left: 10vw;
  top: 22vh;
  width: min(35rem, 80vw);
}
.jade-copy h2 { color: var(--firefly-gold); font-size: clamp(3.8rem, 10vw, 10rem); line-height: .82; }
.jade-copy p { font-size: 1.05rem; line-height: 1.8; }
button {
  margin-top: 1rem;
  padding: .75rem 1rem;
  color: var(--firefly-gold);
  background: transparent;
  border: 1px solid rgba(217,242,106,.55);
  border-radius: 999px;
  font: 700 .74rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.firefly-word {
  position: absolute;
  right: 5vw;
  bottom: 16vh;
  font-family: var(--serif);
  font-size: clamp(4rem, 13vw, 14rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(217,242,106,.28);
  text-shadow: 0 0 38px rgba(217,242,106,.18);
}
.orbit-field i {
  position: absolute;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--firefly-gold);
  box-shadow: 0 0 12px var(--firefly-gold), 0 0 26px rgba(217,242,106,.85);
  animation: orbit 9s ease-in-out infinite;
}
.orbit-field i:nth-child(1){ left:55%; top:18%; }
.orbit-field i:nth-child(2){ left:67%; top:35%; animation-delay:-1s; }
.orbit-field i:nth-child(3){ left:82%; top:55%; animation-delay:-2s; }
.orbit-field i:nth-child(4){ left:41%; top:62%; animation-delay:-3s; }
.orbit-field i:nth-child(5){ left:72%; top:76%; animation-delay:-4s; }
.orbit-field i:nth-child(6){ left:24%; top:42%; animation-delay:-5s; }
.orbit-field i:nth-child(7){ left:88%; top:22%; animation-delay:-6s; }
.orbit-field i:nth-child(8){ left:48%; top:82%; animation-delay:-7s; }

@keyframes seedPulse { 50% { transform: scale(1.8); opacity: .08; } }
@keyframes steam { 50% { transform: translateY(-2.2rem) translateX(1.2rem) scale(1.08); opacity: .35; } }
@keyframes hinge { 50% { transform: rotate(3deg) translateY(-.5rem); } }
@keyframes wobble { 33% { transform: translate(.35rem,-.2rem) scale(1.04,.96); } 66% { transform: translate(-.25rem,.25rem) scale(.96,1.05); } }
@keyframes lightBand { to { transform: translateX(140%); } }
@keyframes breathe { 50% { transform: translateY(-1rem) scale(1.04); } }
@keyframes orbit { 50% { transform: translate(3rem, -2rem) rotate(180deg) scale(1.7); opacity: .55; } }

@media (max-width: 760px) {
  .transect-nav { display: none; }
  .scene { padding: 1.25rem; }
  .mist-copy { top: 22vh; }
  .leaf-plate { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 88vw; margin: 10vh 0; padding: 2rem; }
  .dew-lens, .swatches { right: 1rem; }
  .main-note, .jade-copy { left: 1.25rem; width: calc(100% - 2.5rem); }
  .edge-caption.right { right: 1.25rem; }
}