:root {
  --petal-white: #FFFBEA;
  --pollen-gold: #F2B705;
  --dew-blue: #A9DCEB;
  --stem-green: #557A3A;
  --leaf-shadow: #24351F;
  --blush-edge: #F6B7C8;
  --paper: #EAD8AC;
  --twilight: #6F5A8C;
  --dawn: #DDF3F6;
  --noon: #FFF2C2;
  --dusk: #C9B8E8;
  --sky-a: #DDF3F6;
  --sky-b: #FFF2C2;
  --ink: #24351F;
  --scene-progress: 0;
  --petal-open: 0;
  --orbit-angle: -120deg;
  --title-font: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body-font: "Nunito Sans", "Avenir Next", Avenir, system-ui, sans-serif;
  --jp-font: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--dawn);
  font-family: var(--body-font);
  overflow-x: hidden;
}

.sundial {
  position: relative;
  min-height: 500vh;
  isolation: isolate;
}

.skywash {
  position: fixed;
  inset: 0;
  z-index: -5;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 251, 234, .7), transparent 24%),
    linear-gradient(145deg, var(--sky-a), var(--sky-b));
  transition: background 900ms ease;
}

.paper-grain {
  position: fixed;
  inset: 0;
  z-index: -4;
  opacity: .32;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(36, 53, 31, .08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 62%, rgba(255, 251, 234, .6) 0 1px, transparent 2px),
    linear-gradient(90deg, rgba(36, 53, 31, .04) 1px, transparent 1px);
  background-size: 34px 34px, 49px 49px, 9px 9px;
  mix-blend-mode: multiply;
}

.sundial-scene {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 7vw;
}

.scene-copy {
  position: relative;
  z-index: 5;
  max-width: min(31rem, 86vw);
  color: var(--ink);
  filter: drop-shadow(0 22px 26px rgba(36, 53, 31, .12));
  opacity: .18;
  transform: translateY(35px) rotate(var(--tilt, -2deg));
  transition: opacity 800ms ease, transform 900ms cubic-bezier(.2, .7, .1, 1);
}

.sundial-scene.is-active .scene-copy {
  opacity: 1;
  transform: translateY(0) rotate(var(--tilt, -2deg));
}

.scene-copy h1,
.scene-copy h2 {
  margin: .2rem 0 .8rem;
  font-family: var(--title-font);
  font-size: clamp(3.5rem, 8vw, 9rem);
  line-height: .78;
  font-weight: 500;
  letter-spacing: .045em;
}

.scene-copy p {
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.28rem);
  line-height: 1.75;
}

.scene-copy em {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--title-font);
  font-size: 1.4rem;
  color: var(--twilight);
}

.specimen-number {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--stem-green);
  border-bottom: 1px solid rgba(85, 122, 58, .45);
  padding-bottom: .25rem;
}

.specimen-tab,
.petal-panel {
  padding: clamp(1.3rem, 3vw, 2.4rem);
  background:
    linear-gradient(135deg, rgba(255, 251, 234, .88), rgba(234, 216, 172, .74)),
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(36, 53, 31, .05) 18px 19px);
  border: 1px solid rgba(36, 53, 31, .28);
  box-shadow: 0 22px 60px rgba(36, 53, 31, .15), inset 0 0 0 8px rgba(255, 251, 234, .22);
}

.specimen-tab::before,
.petal-panel::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  top: 14px;
  right: 18px;
  background: radial-gradient(circle at 36% 32%, #FFFBEA, #F2B705 55%, #557A3A 58% 62%, transparent 63%);
  box-shadow: 7px 9px 18px rgba(36, 53, 31, .2);
}

.specimen-tab { border-radius: 18px 9px 22px 11px; }
.petal-panel { border-radius: 58% 42% 56% 44% / 24% 52% 48% 76%; }
.dawn-tab { margin-right: 34vw; --tilt: -4deg; }
.panel-left { margin-right: 42vw; margin-top: 8vh; --tilt: 3deg; }
.panel-right { margin-left: 43vw; --tilt: -3deg; }
.errand-tab { margin-left: 36vw; margin-top: 18vh; --tilt: 4deg; }
.panel-moon { margin-right: 26vw; margin-bottom: 14vh; --tilt: -5deg; }

.daisy-plate {
  position: fixed;
  left: 49%;
  top: 50%;
  width: min(74vw, 760px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(calc(var(--scene-progress) * 24deg));
  z-index: 2;
  pointer-events: none;
  transition: filter 700ms ease;
}

.time-orbit {
  position: absolute;
  inset: 5%;
  overflow: visible;
  opacity: .78;
}

.orbit-line {
  fill: none;
  stroke: rgba(36, 53, 31, .36);
  stroke-width: 1.1;
  stroke-dasharray: 3 11;
}

.tickmarks line {
  stroke: rgba(36, 53, 31, .48);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.sun-mote {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFBEA 0 18%, #F2B705 45%, rgba(242, 183, 5, .25) 70%, transparent 71%);
  box-shadow: 0 0 30px #F2B705, 0 0 70px rgba(242, 183, 5, .45);
  transform: rotate(var(--orbit-angle)) translateX(min(33vw, 270px));
  z-index: 6;
}

.stem {
  position: absolute;
  left: 49%;
  top: 52%;
  width: 18px;
  height: 58vh;
  background: linear-gradient(90deg, #24351F, #557A3A 44%, #A9DCEB 46%, #557A3A 56%, #24351F);
  border-radius: 99px;
  transform-origin: top;
  transform: translateX(-50%) rotate(4deg);
  box-shadow: 22px 34px 35px rgba(36, 53, 31, .22);
}

.leaf {
  position: absolute;
  width: 145px;
  height: 58px;
  top: 72%;
  left: 50%;
  background: linear-gradient(135deg, #557A3A, #A9DCEB 48%, #24351F);
  border-radius: 100% 0 100% 0;
  transform-origin: left center;
  opacity: .85;
}
.leaf::after { content: ""; position: absolute; inset: 50% 8% auto 8%; height: 1px; background: rgba(255, 251, 234, .55); transform: rotate(-10deg); }
.leaf-a { transform: rotate(28deg); }
.leaf-b { top: 79%; transform: rotate(158deg) scale(.75); }

.daisy-head {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(42vw, 420px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(calc(var(--scene-progress) * -34deg));
}

.petal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28%;
  height: 55%;
  margin-left: -14%;
  margin-top: -50%;
  transform-origin: 50% 92%;
  transform: rotate(var(--r)) scaleY(calc(.22 + var(--petal-open) * .78)) translateY(calc((1 - var(--petal-open)) * 45px));
  border-radius: 80% 80% 46% 46% / 98% 98% 34% 34%;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.85), transparent 34%),
    linear-gradient(90deg, rgba(246, 183, 200, .55), #FFFBEA 18% 82%, rgba(169, 220, 235, .38)),
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(36, 53, 31, .08) 14px 15px);
  border: 1px solid rgba(36, 53, 31, .14);
  box-shadow: inset 0 -18px 22px rgba(234, 216, 172, .35), 0 12px 20px rgba(36, 53, 31, .08);
  opacity: calc(.34 + var(--petal-open) * .66);
  transition: transform 650ms cubic-bezier(.18, .8, .2, 1), opacity 650ms ease;
}

.petal span {
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translateX(-50%) rotate(90deg);
  font-family: var(--jp-font);
  font-size: .56rem;
  letter-spacing: .18em;
  color: rgba(36, 53, 31, .5);
  text-transform: uppercase;
}
.petal-1 { --r: 0deg; } .petal-2 { --r: 30deg; } .petal-3 { --r: 60deg; } .petal-4 { --r: 90deg; }
.petal-5 { --r: 120deg; } .petal-6 { --r: 150deg; } .petal-7 { --r: 180deg; } .petal-8 { --r: 210deg; }
.petal-9 { --r: 240deg; } .petal-10 { --r: 270deg; } .petal-11 { --r: 300deg; } .petal-12 { --r: 330deg; }

.bud-shell {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 48%;
  transform: translate(-50%, -50%) scale(calc(1 - var(--petal-open) * .6));
  opacity: calc(1 - var(--petal-open));
  border-radius: 48% 52% 44% 56% / 72% 72% 28% 28%;
  background: linear-gradient(145deg, #557A3A, #A9DCEB 48%, #24351F);
  box-shadow: inset 0 -16px 30px rgba(36, 53, 31, .32);
  z-index: 3;
}

.pollen-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(calc(.64 + var(--petal-open) * .36));
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 36%, #FFF2C2 0 10%, transparent 11%),
    radial-gradient(circle, #F2B705, #EAD8AC 62%, #557A3A 64% 68%, #24351F 70%);
  box-shadow: inset 0 0 18px rgba(36, 53, 31, .18), 0 7px 16px rgba(36, 53, 31, .15);
  z-index: 4;
}
.pollen-center b { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #FFF2C2; box-shadow: 0 0 0 1px rgba(36, 53, 31, .1); }
.pollen-center b:nth-child(1) { left: 28%; top: 20%; } .pollen-center b:nth-child(2) { left: 54%; top: 18%; }
.pollen-center b:nth-child(3) { left: 70%; top: 39%; } .pollen-center b:nth-child(4) { left: 55%; top: 61%; }
.pollen-center b:nth-child(5) { left: 28%; top: 66%; } .pollen-center b:nth-child(6) { left: 18%; top: 43%; }
.pollen-center b:nth-child(7) { left: 41%; top: 43%; } .pollen-center b:nth-child(8) { left: 73%; top: 68%; }
.pollen-center b:nth-child(9) { left: 12%; top: 74%; }

.chapter-ring {
  position: fixed;
  right: 3vw;
  top: 50%;
  width: 220px;
  height: 220px;
  transform: translateY(-50%);
  z-index: 10;
}
.chapter-link {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7.8rem;
  margin-left: -3.9rem;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--title-font);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-align: center;
  opacity: .52;
  transform: rotate(var(--a)) translateY(-102px) rotate(calc(-1 * var(--a)));
  transition: opacity 300ms ease, color 300ms ease, transform 300ms ease;
}
.chapter-link:nth-child(1) { --a: -55deg; } .chapter-link:nth-child(2) { --a: -20deg; }
.chapter-link:nth-child(3) { --a: 18deg; } .chapter-link:nth-child(4) { --a: 55deg; } .chapter-link:nth-child(5) { --a: 92deg; }
.chapter-link.is-active { opacity: 1; color: var(--twilight); transform: rotate(var(--a)) translateY(-112px) rotate(calc(-1 * var(--a))); }

.dew-lens {
  position: fixed;
  z-index: 7;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), rgba(169,220,235,.42) 40%, rgba(255,251,234,.12) 68%, transparent 70%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset -12px -18px 25px rgba(111,90,140,.12), 0 18px 38px rgba(36,53,31,.14);
  opacity: 0;
  transform: translateY(30px) scale(.8);
  transition: opacity 700ms ease, transform 900ms ease;
}
.dew-lens span { position: absolute; inset: 32%; border-radius: 50%; border: 1px solid rgba(36, 53, 31, .23); transform: rotate(-25deg) scaleX(1.8); }
.lens-one { width: 118px; height: 118px; left: 14vw; top: 22vh; }
.lens-two { width: 76px; height: 76px; right: 27vw; bottom: 18vh; }
body.scene-1 .dew-lens { opacity: 1; transform: translateY(0) scale(1); }

.pollen-orbit {
  position: fixed;
  z-index: 7;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #F2B705;
  box-shadow: 0 0 18px rgba(242, 183, 5, .72);
  opacity: 0;
}
.orbit-one { left: 57vw; top: 28vh; animation: pollenDrift 8s linear infinite; }
.orbit-two { left: 42vw; top: 63vh; animation: pollenDrift 10s -3s linear infinite reverse; }
.orbit-three { left: 71vw; top: 55vh; animation: pollenDrift 11s -5s linear infinite; }
body.scene-2 .pollen-orbit, body.scene-3 .pollen-orbit { opacity: 1; }

@keyframes pollenDrift { 0% { transform: rotate(0deg) translateX(42px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(42px) rotate(-360deg); } }

.ladybug {
  position: fixed;
  left: 52%;
  top: 112%;
  z-index: 8;
  width: 32px;
  height: 24px;
  border-radius: 50% 50% 45% 45%;
  background: linear-gradient(90deg, #24351F 0 10%, #F6B7C8 11% 50%, #b72c1f 51% 100%);
  border: 1px solid #24351F;
  transition: top 1000ms ease, transform 1000ms ease;
}
.ladybug::before { content: ""; position: absolute; left: 13px; top: 1px; bottom: 1px; width: 1px; background: #24351F; }
.ladybug i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #24351F; }
.ladybug i:nth-child(1) { left: 8px; top: 7px; } .ladybug i:nth-child(2) { right: 8px; top: 8px; } .ladybug i:nth-child(3) { left: 18px; bottom: 5px; }
body.scene-3 .ladybug { top: 62%; transform: rotate(-20deg); }

.footprints { position: fixed; z-index: 4; width: 100px; height: 80px; opacity: 0; background-image: radial-gradient(ellipse, rgba(36,53,31,.32) 0 32%, transparent 35%); background-size: 18px 13px; transform: rotate(25deg); transition: opacity 700ms ease; }
.footprints-a { left: 59vw; top: 55vh; } .footprints-b { left: 65vw; top: 48vh; transform: rotate(-10deg); }
body.scene-3 .footprints { opacity: .7; }

.grass-shadow {
  position: fixed;
  bottom: -12vh;
  width: 3px;
  height: 74vh;
  background: linear-gradient(to top, rgba(36,53,31,.42), transparent);
  transform-origin: bottom;
  z-index: 1;
  opacity: .45;
}
.grass-shadow-a { left: 9vw; transform: rotate(-18deg); } .grass-shadow-b { left: 78vw; transform: rotate(14deg); } .grass-shadow-c { left: 87vw; transform: rotate(26deg); }

.margin-notes {
  position: fixed;
  left: 2.2vw;
  top: 8vh;
  z-index: 10;
  display: grid;
  gap: 1rem;
  color: rgba(36,53,31,.68);
}
.vertical-kana { writing-mode: vertical-rl; font-family: var(--jp-font); letter-spacing: .35em; font-size: .95rem; }
.seed-envelope { max-width: 10rem; padding: .75rem; border: 1px dashed rgba(36,53,31,.38); background: rgba(234,216,172,.34); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-3deg); }

.scroll-meter { position: fixed; left: 3vw; bottom: 5vh; width: 1px; height: 22vh; background: rgba(36,53,31,.24); z-index: 11; }
.scroll-meter span { position: absolute; left: -2px; bottom: 0; width: 5px; height: calc(var(--scene-progress) * 100%); background: linear-gradient(to top, #557A3A, #F2B705, #6F5A8C); border-radius: 99px; }

body.scene-0 { --sky-a: #DDF3F6; --sky-b: #A9DCEB; --petal-open: .02; --orbit-angle: -122deg; }
body.scene-1 { --sky-a: #DDF3F6; --sky-b: #FFFBEA; --petal-open: .34; --orbit-angle: -42deg; }
body.scene-2 { --sky-a: #FFF2C2; --sky-b: #FFFBEA; --petal-open: 1; --orbit-angle: 28deg; }
body.scene-3 { --sky-a: #FFF2C2; --sky-b: #EAD8AC; --petal-open: .82; --orbit-angle: 100deg; }
body.scene-4 { --sky-a: #C9B8E8; --sky-b: #6F5A8C; --petal-open: .28; --orbit-angle: 188deg; color: #FFFBEA; }
body.scene-4 .skywash { background: radial-gradient(circle at 72% 18%, rgba(255,251,234,.28), transparent 18%), linear-gradient(145deg, #C9B8E8, #6F5A8C); }
body.scene-4 .daisy-plate { filter: saturate(.82) brightness(.86); }
body.scene-4 .scene-copy { color: #FFFBEA; }
body.scene-4 .specimen-number { color: #FFF2C2; border-color: rgba(255,242,194,.5); }
body.scene-4 .specimen-tab, body.scene-4 .petal-panel { background: linear-gradient(135deg, rgba(111,90,140,.82), rgba(36,53,31,.56)); border-color: rgba(255,251,234,.36); }

@media (max-width: 900px) {
  .daisy-plate { left: 50%; top: 42%; width: 92vw; }
  .dawn-tab, .panel-left, .panel-right, .errand-tab, .panel-moon { margin: 48vh 0 0; }
  .chapter-ring { right: auto; left: 50%; top: auto; bottom: 1rem; transform: translateX(-50%) scale(.72); }
  .margin-notes { display: none; }
  .scene-copy h1, .scene-copy h2 { font-size: clamp(3.2rem, 15vw, 6rem); }
}