:root {
  --moonmilk: #FFF7E8;
  --veil-blush: #F6C7D7;
  --lavender: #8B6BBE;
  --moss: #6F8F65;
  --gold: #FFD86B;
  --plum: #2B173F;
  --dew: #CFF4EA;
  --title-font: "Cormorant Garamond", Cormorant, Georgia, serif;
  --body-font: "Nunito Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  --script-font: "Nanum Pen Script", "Segoe Print", "Bradley Hand", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--plum);
  font-family: var(--body-font);
  background:
    radial-gradient(circle at 15% 8%, rgba(207, 244, 234, .68), transparent 24rem),
    radial-gradient(circle at 82% 16%, rgba(246, 199, 215, .68), transparent 26rem),
    linear-gradient(110deg, var(--moonmilk), #fffaf0 45%, #f7eff7 100%);
  overflow-x: hidden;
}

body.veil-lifted .hero-veil { transform: translate3d(22vw, -8vh, 0) rotate(9deg); opacity: .28; }
body.veil-lifted .title-cluster h1 { letter-spacing: .055em; text-shadow: 0 0 36px rgba(255, 216, 107, .55); }

.ambient, .ribbon-path, .vow-lantern { position: fixed; pointer-events: none; }
.ambient { inset: 0; z-index: 0; overflow: hidden; }

.lace-shadow {
  position: absolute;
  width: 34rem;
  height: 34rem;
  opacity: .16;
  background: radial-gradient(circle, transparent 28%, var(--lavender) 29% 31%, transparent 32%), radial-gradient(circle at 20% 70%, transparent 18%, var(--moss) 19% 20%, transparent 21%);
  background-size: 72px 72px, 54px 54px;
  filter: blur(.2px);
  border-radius: 50%;
}
.lace-one { top: -11rem; right: -8rem; transform: rotate(23deg); }
.lace-two { bottom: 18vh; left: -16rem; transform: rotate(-18deg); }

.firefly-field span {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 18px 7px rgba(255, 216, 107, .58);
  animation: fireflyDrift 8s ease-in-out infinite alternate;
}

.vow-lantern {
  left: 12vw;
  top: 68vh;
  z-index: 7;
  width: 54px;
  height: 84px;
  transform: translate3d(0,0,0);
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.lantern-glass {
  position: absolute;
  left: 10px;
  top: 0;
  width: 34px;
  height: 45px;
  border: 1px solid rgba(43, 23, 63, .35);
  border-radius: 44% 44% 50% 50%;
  background: radial-gradient(circle at 50% 62%, var(--gold), rgba(255, 216, 107, .2) 46%, rgba(255,247,232,.52) 70%);
  box-shadow: 0 0 34px 14px rgba(255, 216, 107, .38);
  animation: lanternBob 2.8s ease-in-out infinite;
}
.lantern-tail {
  position: absolute;
  left: 26px;
  top: 42px;
  width: 58px;
  height: 34px;
  border-bottom: 2px solid var(--veil-blush);
  border-radius: 50%;
  transform: rotate(28deg);
}

.charm-bracelet {
  position: fixed;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  display: grid;
  gap: .72rem;
}
.charm {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: var(--plum);
  border-radius: 50%;
  background: rgba(255, 247, 232, .64);
  border: 1px solid rgba(139, 107, 190, .28);
  box-shadow: 0 8px 25px rgba(43, 23, 63, .08);
  position: relative;
  transition: transform .35s ease, background .35s ease;
}
.charm span { font-family: var(--title-font); font-size: 1.05rem; }
.charm em { position: absolute; right: 52px; font: 400 .72rem var(--script-font); opacity: 0; white-space: nowrap; color: var(--moss); transition: opacity .3s ease; }
.charm:hover, .charm.is-active { transform: rotate(-8deg) scale(1.08); background: var(--dew); }
.charm:hover em, .charm.is-active em { opacity: 1; }

.ribbon-path {
  inset: 0;
  width: 100vw;
  height: 520vh;
  z-index: 1;
  overflow: visible;
}
.ribbon-path path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 12px rgba(255, 216, 107, .75));
}

.veil-path { position: relative; z-index: 2; }
.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  align-items: center;
  padding: clamp(3rem, 7vw, 8rem);
  isolation: isolate;
}
.scene::before {
  content: "";
  position: absolute;
  inset: 8vh 7vw;
  border: 1px solid rgba(139, 107, 190, .12);
  border-radius: 42% 58% 51% 49% / 48% 42% 58% 52%;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.36), transparent 21rem);
  z-index: -1;
}

.veil-panel {
  position: absolute;
  border-radius: 36% 64% 55% 45% / 48% 36% 64% 52%;
  background: linear-gradient(130deg, rgba(246, 199, 215, .32), rgba(255, 247, 232, .72), rgba(207, 244, 234, .26));
  border: 1px solid rgba(255,255,255,.52);
  box-shadow: inset 0 0 42px rgba(255,255,255,.52), 0 30px 90px rgba(139, 107, 190, .1);
  backdrop-filter: blur(2px);
  transition: transform 1.25s cubic-bezier(.16,1,.3,1), opacity 1s ease;
}
.veil-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(100deg, transparent 0 16px, rgba(255,255,255,.22) 17px, transparent 19px);
  border-radius: inherit;
}
.hero-veil { width: 60vw; height: 82vh; right: 4vw; top: 8vh; transform: rotate(-7deg); }
.map-vellum { width: 52vw; height: 64vh; left: 7vw; top: 17vh; transform: rotate(6deg); }
.vow-window { width: 62vw; height: 52vh; right: 10vw; top: 24vh; transform: rotate(-3deg); }

.title-cluster { max-width: 720px; margin-left: 7vw; position: relative; }
.atmos-word {
  position: absolute;
  left: -13vw;
  top: -24vh;
  font: italic 700 clamp(8rem, 24vw, 23rem)/.8 var(--title-font);
  color: rgba(139, 107, 190, .095);
  pointer-events: none;
}
h1, h2 {
  margin: 0;
  font-family: var(--title-font);
  font-weight: 600;
  line-height: .92;
  color: var(--plum);
}
h1 { font-size: clamp(5rem, 15vw, 14rem); letter-spacing: -.04em; transition: letter-spacing 1.2s ease, text-shadow 1s ease; }
h2 { font-size: clamp(4rem, 10vw, 10rem); max-width: 920px; }
p { font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.75; }
.title-cluster p, .scene-copy { max-width: 550px; color: rgba(43, 23, 63, .78); }

.story-button {
  appearance: none;
  border: 1px solid rgba(43, 23, 63, .22);
  color: var(--plum);
  background: radial-gradient(circle at 20% 20%, var(--gold), rgba(255, 247, 232, .82) 38%, rgba(246, 199, 215, .72));
  padding: 1rem 1.35rem;
  border-radius: 999px;
  font: 700 .78rem var(--body-font);
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: 0 14px 35px rgba(139, 107, 190, .14), 0 0 26px rgba(255, 216, 107, .28);
  cursor: pointer;
  transition: transform .35s ease, box-shadow .35s ease;
}
.story-button:hover { transform: translateY(-4px) rotate(-2deg); box-shadow: 0 20px 42px rgba(139, 107, 190, .2), 0 0 35px rgba(255, 216, 107, .4); }
.story-button.small { font-size: .7rem; padding: .82rem 1.05rem; }

.script-note { position: absolute; font: 400 clamp(1.2rem, 2.8vw, 2rem) var(--script-font); color: var(--moss); transform: rotate(-8deg); }
.note-gate { left: 11vw; bottom: 12vh; }
.note-map { right: 11vw; bottom: 14vh; }
.note-vow { left: 10vw; top: 19vh; }
.note-bridge { right: 13vw; bottom: 18vh; }

.scene-kicker { font: 800 .72rem var(--body-font); letter-spacing: .28em; text-transform: uppercase; color: var(--moss); }
.petal-map { align-content: center; justify-items: end; text-align: right; }
.petal-map .scene-copy { margin-left: auto; }
.map-charms { position: relative; width: min(620px, 84vw); height: 300px; margin-top: 3rem; }
.map-charm {
  position: absolute;
  width: 205px;
  padding: 1rem;
  text-align: left;
  background: rgba(255,247,232,.72);
  border: 1px solid rgba(111,143,101,.25);
  border-radius: 28px 10px 30px 12px;
  box-shadow: 0 18px 44px rgba(43, 23, 63, .1);
}
.map-charm b { display: block; font-family: var(--title-font); font-size: 1.5rem; color: var(--lavender); }
.map-charm span { font: 400 1.08rem var(--script-font); color: var(--moss); }
.charm-leaf { left: 0; top: 35px; transform: rotate(-10deg); }
.charm-flower { left: 205px; top: 135px; transform: rotate(6deg); }
.charm-arrow { right: 0; top: 0; transform: rotate(13deg); }

.petal-compass { position: absolute; left: 18vw; bottom: 25vh; width: 180px; height: 180px; animation: slowTurn 18s linear infinite; }
.petal-compass i { position: absolute; left: 70px; top: 8px; width: 42px; height: 82px; border-radius: 90% 10% 90% 10%; background: linear-gradient(var(--veil-blush), rgba(207,244,234,.55)); transform-origin: 20px 82px; opacity: .75; }
.petal-compass i:nth-child(2) { transform: rotate(90deg); }
.petal-compass i:nth-child(3) { transform: rotate(180deg); }
.petal-compass i:nth-child(4) { transform: rotate(270deg); }

.hidden-vow { justify-items: start; padding-left: 12vw; }
.vow-fragment { position: relative; max-width: 780px; margin: 1.4rem 0; padding: 2rem clamp(1rem, 4vw, 4rem); overflow: hidden; }
.vow-fragment::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--moonmilk) 0 18%, transparent 38% 62%, var(--moonmilk) 82%); transform: translateX(0); transition: transform 1.1s cubic-bezier(.16,1,.3,1); z-index: 1; }
.vow-fragment.is-open::before { transform: translateX(110%); }
.vow-fragment p { position: relative; margin: .2rem 0 1rem; font: italic 500 clamp(2rem, 5vw, 4.8rem)/1.05 var(--title-font); color: var(--plum); }
.pearl-row { display: flex; gap: 1.2rem; margin-left: 3rem; }
.pearl-row span, .bridge-dots span { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, white, var(--dew) 44%, rgba(139,107,190,.36)); box-shadow: 0 0 18px rgba(207,244,234,.9); }

.moon-bridge { text-align: center; justify-items: center; background: radial-gradient(circle at 50% 62%, rgba(139,107,190,.12), transparent 28rem); }
.moon-gate { position: absolute; left: 6vw; top: 13vh; width: 34vw; height: 34vw; min-width: 280px; min-height: 280px; border-radius: 50%; background: linear-gradient(135deg, rgba(139,107,190,.35), rgba(255,247,232,.42)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 0 90px rgba(139,107,190,.24); }
.moon-hole { position: absolute; inset: 12%; border-radius: 50%; background: var(--moonmilk); box-shadow: inset 0 0 55px rgba(246,199,215,.55); }
.bridge-dots { position: relative; width: min(760px, 76vw); height: 160px; margin-top: 3rem; }
.bridge-dots span { position: absolute; opacity: .28; transform: translateY(22px) scale(.65); transition: opacity .6s ease, transform .6s ease; }
.bridge-dots span.is-lit { opacity: 1; transform: translateY(0) scale(1); }
.bridge-dots span:nth-child(1) { left: 1%; top: 72%; } .bridge-dots span:nth-child(2) { left: 12%; top: 58%; } .bridge-dots span:nth-child(3) { left: 23%; top: 42%; } .bridge-dots span:nth-child(4) { left: 34%; top: 30%; } .bridge-dots span:nth-child(5) { left: 45%; top: 24%; } .bridge-dots span:nth-child(6) { left: 56%; top: 28%; } .bridge-dots span:nth-child(7) { left: 67%; top: 39%; } .bridge-dots span:nth-child(8) { left: 78%; top: 52%; } .bridge-dots span:nth-child(9) { left: 88%; top: 65%; }
.paper-crane { position: absolute; right: 17vw; top: 24vh; width: 98px; height: 70px; transform: rotate(12deg); }
.paper-crane span, .paper-crane::before, .paper-crane::after { content: ""; position: absolute; background: rgba(255,247,232,.86); border: 1px solid rgba(139,107,190,.22); }
.paper-crane span { width: 58px; height: 38px; transform: skewX(-28deg); }
.paper-crane::before { left: 44px; top: 8px; width: 48px; height: 30px; transform: skewY(25deg); }
.paper-crane::after { left: 18px; top: 36px; width: 38px; height: 24px; transform: skewX(36deg); }

.keepsake-door { justify-items: center; text-align: center; min-height: 110vh; }
.door-frame { position: relative; width: min(420px, 70vw); height: 520px; margin-bottom: 2rem; perspective: 900px; }
.door-left, .door-right { position: absolute; top: 0; width: 50%; height: 100%; background: linear-gradient(145deg, rgba(139,107,190,.82), var(--plum)); border: 1px solid rgba(255,216,107,.34); box-shadow: inset 0 0 42px rgba(255,247,232,.12), 0 25px 80px rgba(43,23,63,.18); transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
.door-left { left: 0; border-radius: 52% 0 0 10px; transform-origin: left; }
.door-right { right: 0; border-radius: 0 52% 10px 0; transform-origin: right; }
.door-frame.is-open .door-left { transform: rotateY(-58deg); }
.door-frame.is-open .door-right { transform: rotateY(58deg); }
.keyhole-stars { position: absolute; inset: 16%; border-radius: 50% 50% 8px 8px; background: radial-gradient(circle at 50% 45%, var(--plum), #12091d); overflow: hidden; box-shadow: 0 0 60px rgba(255,216,107,.26); }
.keyhole-stars span { position: absolute; width: 4px; height: 4px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 14px var(--gold); animation: starPulse 2.8s infinite alternate; }
.keyhole-stars span:nth-child(1) { left: 23%; top: 27%; } .keyhole-stars span:nth-child(2) { left: 72%; top: 33%; animation-delay: .5s; } .keyhole-stars span:nth-child(3) { left: 44%; top: 62%; animation-delay: 1s; } .keyhole-stars span:nth-child(4) { left: 62%; top: 78%; animation-delay: 1.5s; }
.vow-seal { margin-top: 1rem; width: 170px; height: 170px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, var(--veil-blush), #da90ac); color: var(--plum); font: italic 600 1.65rem var(--title-font); box-shadow: inset 0 0 0 8px rgba(255,247,232,.32), 0 16px 44px rgba(43,23,63,.16); transform: rotate(-8deg); }
.closing-line { font: 400 2rem var(--script-font); color: var(--moss); }

.moth { position: absolute; width: 62px; height: 45px; right: 21vw; bottom: 24vh; animation: mothFloat 5s ease-in-out infinite; }
.moth span, .moth::before, .moth::after { position: absolute; content: ""; }
.moth span { left: 28px; top: 14px; width: 6px; height: 20px; border-radius: 9px; background: var(--plum); }
.moth::before, .moth::after { top: 0; width: 30px; height: 38px; border-radius: 80% 20% 80% 20%; background: rgba(207,244,234,.72); border: 1px solid rgba(139,107,190,.25); }
.moth::before { left: 0; transform: rotate(-18deg); } .moth::after { right: 0; transform: scaleX(-1) rotate(-18deg); }
.wax-seal { position: absolute; right: 10vw; top: 16vh; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font: 3rem var(--title-font); color: var(--moonmilk); background: radial-gradient(circle, var(--veil-blush), #c8789c); box-shadow: inset 0 0 0 6px rgba(255,247,232,.22); transform: rotate(12deg); }

@keyframes fireflyDrift { from { transform: translate3d(-12px, 8px, 0); opacity: .42; } to { transform: translate3d(24px, -22px, 0); opacity: 1; } }
@keyframes lanternBob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes mothFloat { 0%,100% { transform: translateY(0) rotate(9deg); } 50% { transform: translateY(-20px) rotate(-4deg); } }
@keyframes slowTurn { to { transform: rotate(360deg); } }
@keyframes starPulse { from { opacity: .35; transform: scale(.75); } to { opacity: 1; transform: scale(1.45); } }

@media (max-width: 760px) {
  .scene { padding: 5rem 1.3rem; }
  .title-cluster { margin-left: 0; }
  h1 { font-size: 22vw; }
  .charm-bracelet { right: .4rem; }
  .map-charms { height: 470px; }
  .map-charm { position: relative; left: auto !important; right: auto !important; top: auto !important; margin: 1rem 0 0 auto; }
  .moon-gate { opacity: .45; }
  .door-frame { height: 410px; }
}