/* =========================================================
   Mis XV · Andrea — light blue & gold
   ========================================================= */
:root {
  --ts: 1; /* animation time scale — shrinks while the guest scrolls fast */
  --porcelain: #F7FBFE;
  --sky-100: #E6F3FB;
  --sky-200: #CFE7F7;
  --sky-300: #A9D3EF;
  --sky-500: #6FAAD6;
  --ink: #23415C;
  --ink-soft: #4C6B86;
  --gold: #C8922F;
  --gold-deep: #9C7A2B;
  --gold-light: #F3D27A;
  --gold-foil: linear-gradient(115deg, #8A5F12 0%, #E7B84F 18%, #FFF0B5 32%, #C8922F 48%, #F3D27A 64%, #9A6B1C 82%, #E2B04A 100%);
  --gold-metal: linear-gradient(180deg, #FFF4C8 0%, #F6D57A 24%, #DDA83F 44%, #A8711B 54%, #D7A23C 68%, #F9DE8C 86%, #C88F2B 100%);

  --script: "Pinyon Script", "Edwardian Script ITC", "Brush Script MT", cursive;
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --maxw: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }

:root {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html { scroll-behavior: smooth; scroll-padding-top: env(safe-area-inset-top, 0px); }

body {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23C9A24A' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M70 50C78 60 78 80 70 90C62 80 62 60 70 50Z'/%3E%3Cpath d='M50 70C60 62 80 62 90 70C80 78 60 78 50 70Z'/%3E%3Cpath d='M70 50C70 40 80 36 84 42M70 50C70 40 60 36 56 42M70 90C70 100 80 104 84 98M70 90C70 100 60 104 56 98'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3Ccircle cx='140' cy='0' r='3'/%3E%3Ccircle cx='0' cy='140' r='3'/%3E%3Ccircle cx='140' cy='140' r='3'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1200px 600px at 10% 0%, var(--sky-100), transparent 60%),
    radial-gradient(900px 700px at 100% 40%, #EEF7FD, transparent 60%),
    var(--porcelain);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; height: 100%; }

img { max-width: 100%; display: block; }
h1, h2, p { margin: 0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }

/* Gold foil text */
/* Gold lettering: deep-gold rim underneath + polished metallic fill on top.
   (No looping animation — a single shine sweeps across when it appears.) */
.gold-text { display: inline-grid; -webkit-text-stroke: 0; }
.gold__rim, .gold__fill { grid-area: 1 / 1; }
.gold__rim {
  color: #6E4A10;
  -webkit-text-stroke: .055em #6E4A10;
  paint-order: stroke fill;
  text-shadow: 0 .04em .06em rgba(70, 45, 8, .35);
}
.gold__fill {
  background:
    linear-gradient(105deg, transparent 40%, rgba(255,255,255,.9) 50%, transparent 60%) 160% 0 / 300% 100% no-repeat,
    var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: .012em #FFE9A8;
}
.is-open .hero__title .gold__fill,
.reveal.is-visible .gold__fill,
.pass.is-visible .gold__fill { animation: shine 1.8s calc(1.2s * var(--ts)) ease-in-out both; }
@keyframes shine { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }

/* Dividers */
.divider { display: block; width: min(400px, 82vw); height: 50px; margin: 1.2rem auto; overflow: visible; }
.divider--sm { width: 260px; height: 34px; margin: .8rem auto 1rem; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  --pad: .85rem 2.1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: var(--pad);
  font: 500 1.15rem/1 var(--serif);
  letter-spacing: .06em;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.btn--gold {
  color: #fff;
  background: linear-gradient(180deg, #F2D27A 0%, #DDA83F 42%, #B07A1E 58%, #CC9632 82%, #E9BE5C 100%);
  box-shadow: 0 6px 18px -6px rgba(138, 95, 18, .6), inset 0 1px 0 rgba(255,250,220,.75), inset 0 -2px 0 rgba(110,74,16,.35);
  text-shadow: 0 1px 2px rgba(90, 58, 10, .65);
}
.btn--gold::after { /* shimmer sweep */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%);

}
@keyframes sweep { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.btn--gold:hover::after, .intro__btn::after { animation: sweep 1.1s ease-in-out; }
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(156,122,43,.7), inset 0 1px 0 rgba(255,255,255,.5); }
.btn--ghost {
  color: var(--gold-deep);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--gold);
}
.btn--ghost:hover { background: rgba(201,162,74,.08); }
.btn--lg { --pad: 1rem 3rem; font-size: 1.3rem; }
.btn__ico { width: 1.1em; height: 1.1em; }

/* =========================================================
   Sparkle canvas
   ========================================================= */


/* =========================================================
   Opening screen
   ========================================================= */
.intro {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: clamp(1.4rem, 4vw, 2.6rem);
  background:
    radial-gradient(60% 45% at 50% 40%, #FFFFFF 0%, rgba(255,255,255,0) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23C9A24A' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M70 50C78 60 78 80 70 90C62 80 62 60 70 50Z'/%3E%3Cpath d='M50 70C60 62 80 62 90 70C80 78 60 78 50 70Z'/%3E%3Cpath d='M70 50C70 40 80 36 84 42M70 50C70 40 60 36 56 42M70 90C70 100 80 104 84 98M70 90C70 100 60 104 56 98'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3Ccircle cx='140' cy='0' r='3'/%3E%3Ccircle cx='0' cy='140' r='3'/%3E%3Ccircle cx='140' cy='140' r='3'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(40% 35% at 12% 88%, rgba(169,211,239,.55), transparent 70%),
    radial-gradient(40% 35% at 90% 10%, rgba(169,211,239,.5), transparent 70%),
    radial-gradient(30% 30% at 85% 85%, rgba(238,217,160,.35), transparent 70%),
    linear-gradient(180deg, #F3F9FD, #E4F1FA);
  transition: opacity 1.1s ease, visibility 1.1s ease;
  overflow: hidden;
}
.intro.is-leaving { opacity: 0; visibility: hidden; }
.intro.is-leaving .intro__inner { transform: scale(1.12); filter: blur(4px); }

.intro__frame {
  position: absolute; inset: clamp(.7rem, 2vw, 1.3rem);
  border: 2px solid rgba(201,162,74,.65);
  opacity: 0; animation: fade 1.2s .1s forwards;
  pointer-events: none;
}
.intro__frame::before { content: ""; position: absolute; inset: 7px; border: 1.5px solid rgba(201,162,74,.38); }
.intro__frame .corner { width: clamp(90px, 16vw, 150px); height: clamp(90px, 16vw, 150px); }

.intro__inner {
  position: relative;
  height: 100%; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(.4rem, 1.6vh, 1.2rem);
  text-align: center;
  transition: transform 1.2s var(--ease-out), filter 1.2s;
}

/* Wreath fills most of the screen */
.wreath {
  width: min(92vw, 72vh, 760px);
  height: auto; aspect-ratio: 476 / 498;
  overflow: visible;
  flex-shrink: 1; min-height: 0;
}
.wreath__halo { opacity: 0; animation: fade 1.6s .1s forwards; }
.wreath__ring { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.2s .2s var(--ease-out) forwards; }
.wreath__ring--dots { stroke-dasharray: 0 9; stroke-dashoffset: 0; opacity: 0; animation: fade 1.2s 1.2s forwards; }

.wreath__branch { fill: none; stroke: url(#goldGrad); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2s .3s cubic-bezier(.45,.05,.3,1) forwards; }
.wreath__sprig { fill: none; stroke: #C2A04F; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s var(--ease-out) forwards; }

.wreath__leaf { transform: var(--t) scale(0); animation: leafIn .9s var(--ease-out) forwards; }
.wreath__leaf path:first-child { fill: url(#leafGrad); stroke: url(#goldGrad); stroke-width: 2; }
.wreath__leaf path:last-child { fill: none; stroke: #B8913C; stroke-width: 1.4; }
@keyframes leafIn { to { transform: var(--t) scale(1); } }

.wreath__berry { fill: url(#centerGrad); transform: var(--t) scale(0); animation: leafIn .6s var(--ease-out) forwards; }

.wreath__rose { transform: var(--t) scale(.6); opacity: 0; animation: roseIn 1.4s var(--ease-out) forwards; }
.wreath__rose .petal-fill { fill: url(#roseGrad); stroke: none; opacity: 0; animation: fade 1.4s forwards; animation-delay: inherit; }
.wreath__rose .petal-line { fill: none; stroke: url(#goldGrad); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease-out) forwards; animation-delay: inherit; }
/* Center flower (client rose) */
.wreath { animation: breathe 6s 3.6s ease-in-out infinite; will-change: transform; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.fpiece { opacity: 0; transform: scale(.35) rotate(-40deg); animation: pieceIn 1.3s cubic-bezier(.2,.85,.25,1.15) forwards; }
@keyframes pieceIn { to { opacity: 1; transform: none; } }


@keyframes roseIn { to { transform: var(--t) scale(1); opacity: 1; } }

.wreath__tiara { opacity: 0; transform: translateY(-14px); animation: rise 1s 2s var(--ease-out) forwards; }

.intro__text { display: flex; flex-direction: column; align-items: center; gap: .15rem; max-width: 44rem; }
@media (max-aspect-ratio: 3/4) {
  .intro__inner { gap: clamp(1rem, 3.5vh, 2.2rem); }
  .wreath { width: min(100vw - 1.4rem, 70vh, 640px); }
  .intro { padding-inline: .7rem; }
  .intro__name { font-size: clamp(2.6rem, 11vw, 3.6rem); line-height: 1.1; }
  .intro__sub { font-size: 1.25rem; }
  .intro__frame .corner { width: 96px; height: 96px; }
}
.intro__name {
  font-family: var(--script);
  font-size: clamp(2rem, 5.6vw, 3.4rem);
  line-height: 1.15;
  color: var(--ink);
  opacity: 0; animation: rise 1s 2.2s var(--ease-out) forwards;
}
.intro__divider { width: min(320px, 72vw); height: 38px; overflow: visible; opacity: 0; transform: scaleX(0); animation: unfurl 1.2s 2.35s var(--ease-out) forwards; }
@keyframes unfurl { to { opacity: 1; transform: none; } }
.intro__sub {
  font-style: italic; color: var(--gold-deep); letter-spacing: .06em;
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  opacity: 0; animation: rise 1s 2.5s var(--ease-out) forwards;
}
.intro__date {
  font-size: clamp(.95rem, 2.2vw, 1.1rem); letter-spacing: .08em; color: var(--ink-soft);
  opacity: 0; animation: rise 1s 2.65s var(--ease-out) forwards;
}
.intro__btn {
  margin-top: clamp(1rem, 3vh, 2rem);
  opacity: 0; animation: rise 1s 2.3s var(--ease-out) forwards, glow 2.4s 3.4s ease-in-out infinite;
}

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { to { transform: scale(1); } }
@keyframes fade { to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes glow {
  0%, 100% { box-shadow: 0 6px 18px -6px rgba(156,122,43,.55), 0 0 0 0 rgba(201,162,74,.35); }
  50% { box-shadow: 0 6px 18px -6px rgba(156,122,43,.55), 0 0 0 12px rgba(201,162,74,0); }
}

/* =========================================================
   Music player
   ========================================================= */
.player {
  position: fixed; z-index: 70;
  right: calc(1rem + env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
.player[hidden] { display: none; }

.player__fab {
  width: 54px; height: 54px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,.9);
  box-shadow: 0 6px 20px -8px rgba(35,65,92,.45), inset 0 0 0 1.5px var(--gold), inset 0 0 0 4px rgba(255,255,255,.9), inset 0 0 0 5px rgba(201,162,74,.3);
  display: grid; place-items: center;
  transition: transform .3s var(--ease-out);
}
.player__fab:hover { transform: scale(1.06); }
.player.is-open .player__fab { transform: rotate(-8deg) scale(.96); }
.player__bars { display: flex; align-items: flex-end; gap: 2.5px; height: 22px; }
.player__bars i {
  width: 3.5px; height: 100%; border-radius: 2px;
  background: linear-gradient(180deg, #F6D57A, #C8922F 60%, #9A6B1C);
  transform-origin: bottom; transform: scaleY(.18);
  will-change: transform;
}
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

.player__panel {
  position: absolute; right: 0; bottom: 66px;
  width: min(300px, calc(100vw - 2rem));
  padding: 14px 16px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 20px 40px -18px rgba(35,65,92,.5), inset 0 0 0 1px rgba(201,162,74,.55), inset 0 0 0 5px #fff, inset 0 0 0 6px rgba(201,162,74,.22);
  transform-origin: calc(100% - 27px) calc(100% + 40px);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.85);
  transition: opacity .3s, transform .4s var(--ease-out), visibility 0s .4s;
}
.player.is-open .player__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .4s var(--ease-out), visibility 0s; }

.player__row { display: flex; align-items: center; gap: 12px; }
.player__row--vol { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(201,162,74,.22); }

.player__play {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, #F2D27A 0%, #DDA83F 42%, #B07A1E 58%, #E9BE5C 100%);
  box-shadow: 0 6px 14px -6px rgba(156,122,43,.7), inset 0 1px 0 rgba(255,255,255,.5);
  display: grid; place-items: center;
  transition: transform .2s;
}
.player__play:active { transform: scale(.94); }
.player__icon { width: 22px; height: 22px; grid-area: 1 / 1; }
.player__icon--pause { display: none; }
.player.is-playing .player__icon--play { display: none; }
.player.is-playing .player__icon--pause { display: block; }

.player__seek { flex: 1; min-width: 0; }
.player__times { display: flex; justify-content: space-between; font-size: .85rem; color: var(--ink-soft); font-variant-numeric: lining-nums tabular-nums; margin-top: -2px; }

.player__mute { flex: none; width: 34px; height: 34px; border: 0; background: none; cursor: pointer; color: var(--gold-deep); display: grid; place-items: center; border-radius: 50%; }
.player__mute:hover { background: rgba(201,162,74,.1); }
.player__mute svg { width: 22px; height: 22px; }
.player__x { display: none; }
.player.is-muted .player__wave { display: none; }
.player.is-muted .player__x { display: block; }
.player.vol-low .player__wave--2 { display: none; }
.player.no-volume .player__row--vol #playerVol { display: none; }

.player__note { margin-top: 8px; font-size: .85rem; font-style: italic; color: #A8463F; line-height: 1.35; }

/* Gold range sliders */
.prange {
  --p: 0%;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; margin: 0;
  background: transparent; cursor: pointer;
  touch-action: none;
}
.prange:focus { outline: none; }
.prange:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.prange::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #B8913C 0%, #E2C474 var(--p), rgba(201,162,74,.22) var(--p));
}
.prange::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF4CF, #D9B65E 55%, #9C7A2B);
  box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(35,65,92,.35);
  transition: transform .15s;
}
.prange:active::-webkit-slider-thumb { transform: scale(1.2); }
.prange::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(201,162,74,.22); }
.prange::-moz-range-progress { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #B8913C, #E2C474); }
.prange::-moz-range-thumb {
  width: 16px; height: 16px; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF4CF, #D9B65E 55%, #9C7A2B);
  box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(35,65,92,.35);
}
.prange:disabled { opacity: .45; cursor: default; }

/* =========================================================
   Image placeholders (shown until real pictures are added)
   ========================================================= */
.media { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--sky-200), var(--sky-100) 55%, #FBF4E0); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media.is-missing img { display: none; }
.media.is-missing::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: grid; place-items: center; text-align: center; padding: 1rem;
  font-style: italic; font-size: 1rem; color: var(--ink-soft);
  background-image: repeating-linear-gradient(45deg, rgba(201,162,74,.08) 0 12px, transparent 12px 24px);
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;   /* older phones */
  min-height: 100svh;  /* newer phones: ignores the browser's address bar */
  display: grid; place-items: center;
  padding: clamp(3.5rem, 8vw, 6rem) 1.25rem 7rem;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media.is-missing::after { display: none; }
.hero .hero__img { will-change: transform; scale: 1.22; transition: scale 6s var(--ease-out); }
.is-open .hero .hero__img { scale: 1.1; }
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 55% at 50% 55%, rgba(247,251,254,.9) 0%, rgba(247,251,254,.72) 50%, rgba(207,231,247,.3) 100%),
    linear-gradient(180deg, rgba(247,251,254,0) 60%, rgba(247,251,254,.85) 94%, var(--porcelain));
  opacity: 0;
}
/* Opening of the banner: the photo is shown clearly first (slow zoom),
   then a soft veil fades in and the text appears over it. */
.hero.is-revealed .hero__veil { animation: veilIn .7s ease forwards; }
.hero.hero--no-photo .hero__veil { opacity: 1; animation: none; }
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }
.hero__frame { opacity: 0; transition: opacity 1.2s .3s; }
.is-open .hero__frame { opacity: 1; }
.hero__frame { position: absolute; inset: clamp(.8rem, 2.5vw, 1.8rem); pointer-events: none; border: 2px solid rgba(201,162,74,.6); }
.hero__frame::before { content: ""; position: absolute; inset: 7px; border: 1.5px solid rgba(201,162,74,.35); }

.corner { position: absolute; width: clamp(72px, 12vw, 124px); height: clamp(72px, 12vw, 124px); }
.corner--tl { top: -2px; left: -2px; }
.corner--tr { top: -2px; right: -2px; transform: scaleX(-1); }
.corner--bl { bottom: -2px; left: -2px; transform: scaleY(-1); }
.corner--br { bottom: -2px; right: -2px; transform: scale(-1); }

.hero__content { max-width: 44rem; }
.hero__tiara { width: clamp(120px, 20vw, 170px); height: auto; aspect-ratio: 2/1; overflow: visible; }
.hero__title {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(3.9rem, 16vw, 10rem);
  line-height: .95;
  padding: 0 .15em .1em;
}
.hero__date {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  letter-spacing: .35em;
  color: var(--ink);
  font-weight: 500;
  padding-left: .35em;
}
.hero__lead { font-style: italic; color: var(--ink-soft); max-width: 34ch; margin: 0 auto; line-height: 1.55; }
.hero__name {
  font-family: var(--script);
  font-size: clamp(2.8rem, 8.5vw, 5rem);
  line-height: 1.15;
  color: var(--ink);
  margin-top: 1rem;
}
.hero__day { display: flex; flex-direction: column; align-items: center; margin-top: .4rem; }
.hero__day span:first-child { font-size: clamp(1.6rem, 4.4vw, 2.4rem); font-weight: 500; letter-spacing: .04em; }
.hero__year { font-size: clamp(1.2rem, 3vw, 1.6rem); letter-spacing: .5em; padding-left: .5em; color: var(--gold-deep); }

/* Page-load sequence (runs once, after opening) */
.seq { opacity: 0; transform: translateY(18px); }
.hero.is-revealed .seq { animation: rise .75s calc(.05s + var(--d) * .08s) var(--ease-out) forwards; }

/* Countdown */
.countdown {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.5rem, 2vw, 1rem);
  max-width: 30rem; margin: 2rem auto 0;
}
.countdown__unit {
  position: relative;
  padding: .9rem .3rem .7rem;
  background: rgba(255,255,255,.9);
  border-radius: 1.4rem 1.4rem .4rem .4rem; /* little arch */
  box-shadow: inset 0 0 0 1px rgba(201,162,74,.55), 0 10px 24px -14px rgba(35,65,92,.5);
}
.countdown__unit::before { /* inner gold line */
  content: ""; position: absolute; inset: 4px; border-radius: 1.15rem 1.15rem .25rem .25rem;
  border: 1px solid rgba(201,162,74,.25); pointer-events: none;
}
.countdown__num {
  display: block;
  font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 600; line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.countdown__num.tick { animation: tick .5s var(--ease-out); }
@keyframes tick { 0% { transform: translateY(-6px); opacity: .3; } 100% { transform: none; opacity: 1; } }
.countdown__lbl { display: block; font-style: italic; font-size: .9rem; color: var(--gold-deep); margin-top: .3rem; }
.countdown__done { font-family: var(--script); font-size: 2.6rem; color: var(--gold-deep); margin-top: 1.5rem; }

.hero__scroll {
  position: absolute; bottom: calc(2.2rem + env(safe-area-inset-bottom, 0px)); left: 50%; translate: -50% 0;
  width: 26px; height: 42px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--gold);
  opacity: 0; transition: opacity 1s 2.5s;
}
.hero.is-revealed .hero__scroll { opacity: 1; transition-delay: 1.2s; }
.hero__scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--gold); animation: scrolldot 1.8s ease-in-out infinite; }
@keyframes scrolldot { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* =========================================================
   Scroll animations
   ========================================================= */
.reveal { --dur: 1.2s; }

/* Photo frames: curtain wipe upward, photo settles from a zoom */
[data-anim="wipe-up"] { opacity: 0; transform: translateY(46px) scale(.95); transition: opacity calc(.9s * var(--ts)) ease, transform calc(1.1s * var(--ts)) var(--ease-out); }
[data-anim="wipe-up"].is-visible { opacity: 1; transform: none; }
[data-anim="wipe-side"] { opacity: 0; transform: translateX(-46px); transition: opacity calc(.9s * var(--ts)) ease, transform calc(1.1s * var(--ts)) var(--ease-out); }
[data-anim="wipe-side"].is-visible { opacity: 1; transform: none; }

.media img { scale: 1.16; transition: scale calc(1.6s * var(--ts)) var(--ease-out); }
.is-visible .media img { scale: 1.12; }

/* Event card: each line arrives in turn */
[data-anim="stagger"]:not(.is-done) > * { opacity: 0; transform: translateY(22px); transition: opacity calc(.9s * var(--ts)) var(--ease-out), transform calc(.9s * var(--ts)) var(--ease-out); transition-delay: calc((var(--i, 0) * .12s + .2s) * var(--ts)); }
[data-anim="stagger"].is-visible:not(.is-done) > * { opacity: 1; transform: none; }
[data-anim="stagger"]:not(.is-done) .event__icon { transform: translateY(22px) rotate(-12deg) scale(.6); }
[data-anim="stagger"].is-visible:not(.is-done) .event__icon { transform: none; }

/* Script headings write in from left to right */
[data-anim="write"] { opacity: 0; transform: translateX(-24px) scale(.96); transform-origin: left center; transition: opacity calc(.9s * var(--ts)) ease, transform calc(1.1s * var(--ts)) var(--ease-out); }
[data-anim="write"].is-visible { opacity: 1; transform: none; }

/* Once an entrance has finished, drop the clipping so shadows and script swashes show fully */
[data-anim].is-done { clip-path: none !important; }

/* Rose sprays open from their corner */
[data-anim="bloom"] { opacity: 0; scale: .3; transition: opacity calc(1s * var(--ts)) calc(1s * var(--ts)), scale calc(1.4s * var(--ts)) calc(1s * var(--ts)) cubic-bezier(.2,.9,.3,1.2); }
[data-anim="bloom"].is-visible { opacity: 1; scale: 1; }

/* Pearl swags drape outward from the center */
[data-anim="drop"] { opacity: 0; transform: translateY(-14px) scaleX(.6); transition: opacity calc(.9s * var(--ts)) ease, transform calc(1.2s * var(--ts)) var(--ease-out); }
[data-anim="drop"].is-visible { opacity: 1; transform: none; }

/* Flourish dividers unfurl from the center */
[data-anim="grow"] { transform: scaleX(0); opacity: 0; transition: transform calc(1.3s * var(--ts)) var(--ease-out), opacity calc(.6s * var(--ts)); }
[data-anim="grow"].is-visible { transform: none; opacity: 1; }

/* Soft focus-in */
[data-anim="blur"] { opacity: 0; transform: translateY(24px) scale(.97); transition: opacity calc(1.2s * var(--ts)), transform calc(1.2s * var(--ts)) var(--ease-out); }
[data-anim="blur"].is-visible { opacity: 1; transform: none; }

/* Guest pass lifts up like a card from an envelope */
.pass-wrap { perspective: 1200px; }
[data-anim="flip"] { opacity: 0; transform: rotateX(28deg) translateY(80px) scale(.94); transform-origin: 50% 100%; transition: opacity calc(1s * var(--ts)), transform calc(1.5s * var(--ts)) cubic-bezier(.2,.9,.25,1.05); }
[data-anim="flip"].is-visible { opacity: 1; transform: none; }

.hero__content { will-change: transform, opacity; }

/* =========================================================
   Event sections
   ========================================================= */
.event {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem;
  display: grid; gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center; justify-items: center;
}
@media (min-width: 820px) {
  .event { grid-template-columns: 1fr 1fr; }
  .event--alt { grid-template-columns: 1.25fr 1fr; }
}

/* Arched portrait frame (cathedral window) */
.arch {
  margin: 0;
  width: 100%;
  padding: 12px;
  border-radius: 999px 999px 18px 18px;
  background: var(--gold-foil);
  box-shadow: 0 30px 60px -30px rgba(35,65,92,.55);
  position: relative;
}
.arch::before { /* inner hairline */
  content: ""; position: absolute; inset: 5px; border-radius: inherit;
  border: 1px solid rgba(255,255,255,.65); pointer-events: none; z-index: 1;
}
.arch__media { aspect-ratio: 3 / 4; border-radius: 999px 999px 10px 10px; }
.arch--large { width: 100%; }
.arch--large .arch__media { aspect-ratio: 2 / 3; }

/* Landscape frame */
.landscape {
  margin: 0; width: 100%;
  padding: 10px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 30px 60px -30px rgba(35,65,92,.55), inset 0 0 0 1px rgba(201,162,74,.6);
  rotate: -1.5deg;
}
.landscape__media { aspect-ratio: 1 / 1; border-radius: 2px; outline: 1px solid rgba(201,162,74,.5); outline-offset: -6px; }
.landscape .media::before { /* keep inner outline above image */
  content: ""; position: absolute; inset: 6px; border: 1px solid rgba(255,255,255,.75); z-index: 1; pointer-events: none;
}

.event__card { text-align: center; max-width: 26rem; }
.event__icon { width: 76px; height: 76px; margin: 0 auto .6rem; display: block; }
.event__title { font-family: var(--script); font-weight: 400; font-size: clamp(3rem, 8vw, 4.2rem); line-height: 1.1; color: var(--ink); }
.event__time { font-size: 1.5rem; font-weight: 600; letter-spacing: .12em; color: var(--gold-deep); }
.event__place { font-size: 1.35rem; font-weight: 600; }
.event__addr { font-style: italic; color: var(--ink-soft); margin-bottom: 1.6rem; }

/* =========================================================
   Programa / timeline
   ========================================================= */
.programa {
  padding: clamp(3rem, 7vw, 5rem) 1.25rem;
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(255,255,255,.9), transparent 70%),
    linear-gradient(180deg, transparent, var(--sky-100) 20%, var(--sky-100) 80%, transparent);
  text-align: center;
}
.section-title { font-family: var(--script); font-weight: 400; font-size: clamp(3.6rem, 10vw, 5.4rem); line-height: 1.1; padding: 0 .2em; }

.timeline {
  --line-x: 50%;
  list-style: none; margin: 2.5rem auto 0; padding: 0;
  max-width: 720px; position: relative;
}
.timeline::before, .timeline::after { /* track + animated gold fill */
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--line-x); width: 2px; translate: -1px 0;
}
.timeline::before { background: rgba(201,162,74,.22); }
.timeline::after {
  background: linear-gradient(180deg, var(--gold-light), var(--gold), var(--gold-deep));
  transform-origin: top; transform: scaleY(var(--progress, 0));
}
.timeline__item {
  position: relative;
  display: grid; grid-template-columns: 1fr 96px 1fr; align-items: center;
  min-height: 116px;
}
.timeline__badge {
  grid-column: 2; z-index: 1;
  width: 84px; height: 84px; margin: 0 auto; border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 0 0 2.5px var(--gold), 0 0 0 7px rgba(255,255,255,.9), 0 0 0 9px rgba(201,162,74,.45), 0 14px 28px -14px rgba(35,65,92,.5);
  transform: scale(.4); opacity: 0;
  transition: transform calc(.8s * var(--ts)) var(--ease-out), opacity calc(.6s * var(--ts));
}
.timeline__badge svg { width: 56px; height: 56px; }
.timeline__text {
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity calc(.8s * var(--ts)) calc(.15s * var(--ts)), transform calc(.8s * var(--ts)) calc(.15s * var(--ts)) var(--ease-out);
}
.timeline__item:nth-child(odd) .timeline__text { grid-column: 1; grid-row: 1; text-align: right; padding-right: 1rem; transform: translateX(-20px); }
.timeline__item:nth-child(even) .timeline__text { grid-column: 3; grid-row: 1; text-align: left; padding-left: 1rem; transform: translateX(20px); }
.timeline__item.is-visible .timeline__badge { transform: none; opacity: 1; }
.timeline__item.is-visible .timeline__text { opacity: 1; transform: none; }
.timeline__name { font-family: var(--script); font-size: clamp(2.2rem, 6vw, 2.9rem); line-height: 1.1; }
.timeline__time { font-weight: 600; letter-spacing: .12em; color: var(--gold-deep); }

@media (max-width: 560px) {
  .timeline { --line-x: 42px; }
  .timeline__item { grid-template-columns: 84px 1fr; }
  .timeline__badge { grid-column: 1; width: 70px; height: 70px; }
  .timeline__badge svg { width: 46px; height: 46px; }
  .timeline__item:nth-child(n) .timeline__text { grid-column: 2; text-align: left; padding: 0 0 0 1.2rem; transform: translateX(20px); }
  .timeline__item.is-visible:nth-child(n) .timeline__text { transform: none; }
}

/* =========================================================
   Pass / RSVP
   ========================================================= */
.pass-wrap { padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem; }
.pass {
  position: relative;
  max-width: 34rem; margin: 0 auto;
  padding: clamp(2.6rem, 7vw, 3.6rem) clamp(1.4rem, 6vw, 3rem);
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, #fff 0%, rgba(255,255,255,.92) 60%, rgba(230,243,251,.95) 100%);
  border-radius: 4px;
  box-shadow: 0 40px 80px -40px rgba(35,65,92,.55), inset 0 0 0 1px rgba(201,162,74,.5), inset 0 0 0 9px #fff, inset 0 0 0 10px rgba(201,162,74,.3);
}
.pass .corner { width: 86px; height: 86px; }
.pass .corner--tl { top: 8px; left: 8px; }
.pass .corner--tr { top: 8px; right: 8px; }
.pass .corner--bl { bottom: 8px; left: 8px; }
.pass .corner--br { bottom: 8px; right: 8px; }

.pass__kicker { font-style: italic; color: var(--ink-soft); font-size: 1.2rem; }
.pass__guest { font-family: var(--script); font-size: clamp(2.8rem, 9vw, 3.8rem); line-height: 1.2; overflow-wrap: anywhere; }
.pass__reserved { font-style: italic; color: var(--ink-soft); }
.pass__seats { display: flex; align-items: baseline; justify-content: center; gap: .6rem; margin: .4rem 0 1.8rem; }
.pass__count { font-size: clamp(4rem, 14vw, 5.5rem); font-weight: 600; line-height: 1; font-variant-numeric: lining-nums; }
.pass__unit { font-size: 1.6rem; font-weight: 500; }
.pass__deadline { margin-top: 1.8rem; font-size: 1.02rem; font-style: italic; color: var(--ink-soft); }

.rsvp { min-height: 64px; }
.rsvp__step { display: none; flex-direction: column; align-items: center; gap: .8rem; animation: rise .6s var(--ease-out); }
.rsvp[data-step="start"] .rsvp__step--start,
.rsvp[data-step="phone"] .rsvp__step--phone,
.rsvp[data-step="verify"] .rsvp__step--verify,
.rsvp[data-step="done"] .rsvp__step--done { display: flex; }

.rsvp__label { font-style: italic; color: var(--ink-soft); }
.rsvp__input {
  width: min(100%, 18rem);
  padding: .8rem 1rem;
  font: 500 1.35rem var(--serif); text-align: center; letter-spacing: .06em; color: var(--ink);
  background: #fff;
  border: 0; border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px rgba(201,162,74,.6);
  transition: box-shadow .25s;
}
.rsvp__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 5px rgba(201,162,74,.18); }
.rsvp__input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #C2645C; }
.rsvp__error { color: #A8463F; font-size: 1rem; min-height: 1.2em; }
.rsvp__number { font-size: 1.8rem; font-weight: 600; letter-spacing: .06em; color: var(--ink); }
.rsvp__actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.rsvp__check { width: 64px; height: 64px; }
.rsvp__check circle { stroke-dasharray: 152; stroke-dashoffset: 152; animation: draw .8s var(--ease-out) forwards; }
.rsvp__check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .5s .6s var(--ease-out) forwards; }
.rsvp__thanks { font-family: var(--script); font-size: 2.4rem; line-height: 1.2; color: var(--ink); }
.rsvp__small { font-size: 1rem; color: var(--ink-soft); }

/* =========================================================
   Closing
   ========================================================= */
.closing { padding: clamp(2rem, 5vw, 3.5rem) 1.25rem clamp(3rem, 6vw, 4.5rem); text-align: center; display: flex; flex-direction: column; align-items: center; }
.closing__line { font-style: italic; font-size: clamp(1.4rem, 3.6vw, 1.9rem); max-width: 22ch; line-height: 1.45; }
.closing__thanks { font-family: var(--script); font-size: clamp(5rem, 18vw, 8.5rem); line-height: 1; padding: 0 .2em .15em; }

.footer { text-align: center; padding: 2rem 1rem calc(3rem + env(safe-area-inset-bottom, 0px)); color: var(--ink-soft); font-style: italic; border-top: 1px solid rgba(201,162,74,.3); }
.footer__tiara { width: 60px; height: 30px; display: block; margin: 0 auto .4rem; }

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .seq, .reveal, .timeline__badge, .timeline__text { opacity: 1 !important; transform: none !important; }
  [data-anim], [data-anim] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; stroke-dashoffset: 0 !important; }

}

/* =========================================================
   Embellishments: rose sprays, pearl swags, butterflies
   ========================================================= */
.spray { position: absolute; height: auto; aspect-ratio: 298 / 228; pointer-events: none; z-index: 2; translate: -8% -10.5%; }
/* (the image has a little padding around the bouquet; translate lines the bouquet up with the corner) */
.spray--tl { transform-origin: 14% 22%; }
.spray--br { transform: scale(-1); translate: 8% 10.5%; }
.spray--tr, .photo__spray--tr { transform: scaleX(-1); translate: 8% -10.5%; }
.spray--bl, .photo__spray--bl { transform: scaleY(-1); translate: -8% 10.5%; }

.intro__spray { width: clamp(226px, 36vw, 452px); opacity: 0; animation: sprayIn 1.6s 1.2s cubic-bezier(.2,.9,.3,1.15) forwards; }
.intro__spray.spray--tl { top: clamp(.4rem, 1.4vw, .9rem); left: clamp(.4rem, 1.4vw, .9rem); }
.intro__spray.spray--br { bottom: clamp(.4rem, 1.4vw, .9rem); right: clamp(.4rem, 1.4vw, .9rem); animation-delay: 1.4s; }
@keyframes sprayIn { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }

.hero__spray { width: clamp(202px, 31vw, 393px); opacity: 0; }
.hero__spray.spray--tl { top: -10px; left: -10px; }
.hero__spray.spray--br { bottom: -10px; right: -10px; }
.hero.is-revealed .hero__spray { animation: sprayIn 1.2s .15s cubic-bezier(.2,.9,.3,1.15) forwards; }

.photo { position: relative; width: min(100%, 400px); justify-self: center; }
.photo--wide { width: min(100%, 470px); }
.photo--large { width: min(100%, 560px); margin-top: 1.5rem; }
.photo__spray { width: clamp(178px, 45vw, 298px); }
.photo__spray--tl { top: -34px; left: -40px; }
.photo__spray--br { bottom: -30px; right: -40px; transform: scale(-1); translate: 8% 10.5%; }
.photo__spray--tr { top: -38px; right: -40px; }
.photo__spray--bl { bottom: -34px; left: -40px; }
@media (max-width: 560px) {
  .photo__spray--tl, .photo__spray--bl { left: -14px; }
  .photo__spray--br, .photo__spray--tr { right: -14px; }
}

.pass__spray { width: clamp(178px, 43vw, 256px); }
.pass__spray.spray--tl { top: -36px; left: -34px; }
.pass__spray.spray--br { bottom: -36px; right: -34px; }
@media (max-width: 560px) {
  .pass__spray.spray--tl { left: -16px; }
  .pass__spray.spray--br { right: -16px; }
}

.swag { display: block; width: min(686px, 98vw); height: auto; aspect-ratio: 624 / 110; margin: 0 auto 1.6rem; overflow: visible; }

.closing { position: relative; }

.butterfly {
  position: absolute; z-index: 3;
  width: 72px; height: auto; aspect-ratio: 168 / 140;
  pointer-events: none;
  opacity: 0;
}
.butterfly img { display: block; width: 100%; height: auto; animation: flap .42s ease-in-out infinite alternate; }





@keyframes flap { from { transform: scaleX(1); } to { transform: scaleX(.45); } }
@keyframes appear { to { opacity: 1; } }
@keyframes flyA { 0%, 100% { transform: translate(0, 0) rotate(-10deg); } 25% { transform: translate(60px, -40px) rotate(8deg); } 50% { transform: translate(120px, 10px) rotate(-6deg); } 75% { transform: translate(50px, 50px) rotate(10deg); } }
@keyframes flyC { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 20% { transform: translate(40px, -60px) rotate(10deg); } 45% { transform: translate(-20px, -110px) rotate(-8deg); } 70% { transform: translate(-60px, -40px) rotate(6deg); } }
@keyframes flyB { 0%, 100% { transform: translate(0, 0) rotate(12deg); } 30% { transform: translate(-70px, -30px) rotate(-6deg); } 60% { transform: translate(-30px, -80px) rotate(8deg); } 80% { transform: translate(-90px, -20px) rotate(-10deg); } }

.butterfly--a { left: 9%; top: 24%; animation: appear 1.5s 2.2s forwards, flyA 17s 2.2s ease-in-out infinite; }
.butterfly--b { right: 9%; top: 56%; width: 60px; animation: appear 1.5s 2.6s forwards, flyB 19s 2.6s ease-in-out infinite; }
.butterfly--c { left: 22%; bottom: 12%; width: 50px; animation: appear 1.5s 3s forwards, flyA 21s 3s ease-in-out infinite reverse; }
.butterfly--d { left: 10%; top: 34%; width: 66px; }
.butterfly--e { right: 11%; top: 66%; width: 56px; }
.is-open .butterfly--d { animation: appear 1.5s 1.5s forwards, flyA 18s 1.5s ease-in-out infinite; }
.is-open .butterfly--e { animation: appear 1.5s 2s forwards, flyB 20s 2s ease-in-out infinite; }
.butterfly--f { right: 16%; top: 16%; width: 64px; animation: appear 1.5s forwards, flyB 18s ease-in-out infinite; }
@media (max-width: 560px) {
  .butterfly--a { left: 4%; top: 14%; }
  .butterfly--b { right: 5%; top: 62%; }
  .butterfly--c { display: none; }
  .butterfly--d { left: 4%; top: 46%; }
  .butterfly--e { right: 4%; top: 8%; }
  .butterfly--f { right: 6%; }
}

/* Short landscape screens (phones turned sideways): wreath beside the text */
@media (max-height: 560px) and (min-aspect-ratio: 1/1) {
  .intro__inner { flex-direction: row; gap: 4vw; }
  .wreath { width: auto; height: 84vh; }
  .intro__name { font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
}

@media (prefers-reduced-motion: reduce) {
  .butterfly { opacity: 1 !important; animation: none !important; }
  .butterfly img { animation: none !important; }
  .spray, .swag { opacity: 1 !important; scale: 1 !important; clip-path: none !important; }
  .fpetal { opacity: 1 !important; transform: rotate(var(--r)) !important; }
}
@media (max-width: 560px) {
  .hero__spray { width: 167px; }
}

/* =========================================================
   Bolder, easier-to-read text
   ========================================================= */
:root { --ink-soft: #34526E; --gold-deep: #8B5E12; }
body { font-weight: 600; }

/* Secondary & italic lines */
.hero__lead, .intro__sub, .intro__date, .event__addr, .pass__kicker, .pass__reserved,
.pass__deadline, .closing__line, .rsvp__label, .rsvp__small, .countdown__lbl,
.footer, .player__times, .rsvp__error, .player__note { font-weight: 600; }

/* Times, dates, numbers, buttons */
.hero__date, .hero__day span:first-child, .hero__year, .event__time, .event__place,
.timeline__time, .countdown__num, .pass__count, .pass__unit, .rsvp__number,
.btn, .rsvp__input { font-weight: 700; }

/* Script lettering only comes in one weight, so thicken it with an outline
   drawn behind the letters (keeps the loops open). */
.event__title, .timeline__name, .intro__name,
.rsvp__thanks, .countdown__done {
  -webkit-text-stroke: .024em currentColor;
  paint-order: stroke fill;
}


/* Paused when off screen (saves work while scrolling) */
.butterfly.is-paused, .butterfly.is-paused img { animation-play-state: paused !important; }


/* Give animating pieces their own GPU layer so scrolling stays smooth */

.pass-frame { position: relative; max-width: 34rem; margin: 0 auto; }

/* Recepción: photo on the right, text on the left (mirror of Ceremonia) */
@media (min-width: 820px) {
  .event--alt { grid-template-columns: 1fr 1.25fr; }
  .event--alt .photo { order: 2; }
  .event--alt .landscape { rotate: 1.5deg; }
  .event--alt [data-anim="wipe-side"] { transform: translateX(46px); }
  .event--alt [data-anim="wipe-side"].is-visible { transform: none; }
}

/* Names: an elegant but easy-to-read italic serif instead of the script */
.hero__name, .pass__guest {
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  -webkit-text-stroke: 0;
  letter-spacing: .01em;
  line-height: 1.15;
}
.hero__name { font-size: clamp(2.3rem, 6.4vw, 4.2rem); margin-top: 1.1rem; }
.pass__guest { font-size: clamp(2rem, 7vw, 2.9rem); margin: .2rem 0; }

/* While the loading screen is up, hold every opening animation at its start */
.is-loading .intro, .is-loading .intro *, .is-loading .butterfly { animation-play-state: paused !important; }

/* =========================================================
   Background embellishments for the sections below the banner
   ========================================================= */
.event, .programa, .pass-wrap, .closing { position: relative; }
.page { overflow-x: hidden; }   /* older iPhones (before iOS 16) */
@supports (overflow-x: clip) {
  .page { overflow-x: clip; }
  .event, .programa, .pass-wrap, .closing { overflow-x: clip; }
}
.event > :not(.deco):not(.butterfly), .programa > :not(.deco):not(.butterfly), .pass-wrap > :not(.deco):not(.butterfly), .closing > :not(.deco):not(.butterfly) { position: relative; z-index: 1; }
.deco { position: absolute; z-index: 0; }

/* Twinkling gold stars */
.twinkle {
  pointer-events: none;
  width: var(--sz); height: var(--sz);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFF6D2'/%3E%3Cstop offset='.5' stop-color='%23F0C964'/%3E%3Cstop offset='1' stop-color='%23B9852A'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M0-10Q1.2-1.2 10 0Q1.2 1.2 0 10Q-1.2 1.2-10 0Q-1.2-1.2 0-10Z' fill='url(%23g)'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(var(--rot, 0deg));
  opacity: .2;
  animation: twinkle var(--dur, 3.2s) var(--delay, 0s) ease-in-out infinite;
}
.twinkle--blue { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='.5' stop-color='%23A9D8F1'/%3E%3Cstop offset='1' stop-color='%234E9ACB'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M0-10Q1.2-1.2 10 0Q1.2 1.2 0 10Q-1.2 1.2-10 0Q-1.2-1.2 0-10Z' fill='url(%23g)'/%3E%3C/svg%3E"); }
/* opacity only: the cheapest thing a browser can animate */
/* twinkle: fade + gentle pulse (both handled by the graphics chip) */
@keyframes twinkle {
  0%, 100% { opacity: .12; transform: rotate(var(--rot, 0deg)) scale(.45); }
  50%      { opacity: 1;   transform: rotate(var(--rot, 0deg)) scale(1); }
}
.twinkle--burst   { background-image: url("../assets/star-burst.png"); }
.twinkle--glint   { background-image: url("../assets/star-glint.png"); }
.twinkle--five    { background-image: url("../assets/star-five.png"); }
.twinkle--cluster { background-image: url("../assets/star-cluster.png"); }
.twinkle--dot     { background-image: url("../assets/star-dot.png"); }
.twinkle--glint, .twinkle--burst { animation-timing-function: cubic-bezier(.5, 0, .5, 1); }

/* still star field (pre-drawn tile, painted once) */
.starfield {
  inset: 0; pointer-events: none;
  background: url("../assets/starfield.png") 0 0 / 420px 420px repeat;
  opacity: .9;
}

/* butterflies wandering through the sections */
.butterfly.deco { width: var(--w, 54px); animation: appear 1.2s .2s forwards, var(--fly, flyA) var(--fdur, 18s) var(--fdelay, 0s) ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) { .twinkle { animation: none; opacity: .7; } }

.pass__deadline strong { font-weight: 700; font-style: normal; color: var(--gold-deep); white-space: nowrap; }
/* Stop the page behind the loading/opening screens from being dragged around on phones */
.loader, .intro { touch-action: none; overscroll-behavior: contain; }

/* =========================================================
   GPU curtain wipes (photos and script headings)
   ========================================================= */
.wipe { --wp: 72px; overflow: hidden; margin: calc(var(--wp) * -1); }
.wipe--write { --wp: 22px; }
.wipe__win { overflow: hidden; }
.wipe__inner { padding: var(--wp); }
.wipe__win, .wipe__inner {
  transition: transform calc(1.3s * var(--ts)) cubic-bezier(.65, 0, .25, 1);
}
/* photo: uncovered from the bottom up */
.wipe--wipe-up .wipe__win { transform: translate3d(0, 100%, 0); }
.wipe--wipe-up .wipe__inner { transform: translate3d(0, -100%, 0); }
/* square photo and headings: uncovered left to right */
.wipe--wipe-side .wipe__win, .wipe--write .wipe__win { transform: translate3d(-100%, 0, 0); }
.wipe--wipe-side .wipe__inner, .wipe--write .wipe__inner { transform: translate3d(100%, 0, 0); }
.wipe--write .wipe__win, .wipe--write .wipe__inner { transition-duration: calc(1.5s * var(--ts)); }
@media (min-width: 820px) {   /* Recepción photo sits on the right: uncover right to left */
  .event--alt .wipe--wipe-side .wipe__win { transform: translate3d(100%, 0, 0); }
  .event--alt .wipe--wipe-side .wipe__inner { transform: translate3d(-100%, 0, 0); }
}
.wipe.is-visible .wipe__win, .wipe.is-visible .wipe__inner { transform: none; }
.photo .wipe { width: calc(100% + var(--wp) * 2); }

/* When something has scrolled fully off screen it resets instantly (invisibly),
   so it always replays from the very start when it comes back. */
.is-resetting, .is-resetting * { transition: none !important; }

.media img { will-change: transform; }

/* =========================================================
   Floating stars (drawn once, moved by the graphics chip)
   ========================================================= */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 55; overflow: hidden; }
.sky__star {
  position: absolute; top: 0;
  width: var(--sz); height: var(--sz);
  animation: skyDrift var(--dur) var(--delay) linear infinite;
  will-change: transform;
}
.sky__star i {
  display: block; width: 100%; height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFF8DE'/%3E%3Cstop offset='.45' stop-color='%23F2CD6C'/%3E%3Cstop offset='1' stop-color='%23B9852A'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M0-10Q1.3-1.3 10 0Q1.3 1.3 0 10Q-1.3 1.3-10 0Q-1.3-1.3 0-10Z' fill='url(%23g)'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: skyTwinkle var(--tw) ease-in-out infinite alternate;
}
.sky__star--blue i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='.45' stop-color='%23A9D8F1'/%3E%3Cstop offset='1' stop-color='%234E9ACB'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M0-10Q1.3-1.3 10 0Q1.3 1.3 0 10Q-1.3 1.3-10 0Q-1.3-1.3 0-10Z' fill='url(%23g)'/%3E%3C/svg%3E"); }
@keyframes skyDrift {
  from { transform: translate3d(0, 105vh, 0) rotate(0deg); }
  50%  { transform: translate3d(var(--sway), 50vh, 0) rotate(90deg); }
  to   { transform: translate3d(0, -10vh, 0) rotate(180deg); }
}
@keyframes skyTwinkle { from { opacity: .25; } to { opacity: .95; } }
.is-loading .sky { display: none; }

.butterfly--g { left: 22%; top: 72%; width: 44px; }
.butterfly--h { right: 24%; top: 18%; width: 38px; }
.hero.is-revealed .butterfly--g { animation: appear 1.5s .6s forwards, flyC 21s .6s ease-in-out infinite; }
.hero.is-revealed .butterfly--h { animation: appear 1.5s 1s forwards, flyB 17s 1s ease-in-out infinite; }
@media (max-width: 560px) { .butterfly--g { left: 6%; top: 82%; } .butterfly--h { right: 8%; top: 28%; } }

/* paused (and not drawn) while their section is far off screen */
.is-idle > .deco { animation-play-state: paused !important; visibility: hidden; }
.is-idle > .deco img { animation-play-state: paused !important; }

/* =========================================================
   Video (bottom of the page)
   ========================================================= */
.video-sec { position: relative; padding: clamp(1rem, 4vw, 2.5rem) 1.25rem clamp(3rem, 7vw, 5rem); display: flex; flex-direction: column; align-items: center; }
.photo--video { width: min(100%, 720px); margin-top: 1rem; }
.video-frame {
  margin: 0; padding: 10px; border-radius: 22px;
  background: var(--gold-foil);
  box-shadow: 0 30px 60px -30px rgba(35,65,92,.55);
  position: relative;
}
.video-frame::before { content: ""; position: absolute; inset: 5px; border-radius: 18px; border: 1px solid rgba(255,255,255,.65); pointer-events: none; z-index: 2; }
.video-frame__inner { position: relative; border-radius: 14px; overflow: hidden; background: #0d1a26; min-height: 180px; }
.video-frame video { display: block; width: 100%; height: auto; max-height: 80vh; background: #0d1a26; }
.video-frame__inner.media { background: #0d1a26; }
.video-frame__inner.is-missing { aspect-ratio: 16 / 9; background: linear-gradient(160deg, var(--sky-200), var(--sky-100) 55%, #FBF4E0); }
.video-frame__inner.is-missing video, .video-frame__inner.is-missing .video-play { display: none; }

/* big gold play button over the video */
.video-play {
  position: absolute; inset: 0; margin: auto; z-index: 3;
  width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--metal, linear-gradient(180deg, #F2D27A 0%, #DDA83F 42%, #B07A1E 58%, #E9BE5C 100%));
  background: linear-gradient(180deg, #F2D27A 0%, #DDA83F 42%, #B07A1E 58%, #CC9632 82%, #E9BE5C 100%);
  box-shadow: 0 0 0 6px rgba(255,255,255,.55), 0 14px 30px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,250,220,.8);
  display: grid; place-items: center;
  transition: transform .25s var(--ease-out), opacity .3s;
  animation: glow 2.4s ease-in-out infinite;
}
.video-play svg { width: 34px; height: 34px; fill: #fff; margin-left: 5px; filter: drop-shadow(0 1px 2px rgba(90,58,10,.6)); }
.video-play:hover { transform: scale(1.06); }
.video-frame.is-playing .video-play { opacity: 0; pointer-events: none; }

/* Tiara always sits on its own line, centered above "Mis XV" (some phones put it beside) */
.hero__tiara { display: block; margin: 0 auto; }
.hero__title { display: inline-grid; }
/* The banner photo extends above the top so the slow-scroll (parallax) never shows a gap */
.hero__media { top: -35vh; }

/* Crown always sits on its own line, centered above "Mis XV" */
.hero__tiara { display: block; margin: 0 auto .15rem; }
.hero__title.gold-text { display: grid; justify-content: center; }

/* Parents' line: larger and darker so it's easy to read */
.hero__lead { font-size: clamp(1.3rem, 4.2vw, 1.75rem); line-height: 1.45; max-width: 32ch; color: var(--ink); font-weight: 600; }
.nw { white-space: nowrap; }