:root {
  --blossom: #F6D94A;
  --pollen: #E4A900;
  --paper: #FFF7DA;
  --leaf: #7EAE5A;
  --shadow: #8DB7D7;
  --soil: #8A5A3C;
  --peach: #F5B7A6;
  --ink: #2F2A24;
  --progress: 0;
  --scene: 0;
  --flap: 0deg;
  --sway: 0px;
  --seed-open: 0;
  --field-rise: 0;
  --wind: 0;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--paper); }

body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  font-family: "Nunito Sans", "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  background: var(--paper);
  overflow-x: hidden;
}

.diorama {
  position: relative;
  min-height: 500vh;
  background:
    radial-gradient(circle at 78% 8%, rgba(246,217,74,.42) 0 11vw, transparent 17vw),
    linear-gradient(180deg, #FFF7DA 0%, #FFF7DA 48%, rgba(246,217,74,.22) 100%);
}

.paper-grain,
.paper-grain::before,
.paper-grain::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
}

.paper-grain {
  opacity: .42;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(47,42,36,.09) 0 1px, transparent 1.7px),
    radial-gradient(circle at 58% 32%, rgba(138,90,60,.06) 0 1px, transparent 1.6px),
    linear-gradient(90deg, rgba(255,255,255,.26), transparent 38%, rgba(138,90,60,.05));
  background-size: 21px 19px, 31px 29px, 100% 100%;
}

.paper-grain::before {
  content: "";
  opacity: .35;
  background: repeating-linear-gradient(98deg, transparent 0 13px, rgba(138,90,60,.035) 14px 15px, transparent 16px 31px);
}

.paper-grain::after {
  content: "";
  border: 12px solid rgba(246,217,74,.18);
  box-shadow: inset 0 0 0 1px rgba(138,90,60,.1);
}

.fixed-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  perspective: 900px;
  background:
    linear-gradient(180deg, rgba(255,247,218,.94) 0%, rgba(255,247,218,.84) 55%, rgba(246,217,74,.25) 100%);
}

.sky-vellum {
  position: absolute;
  inset: 0 0 38%;
  background:
    radial-gradient(ellipse at 31% 20%, rgba(245,183,166,.32), transparent 31%),
    radial-gradient(ellipse at 68% 25%, rgba(141,183,215,.28), transparent 34%);
  filter: blur(.2px);
}

.sun-patch {
  position: fixed;
  border-radius: 49% 51% 47% 53%;
  background: rgba(246,217,74,.24);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
}

.sun-patch-one { width: 31vw; height: 25vw; right: 8vw; top: 6vh; transform: rotate(-9deg); }
.sun-patch-two { width: 19vw; height: 16vw; left: 12vw; top: 23vh; transform: rotate(16deg); opacity: .5; }

.gingham-edge {
  position: fixed;
  right: 0;
  top: 0;
  width: 76px;
  height: 100vh;
  z-index: 4;
  opacity: .24;
  background:
    repeating-linear-gradient(0deg, rgba(245,183,166,.75) 0 13px, transparent 13px 26px),
    repeating-linear-gradient(90deg, rgba(245,183,166,.9) 0 13px, transparent 13px 26px),
    #FFF7DA;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%, 20% 88%, 3% 72%, 22% 53%, 6% 37%, 24% 19%);
}

.horizon-stitches {
  position: absolute;
  left: 5vw;
  right: 6vw;
  top: 56vh;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(47,42,36,.42) 0 14px, transparent 14px 24px);
  transform: translateY(calc(var(--progress) * -11vh));
  opacity: calc(.92 - var(--progress) * .42);
}

.washi-hills { position: absolute; left: 0; right: 0; top: 46vh; height: 22vh; transform: translateY(calc(var(--progress) * -8vh)); }
.hill { position: absolute; bottom: 0; display: block; height: 100%; filter: drop-shadow(0 -2px 0 rgba(255,247,218,.7)); }
.hill-blue { left: -6%; width: 73%; background: rgba(141,183,215,.42); clip-path: polygon(0 80%, 11% 63%, 23% 72%, 35% 49%, 52% 66%, 66% 45%, 80% 63%, 100% 55%, 100% 100%, 0 100%); }
.hill-green { right: -8%; width: 76%; background: rgba(126,174,90,.36); clip-path: polygon(0 62%, 13% 53%, 27% 68%, 39% 45%, 56% 60%, 72% 38%, 88% 58%, 100% 48%, 100% 100%, 0 100%); }
.hill-cream { left: 3%; right: 1%; background: rgba(255,247,218,.82); clip-path: polygon(0 74%, 9% 66%, 17% 75%, 29% 57%, 42% 69%, 56% 54%, 69% 73%, 81% 59%, 94% 69%, 100% 62%, 100% 100%, 0 100%); }

.scene {
  position: absolute;
  inset: 0;
  min-height: 100vh;
  opacity: 0;
  transform: translate3d(0, 4vh, 0) scale(.985);
  transition: opacity .65s ease, transform .9s cubic-bezier(.2,.7,.1,1);
  pointer-events: none;
}

.scene.active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.scene-note,
.ribbon-label,
.receipt-scrap,
.field-marker {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  color: var(--ink);
}

.vellum-tag {
  position: absolute;
  max-width: 260px;
  padding: 18px 20px;
  background: rgba(255,247,218,.68);
  border: 1px solid rgba(138,90,60,.24);
  box-shadow: 0 18px 45px rgba(138,90,60,.12);
  backdrop-filter: blur(5px);
}

.vellum-tag::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(138,90,60,.35);
  pointer-events: none;
}

.tag-intro { right: 12vw; top: 21vh; transform: rotate(4deg); }
.jp-stamp { font-family: "M PLUS Rounded 1c", "Yu Gothic", system-ui, sans-serif; font-size: 12px; letter-spacing: .18em; color: var(--soil); }
.vellum-tag p { margin: 9px 0 0; line-height: 1.45; font-size: 15px; }

.seed-packet {
  position: absolute;
  left: 9vw;
  bottom: 11vh;
  width: clamp(260px, 28vw, 390px);
  height: clamp(325px, 37vw, 500px);
  transform-style: preserve-3d;
  transform: rotate(-7deg) translateY(calc(var(--progress) * -10vh));
  filter: drop-shadow(0 26px 24px rgba(138,90,60,.22));
}

.packet-back,
.packet-face,
.packet-flap,
.packet-fold { position: absolute; left: 0; right: 0; }
.packet-back { inset: 3% 2% -2%; background: #F5B7A6; transform: translateZ(-8px) rotate(2deg); opacity: .55; }
.packet-face {
  inset: 18% 0 0;
  padding: 44px 30px 28px;
  background:
    linear-gradient(135deg, rgba(255,247,218,.94), rgba(246,217,74,.76)),
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(138,90,60,.045) 17px 18px);
  border: 2px solid rgba(138,90,60,.36);
  clip-path: polygon(0 0, 100% 0, 94% 100%, 7% 100%);
}

.packet-face::before { content: ""; position: absolute; inset: 14px; border: 1px dashed rgba(138,90,60,.42); }
.packet-face h1 {
  position: relative;
  margin: 40px 0 16px;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(38px, 5vw, 70px);
  line-height: .86;
  letter-spacing: -.05em;
  font-weight: 650;
}
.packet-face h1 span { display: block; font-family: "Zen Maru Gothic", "Yu Gothic", system-ui, sans-serif; font-size: .54em; letter-spacing: -.02em; color: var(--soil); margin-left: 1.2em; }
.packet-face p { position: relative; margin: 0; width: 72%; font-size: 12px; line-height: 1.5; text-transform: uppercase; letter-spacing: .12em; }
.packet-stamp { position: relative; z-index: 1; font-family: "M PLUS Rounded 1c", "Yu Gothic", system-ui, sans-serif; border: 1px solid var(--soil); padding: 4px 9px; border-radius: 999px; color: var(--soil); }

.packet-flap {
  top: 0;
  height: 30%;
  background: linear-gradient(150deg, #FFF7DA, #F6D94A 72%);
  border: 2px solid rgba(138,90,60,.36);
  transform-origin: 50% 100%;
  transform: rotateX(var(--flap)) translateZ(5px);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  transition: transform .2s linear;
}
.packet-fold { top: 18%; bottom: 0; width: 50%; border: 1px solid rgba(138,90,60,.18); opacity: .55; }
.packet-fold-left { right: auto; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.packet-fold-right { left: auto; clip-path: polygon(100% 0, 0 50%, 100% 100%); }

.seed-drift { position: absolute; left: 23vw; bottom: 39vh; width: 38vw; height: 25vh; opacity: var(--seed-open); transform: translateY(calc((1 - var(--seed-open)) * 34px)); }
.seed-drift i,
.pollen-cloud span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pollen);
  box-shadow: 0 0 0 3px rgba(246,217,74,.25);
}
.seed-drift i:nth-child(1){left:4%;top:64%;--dx:12px}.seed-drift i:nth-child(2){left:11%;top:38%;--dx:33px}.seed-drift i:nth-child(3){left:18%;top:51%;--dx:54px}.seed-drift i:nth-child(4){left:25%;top:24%;--dx:74px}.seed-drift i:nth-child(5){left:32%;top:55%;--dx:94px}.seed-drift i:nth-child(6){left:40%;top:32%;--dx:112px}.seed-drift i:nth-child(7){left:49%;top:62%;--dx:132px}.seed-drift i:nth-child(8){left:57%;top:26%;--dx:148px}.seed-drift i:nth-child(9){left:65%;top:50%;--dx:166px}.seed-drift i:nth-child(10){left:73%;top:34%;--dx:184px}.seed-drift i:nth-child(11){left:82%;top:58%;--dx:204px}.seed-drift i:nth-child(12){left:90%;top:42%;--dx:224px}
.seed-drift i { transform: translateX(calc(var(--seed-open) * var(--dx))) translateY(calc(var(--seed-open) * -18px)); animation: seedFloat 3.8s ease-in-out infinite alternate; animation-delay: calc(var(--dx) * -12ms); }

.soil-layers { position: absolute; left: 0; right: 0; bottom: 0; height: 35vh; transform: translateY(calc((1 - var(--field-rise)) * 16vh)); }
.soil-layers span { position: absolute; left: -5%; right: -5%; height: 40%; border-top: 1px solid rgba(138,90,60,.3); filter: drop-shadow(0 -6px 0 rgba(255,247,218,.55)); }
.soil-layers span:nth-child(1) { bottom: 18vh; background: rgba(245,183,166,.22); clip-path: polygon(0 42%, 18% 37%, 34% 47%, 51% 34%, 69% 44%, 84% 36%, 100% 43%, 100% 100%, 0 100%); }
.soil-layers span:nth-child(2) { bottom: 9vh; background: rgba(138,90,60,.18); clip-path: polygon(0 31%, 15% 43%, 29% 33%, 47% 44%, 64% 29%, 79% 39%, 100% 31%, 100% 100%, 0 100%); }
.soil-layers span:nth-child(3) { bottom: 0; background: rgba(246,217,74,.3); clip-path: polygon(0 38%, 12% 32%, 30% 41%, 44% 35%, 60% 45%, 74% 33%, 90% 42%, 100% 35%, 100% 100%, 0 100%); }

.field-marker {
  position: absolute;
  left: 13vw;
  top: 24vh;
  width: 150px;
  padding: 12px 12px 14px;
  background: rgba(255,247,218,.86);
  border: 1px solid rgba(47,42,36,.4);
  transform: rotate(-5deg);
  box-shadow: 0 10px 0 rgba(141,183,215,.2);
}
.field-marker::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 31vh; background: var(--soil); transform: rotate(4deg); }
.field-marker strong { display: block; font-family: Fraunces, Georgia, serif; font-size: 24px; line-height: .9; }
.field-marker em { display: block; margin-top: 8px; font-size: 12px; font-style: normal; }

.sprout-svg { position: absolute; left: 24vw; bottom: 10vh; width: 58vw; height: 58vh; overflow: visible; transform: translateY(calc((1 - var(--field-rise)) * 18vh)); }
.draw-stem,
.pod-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 620; stroke-dashoffset: calc(620 * (1 - var(--field-rise))); }
.draw-stem { stroke: var(--leaf); stroke-width: 7; filter: drop-shadow(8px 10px 0 rgba(141,183,215,.22)); }
.pod-line { stroke: var(--soil); stroke-width: 3; stroke-dasharray: 160; stroke-dashoffset: calc(160 * (1 - var(--field-rise))); }

.field-depth { position: absolute; inset: auto 0 0; height: 64vh; transform: translateY(calc((1 - var(--field-rise)) * 24vh)) rotateX(10deg); transform-origin: bottom center; z-index: 20; }
.furrow { position: absolute; left: -10%; right: -10%; height: 23vh; border-radius: 50% 50% 0 0; background: repeating-radial-gradient(ellipse at 50% 110%, transparent 0 22px, rgba(138,90,60,.18) 23px 25px, transparent 26px 44px); opacity: .75; }
.furrow-back { bottom: 25vh; transform: scaleX(.75); }
.furrow-mid { bottom: 12vh; transform: scaleX(.9); opacity: .9; }
.furrow-front { bottom: -2vh; opacity: 1; }
.flower-row { position: absolute; left: 0; right: 0; bottom: 0; height: 52vh; }
.row-back { bottom: 18vh; transform: scale(.68); opacity: .58; filter: blur(.3px); }
.row-mid { bottom: 5vh; transform: scale(.88); opacity: .86; }
.row-front { bottom: -5vh; transform: scale(1.08); }

.flower {
  position: absolute;
  bottom: 0;
  width: 4px;
  height: var(--h, 190px);
  border-radius: 999px;
  background: linear-gradient(var(--leaf), #5d9143);
  transform-origin: bottom center;
  transform: translateX(var(--sway)) rotate(var(--r, 0deg));
  transition: transform .12s linear;
}
.flower::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -14px;
  width: 34px;
  height: 34px;
  transform: translateX(-50%) rotate(var(--petal, 0deg));
  background:
    radial-gradient(ellipse at 50% 12%, var(--blossom) 0 28%, transparent 30%),
    radial-gradient(ellipse at 88% 50%, var(--blossom) 0 28%, transparent 30%),
    radial-gradient(ellipse at 50% 88%, var(--blossom) 0 28%, transparent 30%),
    radial-gradient(ellipse at 12% 50%, var(--blossom) 0 28%, transparent 30%),
    radial-gradient(circle at 50% 50%, var(--pollen) 0 16%, transparent 18%);
  filter: drop-shadow(3px 4px 0 rgba(141,183,215,.24));
}
.flower::after { content: ""; position: absolute; left: 3px; top: 38%; width: 28px; height: 7px; background: var(--leaf); border-radius: 100% 0; transform: rotate(-24deg); transform-origin: left center; opacity: .75; }
.f1{left:8%;--h:120px;--r:-4deg;--petal:12deg}.f2{left:21%;--h:150px;--r:3deg;--petal:44deg}.f3{left:35%;--h:132px;--r:-2deg;--petal:-9deg}.f4{left:51%;--h:160px;--r:5deg;--petal:28deg}.f5{left:68%;--h:126px;--r:-6deg;--petal:61deg}.f6{left:84%;--h:148px;--r:2deg;--petal:-28deg}
.f7{left:4%;--h:210px;--r:3deg;--petal:18deg}.f8{left:15%;--h:235px;--r:-4deg;--petal:49deg}.f9{left:29%;--h:198px;--r:5deg;--petal:-16deg}.f10{left:43%;--h:252px;--r:-3deg;--petal:73deg}.f11{left:58%;--h:218px;--r:4deg;--petal:31deg}.f12{left:72%;--h:244px;--r:-6deg;--petal:-35deg}.f13{left:89%;--h:205px;--r:3deg;--petal:7deg}
.f14{left:-3%;--h:340px;--r:-4deg;--petal:28deg}.f15{left:9%;--h:395px;--r:5deg;--petal:-13deg}.f16{left:22%;--h:322px;--r:-7deg;--petal:44deg}.f17{left:37%;--h:430px;--r:3deg;--petal:80deg}.f18{left:51%;--h:352px;--r:-2deg;--petal:-33deg}.f19{left:66%;--h:410px;--r:6deg;--petal:16deg}.f20{left:80%;--h:330px;--r:-5deg;--petal:55deg}.f21{left:94%;--h:380px;--r:4deg;--petal:-8deg}

.stitched-banner {
  position: absolute;
  left: 28vw;
  top: 18vh;
  padding: 18px 42px 17px;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(34px, 7vw, 92px);
  letter-spacing: -.055em;
  background: rgba(255,247,218,.78);
  border: 2px dashed rgba(138,90,60,.55);
  box-shadow: 0 18px 40px rgba(138,90,60,.12);
  transform: rotate(2deg) translateY(calc((1 - var(--field-rise)) * 20px));
  clip-path: polygon(0 0, 95% 3%, 100% 49%, 95% 97%, 0 100%, 4% 52%);
}
.stitched-banner span { background: linear-gradient(90deg, var(--ink), var(--soil)); -webkit-background-clip: text; color: transparent; }
.ribbon-label { position: absolute; right: 12vw; top: 43vh; width: 280px; padding: 16px 22px; background: var(--peach); box-shadow: 8px 10px 0 rgba(141,183,215,.35); transform: rotate(-7deg); }
.ribbon-label::before, .ribbon-label::after { content:""; position:absolute; top:0; bottom:0; width:28px; background: var(--peach); }
.ribbon-label::before { left:-22px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.ribbon-label::after { right:-22px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ribbon-label span { font-family: "M PLUS Rounded 1c", "Yu Gothic", system-ui, sans-serif; letter-spacing: .14em; font-size: 12px; }
.ribbon-label p { margin: 7px 0 0; line-height: 1.4; }

.picnic-cloth { position: absolute; left: -2vw; bottom: -4vh; width: 43vw; height: 38vh; opacity: .72; transform: rotate(7deg); background: repeating-linear-gradient(0deg, rgba(245,183,166,.95) 0 18px, transparent 18px 36px), repeating-linear-gradient(90deg, rgba(245,183,166,.75) 0 18px, transparent 18px 36px), #FFF7DA; clip-path: polygon(0 11%, 87% 0, 100% 82%, 10% 100%); box-shadow: 14px -10px 0 rgba(141,183,215,.2); }
.receipt-scrap { position: absolute; right: 15vw; top: 20vh; width: min(380px, 72vw); padding: 29px 30px; background: rgba(255,247,218,.92); border: 1px solid rgba(138,90,60,.2); box-shadow: 0 25px 55px rgba(138,90,60,.16); transform: rotate(5deg); clip-path: polygon(0 0, 100% 3%, 97% 100%, 83% 96%, 71% 100%, 57% 96%, 42% 100%, 27% 96%, 13% 100%, 4% 96%); }
.receipt-scrap h2 { margin: 8px 0 10px; font-family: Fraunces, Georgia, serif; font-size: clamp(35px, 5vw, 62px); letter-spacing: -.05em; line-height: .9; }
.receipt-scrap p { margin: 0; font-size: 16px; line-height: 1.55; }
.bee { position: absolute; width: 28px; height: 13px; border-radius: 50%; background: var(--ink); transform: translateX(calc(var(--wind) * 35px)); animation: beeBob 2.8s ease-in-out infinite alternate; }
.bee::before, .bee::after { content:""; position:absolute; top:-8px; width:15px; height:13px; border-radius:50%; background: rgba(141,183,215,.58); }
.bee::before { left:3px; transform: rotate(-25deg); }.bee::after { right:2px; transform: rotate(25deg); }
.bee span { position:absolute; right:-22px; top:6px; width:16px; border-top:2px dotted var(--ink); opacity:.35; }
.bee-one{left:36vw;top:31vh}.bee-two{left:58vw;top:51vh;animation-delay:-.9s}.bee-three{left:20vw;top:58vh;animation-delay:-1.7s}

.wind-arrows { position: absolute; inset: 0; pointer-events: none; opacity: calc(.08 + var(--wind) * .42); }
.wind-arrows span { position: absolute; width: 90px; height: 18px; border-top: 2px solid var(--shadow); border-right: 2px solid var(--shadow); border-radius: 0 14px 0 0; transform: translateX(calc(var(--wind) * 58px)); }
.wind-arrows span:nth-child(1){left:17vw;top:17vh}.wind-arrows span:nth-child(2){left:52vw;top:28vh;width:130px}.wind-arrows span:nth-child(3){left:70vw;top:62vh;width:78px}

.pollen-cloud { position: absolute; inset: 12vh 10vw 20vh; }
.pollen-cloud span { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); opacity: calc(.25 + var(--wind) * .75); transform: translate(calc((var(--x) - 50) * var(--wind) * .4px), calc((var(--y) - 40) * var(--wind) * -.22px)) scale(calc(.8 + var(--wind) * 1.4)); animation: pollenBlink 2.6s ease-in-out infinite alternate; animation-delay: calc(var(--x) * -28ms); }
.final-title { position: absolute; left: 50%; top: 35vh; width: min(900px, 86vw); transform: translateX(-50%); text-align: center; opacity: calc(var(--wind) * 1.1); }
.final-title small { font-family: "M PLUS Rounded 1c", "Yu Gothic", system-ui, sans-serif; letter-spacing: .22em; color: var(--soil); text-transform: uppercase; }
.final-title h2 { margin: 5px 0 12px; font-family: Fraunces, Georgia, serif; font-size: clamp(56px, 13vw, 170px); line-height: .82; letter-spacing: -.075em; color: var(--ink); text-shadow: 0 10px 0 rgba(246,217,74,.45), 0 18px 30px rgba(138,90,60,.12); }
.final-title p { margin: 0; font-family: "Zen Maru Gothic", "Yu Gothic", system-ui, sans-serif; font-size: clamp(17px, 2.2vw, 26px); }

.scroll-scenes { position: relative; z-index: -1; }
.scroll-panel { height: 100vh; }

@keyframes seedFloat { from { margin-top: -4px; } to { margin-top: 8px; } }
@keyframes beeBob { from { margin-top: -8px; } to { margin-top: 10px; } }
@keyframes pollenBlink { from { box-shadow: 0 0 0 2px rgba(246,217,74,.2); } to { box-shadow: 0 0 0 9px rgba(246,217,74,.1); } }

@media (max-width: 760px) {
  .tag-intro { right: 6vw; top: 11vh; max-width: 210px; }
  .seed-packet { left: 7vw; width: 250px; height: 330px; bottom: 10vh; }
  .packet-face h1 { font-size: 39px; }
  .sprout-svg { left: 10vw; width: 86vw; }
  .stitched-banner { left: 10vw; top: 16vh; font-size: 45px; padding: 16px 28px; }
  .ribbon-label { right: 7vw; top: 34vh; width: 225px; }
  .receipt-scrap { right: 7vw; top: 15vh; }
  .gingham-edge { width: 36px; }
  .flower::before { width: 28px; height: 28px; }
}