:root {
  --daisy-petal: #FFF8E7;
  --chamomile: #F6D86B;
  --blush: #F7B7C8;
  --leaf: #8FC7A3;
  --sky: #C7E8F5;
  --violet: #7E6AA8;
  --ink: #2F3148;
  --paper: #F4EAD8;
  --title-font: Yomogi, "Comic Sans MS", "Bradley Hand", cursive;
  --body-font: "Zen Old Mincho", "Iowan Old Style", Georgia, serif;
  --label-font: "M PLUS Rounded 1c", "Arial Rounded MT Bold", system-ui, sans-serif;
  --note-font: "Nanum Pen Script", "Marker Felt", "Segoe Print", cursive;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body-font);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 8%, rgba(199, 232, 245, .9), transparent 31rem),
    radial-gradient(circle at 82% 28%, rgba(247, 183, 200, .62), transparent 28rem),
    linear-gradient(145deg, var(--daisy-petal), var(--paper) 42%, #e9e1f2 100%);
}

.paper-fiber {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .42;
  background-image:
    repeating-linear-gradient(87deg, rgba(47,49,72,.04) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(176deg, rgba(126,106,168,.035) 0 1px, transparent 1px 17px),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.75) 0 1px, transparent 2px);
  mix-blend-mode: multiply;
}

.diary {
  position: relative;
  z-index: 3;
}

.diary-spread {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 5.5rem);
  overflow: hidden;
  isolation: isolate;
}

.diary-spread::before {
  content: "";
  position: absolute;
  inset: 8% 9%;
  border: 1px solid rgba(47, 49, 72, .14);
  border-radius: 42% 56% 50% 45% / 7% 9% 8% 10%;
  background: rgba(255, 248, 231, .28);
  box-shadow: 0 32px 90px rgba(126, 106, 168, .12);
  z-index: -2;
}

.diary-spread::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38vh;
  background: linear-gradient(0deg, rgba(255,248,231,.68), transparent);
  z-index: -3;
}

.stem-path {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 500vh;
  z-index: 0;
  pointer-events: none;
}

.stem-path path {
  fill: none;
  stroke: var(--leaf);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 5600;
  stroke-dashoffset: calc(5600 * (1 - var(--stem-progress, .05)));
  filter: drop-shadow(0 8px 12px rgba(47,49,72,.08));
}

.stem-path .stem-shadow {
  stroke: rgba(126, 106, 168, .16);
  stroke-width: 3;
  stroke-dashoffset: 0;
}

.petal-nav {
  position: fixed;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: .72rem;
}

.nav-daisy {
  width: 4.6rem;
  min-height: 3.1rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--label-font);
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: lowercase;
  cursor: pointer;
}

.nav-daisy span {
  display: block;
  width: 2.15rem;
  height: 2.15rem;
  margin: 0 auto .1rem;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--chamomile) 0 25%, transparent 26%),
    conic-gradient(from 12deg, var(--daisy-petal) 0 9%, transparent 9% 12%, var(--daisy-petal) 12% 21%, transparent 21% 24%, var(--daisy-petal) 24% 33%, transparent 33% 36%, var(--daisy-petal) 36% 45%, transparent 45% 48%, var(--daisy-petal) 48% 57%, transparent 57% 60%, var(--daisy-petal) 60% 69%, transparent 69% 72%, var(--daisy-petal) 72% 81%, transparent 81% 84%, var(--daisy-petal) 84% 93%, transparent 93%);
  filter: drop-shadow(0 5px 6px rgba(47,49,72,.12));
  transition: transform .45s ease, filter .45s ease;
}

.nav-daisy.is-active span,
.nav-daisy:hover span {
  transform: rotate(24deg) scale(1.16);
  filter: drop-shadow(0 9px 12px rgba(126,106,168,.25));
}

.nav-daisy em { font-style: normal; opacity: .74; }

.watercolor-bloom {
  position: fixed;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  left: var(--bloom-x, 50%);
  top: var(--bloom-y, 50%);
  transform: translate(-50%, -50%) scale(var(--bloom-scale, .2));
  background: radial-gradient(circle, rgba(247,183,200,.34), rgba(199,232,245,.18) 43%, transparent 70%);
  opacity: var(--bloom-opacity, 0);
  pointer-events: none;
  z-index: 1;
  filter: blur(9px) saturate(.85);
  transition: opacity .9s ease, transform 1.4s ease;
}

.floating-petals {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 12;
  overflow: hidden;
}

.floating-petals i {
  position: absolute;
  width: 1.1rem;
  height: 2.6rem;
  border-radius: 70% 15% 70% 15%;
  background: linear-gradient(160deg, rgba(255,248,231,.85), rgba(247,183,200,.45));
  opacity: 0;
  animation: petalFall 12s linear infinite;
}

.floating-petals i:nth-child(1) { left: 8%; animation-delay: .2s; }
.floating-petals i:nth-child(2) { left: 18%; animation-delay: 5s; }
.floating-petals i:nth-child(3) { left: 27%; animation-delay: 2s; }
.floating-petals i:nth-child(4) { left: 36%; animation-delay: 7.5s; }
.floating-petals i:nth-child(5) { left: 45%; animation-delay: 1.2s; }
.floating-petals i:nth-child(6) { left: 56%; animation-delay: 8.5s; }
.floating-petals i:nth-child(7) { left: 63%; animation-delay: 3.8s; }
.floating-petals i:nth-child(8) { left: 72%; animation-delay: 6.6s; }
.floating-petals i:nth-child(9) { left: 82%; animation-delay: 1.8s; }
.floating-petals i:nth-child(10) { left: 91%; animation-delay: 9.2s; }
.floating-petals i:nth-child(11) { left: 12%; animation-delay: 10.8s; }
.floating-petals i:nth-child(12) { left: 76%; animation-delay: 11.4s; }

body.cover-lifted .floating-petals i { opacity: .82; }

@keyframes petalFall {
  0% { top: -12%; transform: translateX(0) rotate(0deg); }
  42% { transform: translateX(4rem) rotate(148deg); }
  100% { top: 112%; transform: translateX(-3rem) rotate(340deg); }
}

.glass-pane {
  position: absolute;
  inset: 9% 16%;
  border-radius: 3rem;
  background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(199,232,245,.16) 55%, rgba(255,255,255,.35));
  box-shadow: inset 0 0 44px rgba(255,255,255,.55), 0 24px 80px rgba(126,106,168,.18);
  backdrop-filter: blur(2px);
  transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity .8s ease;
}

body.cover-lifted .glass-pane { transform: translateY(-13vh) rotateX(25deg); opacity: .42; }

.closed-diary,
.spread-paper,
.ruled-field,
.envelope,
.moon-card,
.annotation-card {
  position: relative;
  background:
    radial-gradient(circle at 20% 16%, rgba(255,255,255,.75), transparent 18rem),
    linear-gradient(135deg, rgba(255,248,231,.96), rgba(244,234,216,.9));
  border: 1px solid rgba(47,49,72,.16);
  box-shadow: 0 25px 85px rgba(47,49,72,.14), inset 0 0 36px rgba(255,255,255,.5);
}

.closed-diary {
  width: min(72vw, 760px);
  min-height: 58vh;
  border-radius: 2.2rem 3.2rem 2.6rem 1.8rem;
  padding: clamp(2rem, 5vw, 4.5rem);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1), box-shadow 1.2s ease;
}

body.cover-lifted .closed-diary { transform: perspective(1200px) rotateY(-8deg) translateX(-2vw); }

.page-curl::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28%;
  height: 32%;
  border-radius: 100% 0 2.2rem 0;
  background: linear-gradient(135deg, transparent 42%, rgba(126,106,168,.16) 44%, rgba(255,248,231,.92) 58%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transition: transform .8s ease;
}

.diary-spread.in-view .page-curl::after { transform: translate(-8px, -8px) rotate(-2deg); }

.watery-title,
h2 {
  font-family: var(--title-font);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .015em;
}

.watery-title {
  margin: 13vh 0 1rem;
  font-size: clamp(4rem, 12vw, 10rem);
  color: transparent;
  background: linear-gradient(100deg, rgba(47,49,72,.2), var(--ink) 32%, var(--violet) 62%, rgba(47,49,72,.35));
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 230% 100%;
  animation: wateryInk 4.8s ease both;
  filter: url("#none");
}

@keyframes wateryInk {
  0% { background-position: 100% 0; opacity: 0; letter-spacing: .11em; filter: blur(5px); }
  100% { background-position: 0 0; opacity: 1; letter-spacing: .015em; filter: blur(0); }
}

.date-stamp,
.chapter-label {
  font-family: var(--label-font);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  color: var(--violet);
}

.margin-whisper,
.signature {
  font-family: var(--note-font);
  font-size: clamp(1.35rem, 2.4vw, 2.2rem);
  color: var(--violet);
}

.cover-note { transform: rotate(-4deg); max-width: 18rem; }
.scroll-hint { position: absolute; bottom: 2rem; font-family: var(--label-font); letter-spacing: .15em; font-size: .72rem; opacity: .65; }

.washi-pin {
  position: absolute;
  width: 8rem;
  height: 2rem;
  background: repeating-linear-gradient(45deg, rgba(199,232,245,.62) 0 10px, rgba(255,248,231,.5) 10px 20px);
  box-shadow: 0 4px 12px rgba(47,49,72,.1);
  opacity: .86;
}
.pin-a { left: 8%; top: -1rem; transform: rotate(-8deg); }
.pin-b { right: 11%; bottom: 2rem; transform: rotate(6deg); background: repeating-linear-gradient(45deg, rgba(247,183,200,.6) 0 10px, rgba(255,248,231,.42) 10px 20px); }
.ribbon-bookmark { position: absolute; right: 18%; top: 0; width: 1.2rem; height: 72%; background: linear-gradient(var(--blush), rgba(126,106,168,.58)); border-radius: 0 0 .7rem .7rem; opacity: .75; }

.pressed-flower { position: absolute; width: 10rem; height: 10rem; animation: flowerTurn 18s linear infinite; }
.cover-flower { right: 11%; top: 12%; opacity: .78; }
.petal { position: absolute; left: 50%; top: 50%; width: 2.45rem; height: 5.4rem; margin: -5.1rem 0 0 -1.2rem; border-radius: 80% 80% 55% 55%; background: radial-gradient(circle at 50% 18%, #fff, var(--daisy-petal) 64%, rgba(247,183,200,.38)); transform-origin: 50% 92%; border: 1px solid rgba(47,49,72,.07); }
.p1 { transform: rotate(0deg); } .p2 { transform: rotate(45deg); } .p3 { transform: rotate(90deg); } .p4 { transform: rotate(135deg); } .p5 { transform: rotate(180deg); } .p6 { transform: rotate(225deg); } .p7 { transform: rotate(270deg); } .p8 { transform: rotate(315deg); }
.center { position: absolute; left: 50%; top: 50%; width: 3rem; height: 3rem; margin: -1.5rem; border-radius: 50%; background: radial-gradient(circle, var(--chamomile), #d8a83c); box-shadow: inset 0 0 0 .35rem rgba(255,248,231,.25); }
@keyframes flowerTurn { to { transform: rotate(360deg); } }

.index-spread { grid-template-columns: minmax(0, 1fr) minmax(14rem, 24rem); gap: clamp(1.5rem, 5vw, 5rem); background: radial-gradient(circle at 72% 26%, rgba(246,216,107,.35), transparent 20rem); }
.spread-paper { width: min(58rem, 100%); min-height: 70vh; padding: clamp(2rem, 5vw, 4rem); clip-path: polygon(2% 0, 100% 2%, 98% 97%, 3% 100%, 0 72%, 1% 38%); }
h2 { max-width: 48rem; margin: .35rem 0 2rem; font-size: clamp(3rem, 7.5vw, 7rem); color: var(--ink); }
.petal-wheel { position: relative; width: min(31rem, 83vw); aspect-ratio: 1; margin: 1rem auto; border-radius: 50%; background: radial-gradient(circle, rgba(199,232,245,.28), transparent 64%); }
.petal-wheel button { position: absolute; left: 50%; top: 50%; width: 8rem; height: 3.8rem; margin: -1.9rem 0 0 -4rem; border: 1px solid rgba(47,49,72,.14); border-radius: 95% 12% 95% 12%; background: rgba(255,248,231,.88); color: var(--ink); font-family: var(--label-font); font-size: .7rem; box-shadow: 0 12px 24px rgba(126,106,168,.13); cursor: pointer; transition: transform .45s ease, background .45s ease; }
.petal-wheel button:hover { background: var(--sky); }
.petal-wheel button:nth-child(1) { transform: rotate(-90deg) translateX(10.5rem) rotate(90deg); }
.petal-wheel button:nth-child(2) { transform: rotate(-18deg) translateX(10.5rem) rotate(18deg); }
.petal-wheel button:nth-child(3) { transform: rotate(54deg) translateX(10.5rem) rotate(-54deg); }
.petal-wheel button:nth-child(4) { transform: rotate(126deg) translateX(10.5rem) rotate(-126deg); }
.petal-wheel button:nth-child(5) { transform: rotate(198deg) translateX(10.5rem) rotate(-198deg); }
.wheel-center { position: absolute; inset: 38%; border-radius: 50%; background: radial-gradient(circle, var(--chamomile), rgba(246,216,107,.3)); box-shadow: inset 0 0 0 1rem rgba(255,248,231,.3); }
.annotation-card { align-self: end; padding: 2rem; border-radius: 1.5rem; transform: rotate(4deg); min-height: 18rem; }
.crop-mark { position: absolute; width: 2rem; height: 2rem; border-color: rgba(47,49,72,.35); }
.top-left { left: .7rem; top: .7rem; border-left: 1px solid; border-top: 1px solid; }
.bottom-right { right: .7rem; bottom: .7rem; border-right: 1px solid; border-bottom: 1px solid; }
.ladybug { position: absolute; right: 2rem; bottom: 2rem; width: 1.2rem; height: 1.45rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2F3148 0 2px, transparent 3px), radial-gradient(circle at 66% 65%, #2F3148 0 2px, transparent 3px), #F7B7C8; border: 1px solid var(--ink); }

.field-spread { background: radial-gradient(circle at 25% 38%, rgba(143,199,163,.5), transparent 28rem), linear-gradient(180deg, transparent, rgba(199,232,245,.26)); }
.ruled-field { width: min(68rem, 92vw); min-height: 72vh; padding: clamp(2rem, 6vw, 5rem); border-radius: 2rem 7rem 2rem 5rem; background-image: repeating-linear-gradient(178deg, transparent 0 3.15rem, rgba(143,199,163,.26) 3.2rem, transparent 3.28rem), linear-gradient(135deg, rgba(255,248,231,.95), rgba(199,232,245,.34)); }
.lyric-copy { max-width: 40rem; font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.85; }
.diagram { position: absolute; right: 11%; bottom: 12%; width: 19rem; height: 19rem; border: 1px dashed rgba(47,49,72,.25); border-radius: 50%; display: grid; place-items: center; background: rgba(255,248,231,.42); }
.small-flower { position: relative; transform: scale(.62); animation-duration: 26s; }
.diagram p { position: absolute; bottom: 1rem; left: 2rem; font-family: var(--label-font); font-size: .75rem; }
.diagram em { font-family: var(--note-font); font-size: 1.25rem; color: var(--violet); }
.translucent-petal { position: absolute; padding: 2.2rem 1.4rem; border-radius: 80% 18% 80% 18%; background: rgba(255,248,231,.62); border: 1px solid rgba(47,49,72,.12); font-family: var(--note-font); font-size: 1.7rem; color: var(--violet); box-shadow: 0 16px 35px rgba(47,49,72,.1); }
.petal-note-one { left: 8%; top: 17%; transform: rotate(-18deg); }
.petal-note-two { right: 9%; top: 22%; transform: rotate(17deg); background: rgba(199,232,245,.48); }

.wishes-spread { background: radial-gradient(circle at 74% 22%, rgba(247,183,200,.42), transparent 24rem), radial-gradient(circle at 20% 76%, rgba(246,216,107,.34), transparent 18rem); }
.envelope { width: min(64rem, 92vw); min-height: 60vh; padding: clamp(2.2rem, 6vw, 5rem); border-radius: 1.2rem; clip-path: polygon(0 11%, 50% 0, 100% 11%, 100% 100%, 0 100%); }
.envelope-flap { position: absolute; left: 0; right: 0; top: 0; height: 45%; background: linear-gradient(160deg, rgba(199,232,245,.38), rgba(255,248,231,.18)); clip-path: polygon(0 0, 50% 76%, 100% 0); border-bottom: 1px solid rgba(47,49,72,.12); pointer-events: none; }
.wish-list { margin: 2rem 0; padding: 0; list-style: none; max-width: 45rem; }
.wish-list li { margin: 1rem 0; padding-left: 2.2rem; position: relative; font-size: 1.18rem; line-height: 1.7; }
.wish-list li::before { content: ""; position: absolute; left: 0; top: .45rem; width: 1rem; height: 1.6rem; border-radius: 80% 18% 80% 18%; background: var(--blush); transform: rotate(24deg); }
.signature { text-align: right; margin-right: 7%; transform: rotate(-3deg); }
.postage-frame { position: absolute; right: 10%; top: 13%; width: 10rem; height: 13rem; border: 1px solid rgba(47,49,72,.24); outline: 8px dotted rgba(255,248,231,.8); background: rgba(199,232,245,.45); display: grid; place-items: center; font-family: var(--label-font); transform: rotate(8deg); }
.stamp-daisy { width: 5rem; height: 5rem; border-radius: 50%; background: radial-gradient(circle, var(--chamomile) 0 23%, transparent 24%), conic-gradient(var(--daisy-petal) 0 10%, transparent 10% 12%, var(--daisy-petal) 12% 22%, transparent 22% 25%, var(--daisy-petal) 25% 35%, transparent 35% 38%, var(--daisy-petal) 38% 48%, transparent 48% 51%, var(--daisy-petal) 51% 61%, transparent 61% 64%, var(--daisy-petal) 64% 74%, transparent 74% 77%, var(--daisy-petal) 77% 87%, transparent 87% 90%, var(--daisy-petal) 90%); }

.postscript-spread { color: var(--daisy-petal); background: radial-gradient(circle at 76% 24%, rgba(246,216,107,.28), transparent 12rem), linear-gradient(160deg, var(--ink), var(--violet) 58%, #415071); }
.postscript-spread::before { background: rgba(47,49,72,.24); border-color: rgba(255,248,231,.18); }
.moon-card { width: min(58rem, 90vw); min-height: 60vh; padding: clamp(2.2rem, 6vw, 5rem); border-radius: 8rem 2rem 7rem 2rem; background: linear-gradient(135deg, rgba(255,248,231,.12), rgba(199,232,245,.12)); border-color: rgba(255,248,231,.22); box-shadow: 0 32px 90px rgba(0,0,0,.2), inset 0 0 44px rgba(255,248,231,.08); }
.postscript-spread h2,
.postscript-spread .chapter-label,
.postscript-spread .margin-whisper { color: var(--daisy-petal); }
.night-blooms span { position: absolute; width: 5rem; height: 5rem; border-radius: 50%; background: radial-gradient(circle, var(--chamomile) 0 14%, transparent 15%), conic-gradient(rgba(255,248,231,.7) 0 8%, transparent 8% 14%, rgba(255,248,231,.58) 14% 22%, transparent 22% 28%, rgba(255,248,231,.66) 28% 36%, transparent 36% 42%, rgba(255,248,231,.55) 42% 50%, transparent 50% 56%, rgba(255,248,231,.68) 56% 64%, transparent 64% 70%, rgba(255,248,231,.52) 70% 78%, transparent 78% 84%, rgba(255,248,231,.72) 84% 92%, transparent 92%); filter: drop-shadow(0 0 16px rgba(255,248,231,.34)); animation: nightPulse 4s ease-in-out infinite; }
.night-blooms span:nth-child(1) { left: 9%; bottom: 14%; }
.night-blooms span:nth-child(2) { left: 22%; top: 17%; animation-delay: .8s; transform: scale(.7); }
.night-blooms span:nth-child(3) { right: 14%; bottom: 22%; animation-delay: 1.5s; transform: scale(1.2); }
.night-blooms span:nth-child(4) { right: 28%; top: 13%; animation-delay: 2.1s; transform: scale(.62); }
.night-blooms span:nth-child(5) { right: 6%; top: 47%; animation-delay: 2.8s; transform: scale(.84); }
@keyframes nightPulse { 0%, 100% { opacity: .38; filter: drop-shadow(0 0 8px rgba(255,248,231,.22)); } 50% { opacity: .95; filter: drop-shadow(0 0 24px rgba(246,216,107,.48)); } }

.diary-spread .spread-paper,
.diary-spread .ruled-field,
.diary-spread .envelope,
.diary-spread .moon-card,
.diary-spread .annotation-card {
  opacity: .62;
  transform: translateY(2rem) rotate(var(--paper-tilt, 0deg));
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1), clip-path .9s ease;
}
.diary-spread.in-view .spread-paper,
.diary-spread.in-view .ruled-field,
.diary-spread.in-view .envelope,
.diary-spread.in-view .moon-card,
.diary-spread.in-view .annotation-card { opacity: 1; transform: translateY(0) rotate(var(--paper-tilt, 0deg)); }

@media (max-width: 820px) {
  .petal-nav { right: .35rem; transform: translateY(-50%) scale(.76); transform-origin: right center; }
  .diary-spread { padding: 4rem 1rem; }
  .index-spread { grid-template-columns: 1fr; }
  .annotation-card, .postage-frame, .diagram { position: relative; right: auto; top: auto; bottom: auto; width: min(90vw, 20rem); margin: 1rem auto; }
  .petal-wheel { transform: scale(.78); margin-left: -1.6rem; }
  .closed-diary { width: 92vw; }
  .watery-title { font-size: clamp(3.2rem, 16vw, 6rem); }
  h2 { font-size: clamp(2.5rem, 12vw, 4.8rem); }
}