:root {
  --design-check-leaves: "Leaves** Leave*";
  --stream-ink: #153B45;
  --moonwater: #9CCBD3;
  --petal: #FFFBEF;
  --pollen: #F4C84A;
  --leaf: #486B4B;
  --lilac: #C8B7D8;
  --paper: #F3EAD8;
  --silt: #1C2522;
  --serif: "Cormorant Garamond", "Palatino Linotype", Palatino, Georgia, serif;
  --jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --sans: "Nunito Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hand: Yomogi, "Bradley Hand", "Segoe Print", cursive;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  color: var(--silt);
  font-family: var(--sans);
  background:
    radial-gradient(circle at 18% 8%, rgba(156, 203, 211, .38), transparent 28rem),
    radial-gradient(circle at 83% 23%, rgba(200, 183, 216, .35), transparent 24rem),
    radial-gradient(circle at 54% 78%, rgba(255, 251, 239, .72), transparent 30rem),
    linear-gradient(135deg, #FFFBEF 0%, #F3EAD8 45%, #dbe7df 100%);
  overflow-x: hidden;
}

body.loaded .stream-core,
body.loaded .stream-thread { stroke-dashoffset: 0; }
body.loaded .hero-rosette { transform: translate(-50%, -50%) scale(1); opacity: 1; }
body.loaded .path-title { opacity: 1; stroke-dashoffset: 0; }
body.loaded .opening-whisper { opacity: .8; transform: translateY(0); }

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 12;
  opacity: .17;
  background-image:
    radial-gradient(circle at 15% 20%, #1C2522 0 1px, transparent 1.4px),
    radial-gradient(circle at 72% 44%, #486B4B 0 1px, transparent 1.5px),
    radial-gradient(circle at 35% 80%, #153B45 0 .8px, transparent 1.3px);
  background-size: 31px 37px, 43px 47px, 59px 53px;
  mix-blend-mode: multiply;
}

.watercolor {
  position: fixed;
  border-radius: 53% 47% 61% 39% / 44% 58% 42% 56%;
  filter: blur(9px);
  opacity: .45;
  pointer-events: none;
  z-index: 0;
  animation: stain 16s ease-in-out infinite alternate;
}

.bloom-one { width: 44vw; height: 36vw; left: -11vw; top: 4vh; background: rgba(156, 203, 211, .45); }
.bloom-two { width: 34vw; height: 39vw; right: -7vw; top: 37vh; background: rgba(200, 183, 216, .38); animation-delay: -5s; }
.bloom-three { width: 48vw; height: 28vw; left: 31vw; bottom: -10vh; background: rgba(244, 200, 74, .13); animation-delay: -9s; }

.story {
  position: relative;
  min-height: 500vh;
  z-index: 1;
}

.creek-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 520vh;
  overflow: visible;
  z-index: 1;
}

.stream-shadow,
.stream-core,
.stream-thread {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stream-shadow {
  stroke: var(--moonwater);
  stroke-width: 112;
  opacity: .22;
  filter: url(#bleed);
}

.stream-core {
  stroke: url(#streamGradient);
  stroke-width: 42;
  stroke-dasharray: 6700;
  stroke-dashoffset: 6700;
  transition: stroke-dashoffset 3.3s cubic-bezier(.56,.02,.18,1);
  filter: url(#bleed);
}

.stream-thread {
  stroke: var(--petal);
  stroke-width: 3;
  opacity: .65;
  stroke-dasharray: 16 24;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 5s ease-out .5s;
}

.path-title {
  font-family: var(--serif);
  font-size: 68px;
  letter-spacing: .035em;
  fill: var(--stream-ink);
  stroke: rgba(255, 251, 239, .68);
  stroke-width: 1.4px;
  paint-order: stroke fill;
  opacity: 0;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: opacity 1.2s ease 1.5s, stroke-dashoffset 3.5s ease 1.5s;
}

.chapter {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 9vh 6vw;
  z-index: 2;
}

.hero { min-height: 100vh; }
.moon { background: radial-gradient(circle at 78% 44%, rgba(200, 183, 216, .22), transparent 24rem); }
.delta { min-height: 105vh; }

.specimen {
  position: relative;
  width: min(35rem, 84vw);
  padding: clamp(1.4rem, 3vw, 2.6rem);
  background:
    linear-gradient(135deg, rgba(255, 251, 239, .86), rgba(243, 234, 216, .58)),
    radial-gradient(circle at 20% 10%, rgba(156, 203, 211, .22), transparent 12rem);
  border: 1px solid rgba(21, 59, 69, .22);
  box-shadow: 0 24px 70px rgba(28, 37, 34, .12), inset 0 0 34px rgba(255, 251, 239, .55);
  backdrop-filter: blur(2px);
}

.specimen::before,
.specimen::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(72, 107, 75, .25);
  pointer-events: none;
}

.specimen::before { inset: .68rem; }
.specimen::after { width: 3.2rem; height: 3.2rem; right: -1.2rem; top: -1.2rem; border-radius: 50%; background: radial-gradient(circle, rgba(244,200,74,.35), transparent 62%); }

.source-plate { margin-left: 9vw; margin-top: 18vh; }
.bank-left { margin-left: 6vw; transform: rotate(-1.4deg); }
.bank-right { margin-left: auto; margin-right: 7vw; transform: rotate(1.2deg); }
.narrow { width: min(31rem, 82vw); }
.delta-plate { margin: 0 auto; transform: rotate(-.7deg); text-align: center; }

.plate-number,
.opening-whisper,
.floating-label,
.petal-nav a::after {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .19em;
  font-size: .72rem;
  color: var(--stream-ink);
}

.opening-whisper {
  position: absolute;
  left: 7vw;
  top: 7vh;
  opacity: 0;
  transform: translateY(-.5rem);
  transition: opacity 1.2s ease .4s, transform 1.2s ease .4s;
}

h1, h2 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--stream-ink);
  margin: .35rem 0 .75rem;
  line-height: .92;
}

h1 { font-size: clamp(4rem, 10vw, 9.5rem); letter-spacing: -.045em; }
h2 { font-size: clamp(2.8rem, 6.8vw, 6.2rem); letter-spacing: -.035em; }

p {
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  line-height: 1.72;
  margin: .8rem 0 0;
}

.jp-fragment {
  font-family: var(--jp);
  color: var(--leaf);
  font-size: clamp(1.15rem, 2.1vw, 1.9rem);
  letter-spacing: .12em;
}

.hand-note {
  font-family: var(--hand);
  color: var(--leaf);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  transform: rotate(-2deg);
}

.ink-soak { opacity: .2; filter: blur(5px); transform: translateY(1.2rem) rotate(var(--r, 0deg)); transition: opacity 1s ease, filter 1s ease, transform 1s ease; }
.ink-soak.is-visible { opacity: 1; filter: blur(0); transform: translateY(0) rotate(var(--r, 0deg)); }
.bank-left.ink-soak { --r: -1.4deg; }
.bank-right.ink-soak { --r: 1.2deg; }
.delta-plate.ink-soak { --r: -.7deg; }

.daisy-rosette {
  position: absolute;
  width: 10rem;
  height: 10rem;
  left: 48%;
  top: 36%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.1);
  transition: transform 1.4s cubic-bezier(.18,.88,.2,1.24) 1s, opacity .8s ease 1s;
  z-index: 3;
}

.daisy-rosette i {
  position: absolute;
  left: 50%; top: 50%;
  width: 1.45rem; height: 4.8rem;
  margin: -4.65rem 0 0 -.72rem;
  border-radius: 60% 60% 52% 52%;
  background: linear-gradient(#FFFBEF, rgba(255,251,239,.72));
  border: 1px solid rgba(21,59,69,.16);
  transform-origin: 50% 4.65rem;
  box-shadow: inset 0 -.5rem 1rem rgba(156,203,211,.16);
}

.daisy-rosette i:nth-child(1) { transform: rotate(0deg); }
.daisy-rosette i:nth-child(2) { transform: rotate(30deg); }
.daisy-rosette i:nth-child(3) { transform: rotate(60deg); }
.daisy-rosette i:nth-child(4) { transform: rotate(90deg); }
.daisy-rosette i:nth-child(5) { transform: rotate(120deg); }
.daisy-rosette i:nth-child(6) { transform: rotate(150deg); }
.daisy-rosette i:nth-child(7) { transform: rotate(180deg); }
.daisy-rosette i:nth-child(8) { transform: rotate(210deg); }
.daisy-rosette i:nth-child(9) { transform: rotate(240deg); }
.daisy-rosette i:nth-child(10) { transform: rotate(270deg); }
.daisy-rosette i:nth-child(11) { transform: rotate(300deg); }
.daisy-rosette i:nth-child(12) { transform: rotate(330deg); }
.daisy-rosette b {
  position: absolute;
  inset: 3.62rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #FFFBEF 0 8%, #F4C84A 9% 58%, #486B4B 62% 100%);
  box-shadow: 0 0 20px rgba(244, 200, 74, .75);
}

.root-diagram {
  position: absolute;
  width: 28vw;
  height: 19vh;
  left: 7vw;
  bottom: 6vh;
  border-top: 1px solid rgba(72, 107, 75, .35);
  opacity: .55;
}
.root-diagram span { position: absolute; top: 0; width: 1px; height: 16vh; background: rgba(72,107,75,.35); transform-origin: top; }
.root-diagram span:nth-child(1) { left: 20%; transform: rotate(22deg); }
.root-diagram span:nth-child(2) { left: 42%; transform: rotate(-16deg); }
.root-diagram span:nth-child(3) { left: 62%; transform: rotate(12deg); }
.root-diagram span:nth-child(4) { left: 78%; transform: rotate(-28deg); }

.floating-label {
  position: absolute;
  right: 14vw;
  top: 28vh;
  padding: .65rem .9rem;
  background: rgba(255, 251, 239, .62);
  border: 1px solid rgba(21,59,69,.18);
  transform: rotate(8deg);
}

.daisy-line {
  position: absolute;
  right: 12vw;
  bottom: 10vh;
  width: 16rem;
  height: 24rem;
  border-left: 2px solid rgba(72,107,75,.48);
  border-radius: 50%;
  transform: rotate(-24deg);
}
.daisy-line::before { content: ""; position: absolute; top: -2.4rem; left: -3rem; width: 6rem; height: 6rem; border: 1px solid rgba(21,59,69,.35); border-radius: 50%; background: repeating-conic-gradient(from 8deg, #FFFBEF 0 10deg, transparent 11deg 22deg), radial-gradient(circle, #F4C84A 0 24%, transparent 25%); }

.ripple-stack { position: absolute; left: 51vw; top: 44vh; width: 11rem; height: 7rem; }
.ripple-stack span { position: absolute; inset: 0; border: 1px solid rgba(156,203,211,.72); border-radius: 50%; animation: ripple 4s ease-in-out infinite; }
.ripple-stack span:nth-child(2) { inset: 1.2rem; animation-delay: -1s; }
.ripple-stack span:nth-child(3) { inset: 2.4rem; animation-delay: -2s; }

.moon-fragments { position: absolute; left: 12vw; top: 22vh; width: 36vw; height: 45vh; }
.moon-fragments i { position: absolute; width: 8rem; height: 2.2rem; border-radius: 50%; background: rgba(255,251,239,.7); border: 1px solid rgba(200,183,216,.5); box-shadow: 0 0 30px rgba(255,251,239,.55); animation: float 7s ease-in-out infinite; }
.moon-fragments i:nth-child(1) { left: 8%; top: 18%; transform: rotate(-8deg); }
.moon-fragments i:nth-child(2) { left: 35%; top: 31%; width: 6rem; animation-delay: -1.4s; }
.moon-fragments i:nth-child(3) { left: 52%; top: 49%; width: 10rem; transform: rotate(7deg); animation-delay: -2.7s; }
.moon-fragments i:nth-child(4) { left: 26%; top: 67%; width: 5rem; animation-delay: -4s; }
.moon-fragments i:nth-child(5) { left: 70%; top: 73%; width: 7rem; animation-delay: -5s; }

.striders { position: absolute; right: 18vw; bottom: 18vh; color: var(--stream-ink); font-family: var(--serif); font-size: 2rem; opacity: .55; display: flex; gap: 1rem; transform: rotate(-16deg); }

.achene-field { position: absolute; inset: 8vh 0 auto 0; height: 78vh; pointer-events: none; }
.achene-field i { position: absolute; width: 1px; height: 5rem; background: rgba(72,107,75,.52); transform: rotate(var(--turn)); animation: drift 9s ease-in-out infinite; }
.achene-field i::before { content: ""; position: absolute; left: -.95rem; top: -1.2rem; width: 2rem; height: 2rem; border-top: 1px solid rgba(255,251,239,.9); border-radius: 50%; }
.achene-field i:nth-child(1) { --turn: -18deg; left: 18%; top: 14%; }
.achene-field i:nth-child(2) { --turn: 13deg; left: 33%; top: 6%; animation-delay: -1s; }
.achene-field i:nth-child(3) { --turn: 28deg; left: 47%; top: 38%; animation-delay: -2s; }
.achene-field i:nth-child(4) { --turn: -34deg; left: 62%; top: 20%; animation-delay: -3s; }
.achene-field i:nth-child(5) { --turn: 8deg; left: 74%; top: 52%; animation-delay: -4s; }
.achene-field i:nth-child(6) { --turn: -10deg; left: 84%; top: 12%; animation-delay: -5s; }
.achene-field i:nth-child(7) { --turn: 42deg; left: 55%; top: 72%; animation-delay: -6s; }
.achene-field i:nth-child(8) { --turn: -25deg; left: 24%; top: 58%; animation-delay: -7s; }

.pressed-stem { position: absolute; right: 8vw; bottom: 7vh; width: 26vw; height: 52vh; border-left: 2px solid rgba(72,107,75,.38); border-radius: 50%; transform: rotate(35deg); }
.pressed-stem::before, .pressed-stem::after { content: ""; position: absolute; width: 9rem; height: 2.6rem; border-radius: 50%; border: 1px solid rgba(72,107,75,.3); background: rgba(72,107,75,.08); }
.pressed-stem::before { left: -8.5rem; top: 36%; transform: rotate(22deg); }
.pressed-stem::after { left: .9rem; top: 54%; transform: rotate(-28deg); }

.broadcast-delta {
  position: absolute;
  inset: 25vh 8vw 8vh;
  background-image: radial-gradient(circle, rgba(244,200,74,.72) 0 2px, transparent 3px), radial-gradient(circle, rgba(156,203,211,.7) 0 1.5px, transparent 2.5px), radial-gradient(circle, rgba(21,59,69,.38) 0 1px, transparent 2px);
  background-size: 34px 38px, 53px 41px, 71px 69px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
  opacity: .8;
}

.petal-nav {
  position: fixed;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: .65rem;
}
.petal-nav a { position: relative; width: 1.6rem; height: 2.4rem; display: block; }
.petal-nav span { position: absolute; inset: .18rem .42rem; border-radius: 70% 70% 55% 55%; background: rgba(255,251,239,.8); border: 1px solid rgba(21,59,69,.22); transform: rotate(32deg); transition: background .3s ease, transform .3s ease; }
.petal-nav a.is-active span { background: var(--pollen); transform: rotate(82deg) scale(.86); }
.petal-nav a::after { content: attr(data-chapter); position: absolute; right: 2.1rem; top: .65rem; opacity: 0; transition: opacity .3s ease; }
.petal-nav a:hover::after { opacity: 1; }

.cursor-pollen {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  z-index: 30;
}
.pollen-dot {
  position: fixed;
  width: .34rem;
  height: .34rem;
  border-radius: 50%;
  background: var(--pollen);
  box-shadow: 0 0 12px rgba(244, 200, 74, .8);
  opacity: .85;
  pointer-events: none;
}

@keyframes stain {
  from { transform: scale(1) rotate(0deg); border-radius: 53% 47% 61% 39% / 44% 58% 42% 56%; }
  to { transform: scale(1.08) rotate(7deg); border-radius: 42% 58% 39% 61% / 56% 38% 62% 44%; }
}

@keyframes ripple {
  0%, 100% { transform: scale(.9) rotate(0deg); opacity: .28; }
  50% { transform: scale(1.2) rotate(12deg); opacity: .72; }
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 1.4rem -.8rem; }
}

@keyframes drift {
  0%, 100% { translate: 0 0; opacity: .46; }
  50% { translate: 2rem -2.2rem; opacity: .9; }
}

@media (max-width: 760px) {
  .creek-svg { width: 150%; left: -28%; }
  .source-plate, .bank-left, .bank-right, .delta-plate { margin-left: auto; margin-right: auto; }
  .specimen { width: min(31rem, 90vw); }
  .hero-rosette { left: 70%; top: 23%; }
  .petal-nav { right: .35rem; }
  .moon-fragments, .pressed-stem { opacity: .45; }
}