/* updates.css: loads after page.css */
/* cover: names and hashtag in the clear sky, highlighted; date card and venue on the floor */
.cover__content { justify-content: space-between; padding: calc(var(--safe-top) + 2.5vh) 12% calc(var(--safe-bottom) + 3vh); }
.cover__top { position: relative; isolation: isolate; }
.cover__top::before { content: ''; position: absolute; left: -8%; right: -8%; top: 44px; bottom: -8px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, rgba(255,244,222,.85), rgba(255,244,222,0) 72%); }
.cover__names { font-size: clamp(2.3rem, 10.5vw, 3rem); color: #6a0f2c; margin: .15rem 0 0;
  text-shadow: 0 1px 0 #fff3d6, 0 0 14px rgba(255,244,222,1); }
.cover__names::after { content: ''; display: block; width: 120px; height: 1px; margin: .25rem auto 0; background: linear-gradient(90deg, transparent, #c8962a, transparent); }
.cover__hashtag { font-size: .86rem; font-weight: 600; color: #7a1236; margin: .3rem 0 0; letter-spacing: .03em; text-shadow: 0 0 8px rgba(255,244,222,1); }
.cover__scratch { width: min(100%, 250px); }
.cover__venue { background: rgba(251,239,217,.94); border: 1px solid #c8962a; border-radius: 999px; padding: .3em 1.1em; font-size: .8rem; font-weight: 600; color: #5a0f23; text-shadow: none; margin-top: .6rem; }

/* function pages: one bottom row: small Back on the left, Previous and Next beside it */
.fpage .fpage__nav { grid-template-columns: auto 1fr 1fr; grid-template-areas: "back prev next"; gap: 8px; padding: 14px 12px calc(12px + var(--safe-bottom)); }
.fpage .fpage__nav .btn { min-height: 38px; font-size: .62rem; padding: .5em .9em; }
.fpage .fpage__nav .nav-back { padding: .5em .85em; letter-spacing: .1em; }

/* closing: credit at the bottom right */
.closing { position: relative; padding-bottom: calc(4.2rem + var(--safe-bottom)); }
.closing__line2 { margin-bottom: .6rem; }
.closing__credit { position: absolute; right: 14px; bottom: calc(10px + var(--safe-bottom)); font-size: .78rem; font-style: italic; letter-spacing: .04em; color: var(--gold-light); opacity: .9; }

/* ================= v4: groom size, cover intro animation, function-page text animation ================= */
/* groom a little bigger (change 1.1 if you want more or less) */
.cd__fig--groom { scale: 1.1; transform-origin: 50% 100%; }

/* ---- cover: a blank paper unrolls first, then everything is written onto it ---- */
.cover__top::before {
  left: -6%; right: -6%; top: -8px; bottom: -22px; border-radius: 16px; z-index: -1;
  background: #fbefd9 var(--paper) center / cover;
  border: 1.5px solid #c8962a;
  box-shadow: 0 10px 26px rgba(60, 20, 10, .4), inset 0 0 0 4px rgba(200, 150, 42, .22);
  transform-origin: 50% 0;
  animation: cvPaper 1.1s cubic-bezier(.2, .7, .2, 1) .2s both;
}
.cover__monogram { animation: cvPop .9s cubic-bezier(.2, .8, .3, 1.2) 1.2s both; }
.cover__blessing { animation: cvBless 1.4s ease 1.7s both; }
.cover__names { animation: cvWrite 2.2s cubic-bezier(.5, 0, .2, 1) 2.3s both; }
.cover__hashtag { animation: cvUp .9s ease 4.3s both; }
.cover__scratch { animation: cvRise .9s cubic-bezier(.2, .8, .3, 1) 4.6s both; }
.cover__venue { animation: cvUp .9s ease 5s both; }
@keyframes cvPaper { from { transform: scaleY(.02); opacity: 0; } 30% { opacity: 1; } to { transform: scaleY(1); opacity: 1; } }
@keyframes cvPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes cvBless { from { opacity: 0; letter-spacing: .8em; } to { opacity: 1; letter-spacing: .24em; } }
@keyframes cvWrite { from { opacity: .2; clip-path: inset(-20% 100% -40% -5%); } to { opacity: 1; clip-path: inset(-20% -5% -40% -5%); } }
@keyframes cvUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cvRise { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---- function pages: label spreads, heading comes in word by word, a gold line draws, then date and time ---- */
.fpage .fpage__scene { animation: fpKen 20s ease-in-out infinite alternate; }
@keyframes fpKen { from { scale: 1; } to { scale: 1.07; } }
.fpage.is-in .fpage__label { animation: fpLabel 1.3s cubic-bezier(.2, .7, .2, 1) .1s both; }
@keyframes fpLabel { from { opacity: 0; letter-spacing: .8em; } to { opacity: .9; letter-spacing: .34em; } }
.fpage__heading .w { display: inline-block; opacity: 0; transform: translateY(18px); filter: blur(6px); }
.fpage.is-in .fpage__heading .w { animation: fpWord .95s cubic-bezier(.2, .7, .2, 1) calc(.55s + var(--i) * .13s) both; }
@keyframes fpWord { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
.fpage__rule { width: 0; height: 1px; margin: .5rem auto .7rem; background: linear-gradient(90deg, transparent, var(--zone-color), transparent); }
.fpage--left .fpage__rule { margin-left: 0; background: linear-gradient(90deg, var(--zone-color), transparent); }
.fpage.is-in .fpage__rule { width: 120px; transition: opacity .8s ease, width 1.1s ease 1.3s; }
.fpage.is-in .fpage__text > .fpage__date { transition-delay: 1.7s; }
.fpage.is-in .fpage__text > .fpage__time { transition-delay: 1.95s; }

/* ================= music button ================= */
.music-btn { position: fixed; top: calc(10px + var(--safe-top, 0px)); right: max(10px, calc((100vw - 480px) / 2 + 10px)); z-index: 120;
  width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid #c8962a; background: rgba(90,15,35,.84); color: #f3d58a;
  display: grid; place-items: center; padding: 0; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.4); -webkit-tap-highlight-color: transparent; }
.music-btn svg { width: 22px; height: 22px; }
.music-btn:focus-visible { outline: 3px solid var(--saffron, #f4a623); outline-offset: 3px; }
.music-btn.is-on::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(230,193,90,.65); animation: musicPulse 2.2s ease-out infinite; pointer-events: none; }
@keyframes musicPulse { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }

/* ================= gate: skip link, cover waits while the gate fades ================= */
.gate__skip-unused { position: absolute; left: 50%; bottom: calc(1.4% + var(--safe-bottom, 0px)); transform: translateX(-50%); z-index: 5; background: none; border: 0;
  color: #f3d58a; font: inherit; font-size: .8rem; letter-spacing: .14em; text-decoration: underline; cursor: pointer; opacity: .85; padding: 8px 14px; }
.gate.is-open .gate__skip { display: none; }
.gate-wait .cover *, .gate-wait .cover__top::before { animation-play-state: paused !important; }

/* ================= schedule, travel, contact, sweet request ================= */
.sched { background: var(--paper) #fbefd9; background: #fbefd9 var(--paper) center / cover; border: 2px solid #c8962a; border-radius: 14px; padding: .9rem .9rem 1rem; margin: 0 0 1.2rem; box-shadow: 0 6px 18px rgba(90,15,35,.15); text-align: center; }
.sched__row { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: .65rem .3rem; border-bottom: 1px solid rgba(200,150,42,.45); text-decoration: none; color: #5a0f23; text-align: left; }
.sched__row:last-of-type { border-bottom: 0; }
.sched__name { font-family: var(--font-label); font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: #7a1236; }
.sched__when { font-size: 1rem; text-align: right; }
.sched__cal { margin-top: .6rem; }

.travel, .contact { padding: 2.2rem 5% 0; background: var(--cream); }
.info-card { background: #fff7e8; background: #fff7e8 var(--paper) center / cover; border: 2px solid #c8962a; border-radius: 14px; padding: 1.4rem 1.1rem; text-align: center; box-shadow: 0 6px 18px rgba(90,15,35,.15), inset 0 0 0 4px rgba(200,150,42,.15); }
.info-row { padding: .45rem 0; color: #4a1a24; font-size: 1.05rem; }
.info-row b { display: block; font-family: var(--font-label); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #a87a1b; font-weight: 600; }
.info-row a { color: #7a1236; font-weight: 700; text-decoration: none; }

.sweet { padding: 2.4rem 5%; text-align: center; background: var(--cream); }
.sweet__btn { font-family: var(--font-label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-size: .92rem; color: #3a0a16; cursor: pointer;
  padding: 1rem 2.4rem; border: 2px solid #8a6414; border-radius: 60px; background: linear-gradient(180deg, #f3d58a, #c8962a 55%, #e6c15a);
  box-shadow: 0 8px 22px rgba(90,15,35,.35), inset 0 1px 0 rgba(255,255,255,.5); animation: sweetGlow 2.6s ease-in-out infinite; }
@keyframes sweetGlow { 0%,100% { box-shadow: 0 8px 22px rgba(90,15,35,.35), 0 0 0 0 rgba(200,150,42,.5); } 50% { box-shadow: 0 8px 22px rgba(90,15,35,.35), 0 0 0 14px rgba(200,150,42,0); } }

.vmodal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 14px; background: rgba(25,4,12,.94); }
.vmodal.is-open { display: flex; }
.vmodal video { max-width: 100%; max-height: 78vh; border-radius: 12px; border: 2px solid #c8962a; background: #000; }
.vmodal__msg { color: #f3d58a; font-size: 1.15rem; text-align: center; }


/* ================= v5 ================= */
/* names font: a cleaner capital A */
:root { --font-names: 'Parisienne', 'Great Vibes', cursive; }

/* cover: logo, blessing, names and hashtag sit directly on the scene (no box), lifted by a soft glow only */
.cover__top::before { left: -22%; right: -22%; top: -10px; bottom: -34px; border: 0; border-radius: 0; box-shadow: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,244,222,.62), rgba(255,244,222,.28) 45%, rgba(255,244,222,0) 72%);
  transform: none; animation: cvFade 1.4s ease .2s both; }
@keyframes cvFade { from { opacity: 0; } to { opacity: 1; } }
.cover__monogram { filter: url(#keyw) drop-shadow(0 0 5px rgba(255,244,222,1)) drop-shadow(0 0 12px rgba(255,244,222,.9)) !important; }
.cover__blessing { color: #4a0c1d; font-weight: 600; text-shadow: 0 0 4px #fff3d6, 0 0 10px #fff3d6, 0 0 20px rgba(255,244,222,.95); }
.cover__names { color: #5a0f23; text-shadow: 0 0 3px #fff3d6, 0 0 7px #fff3d6, 0 0 14px rgba(255,244,222,1), 0 0 28px rgba(255,244,222,.9); }
.cover__hashtag { color: #4a0c1d; text-shadow: 0 0 4px #fff3d6, 0 0 10px #fff3d6, 0 0 20px rgba(255,244,222,.95); }

/* schedule card: names and times read clearly on a calm cream background */
.sched { background: linear-gradient(rgba(251,239,217,.94), rgba(251,239,217,.94)), var(--paper) center / cover; }
.sched__name { color: #5a0f23; font-weight: 700; font-size: .82rem; }
.sched__when { color: #3a0a16; font-weight: 600; }

/* function pages: text sizes come from each page's settings; stronger glow so letters never melt into the picture */
.fpage .fpage__heading { font-size: var(--h-size, clamp(1.45rem, 6.4vw, 1.95rem)); margin: 0 0 .25rem;
  text-shadow: 0 0 3px var(--glow, rgba(255,244,222,.9)), 0 0 9px var(--glow, rgba(255,244,222,.9)), 0 0 20px var(--glow, rgba(255,244,222,.9)); }
.fpage .fpage__label { margin-bottom: .2rem; text-shadow: 0 0 6px var(--glow, rgba(255,244,222,.9)), 0 0 14px var(--glow, rgba(255,244,222,.9)); }
.fpage .fpage__date { font-size: var(--d-size, 1.02rem); font-weight: 700; text-shadow: 0 0 4px var(--glow, rgba(255,244,222,.9)), 0 0 12px var(--glow, rgba(255,244,222,.9)), 0 0 22px var(--glow, rgba(255,244,222,.9)); }
.fpage .fpage__time { font-size: calc(var(--d-size, 1.02rem) * .82); font-weight: 700; margin-top: .05rem; text-shadow: 0 0 4px var(--glow, rgba(255,244,222,.9)), 0 0 12px var(--glow, rgba(255,244,222,.9)), 0 0 22px var(--glow, rgba(255,244,222,.9)); }
.fpage .fpage__rule { margin: .35rem auto .45rem; }
.fpage--left .fpage__rule { margin-left: 0; }
.fpage__veil { position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none;
  top: calc(var(--zone-top) - 6%); height: calc(var(--zone-bottom) - var(--zone-top) + 12%);
  background: linear-gradient(180deg, transparent 0%, var(--veil-c) 28%, var(--veil-c) 72%, transparent 100%); }