@font-face {
  font-family: "Fleur De Leah";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fleur-de-leah.ttf") format("truetype");
}

:root {
  --paper: #f8ecdf;
  --paper-soft: #fff9f2;
  --plum: #684d78;
  --violet: #825c9e;
  --lavender: #b497c9;
  --rose: #dca7bb;
  --gold: #d9a845;
  --gold-light: #f3d381;
  --ink: #4f3e58;
  --shadow: 0 20px 60px rgb(82 49 87 / 18%);
  --serif: "Cormorant Garamond", Georgia, serif;
  --name-font: "Fleur De Leah", "Berkshire Swash", cursive;
  --script: "Berkshire Swash", "URW Chancery L", cursive;
  --sans: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-eyebrow: 18px;
  --font-nickname: 112px;
  --font-pre-age: 18px;
  --font-age: 20px;
  --font-intro: 18px;
  --font-date: 16px;
  --font-address: 14px;
  --font-button: 16px;
  --font-modal-kicker: 16px;
  --font-modal-title: 48px;
  --font-modal-lead: 16px;
  --font-form-label: 13px;
  --font-form-text: 14px;
  --font-intro-status: 14px;
  --font-portrait-note: 13px;
  --sun-width: 18%;
  --sun-top: 4.1%;
  --sun-left: 48%;
  --hero-copy-top: 38%;
  --hero-copy-left: 47%;
  --ribbon-top: 18.15%;
  --ribbon-left: 48%;
  --ribbon-width: 74%;
  --ribbon-single-size: 41px;
  --ribbon-double-size: 44px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #eadde9; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.modal-open { overflow: hidden; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  background:
    radial-gradient(circle at 10% 10%, rgb(196 154 210 / 42%), transparent 28rem),
    radial-gradient(circle at 90% 20%, rgb(234 179 202 / 42%), transparent 28rem),
    #eadde9;
}
button, input, textarea { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }

.invitation {
  width: min(100%, 780px);
  margin-inline: auto;
  overflow: clip;
  background: var(--paper);
  box-shadow: 0 0 90px rgb(63 34 72 / 18%);
}

.hero {
  --scroll-y: 0px;
  --tower-load-x: 24px;
  --tower-load-y: 20px;
  position: relative;
  min-height: max(100svh, 760px);
  overflow: hidden;
  isolation: isolate;
  background: #f8ecdf;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 76%, rgb(87 64 100 / 10%) 100%);
}
.layer { position: absolute; pointer-events: none; user-select: none; }

.bg,
.frame,
.flowers-top,
.flowers-bottom,
.landscape,
.sun,
.lanterns,
.ribbon-wrap,
.hero-copy,
.tower,
.scroll-cue,
.sparkles i,
.mist {
  opacity: 0;
}

.bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: scale(1.035);
  transition: opacity .95s ease, transform 1.4s ease;
}
.landscape {
  bottom: -1.2%;
  left: 50%;
  width: 118%;
  max-width: none;
  transform: translate(-50%, 18px) scale(1.015);
  z-index: 2;
  transform-origin: 50% 70%;
  will-change: translate, scale;
  opacity: .86;
  transition: opacity 1s ease .26s, transform 1.25s ease .26s;
}
.mist {
  position: absolute;
  border-radius: 50%;
  filter: blur(34px);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transform: scale(.92);
  transition: opacity 1.1s ease .35s, transform 1.2s ease .35s;
}
.mist-a { width: 52%; aspect-ratio: 1; background: rgb(236 195 221 / 45%); left: -10%; top: 36%; }
.mist-b { width: 48%; aspect-ratio: 1; background: rgb(184 155 210 / 34%); right: -17%; top: 57%; }
.sun {
  top: var(--sun-top);
  left: var(--sun-left);
  width: var(--sun-width);
  transform: translate(-50%, -16px) scale(.84);
  transform-origin: 50% 50%;
  z-index: 4;
  filter: drop-shadow(0 0 5px rgb(240 193 75 / 16%));
  will-change: transform, translate, rotate, scale, filter;
  transition: opacity .9s ease .55s, transform 1.1s cubic-bezier(.2,.8,.2,1) .55s, filter .8s ease;
}
.tower {
  right: -8.5%; top: 24%; height: min(70%, 850px); width: auto; z-index: 5;
  filter: drop-shadow(-10px 18px 18px rgb(71 50 84 / 14%));
  transform: translate(var(--tower-load-x), calc(var(--tower-load-y) + var(--scroll-y) * .018));
  transform-origin: 50% 55%;
  will-change: transform, translate;
  transition: opacity 1.05s ease .7s, transform 1.25s cubic-bezier(.22,.8,.2,1) .7s;
}
.flowers-top {
  top: -1.5%; left: -8%; width: clamp(260px, 61%, 475px); z-index: 7;
  filter: drop-shadow(0 10px 12px rgb(70 42 76 / 8%));
  transform: translate(-20px, -12px) scale(.97) rotate(-2deg);
  transform-origin: 20% 20%;
  will-change: translate, rotate, scale;
  transition: opacity .95s ease .18s, transform 1.25s cubic-bezier(.2,.8,.2,1) .18s;
}
.flowers-bottom {
  left: -10%; bottom: -4%; width: clamp(270px, 55%, 430px); z-index: 7;
  filter: drop-shadow(0 12px 16px rgb(55 46 73 / 12%));
  transform: translate(-18px, 18px) scale(.97) rotate(-2deg);
  transform-origin: 30% 78%;
  will-change: transform, translate, rotate, scale;
  transition: opacity 1s ease .42s, transform 1.28s cubic-bezier(.2,.8,.2,1) .42s;
}
.lanterns {
  top: 8%; left: 3%; width: clamp(118px, 23%, 178px); z-index: 6;
  transform-origin: 45% 0;
  filter: drop-shadow(0 8px 14px rgb(219 157 42 / 17%));
  animation: lantern-sway 5.5s ease-in-out infinite;
  transition: opacity .9s ease .45s, transform 1s cubic-bezier(.2,.8,.2,1) .45s;
}
.frame {
  inset: 1.1% 1.1% auto;
  width: 97.8%;
  height: 96%;
  object-fit: fill;
  z-index: 3;
  opacity: .94;
  transform: scale(.985);
  transition: opacity 1.1s ease .32s, transform 1.25s ease .32s;
}

.sparkles i {
  position: absolute; left: var(--x); top: var(--y); z-index: 8; color: var(--gold); font-style: normal;
  font-size: clamp(13px, 2.4vw, 22px); text-shadow: 0 0 12px rgb(247 202 100 / 80%);
  transform: scale(.7);
  animation: sparkle 2.8s ease-in-out infinite; animation-delay: var(--d);
  transition: opacity .6s ease .95s, transform .8s ease .95s;
}

.ribbon-wrap {
  position: absolute;
  z-index: 10;
  top: var(--ribbon-top);
  left: var(--ribbon-left);
  transform: translateX(-50%) translateY(-16px) scale(.96);
  width: min(var(--ribbon-width), 560px);
  aspect-ratio: 3 / 1;
  transition: opacity .95s ease .82s, transform 1.05s cubic-bezier(.2,.8,.2,1) .82s;
}
.ribbon-wrap .ribbon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 10px rgb(77 45 85 / 12%));
}
.ribbon-text-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ribbon-line {
  fill: #694d78;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0;
  word-spacing: 0;
  paint-order: stroke fill;
  stroke: rgb(255 250 244 / 55%);
  stroke-width: .7px;
  text-shadow: 0 1px 0 rgb(255 252 245 / 95%), 0 0 7px rgb(255 248 241 / 74%);
}
.ribbon-line--single { font-size: var(--ribbon-single-size); }
.ribbon-line--double { font-size: var(--ribbon-double-size); }
.ribbon-single,
.ribbon-double {
  opacity: 1;
  transition: opacity .22s ease;
}
.ribbon-single.is-hidden,
.ribbon-double.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.hero-copy {
  position: absolute;
  z-index: 11;
  top: var(--hero-copy-top);
  left: var(--hero-copy-left);
  transform: translateX(-50%) translateY(20px);
  width: min(60%, 430px);
  text-align: center;
  transition: opacity 1s ease .96s, transform 1.12s cubic-bezier(.2,.8,.2,1) .96s;
}
.hero-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -13% -12% -12%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center,
      rgb(255 251 244 / 89%) 0%,
      rgb(255 249 242 / 78%) 37%,
      rgb(255 248 241 / 41%) 57%,
      transparent 77%);
  filter: blur(8px);
}
.eyebrow,
.pre-age,
.intro,
.hero-date,
.hero-address {
  text-shadow:
    0 1px 0 rgb(255 252 247 / 98%),
    0 0 5px rgb(255 248 240 / 94%),
    0 2px 6px rgb(74 49 85 / 12%);
}
.eyebrow {
  margin: 0 0 .12rem;
  color: #765582;
  font: 600 clamp(10px, var(--font-eyebrow), 40px)/1 var(--serif);
  font-style: italic;
  letter-spacing: .02em;
}
h1 { margin: 0; font-weight: 400; color: var(--violet); line-height: .82; }
.nickname {
  display: block;
  color: #7f56a0;
  white-space: nowrap;
  font: 400 clamp(42px, var(--font-nickname), 150px)/.95 var(--name-font);
  transform: rotate(-1.4deg) scaleX(var(--nickname-scale-x, 1));
  paint-order: stroke fill;
  -webkit-text-stroke: 0;
  text-shadow:
    0 1px 0 rgb(255 252 246 / 100%),
    0 0 3px rgb(255 249 241 / 96%),
    0 4px 11px rgb(80 48 96 / 15%);
}
.pre-age {
  margin: .36rem 0 .3rem;
  color: #7c6487;
  font: 600 clamp(10px, var(--font-pre-age), 36px)/1.1 var(--serif);
  font-style: italic;
}
.age {
  display: inline-block;
  margin: 0 0 .88rem;
  padding: .34rem .72rem;
  color: #a96f18;
  border-block: 1px solid rgb(208 160 72 / 50%);
  font: 800 clamp(10px, var(--font-age), 38px)/1.2 var(--sans);
  letter-spacing: .11em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgb(255 250 239 / 100%), 0 0 5px rgb(255 248 239 / 90%);
}
.intro {
  width: 88%;
  margin: 0 auto;
  font: 600 clamp(11px, var(--font-intro), 34px)/1.4 var(--serif);
  color: #604b6c;
  text-wrap: balance;
}
.hero-date {
  margin: .88rem auto .22rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .55rem;
  color: #905d1d;
  font-weight: 800;
  font-size: clamp(11px, var(--font-date), 30px);
}
.hero-date .dot { color: var(--gold); font-size: .75em; }
.hero-address {
  width: 90%;
  margin: 0 auto .95rem;
  color: #7a6684;
  font: 700 clamp(10px, var(--font-address), 28px)/1.33 var(--sans);
}

.magic-button {
  position: relative; z-index: 1;
  appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 48px; padding: .76rem 1.15rem; border-radius: 999px;
  color: #fffaf1; background: linear-gradient(135deg, #8863a6, #aa7caa 60%, #b8849e);
  box-shadow: 0 10px 26px rgb(110 76 132 / 28%), inset 0 1px 0 rgb(255 255 255 / 32%);
  font-weight: 800; font-size: clamp(11px, var(--font-button), 28px); letter-spacing: .015em;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.magic-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.magic-button:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgb(110 76 132 / 34%); filter: saturate(1.08); }
.magic-button:focus-visible, .text-button:focus-visible, .modal-close:focus-visible, .stepper button:focus-visible { outline: 3px solid rgb(217 168 69 / 50%); outline-offset: 3px; }

.scroll-cue {
  position: absolute; z-index: 13; bottom: max(1rem, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(16px);
  display: grid; justify-items: center; gap: .08rem; padding: .32rem .68rem .18rem;
  border-radius: 999px; color: #684c75; background: rgb(255 249 241 / 48%);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  text-decoration: none; font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgb(255 255 255 / 100%), 0 0 5px rgb(255 249 241 / 95%);
  transition: opacity .8s ease 1.28s, transform 1s ease 1.28s;
}
.scroll-cue b { font-size: 1.15rem; line-height: .75; animation: cue 1.8s ease-in-out infinite; }

.hero.is-revealing .frame,
.hero.is-revealing .flowers-top,
.hero.is-revealing .flowers-bottom,
.hero.is-revealing .landscape,
.hero.is-revealing .sun,
.hero.is-revealing .lanterns,
.hero.is-revealing .ribbon-wrap,
.hero.is-revealing .hero-copy,
.hero.is-revealing .scroll-cue,
.hero.is-revealing .sparkles i {
  opacity: 1;
}
.hero.is-revealing .mist { opacity: .30; transform: scale(1); }
.hero.is-loaded .bg { opacity: 1; transform: none; }
.hero.is-revealing .frame { transform: none; }
.hero.is-revealing .flowers-top { transform: none; }
.hero.is-revealing .flowers-bottom {
  transform: none;
  animation: flowers-soft-sway 8.5s ease-in-out 1.75s infinite;
}
.hero.is-revealing .landscape { transform: translateX(-50%); }
.hero.is-revealing .sun {
  transform: translateX(-50%) scale(1);
  animation: sun-enchanted 7s ease-in-out 1.45s infinite;
}
.hero.is-revealing .ribbon-wrap { transform: translateX(-50%) translateY(0) scale(1); }
.hero.is-revealing .hero-copy { transform: translateX(-50%) translateY(0); }
.hero.is-revealing .scroll-cue { transform: translateX(-50%) translateY(0); }
.hero.is-revealing .sparkles i { transform: scale(1); }
.hero.is-revealing {
  --tower-load-x: 0px;
  --tower-load-y: 0px;
}
.hero.is-revealing .tower {
  opacity: 1;
  animation: tower-soft-float 8s ease-in-out 1.6s infinite;
}

.story-section { position: relative; padding: clamp(4.7rem, 12vw, 7.4rem) clamp(1.25rem, 5vw, 3.3rem); background: linear-gradient(180deg, #f7e5e3, #fff8ee 24%, #fbefe8 100%); }
.story-section::before, .story-section::after { content: "✦"; position: absolute; color: rgb(215 169 77 / 55%); font-size: 1rem; }
.story-section::before { top: 3.2rem; left: 13%; }
.story-section::after { top: 5.4rem; right: 14%; }
.section-inner { max-width: 560px; margin: 0 auto clamp(2.2rem, 7vw, 3.8rem); text-align: center; }
.section-kicker { color: #a06e93; font: 600 1.03rem var(--serif); font-style: italic; letter-spacing: .05em; }
.section-inner h2, .finale h2 { margin: .25rem 0 .85rem; color: var(--plum); font: 500 clamp(2rem, 7vw, 3.5rem)/.98 var(--script); }
.section-inner p, .finale p { margin: 0; color: #6c5b72; font: 500 clamp(1rem, 2.7vw, 1.15rem)/1.6 var(--serif); }
.detail-grid { display: grid; gap: 1rem; max-width: 620px; margin: 0 auto; }
.detail-card { background: rgb(255 252 248 / 72%); backdrop-filter: blur(8px); border: 1px solid rgb(179 135 184 / 19%); border-radius: 22px; padding: 1.35rem 1.2rem; text-align: center; box-shadow: 0 12px 30px rgb(99 71 109 / 8%); }
.detail-icon { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto .65rem; border-radius: 50%; color: #a4742f; background: rgb(243 211 129 / 28%); }
.detail-card h3 { margin: 0 0 .35rem; color: #775585; font: 800 .82rem var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.detail-card p { margin: 0; font: 500 1rem/1.45 var(--serif); }
.detail-card strong { color: #5e476a; font-weight: 600; }
.text-button { border: 0; background: none; cursor: pointer; color: #8b5ea0; text-decoration: underline; text-underline-offset: 4px; margin-top: .65rem; font-weight: 800; }

.finale { position: relative; min-height: 520px; display: grid; place-items: center; padding: 4rem 1.3rem 3rem; overflow: hidden; text-align: center; background: linear-gradient(145deg, #78578a, #9f719d 52%, #b9889e); color: #fff; }
.finale::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: url('../images/bg-watercolor.webp'); background-size: cover; mix-blend-mode: screen; }
.finale::after { content: ""; position: absolute; width: 350px; height: 350px; border-radius: 50%; background: radial-gradient(circle, rgb(245 215 131 / 22%), transparent 67%); top: -80px; right: -100px; }
.finale-copy { position: relative; z-index: 1; max-width: 520px; }
.finale .section-kicker { color: #f2d99d; }
.finale h2 { color: #fff8f1; }
.finale p { color: rgb(255 248 241 / 85%); margin-bottom: 1.4rem; }
.magic-button--light { background: linear-gradient(135deg, #efd384, #d8a94d); color: #5d4468; box-shadow: 0 12px 30px rgb(46 25 53 / 24%); }
.privacy-note { position: absolute; z-index: 1; bottom: 1.1rem; width: calc(100% - 2rem); font: 600 .68rem/1.4 var(--sans) !important; color: rgb(255 255 255 / 62%) !important; }

.rsvp-dialog { width: min(100% - 1rem, 560px); max-height: min(92svh, 860px); padding: 0; border: 0; border-radius: 28px; background: transparent; overflow: visible; }
.rsvp-dialog::backdrop { background: rgb(54 36 61 / 56%); backdrop-filter: blur(8px); }
.rsvp-card { position: relative; max-height: min(92svh, 860px); overflow: auto; padding: clamp(1.5rem, 5vw, 2.35rem); border-radius: 28px; color: var(--ink); background: linear-gradient(180deg, #fffaf3, #f9e9e7); box-shadow: 0 32px 90px rgb(44 27 50 / 30%); }
.modal-close { position: absolute; top: .9rem; right: 1rem; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; background: rgb(117 80 128 / 8%); color: #775585; font-size: 1.6rem; line-height: 1; }
.modal-star { color: #d3a449; font-size: 1.25rem; text-align: center; }
.modal-kicker { margin: .25rem 0 0; color: #a06e93; text-align: center; font: 600 var(--font-modal-kicker) var(--serif); font-style: italic; }
.rsvp-card h2 { margin: .15rem 0 .45rem; color: #775585; text-align: center; font: 400 clamp(26px, var(--font-modal-title), 72px)/1 var(--script); }
.modal-lead { margin: 0 0 1.25rem; text-align: center; color: #746278; font: 500 var(--font-modal-lead)/1.4 var(--serif); }
.field { display: grid; gap: .4rem; margin: 1rem 0; }
.field > span, .attendance-fieldset legend { font-size: var(--font-form-label); font-weight: 800; color: #674f70; letter-spacing: .02em; }
.field em { color: #9c899f; font-weight: 600; font-style: normal; }
.field input, .field textarea { width: 100%; font-size: var(--font-form-text); border: 1px solid rgb(124 87 137 / 18%); border-radius: 14px; padding: .82rem .9rem; color: #4d3d55; background: rgb(255 255 255 / 72%); outline: none; transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field textarea:focus { border-color: rgb(153 104 168 / 52%); box-shadow: 0 0 0 4px rgb(153 104 168 / 9%); }
.field textarea { resize: vertical; min-height: 92px; }
.attendance-fieldset { display: grid; gap: .65rem; border: 0; padding: 0; margin: 1.15rem 0; }
.attendance-fieldset legend { margin-bottom: .6rem; }
.choice-card { display: flex; gap: .75rem; align-items: flex-start; padding: .82rem; border-radius: 14px; border: 1px solid rgb(124 87 137 / 14%); background: rgb(255 255 255 / 56%); cursor: pointer; }
.choice-card input { margin-top: .18rem; accent-color: #8e67a5; }
.choice-card span { display: grid; gap: .18rem; }
.choice-card b { font-size: var(--font-form-text); color: #5d4966; }
.choice-card small { color: #8e7c91; line-height: 1.3; font-size: max(11px, calc(var(--font-form-text) - 2px)); }
.attending-fields[hidden] { display: none; }
.counter-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid rgb(125 91 135 / 10%); }
.counter-row > div:first-child { display: grid; gap: .1rem; }
.counter-row b { color: #644f6c; font-size: var(--font-form-text); }
.counter-row small { color: #978799; font-size: max(11px, calc(var(--font-form-text) - 2px)); }
.stepper { display: grid; grid-template-columns: 38px 42px 38px; align-items: center; border: 1px solid rgb(123 87 136 / 17%); border-radius: 999px; background: rgb(255 255 255 / 60%); overflow: hidden; }
.stepper button { width: 38px; height: 38px; border: 0; cursor: pointer; background: transparent; color: #795789; font-size: 1.2rem; }
.stepper input { width: 42px; border: 0; background: transparent; text-align: center; font-weight: 800; color: #5b4664; outline: none; }
.modal-submit { width: 100%; margin-top: .45rem; }
.demo-note { margin: .75rem auto 0; max-width: 360px; text-align: center; color: #a18ea2; font-size: .68rem; line-height: 1.4; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: 1.25rem; transform: translate(-50%, 150%); width: min(calc(100% - 2rem), 520px); padding: .9rem 1rem; border-radius: 16px; color: #fffaf3; background: #644e70; box-shadow: var(--shadow); text-align: center; font-weight: 700; transition: transform .35s ease; }
.toast.is-visible { transform: translate(-50%, 0); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes lantern-sway {
  0%,100% { transform: rotate(-1.4deg); }
  50% { transform: rotate(1.3deg); }
}
@keyframes sun-enchanted {
  0%,100% {
    translate: 0 0;
    scale: 1;
    filter: drop-shadow(0 0 5px rgb(240 193 75 / 16%));
  }
  50% {
    translate: 0 -.7px;
    scale: 1.015;
    filter: drop-shadow(0 0 16px rgb(240 193 75 / 34%));
  }
}
@keyframes sun-axis-turn { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes tower-soft-float {
  0%,100% { translate: 0 0; }
  35% { translate: 0 -3px; }
  70% { translate: 0 2px; }
}
@keyframes flowers-soft-sway {
  0%,100% {
    translate: 0 0;
    rotate: 0deg;
    scale: 1;
  }
  50% {
    translate: 5px -4px;
    rotate: 1.05deg;
    scale: 1.012;
  }
}
@keyframes landscape-perspective {
  0%,100% { translate: -.2px 0; scale: 1.004; }
  50% { translate: .3px -.2px; scale: 1.025; }
}
@keyframes flowers-top-sway {
  0%,100% { translate: 0 0; rotate: 0deg; scale: 1; }
  50% { translate: 4px 5px; rotate: -.9deg; scale: 1.012; }
}
@keyframes sparkle { 0%,100%{ opacity:.28; transform: scale(.72) rotate(0); } 50%{ opacity:1; transform: scale(1.15) rotate(18deg); } }
@keyframes cue { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }

@media (min-width: 640px) {
  .detail-grid { grid-template-columns: repeat(3, 1fr); }
  .detail-card { padding: 1.35rem .9rem; }
  .hero { min-height: 940px; }
  .tower { right: -4%; top: 24%; }
  .hero-copy { left: var(--hero-copy-left); width: min(55%, 430px); }
  .ribbon-wrap { left: var(--ribbon-left); }
}

@media (max-width: 639px) {
  .hero { min-height: max(100svh, 760px); }
  .frame { inset: .65% .65% auto; width: 98.7%; height: 97.2%; }
  .flowers-top { width: 57%; left: -12%; top: -1.2%; }
  .lanterns { width: 22%; left: 3%; top: 8%; }
  .sun { width: var(--sun-width); top: var(--sun-top); left: var(--sun-left); }

  .ribbon-wrap { top: var(--ribbon-top); width: min(var(--ribbon-width), 560px); left: var(--ribbon-left); }
  .ribbon-line--single { font-size: var(--ribbon-single-size); }
  .ribbon-line--double { font-size: var(--ribbon-double-size); }

  .tower { right: -20%; top: 31%; height: 65%; }
  .hero-copy { top: var(--hero-copy-top); left: var(--hero-copy-left); width: 61%; }
  .hero-copy::before { inset: -14% -13% -12%; }
  .nickname { font-size: clamp(42px, var(--font-nickname), 150px); }
  .pre-age { font-size: clamp(10px, var(--font-pre-age), 36px); }
  .age { margin-bottom: .78rem; font-size: clamp(10px, var(--font-age), 38px); }
  .intro { width: 94%; font-size: clamp(11px, var(--font-intro), 34px); line-height: 1.38; }
  .hero-date { flex-wrap: wrap; gap: .3rem .42rem; width: 96%; line-height: 1.15; font-size: clamp(11px, var(--font-date), 30px); }
  .hero-address { width: 94%; font-size: clamp(10px, var(--font-address), 28px); }
  .magic-button { min-height: 46px; padding: .7rem 1rem; }

  .landscape { width: 142%; bottom: -.8%; }
  .flowers-bottom { width: 59%; left: -14%; bottom: -2.2%; }
  .scroll-cue { bottom: max(.75rem, env(safe-area-inset-bottom)); }
}

@media (max-width: 430px) {
  .flowers-top { width: 63%; left: -14%; }
  .lanterns { width: 25%; left: 3%; top: 8%; }
  .sun { width: var(--sun-width); top: var(--sun-top); left: var(--sun-left); }
  .ribbon-wrap { top: var(--ribbon-top); width: min(var(--ribbon-width), 560px); left: var(--ribbon-left); }
  .ribbon-line--single { font-size: var(--ribbon-single-size); }
  .ribbon-line--double { font-size: var(--ribbon-double-size); }

  .tower { right: -24%; top: 33%; height: 62.5%; }
  .hero-copy { top: var(--hero-copy-top); left: var(--hero-copy-left); width: 64%; }
  .nickname { font-size: clamp(42px, var(--font-nickname), 150px); }
  .pre-age { margin-top: .28rem; }
  .intro { width: 96%; font-size: clamp(11px, var(--font-intro), 34px); }
  .hero-date { font-size: clamp(11px, var(--font-date), 30px); margin: .68rem auto .2rem; }
  .hero-address { font-size: clamp(10px, var(--font-address), 28px); margin-bottom: .86rem; }
  .magic-button { min-height: 44px; padding: .67rem .92rem; }

  .landscape { width: 145%; bottom: -.35%; }
  .flowers-bottom { width: 62%; left: -16%; bottom: -2.2%; }
}

@media (max-width: 370px) {
  .hero { min-height: max(100svh, 710px); }
  .ribbon-wrap { width: min(var(--ribbon-width), 560px); top: var(--ribbon-top); left: var(--ribbon-left); }
  .ribbon-line--single { font-size: var(--ribbon-single-size); }
  .ribbon-line--double { font-size: var(--ribbon-double-size); }
  .tower { right: -27%; height: 61%; top: 34.2%; }
  .hero-copy { top: var(--hero-copy-top); width: 66%; left: var(--hero-copy-left); }
  .nickname { font-size: clamp(42px, var(--font-nickname), 150px); }
  .pre-age { font-size: clamp(10px, var(--font-pre-age), 36px); }
  .age { margin-bottom: .68rem; font-size: clamp(10px, var(--font-age), 38px); }
  .intro { font-size: clamp(11px, var(--font-intro), 34px); }
  .hero-date { font-size: clamp(11px, var(--font-date), 30px); margin: .62rem auto .18rem; }
  .hero-address { font-size: clamp(10px, var(--font-address), 28px); }
  .scroll-cue { font-size: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .tower { transform: none !important; }
  .bg, .frame, .flowers-top, .flowers-bottom, .landscape, .sun, .lanterns, .ribbon-wrap, .hero-copy, .tower, .scroll-cue, .sparkles i, .mist { opacity: 1 !important; }
}

/* ===== Versión completa: una sola pantalla + RSVP mágico ===== */
body { min-height: 100svh; }
.invitation { min-height: 100svh; }
.hero { min-height: max(100svh, 760px); }

.admin-entry {
  position: absolute;
  z-index: 14;
  right: max(.8rem, env(safe-area-inset-right));
  bottom: max(.65rem, env(safe-area-inset-bottom));
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  text-decoration: none;
  color: rgb(112 78 125 / 34%);
  background: rgb(255 250 245 / 16%);
  font-size: .82rem;
  transition: color .25s ease, background .25s ease, transform .25s ease;
}
.admin-entry:hover,
.admin-entry:focus-visible {
  color: #79568a;
  background: rgb(255 250 245 / 64%);
  transform: rotate(18deg) scale(1.08);
  outline: none;
}

/* La entrada inicial y el movimiento ambiental son independientes. */
.hero.is-revealing .sun { animation: sun-enchanted 7.4s ease-in-out infinite, sun-axis-turn 160s linear infinite; }
.hero.is-revealing .tower { animation: tower-soft-float 8.8s ease-in-out infinite 1.9s; }
.hero.is-revealing .flowers-bottom { animation: flowers-soft-sway 8.8s ease-in-out infinite 2.1s; }
.hero.is-revealing .flowers-top { animation: flowers-top-sway 9.2s ease-in-out infinite 2.2s; }
.hero.is-revealing .landscape { animation: landscape-perspective 14s ease-in-out infinite 2.4s; }
.hero.motion-off .landscape,
.hero.motion-off .flowers-top,
.hero.motion-off .sun,
.hero.motion-off .tower,
.hero.motion-off .flowers-bottom,
.hero.motion-off .lanterns,
.hero.motion-off .sparkles i { animation: none !important; }

/* Botón con brillo interno delicado. */
.magic-button { overflow: hidden; isolation: isolate; }
.magic-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -35%;
  background: linear-gradient(105deg, transparent 36%, rgb(255 255 255 / 24%) 48%, transparent 60%);
  translate: -48% 0;
  rotate: 8deg;
  transition: translate .7s ease;
}
.magic-button:hover::before { translate: 48% 0; }
.magic-button.is-casting { animation: button-magic-pop .48s ease; }

/* Modal: primero aparece la atmósfera, luego la tarjeta y después sus controles. */
.rsvp-dialog {
  width: min(100% - 1rem, 570px);
  max-height: min(94svh, 880px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 30px;
  background: transparent;
  overflow: visible;
  opacity: 0;
  transition: opacity .28s ease;
}
.rsvp-dialog[open] { opacity: 1; }
.rsvp-dialog::backdrop {
  background: rgb(48 31 57 / 0%);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: background .38s ease, backdrop-filter .38s ease;
}
.rsvp-dialog.is-open::backdrop {
  background: rgb(48 31 57 / 62%);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.rsvp-dialog.is-closing { opacity: 0; }
.rsvp-dialog.is-closing::backdrop { background: rgb(48 31 57 / 0%); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }

.rsvp-card {
  position: relative;
  max-height: min(94svh, 880px);
  overflow: auto;
  padding: clamp(1.55rem, 5vw, 2.45rem);
  border: 1px solid rgb(223 189 205 / 45%);
  border-radius: 30px;
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 4%, rgb(245 215 131 / 18%), transparent 25%),
    radial-gradient(circle at 92% 22%, rgb(196 154 210 / 14%), transparent 27%),
    linear-gradient(180deg, #fffaf3, #f9e9e7 72%, #f6e2e7);
  box-shadow: 0 32px 90px rgb(44 27 50 / 34%), inset 0 1px 0 rgb(255 255 255 / 80%);
  transform: translateY(24px) scale(.955);
  filter: blur(4px);
  opacity: 0;
  transition: transform .48s cubic-bezier(.18,.85,.22,1), filter .45s ease, opacity .38s ease;
}
.rsvp-dialog.is-open .rsvp-card { transform: translateY(0) scale(1); filter: blur(0); opacity: 1; }
.rsvp-dialog.is-closing .rsvp-card { transform: translateY(18px) scale(.97); filter: blur(3px); opacity: 0; }

.modal-ornament {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .55rem;
  margin: -.15rem auto .2rem;
  color: #d2a344;
}
.modal-ornament span { font-size: .72rem; opacity: .7; }
.modal-ornament b { font-size: 1.18rem; text-shadow: 0 0 13px rgb(232 184 73 / 44%); }

.modal-step {
  opacity: 0;
  transform: translateY(12px);
}
.rsvp-dialog.is-open .modal-step {
  animation: modal-step-in .52s cubic-bezier(.2,.78,.2,1) forwards;
  animation-delay: calc(.13s + (var(--step) * .075s));
}

.modal-close {
  z-index: 3;
  transition: transform .25s ease, background .25s ease;
}
.modal-close:hover { transform: rotate(12deg) scale(1.06); background: rgb(117 80 128 / 14%); }

.choice-card {
  position: relative;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.choice-card:hover { transform: translateY(-1px); border-color: rgb(142 103 165 / 26%); }
.choice-card:has(input:checked) {
  border-color: rgb(142 103 165 / 38%);
  background: linear-gradient(135deg, rgb(255 255 255 / 82%), rgb(244 231 247 / 68%));
  box-shadow: 0 8px 22px rgb(113 77 128 / 9%);
}
.field input,
.field textarea,
.stepper {
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .22s ease;
}
.field input:focus,
.field textarea:focus { transform: translateY(-1px); }
.stepper button { transition: background .18s ease, transform .18s ease; }
.stepper button:hover { background: rgb(142 103 165 / 9%); }
.stepper button:active { transform: scale(.9); }
.modal-submit { width: 100%; margin-top: .45rem; }
.privacy-note {
  position: static;
  width: auto;
  margin: .8rem auto 0;
  max-width: 390px;
  text-align: center;
  color: #9a879b !important;
  font: 600 .67rem/1.45 var(--sans) !important;
}

.rsvp-card.is-sending .modal-submit { pointer-events: none; opacity: .72; }
.rsvp-card.is-sending .modal-submit::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: .25rem;
  border: 2px solid rgb(255 255 255 / 38%);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spinner .75s linear infinite;
}

.toast {
  opacity: 0;
  transform: translate(-50%, 130%) scale(.96);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }

.magic-particle-layer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  overflow: hidden;
}
.magic-particle {
  position: fixed;
  left: var(--x);
  top: var(--y);
  color: var(--particle-color, #efc65e);
  font-size: var(--size, 14px);
  line-height: 1;
  text-shadow: 0 0 10px rgb(245 203 98 / 78%);
  animation: magic-particle .72s cubic-bezier(.18,.74,.22,1) forwards;
}

@keyframes modal-step-in {
  from { opacity: 0; transform: translateY(12px); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes magic-particle {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.45) rotate(0deg); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.08) rotate(var(--rot)); }
}
@keyframes button-magic-pop {
  0%,100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-2px) scale(1.025); }
}
@keyframes spinner { to { transform: rotate(360deg); } }

@media (max-width: 430px) {
  .rsvp-dialog { width: min(100% - .7rem, 570px); }
  .rsvp-card { border-radius: 25px; padding: 1.4rem 1.05rem 1.25rem; }
  .modal-close { top: .72rem; right: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rsvp-dialog,
  .rsvp-card,
  .modal-step,
  .magic-particle { animation: none !important; transition-duration: .01ms !important; }
  .rsvp-dialog[open],
  .rsvp-card,
  .modal-step { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* =========================================================
   APERTURA ENCANTADA · poster ultraligero + video precargado
   ========================================================= */
html { background: #eadde9; }
body { min-height: 100svh; background-color: #eadde9; }
body.intro-active { overflow: hidden; background: #c8b9c9; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.intro-stage {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--intro-theme, #c8b9c9);
  opacity: 1;
  isolation: isolate;
  touch-action: manipulation;
}

.intro-canvas {
  position: relative;
  width: min(100vw, 780px);
  height: 100svh;
  overflow: hidden;
  background: var(--intro-theme, #c8b9c9);
  box-shadow: 0 0 90px rgb(58 42 65 / 22%);
}

.intro-poster,
.intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  user-select: none;
  -webkit-user-drag: none;
}

.intro-poster {
  z-index: 1;
  opacity: 1;
  transition: opacity .24s ease;
}

.intro-video {
  z-index: 2;
  opacity: 0;
  background: var(--intro-theme, #c8b9c9);
  transition: opacity .24s ease;
  pointer-events: none;
}

.intro-video.is-visible { opacity: 1; }
.intro-stage.is-playing .intro-poster { opacity: 0; }

.intro-skip {
  display: none;
  position: absolute;
  z-index: 25;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 10px 18px;
  border: 1px solid rgb(124 87 137 / 25%);
  border-radius: 999px;
  background: #fffaf3;
  color: #684d78;
  font-size: 14px;
  cursor: pointer;
}
.intro-stage.has-load-error .intro-skip,
.intro-stage.has-play-error .intro-skip { display: block; }

/* La zona interactiva coincide con el colgante “Click aquí”. El botón real permanece invisible. */
.intro-hotspot {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 57.7%;
  width: 25%;
  max-width: 178px;
  aspect-ratio: .72;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.intro-hotspot:disabled { cursor: wait; }
.brooch-sparkles { position: absolute; inset: -12% -34%; pointer-events: none; opacity: 0; }
.brooch-sparkles i {
  position: absolute; left: var(--x); top: var(--y); font-style: normal;
  color: #fff3c5; font-size: clamp(10px, 2.8vw, 20px);
  text-shadow: 0 0 3px #fff, 0 0 9px #ffcf5e, 0 0 17px #ba791c;
}
.intro-stage.is-ready:not(.is-opening) .brooch-sparkles { opacity: 1; }
.intro-stage.is-ready:not(.is-opening) .brooch-sparkles i { animation: brooch-twinkle 2.6s ease-in-out var(--delay) infinite; }
.intro-status {
  position: absolute; z-index: 8; left: 50%; top: 26%;
  transform: translate(-50%, -50%); display: grid; justify-items: center;
  gap: .35rem; width: 72%; color: #624374; text-align: center;
  font: 600 calc(var(--font-intro-status) * 1.6)/1.15 var(--serif);
  font-style: italic; text-shadow: 0 1px 2px #f9ebff, 0 0 10px rgb(255 245 222 / 65%);
  transition: opacity .5s ease, transform .5s ease;
}
.intro-status-title { display: block; }
.intro-status-cue { font-size: .78em; letter-spacing: .025em; }
.intro-status-cue:empty { display: none; }
.intro-status-ornament { display: flex; align-items: center; gap: .5rem; color: #ac7d32; font-style: normal; font-size: .8em; }
.intro-status-ornament::before, .intro-status-ornament::after {
  content: ''; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, #bb914b);
}
.intro-status-ornament::after { transform: rotate(180deg); }
.intro-loading-stars { display: flex; gap: .6rem; color: #bb914b; font-size: .7em; }
.intro-loading-stars i { font-style: normal; animation: loading-star 1.8s ease-in-out infinite; }
.intro-loading-stars i:nth-child(2) { animation-delay: .3s; }
.intro-loading-stars i:nth-child(3) { animation-delay: .6s; }
.intro-stage.is-loading .intro-status-ornament, .intro-stage.is-ready .intro-loading-stars { display: none; }
.intro-stage.is-ready .intro-status-title, .intro-stage.is-ready .intro-status-cue { animation: invitation-ink 1.2s ease both; }
.intro-stage.is-ready .intro-status-cue { animation-delay: .2s; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .intro-stage.is-ready:not(.has-play-error) .intro-status-title {
    background: linear-gradient(105deg, #624374 35%, #b18a45 49%, #624374 63%);
    background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
    color: transparent; text-shadow: none; animation: invitation-ink 1.2s ease both, ink-shimmer 6s ease-in-out 1.2s infinite;
  }
}

.intro-progress {
  min-width: 2.35rem;
  color: #94719c;
  font-size: .66rem;
}
.intro-progress:empty { display: none; }

.portrait-note {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: max(2.8%, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(92%, 560px);
  margin: 0;
  padding: .42rem .7rem;
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: 999px;
  color: rgb(82 65 91 / 82%);
  background: rgb(246 238 246 / 54%);
  box-shadow: 0 7px 20px rgb(65 47 72 / 10%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font: 600 clamp(12px, var(--font-portrait-note), 22px)/1.2 var(--serif);
  white-space: nowrap;
  font-style: italic;
  text-align: center;
  text-shadow: 0 1px 0 rgb(255 255 255 / 82%);
  transition: opacity .35s ease, transform .35s ease;
}

.intro-stage.is-opening .intro-status,
.intro-stage.is-opening .portrait-note {
  opacity: 0;
  pointer-events: none;
}
.intro-stage.is-opening .intro-status { transform: translate(-50%, -50%) translateY(-8px); }
.intro-stage.is-opening .portrait-note { transform: translateX(-50%) translateY(8px); }

.intro-stage.is-handoff {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--handoff-duration, 1.3s) cubic-bezier(.34,.02,.26,1);
}

.intro-stage.is-finished {
  visibility: hidden;
}

/* La composición reserva su espacio mientras se preparan sus imágenes y tipografías. */
.hero:not(.is-loaded) { visibility: visible; }

.orientation-guard {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  place-items: center;
  padding: 2rem;
  color: #5d4769;
  background: rgb(228 212 232 / 91%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  text-align: center;
}
.orientation-guard p { max-width: 360px; margin: .6rem 0 0; font: 700 1rem/1.45 var(--serif); }
.phone-rotate-icon { display: block; font-size: 2.6rem; color: #936aa1; animation: orientation-hint 2.2s ease-in-out infinite; }

@media (orientation: landscape) and (max-height: 700px) {
  .orientation-guard { display: grid; }
}

@media (min-width: 800px) {
  .intro-canvas { border-inline: 1px solid rgb(255 255 255 / 28%); }
  .portrait-note { font-size: var(--font-portrait-note); }
}

@keyframes loading-star {
  0%,100% { opacity: .35; transform: scale(.8); }
  40% { opacity: 1; transform: scale(1.15); text-shadow: 0 0 8px #fff1b9; }
}
@keyframes brooch-twinkle {
  0%,100% { opacity: .25; transform: scale(.65) rotate(-15deg); }
  45% { opacity: 1; transform: scale(1.2) rotate(10deg); }
}
@keyframes invitation-ink {
  from { opacity: 0; transform: translateY(8px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes ink-shimmer {
  0%,25% { background-position: 100% 0; }
  60%,100% { background-position: 0% 0; }
}
@keyframes orientation-hint {
  0%,100% { transform: rotate(-12deg); }
  50% { transform: rotate(18deg); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-loading-stars i,
  .brooch-sparkles i,
  .intro-status-title,
  .intro-status-cue,
  .phone-rotate-icon { animation: none !important; }
  .intro-stage.is-handoff { transition-duration: .01ms !important; }
}

/* Música ambiental: control discreto que aparece al terminar la apertura. */
.music-control {
  position: fixed;
  z-index: 60;
  right: max(14px, env(safe-area-inset-right));
  top: max(14px, calc(env(safe-area-inset-top) + 8px));
  bottom: auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgb(126 88 154 / 24%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgb(100 66 122 / 88%);
  background: linear-gradient(145deg, rgb(255 249 239 / 18%), rgb(173 123 169 / 16%));
  box-shadow: 0 2px 8px rgb(76 49 91 / 8%);
  cursor: pointer;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .45s ease, transform .45s ease, filter .25s ease;
  -webkit-tap-highlight-color: transparent;
}
body.intro-active .music-control {
  opacity: 0;
  transform: translateY(10px) scale(.88);
  pointer-events: none;
}
.music-control:hover { filter: brightness(1.05) saturate(1.08); }
.music-control:focus-visible { outline: 3px solid rgb(236 192 94 / 52%); outline-offset: 3px; }
.music-control__icon {
  position: relative;
  z-index: 2;
  font: 800 1.2rem/1 var(--sans);
  transform: translateY(-1px);
}
.music-control__halo {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgb(238 205 126 / 22%);
  box-shadow: 0 0 10px rgb(225 186 102 / 8%);
  opacity: .4;
  animation: music-halo 2.8s ease-in-out infinite;
}
.music-control.is-muted {
  background: linear-gradient(145deg, rgb(124 111 132 / 12%), rgb(151 132 153 / 16%));
  filter: saturate(.72);
}
.music-control.is-muted .music-control__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-42deg);
  box-shadow: 0 0 4px rgb(85 61 92 / 20%);
}
@keyframes music-halo {
  0%,100% { transform: scale(.92); opacity: .35; }
  50% { transform: scale(1.08); opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .music-control__halo { animation: none !important; }
}

/* El fondo entra primero; los demás elementos esperan la visibilidad real del 65%. */
.hero:not(.is-revealing) :is(.frame, .flowers-top, .flowers-bottom, .landscape, .mist, .sun, .lanterns, .tower, .ribbon-wrap, .hero-copy, .scroll-cue, .sparkles i) { opacity: 0; }
.hero .frame, .hero .flowers-top, .hero .flowers-bottom, .hero .landscape, .hero .mist,
.hero .sun, .hero .lanterns, .hero .tower, .hero .ribbon-wrap, .hero .hero-copy {
  transition-duration: 1.5s, 1.9s;
}
.hero .frame, .hero .flowers-top { transition-delay: .1s; }
.hero .landscape, .hero .mist { transition-delay: .25s; }
.hero .flowers-bottom, .hero .lanterns { transition-delay: .4s; }
.hero .sun { transition-delay: .55s; }
.hero .tower { transition-delay: .7s; }
.hero .ribbon-wrap { transition-delay: .85s; }
.hero .hero-copy { transition-delay: 1.05s; }
.hero:not(.is-revealing) .hero-copy { pointer-events: none; }
.hero.is-revealing .sun { animation-delay: 3.2s; }
.hero.is-revealing .tower { animation-delay: 3.8s; }
.hero.is-revealing .flowers-bottom { animation-delay: 3.3s; }

.hero.is-revealing .flowers-top { animation-delay: 3.1s; }
.hero.is-revealing .landscape { animation-delay: 3.2s; }

/* Accesos integrados en la ilustración. */
.sun { z-index:35; pointer-events:auto; cursor:pointer; min-width:44px; }
.sun img { width:100%; height:auto; }
.sun:focus-visible { outline:2px solid #b98b39; outline-offset:5px; border-radius:50%; }
.hero:not(.is-revealing) .sun { pointer-events:none; }
.intro-admin-entry { position:absolute; z-index:9; top:0; left:34%; width:32%; height:14%; min-height:64px; background:transparent; }
.intro-admin-entry:focus-visible { outline:2px solid #b98b39; outline-offset:-5px; border-radius:50%; }
.intro-stage.is-opening .intro-admin-entry { pointer-events:none; }
/* El papel se despliega antes de que aparezcan las preguntas. */
.rsvp-dialog { transition:opacity .8s ease; }
.rsvp-card { transform:translateY(8px) scaleY(.12); transform-origin:center; clip-path:inset(42% 0 round 25px); filter:blur(1px); transition:transform .85s cubic-bezier(.2,.72,.22,1),clip-path .85s cubic-bezier(.2,.72,.22,1),opacity .6s ease,filter .65s ease; }
.rsvp-dialog.is-open .rsvp-card { transform:none; clip-path:inset(0 round 25px); }
.rsvp-dialog.is-open .modal-step { animation-duration:.65s; animation-delay:calc(.65s + var(--step) * .12s); }
.rsvp-dialog.is-closing .rsvp-card { transform:translateY(6px) scaleY(.12); clip-path:inset(42% 0 round 25px); filter:blur(1px); }
.rsvp-dialog.is-closing .modal-step { animation:none; opacity:0; transform:translateY(-8px); transition:opacity .24s ease,transform .24s ease; }
.attending-fields { display:grid; grid-template-rows:1fr; gap:0; transition:grid-template-rows .6s cubic-bezier(.2,.72,.22,1),opacity .45s ease; }
.attending-fields-inner { display:grid; gap:1rem; min-height:0; overflow:hidden; }
.attending-fields.is-collapsed { grid-template-rows:0fr; opacity:0!important; pointer-events:none; }
.rsvp-feedback { padding:.8rem; border-radius:12px; color:#81425b; background:#fae9ef; font:600 .9rem/1.4 var(--sans); }
@media(prefers-reduced-motion:reduce) { .rsvp-card,.rsvp-dialog.is-open .rsvp-card { clip-path:none; } .attending-fields { transition:none; } }