:root {
  --spring-paper: #FFF7EA;
  --sakura-milk: #F7B7C8;
  --young-leaf: #7AC77B;
  --meltwater-blue: #9BD8E8;
  --plum-ink: #35243E;
  --lantern-apricot: #FFB35C;
  --moss-shadow: #2F5A45;
  --frost-lavender: #D8D2FF;
  --display: "Yeseva One", Georgia, "Times New Roman", serif;
  --serif-jp: "Noto Serif JP", "Hiragino Mincho ProN", YuMincho, Georgia, serif;
  --sans: "Nunito Sans", Inter, ui-rounded, system-ui, sans-serif;
  --hand: Kalam, "Bradley Hand", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--spring-paper);
  color: var(--plum-ink);
  font-family: var(--sans);
  overflow-x: hidden;
}

button, a { font: inherit; color: inherit; }

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .38;
  background:
    radial-gradient(circle at 10% 20%, rgba(53,36,62,.06) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 75% 35%, rgba(47,90,69,.05) 0 1px, transparent 1px 7px),
    linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent),
    repeating-linear-gradient(83deg, rgba(53,36,62,.025) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
}

.bloom-thread {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 8;
  pointer-events: none;
}

#threadPath {
  fill: none;
  stroke: var(--young-leaf);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  filter: drop-shadow(0 0 9px rgba(122,199,123,.42));
  transition: stroke-dashoffset 1.8s cubic-bezier(.2,.9,.2,1);
}

body.awake #threadPath { stroke-dashoffset: var(--thread-offset, 610); }

.sprig-nav {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: 18px;
}

.sprig-nav::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 5px;
  bottom: 5px;
  width: 2px;
  background: linear-gradient(var(--frost-lavender), var(--young-leaf), var(--lantern-apricot));
  border-radius: 99px;
}

.bud {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50% 50% 50% 4px;
  background: var(--spring-paper);
  border: 1px solid rgba(53,36,62,.28);
  transform: rotate(-35deg);
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(53,36,62,.12);
}

.bud.active { background: var(--young-leaf); transform: rotate(-35deg) scale(1.28); }
.bud span { position: absolute; right: 25px; top: -3px; transform: rotate(35deg); opacity: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; transition: opacity .25s; }
.bud:hover span, .bud.active span { opacity: 1; }

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(28px, 6vw, 72px);
  display: grid;
  align-items: center;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 5vmin;
  border: 1px dashed rgba(53,36,62,.16);
  border-radius: 42% 56% 46% 54% / 55% 35% 65% 42%;
  pointer-events: none;
  opacity: .7;
}

.scene::after {
  content: attr(data-scene);
  position: absolute;
  left: clamp(18px, 3vw, 42px);
  top: 50%;
  writing-mode: vertical-rl;
  font-family: var(--serif-jp);
  font-size: 12px;
  letter-spacing: .28em;
  color: rgba(53,36,62,.5);
}

h1, h2 { font-family: var(--display); font-weight: 400; margin: 0; }
h1 { font-size: clamp(58px, 13vw, 170px); letter-spacing: -.05em; color: rgba(53,36,62,.84); text-shadow: 0 10px 34px rgba(247,183,200,.38); }
h2 { font-size: clamp(38px, 7vw, 92px); line-height: .9; }
p { line-height: 1.65; }
.jp { font-family: var(--serif-jp); }
.scene-kicker { margin: 0 0 10px; text-transform: lowercase; letter-spacing: .16em; font-size: 13px; color: var(--moss-shadow); }

.frost-scene {
  background:
    radial-gradient(circle at 74% 21%, rgba(216,210,255,.55), transparent 24%),
    radial-gradient(circle at 18% 78%, rgba(155,216,232,.34), transparent 22%),
    var(--spring-paper);
}

.hero-mark { align-self: start; margin: 14vh 0 0 8vw; position: relative; z-index: 4; max-width: 900px; }
.ritual-button {
  margin-top: 26px;
  border: 0;
  background: transparent;
  padding: 14px 27px 16px;
  cursor: pointer;
  font-family: var(--hand);
  font-size: 22px;
  color: var(--moss-shadow);
  position: relative;
}
.ritual-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(122,199,123,.18);
  border: 1px solid rgba(47,90,69,.28);
  border-radius: 51% 49% 47% 53% / 58% 42% 58% 42%;
  transform: rotate(-2deg);
  z-index: -1;
  transition: transform .5s, background .5s;
}
.ritual-button:hover::before { transform: rotate(2deg) scale(1.08); background: rgba(247,183,200,.28); }

.frost-line {
  position: absolute;
  left: -6vw;
  right: -4vw;
  bottom: 8vh;
  height: 82px;
  background: linear-gradient(180deg, transparent, rgba(216,210,255,.55), rgba(155,216,232,.24));
  clip-path: polygon(0 54%, 8% 43%, 16% 62%, 27% 39%, 37% 57%, 46% 45%, 55% 61%, 69% 40%, 81% 58%, 100% 44%, 100% 100%, 0 100%);
  transition: opacity 1.2s, filter 1.2s;
}
body.awake .frost-line { opacity: .25; filter: blur(7px); }

.sleeping-seed {
  position: absolute;
  left: 17vw;
  bottom: 13vh;
  width: 58px;
  height: 76px;
  border-radius: 55% 45% 54% 46% / 62% 40% 60% 38%;
  background: radial-gradient(circle at 38% 30%, #FFF7EA, #F7B7C8 36%, #2F5A45 105%);
  box-shadow: 0 20px 35px rgba(47,90,69,.17);
  transform: rotate(-22deg);
  z-index: 6;
}
.sleeping-seed span { position: absolute; inset: 21px 27px 15px 27px; border-left: 2px solid rgba(53,36,62,.42); border-radius: 50%; }
body.awake .sleeping-seed { animation: seedWake 1.5s ease both; }

.root-cracks { position: absolute; left: 9vw; bottom: 8vh; width: 28vw; height: 13vh; opacity: .35; background: linear-gradient(35deg, transparent 49%, var(--moss-shadow) 50% 51%, transparent 52%), linear-gradient(-20deg, transparent 49%, var(--moss-shadow) 50% 51%, transparent 52%); clip-path: polygon(0 70%, 18% 63%, 36% 74%, 50% 45%, 68% 60%, 100% 30%, 100% 34%, 69% 66%, 50% 52%, 38% 81%, 18% 69%, 0 78%); }

.annotation {
  position: absolute;
  max-width: 300px;
  padding: 16px 19px;
  font-family: var(--serif-jp);
  background: rgba(255,247,234,.72);
  border: 1px solid rgba(53,36,62,.16);
  border-radius: 16px 34px 18px 28px;
  box-shadow: 0 18px 45px rgba(53,36,62,.09);
  backdrop-filter: blur(5px);
  transform: rotate(-3deg);
}
.frost-note { right: 12vw; bottom: 18vh; opacity: 0; }
body.awake .frost-note { animation: pigmentIn 1.3s .55s both; }
.seed-note { left: 9vw; bottom: 17vh; transform: rotate(4deg); }
.water-note { right: 14vw; top: 17vh; }
.rain-note { right: 10vw; bottom: 15vh; }

.seed-scene { background: radial-gradient(circle at 72% 22%, rgba(122,199,123,.24), transparent 26%), linear-gradient(145deg, #FFF7EA, #FFF7EA 50%, rgba(247,183,200,.28)); }
.seed-packet {
  width: min(500px, 76vw);
  min-height: 530px;
  margin-left: 43vw;
  padding: 78px 45px 42px;
  position: relative;
  background: linear-gradient(160deg, rgba(255,247,234,.95), rgba(216,210,255,.38));
  border: 2px solid rgba(53,36,62,.22);
  box-shadow: -24px 24px 70px rgba(47,90,69,.13);
  transform: rotate(4deg);
}
.packet-flap { position: absolute; inset: 0 0 auto; height: 95px; display: grid; place-items: center; font-family: var(--serif-jp); font-size: 36px; background: rgba(247,183,200,.42); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.seed-packet p { font-family: var(--serif-jp); font-size: 18px; }
.map-lines { position: absolute; inset: 18vh 12vw 10vh 12vw; border: 2px solid rgba(122,199,123,.34); border-radius: 50%; transform: rotate(-18deg); background: radial-gradient(circle at 20% 70%, var(--young-leaf) 0 5px, transparent 6px), radial-gradient(circle at 60% 22%, var(--sakura-milk) 0 8px, transparent 9px), radial-gradient(circle at 84% 61%, var(--meltwater-blue) 0 6px, transparent 7px); opacity: .65; }
.map-lines::after { content: ""; position: absolute; inset: 22%; border-top: 3px dotted var(--moss-shadow); border-radius: 50%; transform: rotate(28deg); }
.sprout-punctuation { position: absolute; left: 22vw; top: 22vh; font-family: var(--serif-jp); font-size: clamp(48px, 9vw, 110px); color: rgba(122,199,123,.42); transform: rotate(-17deg); }

.petal-scene { background: radial-gradient(ellipse at 50% 64%, rgba(155,216,232,.46), transparent 36%), radial-gradient(circle at 12% 20%, rgba(247,183,200,.36), transparent 25%), var(--spring-paper); }
.crescent-puddle { position: absolute; width: 58vw; height: 35vh; left: 19vw; bottom: 10vh; border-radius: 50%; background: radial-gradient(ellipse at 55% 35%, rgba(255,247,234,.75), transparent 26%), linear-gradient(140deg, rgba(155,216,232,.68), rgba(216,210,255,.34)); clip-path: ellipse(50% 33% at 50% 50%); }
.puddle span { position: absolute; border: 1px solid rgba(53,36,62,.18); border-radius: 50%; animation: ripple 4s infinite; }
.puddle span:nth-child(1) { inset: 30% 40%; }
.puddle span:nth-child(2) { inset: 20% 31%; animation-delay: 1.1s; }
.puddle span:nth-child(3) { inset: 10% 20%; animation-delay: 2.3s; }
.ford-petals i { position: absolute; width: 92px; height: 44px; border-radius: 80% 12% 80% 18%; background: linear-gradient(90deg, rgba(247,183,200,.82), rgba(255,247,234,.75)); box-shadow: 0 10px 24px rgba(53,36,62,.1); transform: rotate(var(--r)); }
.ford-petals i:nth-child(1){ left:20%; bottom:24%; --r:-25deg; }.ford-petals i:nth-child(2){ left:31%; bottom:34%; --r:15deg; }.ford-petals i:nth-child(3){ left:43%; bottom:42%; --r:-9deg; }.ford-petals i:nth-child(4){ left:55%; bottom:48%; --r:20deg; }.ford-petals i:nth-child(5){ left:66%; bottom:58%; --r:-18deg; }.ford-petals i:nth-child(6){ left:76%; bottom:66%; --r:8deg; }
.poem-panel { position: relative; z-index: 4; width: min(470px, 78vw); padding: 30px; background: rgba(255,247,234,.75); border: 1px solid rgba(53,36,62,.18); box-shadow: 0 20px 50px rgba(53,36,62,.1); }
.skew-left { margin-left: 9vw; transform: rotate(-5deg) skewY(-2deg); }

.rain-scene { background: linear-gradient(180deg, rgba(216,210,255,.42), rgba(255,247,234,1) 56%, rgba(155,216,232,.2)); }
.bridge-arc { position: absolute; left: 11vw; right: 14vw; top: 42vh; height: 30vh; border-top: 22px solid rgba(122,199,123,.35); border-radius: 50% 50% 0 0; transform: rotate(-8deg); }
.rain-bells { position: absolute; left: 20vw; right: 20vw; top: 20vh; display: flex; justify-content: space-around; }
.bell { width: 55px; height: 78px; border: 0; background: transparent; position: relative; cursor: pointer; transform-origin: 50% 0; }
.bell::before { content: ""; position: absolute; inset: 12px 7px 12px; background: linear-gradient(var(--meltwater-blue), rgba(255,247,234,.75)); border: 1px solid rgba(53,36,62,.18); border-radius: 50% 50% 44% 44%; }
.bell::after { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 22px; background: var(--plum-ink); opacity: .35; }
.bell span { position: absolute; bottom: 8px; left: 24px; width: 8px; height: 8px; border-radius: 50%; background: var(--plum-ink); opacity: .45; }
.bell.ringing { animation: bellRing .65s ease; }
.frog-chorus { position: absolute; bottom: 19vh; left: 18vw; font-family: var(--hand); font-size: clamp(24px, 5vw, 58px); color: var(--moss-shadow); opacity: .62; }
.rain-label { margin-left: auto; margin-right: 14vw; transform: rotate(3deg); }

.crane-scene { background: radial-gradient(circle at 70% 30%, rgba(247,183,200,.42), transparent 24%), radial-gradient(circle at 20% 72%, rgba(122,199,123,.28), transparent 30%), var(--spring-paper); }
.meadow-wash { position: absolute; inset: 58vh -4vw -10vh; background: linear-gradient(100deg, rgba(122,199,123,.28), rgba(155,216,232,.25), rgba(247,183,200,.2)); border-radius: 50% 50% 0 0; }
.paper-crane { position: absolute; width: 180px; height: 115px; filter: drop-shadow(0 24px 18px rgba(53,36,62,.15)); animation: craneDrift 9s ease-in-out infinite; }
.paper-crane b, .paper-crane span, .paper-crane::before, .paper-crane::after { content: ""; position: absolute; background: linear-gradient(135deg, rgba(255,247,234,.98), rgba(216,210,255,.55)); border: 1px solid rgba(53,36,62,.14); }
.paper-crane b { width: 95px; height: 70px; left: 42px; top: 25px; clip-path: polygon(0 54%, 100% 0, 74% 100%); }
.paper-crane span { width: 86px; height: 46px; left: 96px; top: 20px; clip-path: polygon(0 72%, 100% 0, 44% 100%); }
.paper-crane::before { width: 70px; height: 52px; left: 0; top: 31px; clip-path: polygon(100% 62%, 0 0, 31% 100%); }
.paper-crane::after { width: 32px; height: 32px; left: 128px; top: 0; clip-path: polygon(0 100%, 100% 0, 75% 100%); }
.crane-one { left: 14vw; top: 20vh; transform: rotate(-9deg); }
.crane-two { right: 15vw; top: 48vh; transform: scale(.78) rotate(13deg); animation-delay: -3s; }
.crane-shadow { position: absolute; left: 32vw; top: 35vh; width: 32vw; height: 17vh; background: rgba(53,36,62,.13); filter: blur(18px); clip-path: polygon(0 55%, 42% 0, 60% 47%, 100% 14%, 67% 88%, 45% 50%); animation: shadowPass 8s ease-in-out infinite; }
.wish-tags { position: absolute; left: 10vw; bottom: 14vh; display: flex; gap: 16px; flex-wrap: wrap; max-width: 520px; }
.wish-tags p, .handwish { margin: 0; padding: 18px 16px 28px; min-width: 130px; background: rgba(255,247,234,.82); border: 1px solid rgba(53,36,62,.16); font-family: var(--hand); transform: rotate(var(--tag-r, -4deg)); box-shadow: 0 13px 30px rgba(53,36,62,.1); }
.wish-tags p:nth-child(2){ --tag-r:3deg; }.wish-tags p:nth-child(3){ --tag-r:-8deg; }
.crane-label { margin-left: 47vw; transform: rotate(-2deg); }

.lantern-scene { background: radial-gradient(circle at 50% 45%, rgba(255,179,92,.36), transparent 26%), linear-gradient(180deg, #FFF7EA 0%, rgba(247,183,200,.45) 48%, rgba(53,36,62,.9) 100%); color: #FFF7EA; }
.lantern-scene::before { border-color: rgba(255,247,234,.22); }
.dusk-orb { position: absolute; width: 62vmin; height: 62vmin; border-radius: 50%; right: -8vmin; top: 8vmin; background: radial-gradient(circle, rgba(255,179,92,.85), rgba(247,183,200,.24) 56%, transparent 70%); filter: blur(3px); }
.blossom-gate { position: absolute; left: 50%; top: 49%; transform: translate(-50%, -50%); width: min(58vmin, 520px); height: min(58vmin, 520px); }
.blossom-gate span { position: absolute; left: 50%; top: 50%; width: 48%; height: 27%; transform-origin: 0 50%; border-radius: 88% 12% 88% 12%; background: linear-gradient(90deg, rgba(247,183,200,.88), rgba(255,179,92,.52)); box-shadow: 0 0 35px rgba(255,179,92,.28); opacity: .82; }
.blossom-gate span:nth-child(1){ transform: rotate(0deg) translateY(-50%); }.blossom-gate span:nth-child(2){ transform: rotate(72deg) translateY(-50%); }.blossom-gate span:nth-child(3){ transform: rotate(144deg) translateY(-50%); }.blossom-gate span:nth-child(4){ transform: rotate(216deg) translateY(-50%); }.blossom-gate span:nth-child(5){ transform: rotate(288deg) translateY(-50%); }
.blossom-gate.open span { animation: gateOpen 1.6s ease both; }
.lantern-tags { position: absolute; left: 10vw; bottom: 16vh; display: grid; gap: 18px; }
.wish-tag { border: 0; padding: 18px 24px 30px; background: rgba(255,247,234,.94); color: var(--plum-ink); font-family: var(--hand); font-size: 20px; cursor: pointer; transform: rotate(-5deg); box-shadow: 0 20px 35px rgba(0,0,0,.2); }
.final-title { position: relative; z-index: 4; width: min(520px, 80vw); margin-left: auto; margin-right: 8vw; text-shadow: 0 8px 24px rgba(0,0,0,.25); }
.final-title p { font-family: var(--serif-jp); }

.traveling-petal { position: fixed; z-index: 14; left: 12vw; top: 78vh; width: 38px; height: 22px; border-radius: 90% 10% 80% 18%; background: linear-gradient(90deg, var(--sakura-milk), var(--spring-paper)); box-shadow: 0 8px 22px rgba(53,36,62,.16); pointer-events: none; transform: translate(-50%, -50%) rotate(-20deg); transition: left .6s ease, top .6s ease; }
.petal-field { position: fixed; inset: 0; pointer-events: none; z-index: 7; overflow: hidden; }
.floating-petal { position: absolute; width: var(--s, 24px); height: calc(var(--s, 24px) * .56); border-radius: 90% 10% 85% 15%; background: rgba(247,183,200,.65); animation: floatPetal var(--d, 14s) linear infinite; opacity: .62; }

.scene:not(.active) .poem-panel, .scene:not(.active) .annotation, .scene:not(.active) .seed-packet { filter: saturate(.75); }
.scene.active .poem-panel, .scene.active .seed-packet, .scene.active .annotation { animation: pigmentIn .9s ease both; }

@keyframes seedWake { 0% { transform: rotate(-22deg) scale(1); } 45% { transform: rotate(-8deg) scale(1.15); } 100% { transform: rotate(8deg) translate(14px,-28px) scale(.9); } }
@keyframes pigmentIn { from { opacity: 0; clip-path: circle(8% at 20% 80%); } to { opacity: 1; clip-path: circle(140% at 50% 50%); } }
@keyframes ripple { from { opacity: .65; transform: scale(.25); } to { opacity: 0; transform: scale(2.5); } }
@keyframes bellRing { 0%,100% { transform: rotate(0); } 22% { transform: rotate(13deg); } 50% { transform: rotate(-10deg); } 74% { transform: rotate(6deg); } }
@keyframes craneDrift { 0%,100% { translate: 0 0; } 50% { translate: 24px -18px; } }
@keyframes shadowPass { 0%,100% { transform: translateX(-25px) scale(.85); opacity: .08; } 50% { transform: translateX(42px) scale(1.1); opacity: .16; } }
@keyframes gateOpen { 0% { scale: .82; filter: brightness(.9); } 70% { scale: 1.16; filter: brightness(1.25); } 100% { scale: 1.02; filter: brightness(1.05); } }
@keyframes floatPetal { from { transform: translate3d(0, 110vh, 0) rotate(0deg); } to { transform: translate3d(var(--x, 20vw), -12vh, 0) rotate(360deg); } }

@media (max-width: 760px) {
  .sprig-nav { right: 12px; }
  .hero-mark { margin-left: 2vw; }
  .seed-packet { margin-left: 8vw; width: 78vw; }
  .crane-label, .rain-label, .final-title { margin-left: 8vw; margin-right: 8vw; }
  .annotation { display: none; }
  .rain-bells { left: 10vw; right: 10vw; }
}