:root {
  /* Space Mono sparingly so the handmade world has one crisp archival detail. */
  --morning-cream: #FFF7E6;
  --apricot-sun: #FFB86B;
  --lavender-ink: #5F4B8B;
  --jam-red: #C94B5B;
  --peony-pink: #F58AAE;
  --bluebell-shade: #8EA7E9;
  --pear-leaf: #9BCB6B;
  --scene-wash: #FFF7E6;
  --scene-glow: #FFB86B;
  --scene-shadow: #8EA7E9;
  --progress: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--lavender-ink);
  background: var(--morning-cream);
  font-family: "Nunito Sans", sans-serif;
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .28;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(95,75,139,.16) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 36%, rgba(201,75,91,.13) 0 1px, transparent 1.4px),
    linear-gradient(115deg, rgba(255,255,255,.35), rgba(255,184,107,.06) 42%, rgba(142,167,233,.08));
  background-size: 34px 34px, 46px 46px, 100% 100%;
  mix-blend-mode: multiply;
}

.day-garland { position: relative; z-index: 2; }

.garland-map {
  position: fixed;
  inset: 0;
  z-index: 7;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 7px 8px rgba(95,75,139,.15));
}

#garland-path {
  fill: none;
  stroke: var(--pear-leaf);
  stroke-width: .9;
  stroke-linecap: round;
  stroke-dasharray: 920;
  stroke-dashoffset: calc(920 - (920 * var(--progress)));
}

.loveliness-meter {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px dashed rgba(95,75,139,.42);
  border-radius: 999px;
  background: rgba(255,247,230,.76);
  box-shadow: 0 10px 35px rgba(95,75,139,.12);
  backdrop-filter: blur(6px);
}

.meter-label {
  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.meter-cord { display: flex; gap: 5px; min-width: 104px; }
.meter-cord i {
  width: 14px;
  height: 14px;
  display: block;
  transform: scale(.2) rotate(-20deg);
  opacity: 0;
  transition: transform .55s cubic-bezier(.18,.89,.32,1.28), opacity .35s;
}
.meter-cord i.kept { transform: scale(1) rotate(0deg); opacity: 1; }
.meter-cord .sun { border-radius: 50%; background: var(--apricot-sun); box-shadow: 0 0 0 4px rgba(255,184,107,.28); }
.meter-cord .daisy { border-radius: 50%; background: var(--peony-pink); box-shadow: 7px 0 0 -3px var(--morning-cream), -7px 0 0 -3px var(--morning-cream), 0 7px 0 -3px var(--morning-cream), 0 -7px 0 -3px var(--morning-cream); }
.meter-cord .peach { border-radius: 60% 45% 55% 50%; background: var(--apricot-sun); border: 2px solid var(--jam-red); }
.meter-cord .ticket { background: var(--morning-cream); border: 2px solid var(--jam-red); border-radius: 2px; }
.meter-cord .moon { border-radius: 50%; background: var(--bluebell-shade); box-shadow: inset -5px 0 0 var(--lavender-ink); }

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(24px, 1fr) minmax(260px, 560px) minmax(280px, 700px) minmax(24px, 1fr);
  align-items: center;
  padding: 8vh 0;
  background:
    radial-gradient(circle at 74% 22%, color-mix(in srgb, var(--scene-glow) 42%, transparent), transparent 34%),
    linear-gradient(145deg, var(--scene-wash), var(--morning-cream) 45%, color-mix(in srgb, var(--scene-shadow) 24%, var(--morning-cream)));
}

.scene::before {
  content: "";
  position: absolute;
  left: -4vw;
  right: -4vw;
  top: -23px;
  height: 58px;
  background: radial-gradient(circle at 25px 44px, transparent 22px, rgba(255,247,230,.86) 23px 31px, transparent 32px) repeat-x;
  background-size: 58px 58px;
  opacity: .72;
}

.scene::after {
  content: "";
  position: absolute;
  inset: auto -10% 0;
  height: 26vh;
  background: linear-gradient(0deg, rgba(95,75,139,.12), transparent);
  pointer-events: none;
}

.curtain-dawn { --scene-wash: #FFF7E6; --scene-glow: #FFB86B; --scene-shadow: #F58AAE; }
.flower-market-walk { --scene-wash: #FFF7E6; --scene-glow: #F58AAE; --scene-shadow: #8EA7E9; }
.picnic-noon { --scene-wash: #FFF7E6; --scene-glow: #FFB86B; --scene-shadow: #9BCB6B; }
.golden-errand-hour { --scene-wash: #FFB86B; --scene-glow: #FFF7E6; --scene-shadow: #F58AAE; }
.lavender-porch-night { --scene-wash: #8EA7E9; --scene-glow: #F58AAE; --scene-shadow: #5F4B8B; color: #FFF7E6; }

.note-card {
  position: relative;
  z-index: 5;
  grid-column: 2;
  max-width: 520px;
  padding: clamp(28px, 5vw, 54px);
  background: rgba(255,247,230,.86);
  color: var(--lavender-ink);
  border: 2px solid rgba(95,75,139,.24);
  border-radius: 30px 20px 36px 22px;
  box-shadow: 0 24px 70px rgba(95,75,139,.16), inset 0 0 0 8px rgba(255,255,255,.23);
  transform: rotate(-1.5deg) translateY(18px);
  opacity: .45;
  transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .9s;
}

.scene.in-view .note-card { transform: rotate(-1.5deg) translateY(0); opacity: 1; }
.market-card, .errand-card { grid-column: 3; transform: rotate(1.7deg) translateY(18px); }
.scene.in-view .market-card, .scene.in-view .errand-card { transform: rotate(1.7deg) translateY(0); }
.porch-card { background: rgba(95,75,139,.58); color: #FFF7E6; border-color: rgba(255,247,230,.32); }

.note-card::before, .note-card::after {
  content: "";
  position: absolute;
  width: 76px;
  height: 24px;
  background: rgba(255,184,107,.52);
  top: -13px;
  transform: rotate(-9deg);
  border-radius: 4px;
}
.note-card::before { left: 34px; }
.note-card::after { right: 32px; transform: rotate(10deg); background: rgba(245,138,174,.42); }

.stamp {
  font-family: "Space Mono", monospace;
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--jam-red);
}

h1, h2 {
  font-family: "Fraunces", serif;
  margin: 0;
  line-height: .88;
  letter-spacing: -.055em;
  font-weight: 760;
}

h1 { font-size: clamp(68px, 11vw, 160px); }
h2 { font-size: clamp(48px, 7vw, 110px); }

.poem {
  max-width: 32ch;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.45;
  margin: 24px 0 0;
}

.hand-note, .final-phrase {
  display: inline-block;
  margin-top: 22px;
  font-family: "Caveat", cursive;
  font-size: clamp(30px, 4vw, 54px);
  color: var(--jam-red);
  transform: rotate(-3deg);
}
.porch-card .final-phrase { color: #FFB86B; }

.underline-bloom { position: relative; }
.underline-bloom::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 10px;
  background: repeating-radial-gradient(circle at 8px 5px, var(--peony-pink) 0 3px, transparent 4px 15px);
  opacity: .42;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s .35s;
}
.scene.in-view .underline-bloom::after { transform: scaleX(1); }

.sky-orb {
  position: absolute;
  z-index: 1;
  width: clamp(220px, 36vw, 520px);
  height: clamp(220px, 36vw, 520px);
  border-radius: 50%;
  right: 8vw;
  top: 11vh;
  background: radial-gradient(circle at 36% 31%, rgba(255,255,255,.72), var(--scene-glow) 42%, transparent 70%);
  animation: medallion 24s linear infinite;
}
.pink-orb { left: 9vw; right: auto; top: 18vh; }
.noon-orb { right: 12vw; top: 8vh; }
.golden-orb { left: 7vw; right: auto; top: 15vh; }
.moon-orb { background: radial-gradient(circle at 39% 31%, #FFF7E6 0 12%, #8EA7E9 30%, #5F4B8B 68%); }

@keyframes medallion { to { transform: rotate(360deg); } }

.lace-curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22vw;
  z-index: 3;
  opacity: .5;
  background:
    linear-gradient(90deg, rgba(255,255,255,.7), rgba(255,255,255,.12)),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(95,75,139,.16) 25px 27px),
    radial-gradient(circle at 18px 28px, rgba(95,75,139,.12) 0 5px, transparent 6px) 0 0/44px 44px;
  animation: curtainSlide 8s ease-in-out infinite alternate;
}
.curtain-left { left: 0; }
.curtain-right { right: 0; transform: scaleX(-1); animation-delay: -2s; }
@keyframes curtainSlide { from { translate: -18px 0; } to { translate: 18px 0; } }

.floating-field::before, .floating-field::after, .scene .paper-birds::before {
  content: "✿  ·  ◦  ✦  ·  ✿  ◦  ·";
  position: absolute;
  z-index: 4;
  left: 6vw;
  top: 18vh;
  font-family: "Caveat", cursive;
  font-size: 30px;
  color: rgba(245,138,174,.58);
  animation: drift 16s linear infinite;
}
.floating-field::after { top: 62vh; left: 54vw; color: rgba(155,203,107,.62); animation-duration: 21s; }
@keyframes drift { 50% { transform: translate(36px, -30px) rotate(8deg); } }

.vignette {
  position: relative;
  z-index: 4;
  grid-column: 3;
  min-height: 420px;
  transform: translateY(24px);
  opacity: .65;
  transition: transform 1s, opacity 1s;
}
.scene.in-view .vignette { transform: translateY(0); opacity: 1; }
.flower-market-walk .vignette, .golden-errand-hour .vignette { grid-column: 2; grid-row: 1; }

.windowsill::before {
  content: "";
  position: absolute;
  left: 4%; right: 2%; bottom: 18%; height: 42px;
  background: #FFF7E6;
  border: 3px solid var(--lavender-ink);
  border-radius: 24px;
  box-shadow: 0 18px 0 rgba(95,75,139,.12);
}
.teacup { position: absolute; width: 112px; height: 78px; left: 24%; bottom: 28%; background: #FFF7E6; border: 4px solid #5F4B8B; border-radius: 14px 14px 40px 40px; animation: bob 4s ease-in-out infinite; }
.teacup::after { content:""; position:absolute; right:-36px; top:15px; width:35px; height:35px; border:4px solid #5F4B8B; border-left:0; border-radius:0 50% 50% 0; }
.daisy { position:absolute; width:34px; height:34px; border-radius:50%; background:#FFB86B; box-shadow: 18px 0 0 -8px #FFF7E6, -18px 0 0 -8px #FFF7E6, 0 18px 0 -8px #FFF7E6, 0 -18px 0 -8px #FFF7E6; }
.daisy-one { left: 55%; bottom: 50%; }
.daisy-two { left: 65%; bottom: 38%; transform: scale(.75); }
.sparrow { position:absolute; right:18%; top:32%; width:72px; height:38px; background:#C94B5B; border-radius:60% 45% 50% 50%; transform: rotate(-12deg); }
.sparrow::before { content:""; position:absolute; left:-24px; top:8px; border-right:28px solid #C94B5B; border-top:10px solid transparent; border-bottom:10px solid transparent; }

@keyframes bob { 50% { transform: translateY(-14px) rotate(2deg); } }

.flower-stall .awning { position:absolute; left:8%; top:16%; width:360px; height:76px; border-radius:28px 28px 8px 8px; background: repeating-linear-gradient(90deg, #F58AAE 0 38px, #FFF7E6 39px 76px); border:4px solid #5F4B8B; }
.bucket { position:absolute; bottom:18%; width:96px; height:124px; background:#8EA7E9; border:4px solid #5F4B8B; border-radius:0 0 28px 28px; }
.bucket-a { left:20%; } .bucket-b { left:43%; background:#9BCB6B; }
.bucket i { position:absolute; bottom:90px; width:18px; height:120px; background:#9BCB6B; border-radius:20px; transform-origin: bottom; }
.bucket i:nth-child(1) { left:20px; transform: rotate(-18deg); } .bucket i:nth-child(2) { left:45px; } .bucket i:nth-child(3) { left:68px; transform: rotate(18deg); }
.bucket i::before { content:""; position:absolute; top:-15px; left:-12px; width:36px; height:36px; border-radius:50%; background:#F58AAE; box-shadow: 14px 0 0 -6px #FFF7E6, -14px 0 0 -6px #FFF7E6, 0 14px 0 -6px #FFF7E6; }
.receipt { position:absolute; right:18%; bottom:28%; width:100px; padding:18px 12px; background:#FFF7E6; border:2px dashed #C94B5B; font-family:"Space Mono", monospace; font-size:12px; transform:rotate(8deg); }

.picnic-cloth { min-height:520px; }
.picnic-cloth::before { content:""; position:absolute; left:8%; right:2%; bottom:10%; height:310px; border-radius:46px; border:4px solid #5F4B8B; background: repeating-linear-gradient(0deg, rgba(201,75,91,.2) 0 30px, transparent 31px 60px), repeating-linear-gradient(90deg, rgba(201,75,91,.22) 0 30px, #FFF7E6 31px 60px); transform: rotate(3deg); box-shadow:0 30px 70px rgba(95,75,139,.16); }
.jam-jar { position:absolute; left:20%; bottom:34%; width:86px; height:140px; background:linear-gradient(180deg, rgba(255,255,255,.66), rgba(201,75,91,.55)); border:4px solid #5F4B8B; border-radius:20px 20px 34px 34px; animation:bob 5s ease-in-out infinite; }
.jam-jar::before { content:"jam"; position:absolute; top:-28px; left:9px; width:62px; text-align:center; background:#FFB86B; color:#5F4B8B; border:3px solid #5F4B8B; border-radius:8px; font-family:"Caveat", cursive; font-size:24px; }
.peach { position:absolute; width:88px; height:74px; background:#FFB86B; border:4px solid #C94B5B; border-radius:55% 45% 50% 55%; }
.peach-a { left:46%; bottom:39%; transform:rotate(-18deg); } .peach-b { left:60%; bottom:30%; transform:scale(.78) rotate(12deg); }
.peach::after { content:""; position:absolute; top:-20px; left:36px; width:28px; height:18px; background:#9BCB6B; border-radius:100% 0; transform:rotate(-20deg); }
.map-fold { position:absolute; right:12%; bottom:42%; width:126px; height:92px; background:linear-gradient(90deg, #FFF7E6 0 33%, #FFB86B 34% 66%, #FFF7E6 67%); border:3px solid #5F4B8B; transform:rotate(9deg); }

.errand-tokens span { position:absolute; box-shadow:0 18px 38px rgba(95,75,139,.18); }
.ticket-stub { left:18%; top:18%; width:116px; padding:22px 10px; background:#FFF7E6; border:3px dashed #C94B5B; color:#C94B5B; font-family:"Space Mono", monospace; text-align:center; transform:rotate(-14deg); }
.pear { left:46%; top:34%; width:100px; height:134px; background:#9BCB6B; border:4px solid #5F4B8B; border-radius:48% 52% 58% 42%; transform:rotate(8deg); }
.pear::before { content:""; position:absolute; top:-30px; left:48px; width:10px; height:38px; background:#5F4B8B; border-radius:10px; transform:rotate(18deg); }
.envelope { right:16%; top:25%; width:150px; height:94px; background:#FFF7E6; border:4px solid #5F4B8B; transform:rotate(12deg); }
.envelope::before { content:""; position:absolute; inset:0; background:linear-gradient(145deg, transparent 49%, rgba(95,75,139,.45) 50% 52%, transparent 53%), linear-gradient(35deg, transparent 49%, rgba(95,75,139,.45) 50% 52%, transparent 53%); }
.matchbox { left:34%; bottom:18%; width:142px; height:72px; background:#F58AAE; border:4px solid #5F4B8B; border-radius:10px; transform:rotate(5deg); }
.matchbox::after { content:"sun left"; position:absolute; inset:16px; color:#FFF7E6; font-family:"Caveat", cursive; font-size:25px; }

.heart-garland { position:absolute; z-index:3; inset:9vh 10vw auto auto; width:450px; height:400px; border:5px solid #9BCB6B; border-top-color:transparent; border-left-color:#9BCB6B; border-radius:50% 50% 45% 45%; transform:rotate(45deg); opacity:.38; }
.heart-garland::before, .heart-garland::after { content:""; position:absolute; width:220px; height:220px; border:5px solid #9BCB6B; border-bottom:0; border-right:0; border-radius:50%; }
.heart-garland::before { left:-55px; top:-80px; } .heart-garland::after { right:-80px; top:-55px; }
.heart-garland span { position:absolute; width:18px; height:28px; background:#9BCB6B; border-radius:100% 0; }
.heart-garland span:nth-child(1){left:15%;top:9%;}.heart-garland span:nth-child(2){left:42%;top:-5%;}.heart-garland span:nth-child(3){right:2%;top:22%;}.heart-garland span:nth-child(4){right:24%;bottom:6%;}.heart-garland span:nth-child(5){left:6%;bottom:18%;}
.porch-table::before { content:""; position:absolute; left:15%; right:8%; bottom:17%; height:120px; background:rgba(95,75,139,.55); border:4px solid #FFF7E6; border-radius:24px; }
.porch-lamp { position:absolute; left:42%; bottom:37%; width:78px; height:145px; background:#FFB86B; border:4px solid #FFF7E6; border-radius:50% 50% 16px 16px; box-shadow:0 0 80px #FFB86B; animation: lampGlow 3s ease-in-out infinite; }
@keyframes lampGlow { 50% { box-shadow:0 0 130px #FFB86B; } }
.moth { position:absolute; width:28px; height:18px; border-radius:50%; background:#FFF7E6; opacity:.78; animation:moth 7s ease-in-out infinite; }
.moth-a { left:35%; top:25%; } .moth-b { left:56%; top:18%; animation-delay:-3s; }
@keyframes moth { 50% { transform:translate(38px, -25px) rotate(28deg); } }
.closed-note { position:absolute; right:20%; bottom:36%; padding:16px 28px; background:#FFF7E6; color:#5F4B8B; border:3px solid #FFB86B; border-radius:12px; font-family:"Caveat", cursive; font-size:34px; transform:rotate(-9deg); }

.paper-birds span { position:absolute; width:46px; height:20px; border-top:4px solid #5F4B8B; border-radius:50%; animation: drift 12s ease-in-out infinite; }
.paper-birds span:nth-child(1){left:15%;top:18%;}.paper-birds span:nth-child(2){right:22%;top:28%;animation-delay:-4s}.paper-birds span:nth-child(3){left:52%;top:12%;animation-delay:-8s}

@media (max-width: 860px) {
  .scene { grid-template-columns: 20px 1fr 20px; align-content: center; gap: 18px; padding: 12vh 0; }
  .note-card, .market-card, .errand-card { grid-column: 2; grid-row: auto; }
  .vignette, .flower-market-walk .vignette, .golden-errand-hour .vignette { grid-column: 2; min-height: 330px; }
  .loveliness-meter { left: 14px; right: 14px; justify-content: space-between; }
  .heart-garland { width: 280px; height: 250px; right: 2vw; }
}