:root {
  --moon-paper: #FFF8E7;
  --jasmine-petal: #F7F1D2;
  --night-indigo: #1C2541;
  --ink-violet: #4B2E59;
  --dew-blue: #A9D6E5;
  --pollen-gold: #F4C95D;
  --leaf-shadow: #496F5D;
  --blush-wash: #E8AEB7;
  --display: "Yeseva One", Georgia, "Times New Roman", serif;
  --jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Nunito Sans", Inter, system-ui, sans-serif;
  --hand: "Gochi Hand", "Comic Sans MS", cursive;
  --stamp: "Space-free", "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--jasmine-petal);
  background: var(--night-indigo);
  font-family: var(--sans);
  overflow-x: hidden;
}

.night-scroll {
  position: relative;
  min-height: 600vh;
  background:
    radial-gradient(circle at 18% 8%, rgba(232, 174, 183, .18), transparent 28rem),
    radial-gradient(circle at 82% 22%, rgba(169, 214, 229, .12), transparent 24rem),
    linear-gradient(180deg, #1C2541 0%, #4B2E59 28%, #FFF8E7 70%, #1C2541 100%);
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  opacity: .18;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,248,231,.42) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 65%, rgba(75,46,89,.36) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,248,231,.05), rgba(28,37,65,.05));
  background-size: 7px 9px, 11px 13px, 100% 100%;
  mix-blend-mode: soft-light;
}

.scene {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: clamp(2rem, 6vw, 7rem);
  isolation: isolate;
}

.watercolor-wash {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: .92;
}

.indigo-wash { background: radial-gradient(circle at 38% 44%, rgba(255,248,231,.22), transparent 18rem), radial-gradient(circle at 70% 12%, rgba(244,201,93,.12), transparent 22rem), linear-gradient(155deg, #1C2541, #4B2E59 64%, #1C2541); }
.blush-wash { background: radial-gradient(circle at 20% 36%, rgba(232,174,183,.48), transparent 22rem), linear-gradient(180deg, #4B2E59, #1C2541); }
.blue-wash { background: radial-gradient(circle at 67% 45%, rgba(169,214,229,.5), transparent 20rem), linear-gradient(170deg, #1C2541, #496F5D); }
.violet-wash { background: radial-gradient(circle at 50% 32%, rgba(247,241,210,.26), transparent 17rem), linear-gradient(180deg, #4B2E59, #1C2541); }
.paper-wash { background: radial-gradient(circle at 22% 25%, rgba(232,174,183,.35), transparent 25rem), linear-gradient(180deg, #1C2541, #FFF8E7 18%, #F7F1D2 82%, #4B2E59); }
.final-wash { background: radial-gradient(circle at 50% 44%, rgba(244,201,93,.35), transparent 22rem), radial-gradient(circle at 50% 28%, rgba(247,241,210,.5), transparent 28rem), linear-gradient(180deg, #1C2541, #4B2E59 45%, #1C2541); }

.jasmine-stem {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  opacity: .9;
}

.stem-path, .scent-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#inkWobble);
}

.stem-path {
  stroke: url(#stemGradient);
  stroke-width: 9;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.scent-path {
  stroke: #F7F1D2;
  stroke-width: 3;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .36;
}

.moon-phase-nav {
  position: fixed;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  display: grid;
  gap: .72rem;
}

.moon-phase-nav button {
  width: .72rem;
  height: .72rem;
  border: 1px solid rgba(247,241,210,.6);
  border-radius: 999px;
  background: rgba(255,248,231,.18);
  box-shadow: 0 0 0 .22rem rgba(232,174,183,.08);
  cursor: pointer;
  transition: .35s ease;
}

.moon-phase-nav button.active {
  background: var(--pollen-gold);
  box-shadow: 0 0 1rem rgba(244,201,93,.8);
}

.glassine-label, .glassine-envelope {
  position: relative;
  z-index: 3;
  width: min(33rem, 82vw);
  padding: 1.4rem 1.55rem;
  color: var(--ink-violet);
  background: linear-gradient(135deg, rgba(255,248,231,.78), rgba(247,241,210,.42));
  border: 1px solid rgba(255,248,231,.55);
  box-shadow: 0 1.5rem 4rem rgba(28,37,65,.25), inset 0 0 2rem rgba(169,214,229,.16);
  backdrop-filter: blur(5px);
}

.first-label { margin: 6vh 0 0 7vw; transform: rotate(-2deg); }
.tied-label { align-self: center; }
.left-thread { margin-left: 8vw; transform: rotate(2.5deg); }
.right-thread { justify-self: end; margin-right: 8vw; transform: rotate(-2deg); }
.tilted { transform: rotate(-4deg); }

h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  margin: .3rem 0 .7rem;
  letter-spacing: .08em;
  line-height: .95;
}

h1 { font-size: clamp(3rem, 10vw, 8.5rem); color: var(--jasmine-petal); text-shadow: 0 0 2rem rgba(247,241,210,.4); }
h2 { font-size: clamp(2.1rem, 6vw, 5.3rem); }
p { line-height: 1.75; font-size: clamp(.95rem, 1.4vw, 1.15rem); }

.specimen-number {
  display: block;
  font-family: var(--stamp);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .7rem;
  color: var(--leaf-shadow);
}

.vertical-note {
  position: absolute;
  right: clamp(2rem, 7vw, 7rem);
  top: 18vh;
  z-index: 4;
  writing-mode: vertical-rl;
  font-family: var(--jp);
  letter-spacing: .25em;
  color: rgba(247,241,210,.78);
}

.left-note { left: 8vw; right: auto; color: var(--ink-violet); }

.bud-orb {
  position: absolute;
  left: 56%;
  top: 49%;
  width: 8rem;
  height: 12rem;
  z-index: 3;
  transform: translate(-50%, -50%) rotate(-11deg);
}

.bud-leaf, .bud-glow {
  position: absolute;
  inset: 16% 20%;
  border-radius: 90% 90% 45% 45%;
  transform-origin: 50% 90%;
  transition: transform 1.1s ease, border-radius 1.1s ease;
}

.bud-leaf { background: linear-gradient(180deg, #F7F1D2, #E8AEB7 65%, #496F5D); box-shadow: inset 0 0 1.2rem rgba(75,46,89,.22); }
.leaf-left { transform: rotate(-9deg) scaleX(.72); }
.leaf-right { transform: rotate(11deg) scaleX(.72); }
.bud-glow { inset: 33% 34%; background: #F4C95D; filter: blur(12px); opacity: .28; }
.bud-orb.open .leaf-left { transform: rotate(-48deg) translateX(-1.5rem) scaleX(.95); border-radius: 80% 45% 70% 45%; }
.bud-orb.open .leaf-right { transform: rotate(48deg) translateX(1.5rem) scaleX(.95); border-radius: 45% 80% 45% 70%; }

.moon-disc {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,248,231,.95), rgba(247,241,210,.42) 58%, transparent 70%);
  filter: blur(.3px);
}
.small-moon { width: 18rem; height: 18rem; right: 13vw; top: 9vh; opacity: .38; }
.full-moon { width: 22rem; height: 22rem; left: 42%; top: 8vh; opacity: .5; }
.name-moon { width: min(56vw, 38rem); height: min(56vw, 38rem); left: 50%; top: 45%; transform: translate(-50%, -50%); opacity: .72; }

.thread {
  position: absolute;
  width: 9rem;
  height: 1px;
  background: rgba(247,241,210,.75);
  top: 1.6rem;
  left: -8rem;
  transform: rotate(-18deg);
  box-shadow: 0 0 .4rem rgba(247,241,210,.4);
}
.right-thread .thread { left: auto; right: -8rem; transform: rotate(17deg); }

.pressed-petal {
  position: absolute;
  z-index: 2;
  width: 7rem;
  height: 3.6rem;
  border-radius: 80% 20% 80% 25%;
  background: linear-gradient(90deg, rgba(247,241,210,.75), rgba(232,174,183,.42));
  box-shadow: .6rem .9rem 1.5rem rgba(28,37,65,.18);
  opacity: .76;
}
.petal-a { right: 18vw; top: 28vh; transform: rotate(34deg); }
.petal-b { left: 18vw; bottom: 16vh; transform: rotate(-24deg); }
.petal-c { right: 12vw; top: 18vh; transform: rotate(64deg); }
.petal-d { left: 42vw; bottom: 12vh; transform: rotate(-8deg); }

.scent-ribbon {
  position: absolute;
  width: 30rem;
  height: 9rem;
  border-top: 2px solid rgba(247,241,210,.45);
  border-radius: 50%;
  filter: drop-shadow(0 0 .8rem rgba(244,201,93,.18));
}
.ribbon-one { right: 12vw; top: 24vh; transform: rotate(-15deg); animation: breathe 5.8s ease-in-out infinite; }

.dew-cluster { position: absolute; left: 52%; top: 30vh; z-index: 4; }
.dew-drop {
  position: absolute;
  width: .8rem;
  height: 1.05rem;
  border-radius: 50% 50% 55% 45%;
  background: radial-gradient(circle at 35% 25%, #FFF8E7, #A9D6E5 45%, rgba(169,214,229,.18));
  box-shadow: 0 0 1rem rgba(169,214,229,.9);
  animation: dewFall 4s ease-in-out infinite;
}
.dew-drop:nth-child(2) { left: 2.4rem; top: 3.8rem; animation-delay: .7s; }
.dew-drop:nth-child(3) { left: -2rem; top: 7rem; animation-delay: 1.6s; }
.dew-drop:nth-child(4) { left: 1rem; top: 10rem; animation-delay: 2.4s; }

.specimen-note { font-family: var(--hand); font-size: 1.25rem; letter-spacing: .04em; }
.handwritten { position: absolute; left: 18vw; bottom: 18vh; z-index: 4; color: var(--jasmine-petal); transform: rotate(-7deg); }

.moth {
  position: absolute;
  left: 58%;
  top: 40%;
  width: 6rem;
  height: 4rem;
  z-index: 4;
  animation: mothCircle 9s ease-in-out infinite;
}
.moth::before, .moth::after {
  content: "";
  position: absolute;
  width: 3.2rem;
  height: 4rem;
  background: radial-gradient(circle at 60% 35%, rgba(247,241,210,.82), rgba(75,46,89,.75));
  border-radius: 80% 25% 75% 25%;
}
.moth::before { left: .2rem; transform: rotate(-32deg); }
.moth::after { right: .2rem; transform: scaleX(-1) rotate(-32deg); }
.moth span { position: absolute; left: 50%; top: 20%; width: .28rem; height: 3rem; background: #1C2541; border-radius: 2rem; }

.glassine-envelope {
  justify-self: center;
  min-height: 17rem;
  color: var(--ink-violet);
  transform: rotate(1deg);
}
.washi-tape {
  position: absolute;
  width: 9rem;
  height: 2.2rem;
  left: 50%;
  top: -1rem;
  transform: translateX(-50%) rotate(-3deg);
  background: repeating-linear-gradient(90deg, rgba(232,174,183,.75), rgba(232,174,183,.75) 10px, rgba(255,248,231,.55) 10px, rgba(255,248,231,.55) 18px);
}

.canopy {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.petal-bloom {
  position: absolute;
  width: 10rem;
  height: 10rem;
  filter: drop-shadow(0 0 1.2rem rgba(247,241,210,.35));
}
.petal-bloom span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.3rem;
  height: 5rem;
  margin: -4.3rem 0 0 -1.65rem;
  border-radius: 70% 70% 45% 45%;
  background: radial-gradient(circle at 50% 18%, #FFF8E7, #F7F1D2 55%, #E8AEB7);
  transform-origin: 50% 4.3rem;
}
.petal-bloom span:nth-child(1) { transform: rotate(0deg) scaleY(var(--bloom, .35)); }
.petal-bloom span:nth-child(2) { transform: rotate(72deg) scaleY(var(--bloom, .35)); }
.petal-bloom span:nth-child(3) { transform: rotate(144deg) scaleY(var(--bloom, .35)); }
.petal-bloom span:nth-child(4) { transform: rotate(216deg) scaleY(var(--bloom, .35)); }
.petal-bloom span:nth-child(5) { transform: rotate(288deg) scaleY(var(--bloom, .35)); }
.bloom-one { left: 12vw; top: 13vh; }
.bloom-two { right: 12vw; top: 18vh; transform: scale(.82) rotate(14deg); }
.bloom-three { left: 20vw; bottom: 14vh; transform: scale(.72) rotate(-19deg); }
.bloom-four { right: 22vw; bottom: 12vh; transform: scale(.95) rotate(28deg); }

.final-wordmark {
  position: relative;
  z-index: 4;
  justify-self: center;
  text-align: center;
  color: var(--jasmine-petal);
  text-shadow: 0 0 2rem rgba(247,241,210,.7), 0 0 5rem rgba(244,201,93,.35);
}
.final-wordmark h2 { font-size: clamp(3.2rem, 12vw, 10rem); }
.final-wordmark .specimen-number { color: var(--pollen-gold); }

.fireflies {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
.firefly {
  position: absolute;
  width: .28rem;
  height: .28rem;
  border-radius: 50%;
  background: var(--pollen-gold);
  box-shadow: 0 0 .7rem .2rem rgba(244,201,93,.55);
  opacity: .15;
  animation: firePulse var(--pulse, 4s) ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: .28; transform: rotate(-15deg) translateX(0); }
  50% { opacity: .72; transform: rotate(-12deg) translateX(-1rem); }
}
@keyframes dewFall {
  0%, 100% { transform: translateY(0) scale(.78); opacity: .42; }
  45% { transform: translateY(.8rem) scale(1); opacity: 1; }
  75% { transform: translateY(2rem) scale(.7); opacity: .12; }
}
@keyframes mothCircle {
  0%, 100% { transform: translate(0,0) rotate(-6deg); }
  35% { transform: translate(-4rem,-2rem) rotate(12deg); }
  70% { transform: translate(2rem,2.5rem) rotate(-16deg); }
}
@keyframes firePulse {
  0%, 100% { opacity: .06; transform: translateY(0) scale(.7); }
  50% { opacity: .86; transform: translateY(-.8rem) scale(1.15); }
}

@media (max-width: 760px) {
  .scene { padding: 2rem 1.35rem; }
  .moon-phase-nav { display: none; }
  .first-label, .left-thread, .right-thread { margin-left: 0; margin-right: 0; justify-self: center; }
  .bud-orb { left: 66%; width: 6rem; height: 9rem; }
  .thread { display: none; }
  .vertical-note { right: 1rem; }
}