*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#1f1a1e;color:#77484f;font-family:"Cormorant Garamond",serif}button,a{font:inherit}.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}main{width:min(100%,430px);margin:auto;background:#f8e5e0;overflow:hidden}.screen{position:relative;min-height:100svh;overflow:hidden}.opening{position:fixed;inset:0;z-index:999;background:#5e2d3a;overflow:hidden;transition:.8s}.opening.hide{opacity:0;visibility:hidden}.opening-ui{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;text-align:center;color:#f1d0a3;padding:10vh 24px 7vh;background:linear-gradient(#4f1f2d22,transparent 55%,#35121d55)}.crest{width:min(60vw,245px);height:275px;object-fit:contain}.opening-ui p{font:10px Montserrat;letter-spacing:.24em;margin:25px 0 2px}.opening-ui em{font:40px "Great Vibes";font-style:normal}.opening-ui .heart{margin:10px 0 auto}.opening-ui button{width:82%;max-width:360px;height:56px;background:#7f4050dc;color:#fff4e8;border:1px solid #d4a15e;box-shadow:0 0 0 3px #d4a15e33;letter-spacing:.08em}nav{position:absolute;z-index:30;left:50%;transform:translateX(-50%);width:min(100%,430px);height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 15px}nav button{border:0;background:none;color:#aa6e41;font-size:20px}.nav-crown{width:30px;height:22px;object-fit:contain}.menu{position:fixed;z-index:80;top:53px;left:16px;right:16px;max-width:398px;margin:auto;background:#fff9f2f3;border:1px solid #d1a05c55;padding:12px;backdrop-filter:blur(16px);opacity:0;visibility:hidden;transition:.25s}.menu.open{opacity:1;visibility:visible}.menu a{display:block;padding:9px;color:#77484f;text-decoration:none}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(#fff8f1b5 0,#fff8f14a 28%,transparent 62%,#efc5c240 100%)}.hero-copy{position:absolute;z-index:4;top:52px;left:16px;right:16px;text-align:center}.section-crown{width:34px;height:25px;object-fit:contain}.eyebrow{font:9px Montserrat;letter-spacing:.19em}.hero-copy p{margin:3px}.hero-copy h1{font-size:37px;letter-spacing:.08em;margin:1px 0}.hero-copy>em{display:block;font:64px "Great Vibes";font-style:normal;color:#b87942;line-height:.8}.hero-copy h2{font-size:20px;letter-spacing:.06em;margin:8px}.date-row{display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;letter-spacing:.11em}.date-row span{width:42px;border-top:1px solid #c8995d}.heart{color:#c77f89}.countdown{position:absolute;z-index:5;left:7%;right:7%;bottom:34px;text-align:center;background:#fff9f1f2;border:1px solid #c99b6675;padding:15px 10px}.countdown p{font:8px Montserrat;letter-spacing:.16em;margin:0}.countdown>em{font:28px "Great Vibes";font-style:normal;color:#b87942}.counter{display:grid;grid-template-columns:repeat(4,1fr);margin-top:8px}.counter b+b{border-left:1px solid #c99b6655}.counter i{display:block;font-size:25px;font-style:normal}.counter small{font:6px Montserrat}.down{position:absolute;z-index:8;left:50%;bottom:5px;transform:translateX(-50%);font-size:27px;color:#b17a43;text-decoration:none}.story-overlay{position:absolute;inset:0;background:#fff4efd0}.story-bg{opacity:.45}.story header{position:relative;z-index:3;text-align:center;padding-top:55px}.story header h2{font-size:24px;margin:0}.story header p{margin:4px}.timeline{position:relative;z-index:3;margin:34px 34px 110px}.timeline article,.program-list article{display:grid;grid-template-columns:74px 1fr;gap:18px;align-items:center;min-height:145px}.medallion,.program-list i{width:70px;height:70px;border-radius:50%;border:1px solid #d3a45f;background:#fff9f2e8;display:grid;place-items:center;color:#b87942;font-style:normal;font-size:28px;overflow:hidden}.medallion img{width:54px;height:54px;object-fit:contain}.medallion.one{font-size:38px}.timeline h3,.program-list h3{font-size:17px;margin:4px 0}.timeline p,.program-list p{margin:0}.story-end{position:absolute;z-index:3;bottom:44px;left:0;right:0;text-align:center;font:31px "Great Vibes";font-style:normal;color:#b87942}.fairytale-overlay{position:absolute;inset:0;background:linear-gradient(#fff7f0db 0,#fff7f08f 32%,transparent 65%,#fff4edaa 100%)}.fairy-copy{position:relative;z-index:3;text-align:center;padding-top:58px}.fairy-copy p{line-height:1.55;letter-spacing:.05em}.fairy-copy em{display:block;font:58px "Great Vibes";font-style:normal;color:#b87942}.memory{position:absolute;z-index:4;bottom:0;left:0;right:0;text-align:center;background:#fff8f1df;padding:25px;letter-spacing:.07em}.program-overlay{position:absolute;inset:0;background:#fff6efcb}.program header{position:relative;z-index:3;text-align:center;padding-top:52px}.program header h2{font-size:25px;margin:5px}.divider{width:100px}.program-list{position:relative;z-index:3;margin:22px 34px}.program-list article{min-height:125px}.venue-overlay{position:absolute;inset:0;background:linear-gradient(#fff6efdf 0,#fff6ef8b 30%,transparent 60%)}.venue-copy{position:relative;z-index:3;text-align:center;padding-top:55px}.venue-copy h2{font-size:49px;letter-spacing:.08em;margin:0}.venue-copy h3{font-size:23px;margin:0}.venue-copy span{display:block;margin-top:8px}.venue-copy a{display:inline-flex;margin-top:22px;padding:13px 28px;background:#c97c84;color:#fff;text-decoration:none;border:1px solid #d3a05c}.dress,.rsvp{background:linear-gradient(#fff7f1,#f6d9d5);text-align:center;padding:60px 24px 40px}.dress header h2,.rsvp header h2{font-size:27px;margin:8px}.swatches{display:grid;grid-template-columns:repeat(3,72px);justify-content:center;gap:22px 15px;margin:30px 0}.swatches div{font-size:8px}.swatches i{display:block;width:54px;height:54px;border-radius:50%;margin:0 auto 6px;border:3px solid white;box-shadow:0 0 0 1px #b98b6744}.ivory{background:#eee7d9}.blush{background:#efb0b5}.rose{background:#c98690}.champagne{background:#d3aa6c}.burgundy{background:#7b3045}.shoe{width:69%;max-width:285px;display:block;margin:28px auto 0}.envelope{width:82%;max-width:330px;display:block;margin:18px auto 26px}.rsvp>p{font-size:14px;letter-spacing:.06em}.actions button{display:block;width:100%;height:50px;margin:9px 0;border:1px solid #ce7782;background:#ce7782;color:#fff;letter-spacing:.05em}.actions .outline{background:transparent;color:#77484f;border-color:#bd8a55}#reply{display:block;min-height:30px;margin-top:12px;font:25px "Great Vibes";font-style:normal;color:#b87942}.closing{position:relative;height:60svh;min-height:460px;overflow:hidden}.closing-overlay{position:absolute;inset:0;background:linear-gradient(#fff5ef70,#fff5ef35)}.closing-copy{position:relative;z-index:3;text-align:center;padding:42px 20px}.closing-copy h2{font-size:23px;letter-spacing:.05em;margin:0}.closing-copy h3{font-size:26px;letter-spacing:.1em;margin:10px 0 3px}.closing-copy b{letter-spacing:.12em}.closing-copy small{display:block;margin-top:45px;font:6px Montserrat;letter-spacing:.1em;line-height:1.7}.reveal{opacity:0;transform:translateY(15px);transition:.8s}.reveal.show{opacity:1;transform:none}@media(max-height:720px){.hero-copy{top:42px}.hero-copy>em{font-size:54px}.countdown{bottom:22px}.timeline article{min-height:125px}.opening-ui{padding-top:6vh}.crest{height:210px}}@media(min-width:700px){main{box-shadow:0 0 80px #0008}.opening{width:430px;left:50%;transform:translateX(-50%)}}
/* V10 polish */
.opening-ui{color:#6d3340;text-shadow:0 1px 12px rgba(255,242,225,.9)}
.opening-ui p{font-weight:600;color:#6b3340;background:rgba(255,240,224,.24);padding:4px 10px;border-radius:20px}
.opening-ui em{color:#a75e47;text-shadow:0 2px 12px rgba(255,235,210,.95)}
.opening-ui .heart{color:#a75e47}
.crest{width:min(51vw,205px);height:235px;filter:drop-shadow(0 8px 18px rgba(83,35,42,.18));animation:crestFloat 4.8s ease-in-out infinite}
.hero-copy .section-crown{width:28px;height:20px;opacity:.92;filter:sepia(1) saturate(.75) brightness(1.05)}
.sparkles{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.sparkles i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff4ce;box-shadow:0 0 10px #ffe8ad;opacity:0;animation:twinkle 4.5s infinite}
.sparkles i:nth-child(1){left:14%;top:19%;animation-delay:.3s}.sparkles i:nth-child(2){left:76%;top:24%;animation-delay:1.1s}.sparkles i:nth-child(3){left:26%;top:49%;animation-delay:2s}.sparkles i:nth-child(4){left:83%;top:59%;animation-delay:2.8s}.sparkles i:nth-child(5){left:52%;top:34%;animation-delay:3.4s}.sparkles i:nth-child(6){left:38%;top:72%;animation-delay:1.8s}
.hero-bg,.fairytale .bg,.closing .bg{animation:cinematicPush 18s ease-in-out infinite alternate;transform-origin:center center}
.timeline article.show .medallion,.program-list article.show i{animation:medallionIn .75s cubic-bezier(.2,.8,.2,1) both}
.timeline article:nth-child(2) .medallion img{animation:floatSoft 4s ease-in-out infinite}
.shoe.show{animation:shoeFloat 5s ease-in-out infinite}
.envelope.show{animation:envelopeFloat 4.5s ease-in-out infinite}
.opening.opening-out .bg{animation:curtainZoom .9s ease forwards}
.opening.opening-out .opening-ui{animation:openingFade .65s ease forwards}
@keyframes crestFloat{50%{transform:translateY(-5px) scale(1.015)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}45%{opacity:.9;transform:scale(1.5)}60%{opacity:.25}}
@keyframes cinematicPush{from{transform:scale(1.005)}to{transform:scale(1.045)}}
@keyframes medallionIn{0%{transform:scale(.78);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes floatSoft{50%{transform:translateY(-4px)}}
@keyframes shoeFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
@keyframes envelopeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes curtainZoom{to{transform:scale(1.06);filter:brightness(1.12)}}
@keyframes openingFade{to{opacity:0;transform:scale(.97)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* ===== V11 INTERACTIVE MOTION SYSTEM ===== */
:root{
  --ease-royal:cubic-bezier(.22,.8,.22,1);
  --ease-soft:cubic-bezier(.2,.65,.25,1);
  --gold-glow:rgba(226,183,104,.45);
}
html{scroll-behavior:smooth}
body.motion-ready main{opacity:1}

/* global ambient */
#magicFx{
  position:fixed; inset:0; z-index:1200; pointer-events:none; overflow:hidden;
}
.fx-spark{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle,#fff 0 25%,#f6dca9 35%,rgba(236,183,95,.2) 68%,transparent 72%);
  filter:drop-shadow(0 0 8px rgba(255,226,165,.9));
  animation:fxSpark .85s var(--ease-soft) forwards;
}
@keyframes fxSpark{
  from{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  25%{opacity:1}
  to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.25)}
}
.magic-wand{
  position:fixed; z-index:100; right:18px; bottom:18px;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(203,154,84,.7);
  background:rgba(255,248,240,.86); color:#b67b45;
  box-shadow:0 10px 30px rgba(83,39,48,.12), inset 0 0 0 2px rgba(255,255,255,.55);
  backdrop-filter:blur(10px); font-size:21px;
  transition:transform .25s var(--ease-soft), box-shadow .25s var(--ease-soft), opacity .25s;
}
.magic-wand:active{transform:scale(.92)}
.magic-wand.magic-on{box-shadow:0 0 0 7px rgba(230,184,101,.12),0 0 28px rgba(236,190,106,.4)}

/* Opening: curtain reveal */
[data-anim="opening"]{overflow:hidden}
[data-anim="opening"]::before,[data-anim="opening"]::after{
  content:""; position:absolute; z-index:12; inset:0 auto 0 0; width:50%;
  background:linear-gradient(90deg,rgba(69,25,39,.92),rgba(129,58,72,.82) 58%,rgba(83,31,46,.96));
  transform:translateX(-102%); pointer-events:none;
}
[data-anim="opening"]::after{
  left:auto; right:0; transform:translateX(102%) scaleX(-1);
}
[data-anim="opening"].curtain-ready::before,
[data-anim="opening"].curtain-ready::after{transform:translateX(0); transition:none}
[data-anim="opening"].opening-play::before{transform:translateX(-102%); transition:transform 1.35s var(--ease-royal)}
[data-anim="opening"].opening-play::after{transform:translateX(102%) scaleX(-1); transition:transform 1.35s var(--ease-royal)}
[data-anim="opening"].opening-play .crest,
[data-anim="opening"].opening-play .open-crest{animation:crestExit .85s var(--ease-soft) forwards}
@keyframes crestExit{to{opacity:0;transform:scale(.88) translateY(-12px)}}

/* hero entrance + parallax */
[data-anim="hero"] .hero-copy,
[data-anim="hero"] .heroText{will-change:transform,opacity}
[data-anim="hero"].hero-enter .hero-copy,
[data-anim="hero"].hero-enter .heroText{animation:heroCopy 1s .15s var(--ease-royal) both}
@keyframes heroCopy{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
[data-anim="hero"] .baby,
[data-anim="hero"] .hero-bg,
[data-anim="hero"] .art{will-change:transform}
[data-anim="hero"].hero-enter .baby{animation:babyRise 1.2s .22s var(--ease-royal) both}
@keyframes babyRise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
[data-anim="hero"].hero-enter .count-card,
[data-anim="hero"].hero-enter .countdown{animation:cardRise .85s .65s var(--ease-royal) both}
@keyframes cardRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
[data-anim="hero"] .section-crown,
[data-anim="hero"] .hero-copy>img:first-child{
  animation:crownFloat 3.8s ease-in-out infinite;
  filter:drop-shadow(0 0 8px rgba(230,183,92,.25));
}
@keyframes crownFloat{50%{transform:translateY(-3px) rotate(.6deg)}}

/* shimmer */
.gold-shimmer{position:relative; overflow:hidden}
.gold-shimmer::after{
  content:""; position:absolute; inset:-25%; width:25%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(-450%) rotate(12deg);
  animation:goldSweep 4.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes goldSweep{0%,72%{transform:translateX(-450%) rotate(12deg)}88%,100%{transform:translateX(520%) rotate(12deg)}}

/* story/program progressive connectors */
.timeline article,.program-list article,.programList article,.events article{transition:transform .7s var(--ease-royal),opacity .7s}
.timeline article.motion-in,.program-list article.motion-in,.programList article.motion-in,.events article.motion-in{opacity:1;transform:none}
.timeline article:not(.motion-in),.program-list article:not(.motion-in),.programList article:not(.motion-in),.events article:not(.motion-in){opacity:.15;transform:translateY(14px)}
.timeline article .medallion,.timeline article i,.program-list article i,.programList article i,.events article i{
  transition:transform .5s var(--ease-soft), box-shadow .5s, filter .5s;
}
.timeline article.motion-in .medallion,.timeline article.motion-in i,
.program-list article.motion-in i,.programList article.motion-in i,.events article.motion-in i{
  box-shadow:0 0 0 6px rgba(230,183,104,.08),0 8px 26px rgba(93,48,52,.08);
  animation:medallionPop .65s var(--ease-royal) both;
}
@keyframes medallionPop{0%{transform:scale(.82)}65%{transform:scale(1.06)}100%{transform:scale(1)}}
.timeline img[src*="carriage"],.carriage{animation:carriageFloat 3.2s ease-in-out infinite}
@keyframes carriageFloat{50%{transform:translateY(-4px)}}

/* fairytale cinematic zoom */
[data-anim="story"] .story-bg,
.fairytale .art,
[data-anim="closing"] .art,
[data-anim="closing"] .bg{
  transform:scale(1); transition:transform 10s linear;
}
[data-anim="story"].in-view .story-bg,
.fairytale.in-view .art,
[data-anim="closing"].in-view .art,
[data-anim="closing"].in-view .bg{transform:scale(1.045)}

/* venue chandelier glow */
[data-anim="venue"].in-view::before{
  content:""; position:absolute; z-index:2; left:18%; right:18%; top:2%; height:35%;
  background:radial-gradient(ellipse,rgba(255,219,157,.22),transparent 65%);
  animation:venueGlow 2.2s ease-in-out both; pointer-events:none;
}
@keyframes venueGlow{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1.1)}}

/* dress palette */
.interactive-swatches div{cursor:pointer; transition:transform .25s var(--ease-soft),opacity .25s}
.interactive-swatches div:active{transform:scale(.94)}
.interactive-swatches div.active{transform:translateY(-4px) scale(1.08)}
.interactive-swatches div.active i{box-shadow:0 0 0 4px rgba(255,255,255,.7),0 0 24px var(--swatch-glow,rgba(216,167,122,.35))}
[data-anim="dress"] .shoe{animation:shoeFloat 4.6s ease-in-out infinite; transform-origin:50% 70%}
@keyframes shoeFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1.2deg)}}

/* RSVP envelope */
[data-rsvp-envelope]{transition:transform .7s var(--ease-royal),filter .5s; cursor:pointer}
[data-rsvp-envelope].envelope-open{transform:translateY(-6px) scale(1.03) rotateX(8deg);filter:drop-shadow(0 14px 18px rgba(93,41,50,.12))}
[data-anim="rsvp"] .actions,
[data-anim="rsvp"] .rsvp-actions{transition:.6s var(--ease-royal)}
[data-anim="rsvp"].rsvp-locked .actions,
[data-anim="rsvp"].rsvp-locked .rsvp-actions{opacity:.12;transform:translateY(12px);pointer-events:none}
[data-anim="rsvp"].rsvp-open .actions,
[data-anim="rsvp"].rsvp-open .rsvp-actions{opacity:1;transform:none;pointer-events:auto}

/* success burst */
.rsvp-burst{animation:rsvpBurst .9s var(--ease-royal) forwards}
@keyframes rsvpBurst{0%{transform:scale(.7);opacity:0}40%{opacity:1}100%{transform:scale(1.12);opacity:0}}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
  .magic-wand{display:none}
}


/* ===== V12 OPENING FIX =====
   Curtains stay at the sides and never cover the crest/text/button.
   The opening UI is always above the curtain layers.
*/
[data-anim="opening"]{
  isolation:isolate;
  background:#5b2d3a;
}

[data-anim="opening"]::before,
[data-anim="opening"]::after{
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  bottom:0;
  width:24%;
  pointer-events:none;
  opacity:.94;
  transition:transform 1.25s var(--ease-royal), opacity .9s ease;
}

[data-anim="opening"]::before{
  left:0;
  right:auto;
  transform:none;
  background:
    linear-gradient(90deg,rgba(60,18,33,.92),rgba(126,55,72,.7) 66%,rgba(112,49,65,.12));
  border-radius:0 0 72% 0;
  box-shadow:18px 0 36px rgba(42,13,24,.16);
}

[data-anim="opening"]::after{
  right:0;
  left:auto;
  transform:none;
  background:
    linear-gradient(270deg,rgba(60,18,33,.92),rgba(126,55,72,.7) 66%,rgba(112,49,65,.12));
  border-radius:0 0 0 72%;
  box-shadow:-18px 0 36px rgba(42,13,24,.16);
}

/* Override V11 "closed curtain" state */
[data-anim="opening"].curtain-ready::before,
[data-anim="opening"].curtain-ready::after{
  transform:none !important;
}

[data-anim="opening"].opening-play::before{
  transform:translateX(-115%) !important;
  opacity:.5;
}

[data-anim="opening"].opening-play::after{
  transform:translateX(115%) !important;
  opacity:.5;
}

.opening-ui-v12,
[data-anim="opening"] .opening-ui,
[data-anim="opening"] .open-content{
  position:absolute;
  z-index:8 !important;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:
    max(7.5vh,58px)
    clamp(20px,5vw,30px)
    max(5.5vh,38px);
  color:#f5d9b6;
}

/* Crest: centered and sized like the approved composition */
[data-anim="opening"] .crest,
[data-anim="opening"] .open-crest{
  width:clamp(176px,50vw,228px) !important;
  height:auto !important;
  max-height:29vh;
  object-fit:contain;
  margin:0 auto clamp(14px,2.4vh,22px);
  filter:
    drop-shadow(0 7px 12px rgba(57,23,29,.18))
    drop-shadow(0 0 10px rgba(232,186,103,.16));
  mix-blend-mode:normal !important;
}

/* Readability in the bright center of the artwork */
[data-anim="opening"] .opening-ui p,
[data-anim="opening"] .open-content p{
  margin:0 0 3px !important;
  font-family:Montserrat,sans-serif;
  font-size:clamp(10px,2.7vw,12px);
  font-weight:500;
  letter-spacing:.22em;
  color:#7d3542 !important;
  text-shadow:0 1px 0 rgba(255,241,225,.5);
}

[data-anim="opening"] .opening-ui em,
[data-anim="opening"] .open-content em{
  margin:0 !important;
  font-family:"Great Vibes",cursive;
  font-size:clamp(36px,10vw,45px);
  line-height:1.04;
  color:#b7763e !important;
  text-shadow:0 2px 10px rgba(255,240,215,.4);
}

[data-anim="opening"] .opening-ui .heart,
[data-anim="opening"] .open-content .heart,
[data-anim="opening"] .opening-ui > span,
[data-anim="opening"] .open-content > span{
  margin:clamp(8px,1.5vh,14px) 0 auto !important;
  color:#a84f5d !important;
  opacity:.92;
}

/* CTA always visible and comfortably above browser chrome */
[data-anim="opening"] #openBtn,
[data-anim="opening"] [data-open-invitation]{
  position:relative;
  z-index:10;
  width:min(82%,360px) !important;
  min-height:58px;
  height:auto !important;
  margin:0 auto max(2vh,16px) !important;
  padding:15px 24px;
  border:1px solid rgba(226,179,97,.92) !important;
  background:linear-gradient(180deg,rgba(128,61,77,.97),rgba(104,44,60,.98)) !important;
  color:#fff8ee !important;
  font-size:clamp(15px,4vw,18px);
  letter-spacing:.08em;
  box-shadow:
    0 0 0 3px rgba(218,166,84,.16),
    0 12px 32px rgba(49,18,29,.18) !important;
  text-shadow:none !important;
}

/* Small-phone vertical fit */
@media (max-height:760px){
  .opening-ui-v12,
  [data-anim="opening"] .opening-ui,
  [data-anim="opening"] .open-content{
    padding-top:max(5vh,42px);
    padding-bottom:max(3vh,24px);
  }
  [data-anim="opening"] .crest,
  [data-anim="opening"] .open-crest{
    width:clamp(150px,43vw,190px) !important;
    max-height:24vh;
    margin-bottom:10px;
  }
  [data-anim="opening"] .opening-ui em,
  [data-anim="opening"] .open-content em{
    font-size:clamp(32px,8.8vw,39px);
  }
  [data-anim="opening"] #openBtn,
  [data-anim="opening"] [data-open-invitation]{
    min-height:54px;
    margin-bottom:10px !important;
  }
}

/* Very narrow phones */
@media (max-width:360px){
  [data-anim="opening"]::before,
  [data-anim="opening"]::after{
    width:21%;
  }
  [data-anim="opening"] .crest,
  [data-anim="opening"] .open-crest{
    width:158px !important;
  }
}

/* ===== V14 ROYAL CURTAIN OPENER ===== */
.royal-opening{position:fixed;inset:0;z-index:1000;overflow:hidden;isolation:isolate;background:#5a2b38;opacity:1;visibility:visible}
.royal-opening.opening-complete{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .55s ease .15s,visibility .55s ease .15s}
.opening-bg-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;transform:scale(1.025);filter:saturate(.95) brightness(.98);transition:transform 1.8s cubic-bezier(.2,.72,.2,1),filter 1.4s ease}
.royal-opening.is-opening .opening-bg-art{transform:scale(1.07);filter:saturate(1) brightness(1.08)}
.royal-curtain{position:absolute;top:0;bottom:0;width:52%;z-index:5;overflow:hidden;pointer-events:none;will-change:transform;transition:transform 1.6s cubic-bezier(.18,.78,.2,1)}
.royal-curtain-left{left:0;background:radial-gradient(circle at 78% 30%,rgba(255,191,204,.14),transparent 24%),linear-gradient(90deg,#3f1625 0%,#6d2b42 18%,#8e4057 45%,#66263c 72%,#451827 100%);box-shadow:24px 0 45px rgba(36,10,20,.3);border-radius:0 0 42% 0 / 0 0 18% 0}
.royal-curtain-right{right:0;background:radial-gradient(circle at 22% 30%,rgba(255,191,204,.14),transparent 24%),linear-gradient(270deg,#3f1625 0%,#6d2b42 18%,#8e4057 45%,#66263c 72%,#451827 100%);box-shadow:-24px 0 45px rgba(36,10,20,.3);border-radius:0 0 0 42% / 0 0 0 18%}
.royal-curtain::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 8%,rgba(0,0,0,.08) 8% 17%,rgba(255,255,255,.03) 17% 25%);mix-blend-mode:soft-light}
.royal-curtain::after{content:"";position:absolute;top:0;bottom:0;width:34px;background:linear-gradient(90deg,rgba(229,176,84,.2),rgba(244,207,127,.8),rgba(118,70,26,.15))}
.royal-curtain-left::after{right:0}.royal-curtain-right::after{left:0}
.curtain-fold{position:absolute;top:0;bottom:0;width:26%;border-radius:48%;background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(20,0,12,.16),rgba(255,255,255,.05));opacity:.75}
.royal-curtain-left .fold-1{left:5%}.royal-curtain-left .fold-2{left:34%}.royal-curtain-left .fold-3{left:64%}
.royal-curtain-right .fold-1{right:5%}.royal-curtain-right .fold-2{right:34%}.royal-curtain-right .fold-3{right:64%}
.royal-curtain-left{clip-path:polygon(0 0,78% 0,100% 22%,92% 50%,100% 78%,78% 100%,0 100%)}
.royal-curtain-right{clip-path:polygon(22% 0,100% 0,100% 100%,22% 100%,0 78%,8% 50%,0 22%)}
.royal-opening.is-opening .royal-curtain-left{transform:translateX(-112%) rotate(-1.2deg)}
.royal-opening.is-opening .royal-curtain-right{transform:translateX(112%) rotate(1.2deg)}
.opening-ui-v14{position:absolute;z-index:12;inset:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:max(7vh,52px) clamp(18px,5vw,28px) max(4.2vh,28px);color:#6d3441;pointer-events:none;transition:opacity .72s ease,transform .85s cubic-bezier(.2,.72,.2,1)}
.opening-ui-v14 .crest{width:clamp(168px,48vw,218px)!important;height:auto!important;max-height:27vh;object-fit:contain;margin:0 auto clamp(14px,2.2vh,20px);filter:drop-shadow(0 8px 18px rgba(89,36,42,.14)) drop-shadow(0 0 10px rgba(232,183,97,.12));mix-blend-mode:normal!important}
.opening-ui-v14 p{margin:0 0 2px!important;font-family:Montserrat,sans-serif;font-size:clamp(10px,2.7vw,12px);font-weight:600;letter-spacing:.22em;color:#783541!important;text-shadow:0 1px 1px rgba(255,241,229,.55)}
.opening-ui-v14 em{margin:0!important;font-family:"Great Vibes",cursive;font-style:normal;font-size:clamp(36px,10vw,46px);line-height:1;color:#b4763f!important;text-shadow:0 2px 9px rgba(255,239,211,.38)}
.opening-ui-v14 .heart{margin:clamp(8px,1.5vh,13px) 0 auto!important;color:#a64d5c!important}
.opening-ui-v14 #openBtn{pointer-events:auto;width:min(82%,360px)!important;min-height:58px;height:auto!important;padding:15px 24px;margin:0 auto!important;border:1px solid rgba(226,179,97,.95)!important;background:linear-gradient(180deg,#824052,#653043)!important;color:#fff8ef!important;font-size:clamp(15px,4vw,18px);letter-spacing:.08em;box-shadow:0 0 0 3px rgba(218,166,84,.16),0 14px 34px rgba(44,13,25,.2)!important}
.opening-chevron{color:#f0c982;font-size:32px;margin-top:clamp(10px,2vh,18px);line-height:1;animation:v14Chevron 1.8s ease-in-out infinite}
@keyframes v14Chevron{50%{transform:translateY(5px);opacity:.6}}
.royal-opening.is-opening .opening-ui-v14{opacity:0;transform:translateY(-10px) scale(.985)}
.royal-flash{position:absolute;z-index:11;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 42%,rgba(255,247,226,.94) 0,rgba(255,222,178,.42) 18%,transparent 60%)}
.royal-opening.is-opening .royal-flash{animation:v14Flash 1.15s .55s ease both}
@keyframes v14Flash{0%{opacity:0}42%{opacity:.95}100%{opacity:0}}
@media(max-height:760px){.opening-ui-v14{padding-top:max(4.6vh,38px);padding-bottom:max(2.4vh,18px)}.opening-ui-v14 .crest{width:clamp(145px,40vw,180px)!important;max-height:22vh;margin-bottom:8px}.opening-ui-v14 em{font-size:clamp(31px,8.6vw,39px)}.opening-ui-v14 #openBtn{min-height:54px}.opening-chevron{margin-top:8px;font-size:27px}}
@media(max-width:360px){.royal-curtain{width:54%}.opening-ui-v14 .crest{width:155px!important}}
[data-anim="opening"]::before,[data-anim="opening"]::after{display:none!important}


/* ===== V15 LIGHTWEIGHT SPLIT-IMAGE OPENER ===== */
.split-opening{
  position:fixed;
  inset:0;
  z-index:1000;
  overflow:hidden;
  background:#5c2e39;
  isolation:isolate;
  opacity:1;
  visibility:visible;
}
.split-opening.opening-complete{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .34s ease .05s, visibility .34s ease .05s;
}

/* Two real image halves */
.split-door{
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  z-index:3;
  overflow:hidden;
  will-change:transform;
  backface-visibility:hidden;
  transform:translate3d(0,0,0);
  transition:transform 1.15s cubic-bezier(.2,.78,.22,1);
}
.split-door img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
  user-select:none;
}
.split-door-left{left:0}
.split-door-right{right:0}

/* Maintain original whole-image composition */
.split-door-left img{object-position:left center}
.split-door-right img{object-position:right center}

.split-opening.is-opening .split-door-left{
  transform:translate3d(-101%,0,0);
}
.split-opening.is-opening .split-door-right{
  transform:translate3d(101%,0,0);
}

/* Fine seam glow hides the exact 50/50 join before opening */
.opening-center-glow{
  position:absolute;
  z-index:4;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent 0%,rgba(255,225,176,.42) 28%,rgba(255,238,211,.72) 52%,rgba(255,215,152,.3) 76%,transparent 100%);
  box-shadow:0 0 18px rgba(255,219,157,.24);
  transition:opacity .25s ease;
  pointer-events:none;
}
.split-opening.is-opening .opening-center-glow{opacity:0}

/* Live HTML UI */
.opening-ui-v15{
  position:absolute;
  z-index:8;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:max(6.2vh,48px) clamp(18px,5vw,28px) max(4vh,26px);
  pointer-events:none;
  transition:opacity .4s ease, transform .5s cubic-bezier(.2,.72,.2,1);
}
.opening-ui-v15 .crest{
  width:clamp(164px,47vw,212px)!important;
  height:auto!important;
  max-height:26vh;
  object-fit:contain;
  margin:0 auto clamp(12px,2vh,18px);
  mix-blend-mode:normal!important;
  filter:drop-shadow(0 8px 16px rgba(65,23,34,.12));
}
.opening-ui-v15 p{
  margin:0 0 2px!important;
  font-family:Montserrat,sans-serif;
  font-size:clamp(10px,2.7vw,12px);
  font-weight:600;
  letter-spacing:.22em;
  color:#783541!important;
  text-shadow:0 1px 1px rgba(255,243,230,.65);
}
.opening-ui-v15 em{
  margin:0!important;
  font-family:"Great Vibes",cursive;
  font-style:normal;
  font-size:clamp(36px,10vw,45px);
  line-height:1;
  color:#b6753f!important;
  text-shadow:0 2px 8px rgba(255,240,214,.36);
}
.opening-ui-v15 .heart{
  margin:clamp(8px,1.3vh,12px) 0 auto!important;
  color:#a84e5c!important;
}
.opening-ui-v15 #openBtn{
  pointer-events:auto;
  width:min(82%,360px)!important;
  min-height:56px;
  height:auto!important;
  margin:0 auto!important;
  padding:14px 24px;
  border:1px solid rgba(225,177,96,.95)!important;
  background:linear-gradient(180deg,#824052,#653043)!important;
  color:#fff8ef!important;
  font-size:clamp(15px,4vw,18px);
  letter-spacing:.08em;
  box-shadow:0 0 0 3px rgba(218,166,84,.14),0 12px 28px rgba(44,13,25,.17)!important;
}
.opening-chevron{
  color:#efc980;
  font-size:30px;
  line-height:1;
  margin-top:clamp(8px,1.8vh,16px);
  animation:v15Chevron 1.8s ease-in-out infinite;
}
@keyframes v15Chevron{50%{transform:translateY(4px);opacity:.62}}

.split-opening.is-opening .opening-ui-v15{
  opacity:0;
  transform:scale(.985) translateY(-6px);
}

/* Disable all legacy curtain implementations */
.royal-curtain,.curtain-fold,.royal-flash,
[data-anim="opening"]::before,[data-anim="opening"]::after{
  display:none!important;
}

/* Short phones */
@media (max-height:760px){
  .opening-ui-v15{
    padding-top:max(4.4vh,36px);
    padding-bottom:max(2.5vh,18px);
  }
  .opening-ui-v15 .crest{
    width:clamp(145px,40vw,178px)!important;
    max-height:21vh;
    margin-bottom:8px;
  }
  .opening-ui-v15 em{font-size:clamp(31px,8.6vw,39px)}
  .opening-ui-v15 #openBtn{min-height:52px}
  .opening-chevron{font-size:26px;margin-top:7px}
}

@media (min-width:700px){
  .split-opening{
    width:430px;
    left:50%;
    transform:translateX(-50%);
  }
}


/* ===== V16 OPENER TRANSPARENCY FIX =====
   The hero must be visible immediately between the two moving PNG halves.
*/
.split-opening,
#opening.split-opening,
#opening.opening.split-opening{
  background:transparent!important;
  background-color:transparent!important;
}

/* Remove any legacy full-screen color/image backing from the opener */
.split-opening > .opening-bg-art,
.split-opening > .opening-bg,
.split-opening > .curtain,
.split-opening > .opening-center-glow{
  display:none!important;
}

/* Ensure the opening root itself paints nothing */
.split-opening::before,
.split-opening::after,
#opening::before,
#opening::after{
  content:none!important;
  display:none!important;
  background:none!important;
}

/* Only the two image doors + live UI should render */
.split-door{
  z-index:5!important;
}
.opening-ui-v15{
  z-index:8!important;
}

/* During opening, fade UI quickly while hero is already visible underneath */
.split-opening.is-opening .opening-ui-v15{
  opacity:0!important;
  transform:scale(.985) translateY(-6px);
  transition:opacity .24s ease, transform .38s cubic-bezier(.2,.72,.2,1)!important;
}

/* Prevent browser from showing any fallback solid color through the fixed wrapper */
body.invitation-opened #opening,
.split-opening.opening-complete{
  background:transparent!important;
}


/* ===== V17 RSVP VISIBILITY / CTA FIX ===== */

/* RSVP buttons must always be fully visible and actionable.
   Envelope interaction remains decorative only. */
[data-anim="rsvp"] .actions,
[data-anim="rsvp"] .rsvp-actions,
[data-anim="rsvp"].rsvp-locked .actions,
[data-anim="rsvp"].rsvp-locked .rsvp-actions,
[data-anim="rsvp"].rsvp-open .actions,
[data-anim="rsvp"].rsvp-open .rsvp-actions{
  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;
}

/* Remove the washed-out inherited opacity on CTA descendants */
[data-anim="rsvp"] .actions *,
[data-anim="rsvp"] .rsvp-actions *{
  opacity:1!important;
}

/* Primary RSVP CTA */
[data-anim="rsvp"] [data-rsvp="yes"]{
  background:linear-gradient(180deg,#d77f8e 0%,#c96979 100%)!important;
  border:1px solid #c96979!important;
  color:#fffdf9!important;
  text-shadow:0 1px 1px rgba(95,39,51,.15);
  box-shadow:0 10px 24px rgba(146,72,88,.14);
  font-weight:600;
}

/* Secondary CTA */
[data-anim="rsvp"] [data-rsvp="no"]{
  background:rgba(255,249,244,.72)!important;
  border:1px solid rgba(183,125,88,.72)!important;
  color:#7c4c50!important;
  font-weight:500;
}

/* Better spacing and mobile sizing */
[data-anim="rsvp"] .actions,
[data-anim="rsvp"] .rsvp-actions{
  display:grid!important;
  gap:12px!important;
  width:100%;
  max-width:360px;
  margin:24px auto 0!important;
}

[data-anim="rsvp"] .actions button,
[data-anim="rsvp"] .rsvp-actions button{
  min-height:54px!important;
  margin:0!important;
  padding:12px 18px!important;
  border-radius:2px;
  letter-spacing:.06em;
}

/* Keep RSVP content comfortably above browser chrome / magic wand */
[data-anim="rsvp"]{
  padding-bottom:max(92px,calc(70px + env(safe-area-inset-bottom)))!important;
}

[data-anim="rsvp"] #reply,
[data-anim="rsvp"] #rsvpMessage{
  margin-top:18px!important;
  color:#a76b48!important;
  min-height:34px;
}

/* Envelope can still animate on tap, but no content is hidden behind it */
[data-rsvp-envelope]{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}


/* ===== V18 HERO ARTWORK UPDATE =====
   New Alayah princess artwork is image-only; all titles/date/countdown remain live HTML.
*/
#hero .hero-art,
#hero .hero-image,
[data-anim="hero"] .hero-art,
[data-anim="hero"] .hero-image{
  object-fit:cover!important;
  object-position:center center!important;
}

/* If the V17 hero uses the image as a CSS background */
#hero,
[data-anim="hero"]{
  background-position:center center;
  background-size:cover;
}

/* Preserve a clean text zone above Alayah's face on mobile */
@media (max-width:699px){
  #hero .hero-art,
  #hero .hero-image,
  [data-anim="hero"] .hero-art,
  [data-anim="hero"] .hero-image{
    object-position:50% 50%!important;
  }
}


/* ===== V19 AUDIO CONTROL ===== */
#musicBtn{
  transition:transform .25s ease, opacity .25s ease, filter .25s ease;
}
#musicBtn.music-playing{
  filter:drop-shadow(0 0 8px rgba(214,164,88,.45));
}
#musicBtn.music-muted{
  opacity:.55;
}
#musicBtn:active{
  transform:scale(.92);
}


/* ===== V20 AUDIO + NAV + FOOTER POLISH ===== */
#musicBtn{
  position:relative;
}
#musicBtn.music-playing{
  opacity:1!important;
  filter:drop-shadow(0 0 8px rgba(214,164,88,.52));
}
#musicBtn.music-muted{
  opacity:.58!important;
  filter:none!important;
}

/* Back to top */
.back-to-top{
  position:fixed;
  z-index:96;
  right:18px;
  bottom:76px;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(197,145,76,.68);
  background:rgba(255,249,242,.9);
  color:#a96f3f;
  font-size:22px;
  line-height:1;
  display:grid;
  place-items:center;
  box-shadow:0 10px 28px rgba(73,33,43,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.back-to-top.visible{
  opacity:1;
  visibility:visible;
  transform:none;
}
.back-to-top:active{
  transform:scale(.94);
}

/* Footer credit */
.closing-copy small,
.footer-copy small,
footer small{
  font-size:8px!important;
  line-height:1.8!important;
  letter-spacing:.12em!important;
}
.closing-copy small a,
.footer-copy small a,
footer small a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
}


/* ===== V21 AUDIO STATE ===== */
#musicBtn.music-playing{
  opacity:1!important;
  color:#b47a43!important;
  filter:drop-shadow(0 0 7px rgba(221,170,85,.55))!important;
}
#musicBtn.music-muted{
  opacity:.58!important;
  filter:none!important;
}

/* V22 — floating sparkle/magic CTA removed */
#magicBtn,.magic-btn,.magic-button,.magic-fab,.sparkle-btn,.sparkle-button,
.sparkle-fab,.floating-magic,[data-magic-button],[data-sparkle-button]{
 display:none!important;visibility:hidden!important;pointer-events:none!important;
}

/* V25 CLEAN — Royal Glass opener CTA */
#opening #openBtn,#opening [data-open-invitation]{
position:relative;overflow:hidden;display:flex!important;align-items:center;justify-content:center;gap:11px;
width:min(78%,350px)!important;min-height:60px!important;padding:14px 22px!important;
border:1px solid rgba(226,181,101,.92)!important;border-radius:16px!important;
background:linear-gradient(180deg,rgba(116,50,66,.78),rgba(91,34,50,.72))!important;
color:#fff9f0!important;box-shadow:inset 0 0 0 1px rgba(255,235,198,.12),0 10px 28px rgba(57,20,31,.16),0 0 0 3px rgba(213,162,79,.07)!important;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);letter-spacing:.07em!important;
transition:transform .22s ease,box-shadow .25s ease}
#opening #openBtn::before,#opening [data-open-invitation]::before{
content:"";position:absolute;top:-60%;bottom:-60%;left:-30%;width:22%;
transform:translateX(-260%) rotate(16deg);background:linear-gradient(90deg,transparent,rgba(255,246,225,.72),transparent)}
#opening #openBtn:hover::before,#opening #openBtn:active::before{animation:v25Shimmer .9s ease forwards}
#opening #openBtn:active{transform:scale(.975)}
#opening .cta-star{color:#f0c77f;font-size:.92em;filter:drop-shadow(0 0 5px rgba(236,190,106,.28))}
#opening .cta-label{position:relative;z-index:1}
@keyframes v25Shimmer{from{transform:translateX(-260%) rotate(16deg)}to{transform:translateX(650%) rotate(16deg)}}


/* ===== V26 — SECTION TRANSITIONS, ROUNDED BUTTONS, FULLSCREEN MENU ===== */

/* 1) Softer transitions between sections */
section,
footer{
  position:relative;
}

section:not(#opening)::before,
footer::before{
  content:"";
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  top:-42px;
  height:84px;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,250,245,.95) 0 42%, rgba(255,250,245,.62) 58%, transparent 72%);
  filter:blur(2px);
  opacity:.9;
}

section:not(#opening)::after,
footer::after{
  content:"";
  position:absolute;
  z-index:3;
  left:50%;
  top:-11px;
  width:64px;
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,#d2a265 20%,#e7c991 50%,#d2a265 80%,transparent);
  box-shadow:0 0 10px rgba(215,170,96,.2);
  pointer-events:none;
}

/* Avoid transition decoration over hero/opening */
#hero::before,#hero::after,
#opening::before,#opening::after{
  display:none!important;
}

/* smooth scroll reveal */
.reveal{
  transition:
    opacity .8s cubic-bezier(.22,.8,.22,1),
    transform .8s cubic-bezier(.22,.8,.22,1)!important;
}

/* 2) Rounded buttons globally */
button,
.btn,
a.btn,
#mapBtn,
[data-rsvp],
#openBtn,
.back-to-top{
  border-radius:999px!important;
}

#openBtn,
#mapBtn,
[data-rsvp]{
  min-height:52px;
  padding-left:24px!important;
  padding-right:24px!important;
}

button,
a,
#mapBtn,
[data-rsvp]{
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    color .22s ease,
    border-color .22s ease;
}

button:active,
#mapBtn:active,
[data-rsvp]:active{
  transform:scale(.97);
}

/* 3) Full-screen burger menu */
#menu{
  position:fixed!important;
  inset:0!important;
  z-index:999!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  margin:0!important;
  padding:
    max(28px,env(safe-area-inset-top))
    26px
    max(34px,env(safe-area-inset-bottom))!important;
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  background:
    linear-gradient(180deg,rgba(82,37,49,.985),rgba(113,55,67,.985));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:scale(1.035);
  transition:
    opacity .42s ease,
    transform .5s cubic-bezier(.22,.8,.22,1),
    visibility .42s ease!important;
  overflow:hidden;
}

#menu::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 30%,rgba(255,223,180,.12),transparent 28%),
    radial-gradient(circle at 50% 78%,rgba(255,255,255,.05),transparent 35%);
  pointer-events:none;
}

#menu.open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:scale(1);
}

#menu .menu-kicker{
  position:relative;
  z-index:2;
  margin-bottom:28px;
  font-family:Montserrat,sans-serif;
  font-size:10px;
  letter-spacing:.28em;
  color:#efcc9a;
  opacity:.9;
}

#menu a{
  position:relative;
  z-index:2;
  display:block!important;
  width:100%;
  max-width:340px;
  padding:13px 18px!important;
  text-align:center;
  color:#fff6ed!important;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(27px,8vw,42px);
  line-height:1.05;
  letter-spacing:.02em;
  text-decoration:none;
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .5s ease,
    transform .55s cubic-bezier(.22,.8,.22,1),
    color .2s ease;
}

#menu.open a{
  opacity:1;
  transform:none;
}

#menu.open a:nth-of-type(1){transition-delay:.08s}
#menu.open a:nth-of-type(2){transition-delay:.13s}
#menu.open a:nth-of-type(3){transition-delay:.18s}
#menu.open a:nth-of-type(4){transition-delay:.23s}
#menu.open a:nth-of-type(5){transition-delay:.28s}
#menu.open a:nth-of-type(6){transition-delay:.33s}

#menu a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:5px;
  width:0;
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,#e9c489,transparent);
  transition:width .25s ease;
}

#menu a:hover::after,
#menu a:focus-visible::after{
  width:110px;
}

.menu-close{
  position:absolute;
  z-index:3;
  top:max(18px,env(safe-area-inset-top));
  right:18px;
  width:46px;
  height:46px;
  border:1px solid rgba(233,196,137,.48)!important;
  background:rgba(255,255,255,.06)!important;
  color:#fff4e8!important;
  font-size:28px;
  line-height:1;
  display:grid;
  place-items:center;
  padding:0!important;
  border-radius:50%!important;
}

body.menu-open{
  overflow:hidden;
  touch-action:none;
}

@media (prefers-reduced-motion:reduce){
  #menu,#menu a,.reveal{
    transition:none!important;
  }
}

/* ===== V27 BURGER MENU FIX ===== */

/* Burger control: fixed on the RIGHT */
#menuBtn{
  position:fixed!important;
  top:max(16px,env(safe-area-inset-top))!important;
  right:16px!important;
  left:auto!important;
  z-index:1102!important;
  width:48px!important;
  height:48px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  border:1px solid rgba(218,172,97,.55)!important;
  background:rgba(255,249,242,.82)!important;
  color:#8a4c56!important;
  box-shadow:0 8px 24px rgba(66,29,39,.12)!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* Menu is genuinely hidden until JS adds .is-open */
#menu{
  position:fixed!important;
  inset:0!important;
  z-index:1100!important;
  width:100vw!important;
  height:100dvh!important;
  max-width:none!important;
  margin:0!important;
  padding:max(76px,calc(env(safe-area-inset-top) + 64px)) 24px max(32px,env(safe-area-inset-bottom))!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  background:
    radial-gradient(circle at 50% 28%,rgba(243,199,132,.13),transparent 28%),
    linear-gradient(180deg,#512431 0%,#713746 100%)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate3d(0,-12px,0) scale(1.015)!important;
  transition:opacity .35s ease,transform .48s cubic-bezier(.22,.8,.22,1),visibility .35s ease!important;
}
#menu.is-open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
#menu .menu-close{
  position:absolute!important;
  top:max(16px,env(safe-area-inset-top))!important;
  right:16px!important;
  z-index:1103!important;
  width:48px!important;
  height:48px!important;
  border-radius:50%!important;
  border:1px solid rgba(239,204,151,.48)!important;
  background:rgba(255,255,255,.07)!important;
  color:#fff7ed!important;
  font-size:28px!important;
  display:grid!important;
  place-items:center!important;
}
#menu.is-open ~ #menuBtn,
body.menu-open #menuBtn{
  opacity:0!important;
  pointer-events:none!important;
}
#menu a{
  opacity:0!important;
  transform:translateY(18px)!important;
}
#menu.is-open a{
  opacity:1!important;
  transform:none!important;
}
#menu.is-open a:nth-of-type(1){transition-delay:.07s!important}
#menu.is-open a:nth-of-type(2){transition-delay:.12s!important}
#menu.is-open a:nth-of-type(3){transition-delay:.17s!important}
#menu.is-open a:nth-of-type(4){transition-delay:.22s!important}
#menu.is-open a:nth-of-type(5){transition-delay:.27s!important}
#menu.is-open a:nth-of-type(6){transition-delay:.32s!important}
body.menu-open{overflow:hidden!important}


/* ===== V28 READABILITY + ONCE UPON A TIME FIX ===== */

/* Global copy is intentionally larger for mobile readability */
body{
  font-size:17px;
  line-height:1.5;
}

.eyebrow,
.hero-copy p,
.heroText p,
.venue-copy p,
.dress header p,
.countdown p,
.count-card p{
  font-size:11px!important;
  line-height:1.45!important;
  letter-spacing:.16em!important;
}

/* General section titles */
section h2,
footer h2{
  line-height:1.06;
}

.hero-copy h1,
.heroText h1{
  font-size:clamp(40px,10vw,48px)!important;
}

.hero-copy > em,
.heroText > em{
  font-size:clamp(68px,17vw,82px)!important;
  line-height:.9!important;
}

.hero-copy h2,
.heroText h2{
  font-size:clamp(22px,5.8vw,28px)!important;
}

.date-row,
.hero-copy strong,
.heroText strong{
  font-size:clamp(15px,4vw,18px)!important;
}

/* Countdown readability */
.counter i,
.count i{
  font-size:clamp(28px,7vw,34px)!important;
}
.counter small,
.count small{
  font-size:8px!important;
  letter-spacing:.08em!important;
}

/* Once Upon a Time: dedicated mobile composition */
#story,
[data-anim="story"]{
  min-height:auto!important;
  padding-bottom:68px!important;
  overflow:hidden!important;
}

#story header,
[data-anim="story"] header{
  padding-top:72px!important;
  padding-left:22px!important;
  padding-right:22px!important;
}

#story header h2,
[data-anim="story"] header h2{
  font-size:clamp(30px,8vw,38px)!important;
  line-height:1.02!important;
  letter-spacing:.02em!important;
}

#story header p,
[data-anim="story"] header p{
  font-size:clamp(18px,4.7vw,22px)!important;
  line-height:1.35!important;
  margin-top:8px!important;
}

/* Timeline gets more width and breathing room */
#story .timeline,
[data-anim="story"] .timeline{
  margin:38px 22px 44px!important;
  width:auto!important;
}

#story .timeline article,
[data-anim="story"] .timeline article{
  grid-template-columns:86px minmax(0,1fr)!important;
  gap:18px!important;
  min-height:152px!important;
  align-items:center!important;
}

#story .timeline .medallion,
#story .timeline article > i,
[data-anim="story"] .timeline .medallion,
[data-anim="story"] .timeline article > i{
  width:80px!important;
  height:80px!important;
  font-size:32px!important;
}

#story .timeline time,
[data-anim="story"] .timeline time{
  font-size:clamp(17px,4.4vw,20px)!important;
  letter-spacing:.08em!important;
}

#story .timeline h3,
[data-anim="story"] .timeline h3{
  font-size:clamp(21px,5.5vw,26px)!important;
  line-height:1.08!important;
  margin:6px 0!important;
}

#story .timeline p,
[data-anim="story"] .timeline p{
  font-size:clamp(16px,4.2vw,19px)!important;
  line-height:1.4!important;
  margin-top:7px!important;
}

/* Prevent old "dim until animated" state from making this section look broken */
#story .timeline article,
[data-anim="story"] .timeline article{
  opacity:1!important;
  transform:none!important;
}

/* Keep a subtle reveal only on the medallions/text, not the entire row */
#story .timeline article .medallion,
#story .timeline article > i,
[data-anim="story"] .timeline article .medallion,
[data-anim="story"] .timeline article > i{
  transition:transform .55s cubic-bezier(.22,.8,.22,1), box-shadow .55s ease!important;
}

/* Closing story script gets more separation and size */
#story .story-end,
#story .ending,
[data-anim="story"] .story-end,
[data-anim="story"] .ending{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  display:block!important;
  margin:18px 20px 0!important;
  padding-bottom:20px!important;
  font-size:clamp(34px,9vw,43px)!important;
  line-height:1.08!important;
}

/* Other section body copy */
.fairy-copy p,
.memory,
.venue-copy span,
.rsvp > p,
.rsvp p,
.closing-copy p{
  font-size:clamp(16px,4.2vw,19px)!important;
  line-height:1.45!important;
}

.fairy-copy em{
  font-size:clamp(60px,15vw,76px)!important;
}

.venue-copy h2{
  font-size:clamp(54px,14vw,68px)!important;
}
.venue-copy h3{
  font-size:clamp(25px,6.4vw,31px)!important;
}

.dress header h2,
.rsvp header h2{
  font-size:clamp(30px,7.5vw,37px)!important;
  line-height:1.08!important;
}

/* CTA labels easier to read */
button,
#mapBtn,
[data-rsvp]{
  font-size:clamp(15px,4vw,17px)!important;
}

/* Small phones still retain comfortable layout */
@media(max-width:360px){
  #story .timeline,
  [data-anim="story"] .timeline{
    margin-left:16px!important;
    margin-right:16px!important;
  }

  #story .timeline article,
  [data-anim="story"] .timeline article{
    grid-template-columns:76px minmax(0,1fr)!important;
    gap:14px!important;
  }

  #story .timeline .medallion,
  #story .timeline article > i,
  [data-anim="story"] .timeline .medallion,
  [data-anim="story"] .timeline article > i{
    width:70px!important;
    height:70px!important;
  }
}

/* ===== V30 HERO COMPOSITION + READABILITY ===== */
.opening-guest{
  margin:8px 0 0;
  color:#f8e1c2;
  font-family:"Great Vibes",cursive;
  font-size:clamp(27px,7vw,34px);
  line-height:1;
  text-shadow:0 2px 12px rgba(42,12,22,.42);
}
.opening-ui-v15>p{margin-bottom:0!important}
.opening-ui-v15>em{margin-top:7px}

/* Protect title area from the visually busy sky without creating a visible card. */
.hero::before{
  content:"";
  position:absolute;
  z-index:2;
  top:0;left:0;right:0;
  height:47%;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 18%,rgba(255,248,241,.94) 0%,rgba(255,244,237,.76) 35%,rgba(255,240,233,.25) 66%,transparent 84%);
}
.hero::after{
  background:linear-gradient(rgba(255,248,241,.42) 0%,rgba(255,248,241,.08) 34%,transparent 55%,rgba(239,197,194,.18) 100%)!important;
}
.hero-copy{
  top:78px!important;
  left:22px!important;
  right:22px!important;
  text-shadow:0 1px 1px rgba(255,255,255,.55),0 2px 10px rgba(83,42,48,.10);
}
.hero-copy .eyebrow{
  max-width:330px;
  margin:0 auto 10px!important;
  color:#6f4249;
  font-family:Montserrat,sans-serif!important;
  font-size:clamp(10px,2.8vw,12px)!important;
  line-height:1.45!important;
  letter-spacing:.19em!important;
  font-weight:500;
}
.hero-copy h1{
  color:#704047;
  font-size:clamp(36px,9.6vw,44px)!important;
  margin:0!important;
  line-height:.98!important;
}
.hero-copy>em{
  color:#a96d32!important;
  font-size:clamp(61px,15.5vw,74px)!important;
  line-height:.86!important;
  margin:5px 0 7px!important;
  text-shadow:0 2px 12px rgba(255,244,230,.85);
}
.hero-copy h2{
  color:#704047;
  font-size:clamp(19px,5.1vw,24px)!important;
  margin:5px 0 8px!important;
}
.hero-copy .date-row{
  color:#704047;
  font-size:clamp(13px,3.5vw,16px)!important;
}
.hero-copy>.heart{display:none!important}

/* Keep all typography above the baby's face/head on typical phones. */
@media (max-width:480px){
  .hero-copy{top:74px!important}
  .hero-copy .eyebrow{margin-bottom:8px!important}
}
@media (max-height:760px){
  .hero-copy{top:62px!important}
  .hero-copy>em{font-size:56px!important}
  .hero-copy h1{font-size:34px!important}
  .hero-copy h2{font-size:18px!important}
}

/* Fairytale invitation: readable editorial paragraph rather than stacked template copy. */
.fairytale-invite{
  width:min(84%,340px);
  margin:16px auto 6px!important;
  font-size:clamp(18px,4.8vw,21px)!important;
  line-height:1.48!important;
  letter-spacing:.015em!important;
  text-wrap:balance;
  color:#74464d;
}


/* ===== V31 TYPOGRAPHY + FAIRYTALE FLOW ===== */

/* Better global readability */
body{
  font-size:17px;
  line-height:1.5;
}

.hero-copy .eyebrow{
  font-size:clamp(10px,2.9vw,12px)!important;
  line-height:1.5!important;
  letter-spacing:.17em!important;
}
.hero-copy h1{
  font-size:clamp(34px,9vw,40px)!important;
  line-height:1!important;
}
.hero-copy>em{
  font-size:clamp(58px,15vw,68px)!important;
  line-height:.88!important;
}
.hero-copy h2{
  font-size:clamp(20px,5.3vw,23px)!important;
}
.hero-copy .date-row{
  font-size:clamp(14px,3.8vw,16px)!important;
}

/* Keep hero text clear of Alayah */
.hero-copy{
  top:72px!important;
  max-width:370px;
  margin:0 auto;
}
.hero::before{
  height:44%!important;
  background:
    radial-gradient(ellipse at 50% 17%,rgba(255,248,241,.96) 0%,rgba(255,245,238,.82) 38%,rgba(255,242,236,.28) 68%,transparent 86%)!important;
}
@media(max-height:760px){
  .hero-copy{top:58px!important}
  .hero-copy>em{font-size:54px!important}
  .hero-copy h1{font-size:32px!important}
  .hero-copy h2{font-size:18px!important}
}

/* Story typography */
#story header h2,[data-anim="story"] header h2{
  font-size:clamp(30px,8vw,36px)!important;
}
#story header p,[data-anim="story"] header p{
  font-size:clamp(18px,4.8vw,21px)!important;
}
#story .timeline time,[data-anim="story"] .timeline time{
  font-size:clamp(16px,4.3vw,19px)!important;
}
#story .timeline h3,[data-anim="story"] .timeline h3{
  font-size:clamp(20px,5.4vw,24px)!important;
}
#story .timeline p,[data-anim="story"] .timeline p{
  font-size:clamp(16px,4.2vw,18px)!important;
  line-height:1.45!important;
}

/* Fairytale paragraph */
.fairytale-invite{
  font-size:clamp(18px,4.8vw,21px)!important;
  line-height:1.52!important;
  max-width:340px!important;
}

/* Venue / dress / RSVP copy */
.venue-copy span,
.dress .swatches span,
.rsvp>p,
.rsvp p{
  font-size:clamp(14px,3.8vw,17px)!important;
}
#mapBtn,[data-rsvp],button{
  font-size:clamp(15px,4vw,17px)!important;
}
.dress .swatches span{
  line-height:1.25!important;
}

/* Closing credit larger */
.closing-copy small,
footer small{
  font-size:9px!important;
  line-height:1.8!important;
  letter-spacing:.11em!important;
}

/* -------------------------------------------------
   FAIRYTALE FLOW: soft, continuous section blending
   ------------------------------------------------- */

main{
  background:#f8e5e0;
}

/* Remove hard separators from previous versions */
main > section:not(#opening)::before,
main > section:not(#opening)::after,
main > footer::before,
main > footer::after{
  pointer-events:none;
}

/* Each section gets a soft overlap veil at the top and bottom */
main > section:not(#opening),
main > footer{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

/* top blend */
main > section:not(#hero):not(#opening)::before,
main > footer::before{
  content:"";
  position:absolute;
  z-index:4;
  left:0; right:0;
  top:-86px;
  height:172px;
  background:
    radial-gradient(ellipse at 50% 100%,
      rgba(255,247,242,.96) 0%,
      rgba(255,240,235,.66) 42%,
      rgba(255,232,228,.22) 68%,
      transparent 84%);
  filter:blur(3px);
  opacity:.92;
}

/* bottom blend */
main > section:not(#opening):not(:last-of-type)::after{
  content:"";
  position:absolute;
  z-index:4;
  left:0; right:0;
  bottom:-84px;
  height:168px;
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(255,247,242,.88) 0%,
      rgba(255,236,232,.56) 44%,
      rgba(255,226,223,.18) 70%,
      transparent 86%);
  filter:blur(3px);
  opacity:.9;
}

/* Decorative flow particles crossing boundaries */
#story::after{
  background:
    radial-gradient(circle at 28% 30%,rgba(255,255,255,.45) 0 2px,transparent 3px),
    radial-gradient(circle at 72% 52%,rgba(235,191,117,.35) 0 2px,transparent 3px),
    radial-gradient(ellipse at 50% 0%,rgba(255,243,238,.86),rgba(255,230,226,.2) 66%,transparent 86%);
  background-size:auto,auto,100% 100%;
}
.fairytale::before{
  background:
    radial-gradient(circle at 20% 34%,rgba(255,255,255,.42) 0 2px,transparent 3px),
    radial-gradient(circle at 80% 58%,rgba(235,191,117,.32) 0 2px,transparent 3px),
    radial-gradient(ellipse at 50% 100%,rgba(255,247,242,.94),rgba(255,232,228,.18) 70%,transparent 86%);
}

/* Background crossfade and subtle motion */
.hero .art,
.hero .hero-bg,
.story .story-bg,
.fairytale .art,
.venue .art,
.closing .art,
.closing .bg{
  will-change:transform,filter;
  transition:transform 7s linear,filter 1.2s ease;
}

.section-visible .art,
.section-visible .hero-bg,
.section-visible .story-bg,
.section-visible .bg{
  transform:scale(1.025);
}

/* Smooth text entrances */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .78s cubic-bezier(.22,.8,.22,1),
    transform .78s cubic-bezier(.22,.8,.22,1)!important;
}
.reveal.show,
.section-visible .reveal{
  opacity:1;
  transform:none;
}

/* Avoid visible hard blank strips between sections */
.screen,
.panel,
.story,
.fairytale,
.venue,
.dress,
.rsvp,
.closing{
  margin-top:-1px;
}

/* More vertical breathing room */
#story .timeline,
[data-anim="story"] .timeline{
  margin-top:42px!important;
}
.fairytale .fairy-copy{
  padding-top:72px!important;
}
.venue-copy{
  padding-top:68px!important;
}
.dress,.rsvp{
  padding-top:72px!important;
}

/* Safe mobile clipping prevention */
@media(max-width:380px){
  .hero-copy{
    left:16px!important;
    right:16px!important;
  }
  #story .timeline,[data-anim="story"] .timeline{
    margin-left:16px!important;
    margin-right:16px!important;
  }
}

/* ===== V32 CINEMATIC VIDEO HERO ===== */
.hero{
  min-height:100svh;
  background:#efc9c3;
  contain:paint;
}
.hero-video{
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  pointer-events:none;
  background:#efc9c3;
}
.hero-baby{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:14.5%;
  width:clamp(260px,76vw,350px);
  max-height:55%;
  object-fit:contain;
  object-position:center bottom;
  transform:translateX(-50%);
  transform-origin:50% 100%;
  pointer-events:none;
  filter:drop-shadow(0 12px 18px rgba(92,47,53,.10));
}
.hero::before{
  z-index:2!important;
  height:43%!important;
  background:
    linear-gradient(180deg,rgba(255,248,242,.88) 0%,rgba(255,245,239,.72) 40%,rgba(255,241,235,.20) 75%,transparent 100%)!important;
}
.hero::after{
  z-index:1!important;
  background:
    linear-gradient(180deg,rgba(255,247,241,.18) 0%,transparent 47%,rgba(235,183,181,.10) 73%,rgba(225,166,170,.20) 100%)!important;
}
.hero-copy{z-index:5!important}
.countdown{z-index:6!important}
.hero .down{z-index:7!important}

/* Text occupies the calm upper sky; baby owns the middle/lower portrait zone. */
.hero-copy{
  top:64px!important;
  left:20px!important;
  right:20px!important;
}
.hero-copy .eyebrow{
  max-width:315px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.hero-copy h1{font-size:clamp(32px,8.5vw,38px)!important}
.hero-copy>em{font-size:clamp(55px,14.2vw,65px)!important}
.hero-copy h2{font-size:clamp(18px,4.9vw,22px)!important}
.hero-copy .date-row{font-size:clamp(13px,3.5vw,15px)!important}

/* Countdown remains above the skirt rather than fighting with the portrait. */
.countdown{
  bottom:32px!important;
  left:7%!important;
  right:7%!important;
  background:rgba(255,249,242,.94)!important;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

/* Very subtle independent portrait breathing; no face deformation. */
@keyframes alayahPortraitFloat{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
  50%{transform:translateX(-50%) translateY(-3px) scale(1.006)}
}
.hero.hero-enter .hero-baby{
  animation:
    babyV32In 1.15s cubic-bezier(.22,.8,.22,1) both,
    alayahPortraitFloat 6.5s 1.2s ease-in-out infinite;
}
@keyframes babyV32In{
  from{opacity:0;transform:translateX(-50%) translateY(16px) scale(.985)}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}

@media(max-width:380px){
  .hero-baby{width:78vw;bottom:15%}
  .hero-copy{top:58px!important}
}
@media(max-height:760px){
  .hero-baby{width:min(72vw,315px);bottom:15%}
  .hero-copy{top:50px!important}
  .hero-copy h1{font-size:30px!important}
  .hero-copy>em{font-size:51px!important}
  .hero-copy h2{font-size:17px!important}
}
@media(prefers-reduced-motion:reduce){
  .hero-video{display:none!important}
  .hero{
    background-image:url("assets/images/02_hero_princess.png");
    background-size:cover;
    background-position:center;
  }
  .hero-baby{animation:none!important}
}


/* ===== V33 NEW ALAYAH PORTRAIT — SOFT VIDEO INTEGRATION ===== */
.hero-baby-v33{
  left:50%!important;
  bottom:13.2%!important;
  width:clamp(285px,84vw,385px)!important;
  max-height:58%!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center bottom!important;

  /* White studio background visually disappears into the moving pink scene. */
  mix-blend-mode:multiply;

  /* Feather the portrait into the living background instead of a hard rectangle. */
  -webkit-mask-image:
    linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,.40) 2.5%,
      #000 7%,
      #000 82%,
      rgba(0,0,0,.92) 88%,
      rgba(0,0,0,.55) 94%,
      transparent 100%);
  mask-image:
    linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,.40) 2.5%,
      #000 7%,
      #000 82%,
      rgba(0,0,0,.92) 88%,
      rgba(0,0,0,.55) 94%,
      transparent 100%);

  filter:
    saturate(.96)
    contrast(.98)
    drop-shadow(0 14px 24px rgba(103,55,66,.08))!important;

  opacity:.98;
}

/* A localized blush-light bridge makes the portrait/video join feel photographic. */
.hero .hero-baby-v33 + .hero-copy::before{
  content:"";
  position:fixed;
  pointer-events:none;
}

@media(max-width:430px){
  .hero-baby-v33{
    width:86vw!important;
    bottom:13.5%!important;
  }
}
@media(max-width:380px){
  .hero-baby-v33{
    width:88vw!important;
    bottom:14%!important;
  }
}
@media(max-height:760px){
  .hero-baby-v33{
    width:min(82vw,345px)!important;
    bottom:14%!important;
  }
}

/* Preserve the same gentle entrance / breathing motion. */
.hero.hero-enter .hero-baby-v33{
  animation:
    babyV32In 1.35s cubic-bezier(.22,.8,.22,1) both,
    alayahPortraitFloat 7s 1.4s ease-in-out infinite!important;
}


/* ===== V34 ALAYAH: NO FADE / NO BLENDING ===== */
.hero-baby-v33{
  mix-blend-mode:normal!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  opacity:1!important;
  filter:none!important;
}


/* ===== V35 HERO: ALAYAH IS PART OF F5 VIDEO ===== */
.hero-baby,
.hero-baby-v33{
  display:none!important;
}
.hero-video{
  object-fit:cover!important;
  object-position:center center!important;
}

/* V36 — reference-matched Fairytale invitation */
.fairytale-v36{position:relative;overflow:hidden;min-height:100svh}
.fairytale36{position:relative;z-index:5;min-height:100svh;box-sizing:border-box;padding:82px 18px 34px;display:flex;flex-direction:column;align-items:center;text-align:center}
.fairytale36-crown{width:28px;height:auto;margin:0 0 30px;object-fit:contain}
.fairytale36-copy{width:min(92%,600px);color:#70434b;text-shadow:0 1px 10px rgba(255,248,242,.5)}
.fairytale36-kicker,.fairytale36-sub{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;text-transform:uppercase;letter-spacing:.11em}
.fairytale36-kicker{font-size:clamp(16px,4.3vw,22px);line-height:1.35}
.fairytale36-script{font-family:"Allura","Great Vibes",cursive;color:#b6782e;font-size:clamp(72px,20vw,112px);line-height:.9;margin:14px 0 18px}
.fairytale36-sub{font-size:clamp(14px,3.8vw,19px);line-height:1.5}
.fairytale36-card{position:relative;width:min(90vw,560px);box-sizing:border-box;margin-top:auto;padding:47px 25px 34px;background:linear-gradient(#fffaf6,#fff0ea);color:#68424a;border:2px solid #c99a53;border-radius:18px;box-shadow:inset 0 0 0 5px rgba(255,255,255,.55),0 12px 32px rgba(95,52,62,.11)}
.fairytale36-card:before{content:"";position:absolute;inset:7px;border:1px solid rgba(193,143,74,.72);border-radius:12px}
.fairytale36-card:after{content:"✦";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:32px;background:#fff2ec;color:#b98742}
.fairytale36-heart{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:46px;height:36px;display:grid;place-items:center;background:#fff6f1;color:#c77d89;font-size:24px}
.fairytale36-card p{position:relative;z-index:1;margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(20px,5.2vw,29px);line-height:1.28;font-weight:600}
.fairytale36-copy,.fairytale36-card,.fairytale36-crown{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.75,.25,1)}
.fairytale-v36.in-view .fairytale36-crown,.fairytale-v36.in-view .fairytale36-copy,.fairytale-v36.in-view .fairytale36-card{opacity:1;transform:none}
.fairytale-v36.in-view .fairytale36-copy{transition-delay:.12s}.fairytale-v36.in-view .fairytale36-card{transition-delay:.28s}
@media(max-width:430px){.fairytale36{padding:72px 15px 28px}.fairytale36-crown{margin-bottom:24px}.fairytale36-card{width:94%;padding:42px 18px 30px}}
@media(max-height:760px){.fairytale36{padding-top:58px}.fairytale36-crown{margin-bottom:16px}.fairytale36-script{font-size:68px;margin:8px 0 10px}.fairytale36-card{padding-top:35px;padding-bottom:24px}}


/* ===== V37 VENUE CTA — REFERENCE STYLE ===== */
#venue .venue-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
}

#venue #mapBtn{
  position:absolute!important;
  left:50%!important;
  bottom:clamp(132px,17vh,168px)!important;
  transform:translateX(-50%)!important;
  width:min(72%,310px)!important;
  min-height:64px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:18px!important;
  padding:16px 26px!important;

  background:
    linear-gradient(180deg,rgba(255,248,241,.97),rgba(251,232,226,.96))!important;
  color:#9a5a4d!important;
  border:1px solid rgba(198,147,83,.82)!important;
  border-radius:4px!important;

  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.55),
    0 12px 26px rgba(91,51,61,.08)!important;

  font-family:"Cormorant Garamond",Georgia,serif!important;
  font-size:clamp(18px,4.8vw,22px)!important;
  font-weight:600!important;
  letter-spacing:.08em!important;
  text-decoration:none!important;
  text-transform:uppercase;
  overflow:visible;
}

#venue #mapBtn::before,
#venue #mapBtn::after{
  content:"";
  position:absolute;
  top:50%;
  width:22px;
  height:22px;
  transform:translateY(-50%) rotate(45deg);
  background:#fff5ef;
  border:1px solid rgba(198,147,83,.75);
  z-index:-1;
}
#venue #mapBtn::before{left:-11px}
#venue #mapBtn::after{right:-11px}

#venue #mapBtn span{
  position:relative;
  z-index:2;
}

#venue #mapBtn b{
  position:relative;
  z-index:2;
  color:#b98742;
  font-size:18px;
  font-weight:400;
  filter:drop-shadow(0 0 5px rgba(204,155,81,.18));
}

#venue #mapBtn:hover,
#venue #mapBtn:focus-visible{
  background:
    linear-gradient(180deg,rgba(255,251,247,.99),rgba(255,237,231,.98))!important;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.62),
    0 14px 30px rgba(91,51,61,.10),
    0 0 20px rgba(211,165,95,.12)!important;
}

#venue #mapBtn:active{
  transform:translateX(-50%) scale(.985)!important;
}

/* Keep the venue typography at top like the reference and leave the center image unobstructed. */
#venue .venue-copy{
  position:relative;
  z-index:4;
  padding-top:60px!important;
}
#venue .venue-copy h2{
  margin-top:4px!important;
}
#venue .venue-copy span:not(#mapBtn span){
  margin-top:8px!important;
}

@media(max-height:760px){
  #venue #mapBtn{
    bottom:112px!important;
    min-height:58px!important;
    width:min(74%,300px)!important;
  }
}




/* =========================================================
   V39 — ENDING VIDEO ONLY IN THE FOOTER
   ========================================================= */
.footer-video-v39{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
  min-height:clamp(420px,72svh,760px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:url("../assets/images/09_closing_bg.png") center/cover no-repeat;
}

.footer-video-v39-bg{
  position:absolute;
  inset:0;
  z-index:-3;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  pointer-events:none;
}

.footer-video-v39-overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(62,25,39,.03) 0%,
    rgba(62,25,39,.02) 55%,
    rgba(52,19,31,.24) 100%
  );
}

.footer-video-v39 > *:not(.footer-video-v39-bg):not(.footer-video-v39-overlay){
  position:relative;
  z-index:2;
}

@media(max-width:600px){
  .footer-video-v39{
    min-height:68svh;
  }
  .footer-video-v39-bg{
    object-position:center center;
  }
}

@media(prefers-reduced-motion:reduce){
  .footer-video-v39-bg{display:none}
}


/* ===== V40 VENUE CTA POSITION FIX ===== */
#venue{
  position:relative!important;
}
#venue #mapBtn{
  top:auto!important;
  bottom:clamp(54px,7vh,76px)!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  z-index:8!important;
}
#venue #mapBtn:active{
  transform:translateX(-50%) scale(.985)!important;
}


/* ===== V40 REMOVE STATIC PRE-FOOTER IMAGE STRIP ===== */
img[src*="09_closing_bg.png"]:not(.footer-video-v39 *),
.closing-strip,
.footer-prelude,
.closing-bridge,
.transition-closing{
  display:none!important;
}


/* ===== V40 FOOTER READABILITY ===== */
.footer-video-v39{
  min-height:72svh!important;
}
.footer-video-v39-overlay{
  background:
    linear-gradient(180deg,
      rgba(65,27,40,.10) 0%,
      rgba(65,27,40,.14) 38%,
      rgba(55,21,34,.30) 100%)!important;
}
.footer-video-v39 .closing-copy,
.footer-video-v39 .footer-copy,
.footer-video-v39 .closing-content,
.footer-video-v39 > div:not(.footer-video-v39-overlay){
  color:#fff8ef!important;
  text-shadow:
    0 2px 14px rgba(56,18,32,.65),
    0 1px 2px rgba(56,18,32,.35)!important;
}
.footer-video-v39 h1,
.footer-video-v39 h2,
.footer-video-v39 h3,
.footer-video-v39 p,
.footer-video-v39 small,
.footer-video-v39 a{
  color:#fff8ef!important;
  text-shadow:
    0 2px 14px rgba(56,18,32,.68),
    0 1px 2px rgba(56,18,32,.45)!important;
}
.footer-video-v39 small{
  font-size:10px!important;
  line-height:1.7!important;
  letter-spacing:.12em!important;
  opacity:.96!important;
}
.footer-video-v39 a{
  text-decoration-color:rgba(255,241,218,.8)!important;
}


/* ===== V40 REMOVE ALL WHITE SECTION TRANSITION VEILS ===== */
main > section::before,
main > section::after,
main > footer::before,
main > footer::after,
section::before,
section::after,
footer::before,
footer::after{
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Restore only intentional overlays where explicitly needed */
.hero::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:2!important;
  top:0!important;
  left:0!important;
  right:0!important;
  height:43%!important;
  background:
    linear-gradient(180deg,
      rgba(255,248,242,.88) 0%,
      rgba(255,245,239,.72) 40%,
      rgba(255,241,235,.20) 75%,
      transparent 100%)!important;
}
.hero::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:
    linear-gradient(180deg,
      rgba(255,247,241,.18) 0%,
      transparent 47%,
      rgba(235,183,181,.10) 73%,
      rgba(225,166,170,.20) 100%)!important;
}


/* ===== V40 DRESS CODE LOOKS ===== */
#dress .shoe,
[data-anim="dress"] .shoe{
  display:none!important;
}
.dresscode-looks-v40{
  display:block!important;
  width:min(82vw,420px)!important;
  height:auto!important;
  max-height:46vh!important;
  object-fit:contain!important;
  margin:18px auto 8px!important;
  filter:drop-shadow(0 14px 24px rgba(85,44,53,.10));
  animation:dressLooksFloat 5.8s ease-in-out infinite;
}
@keyframes dressLooksFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
@media(max-width:430px){
  .dresscode-looks-v40{
    width:86vw!important;
    max-height:44vh!important;
  }
}


/* =========================================================
   V41 BUGFIX — FOOTER / DRESS CODE / VENUE
   ========================================================= */

/* 1. Footer: video only, never render the static closing image above it */
#closing > img.bg,
.footer-video-v39 > img[src*="09_closing_bg"],
.footer-video-v39 .bg{
  display:none!important;
}

/* 2. Dress Code: guaranteed visible outfit asset */
#dress .dresscode-looks-v41{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:relative!important;
  z-index:4!important;
  width:min(78vw,390px)!important;
  height:auto!important;
  max-height:43vh!important;
  object-fit:contain!important;
  margin:18px auto 12px!important;
  filter:drop-shadow(0 12px 22px rgba(86,45,54,.12))!important;
  transform:none;
}
#dress .dresscode-looks-v41.show,
#dress.section-visible .dresscode-looks-v41,
#dress.in-view .dresscode-looks-v41{
  opacity:1!important;
  transform:none!important;
}
#dress img.shoe{
  display:none!important;
}

/* 3. Venue: CTA is positioned relative to the whole section, not venue-copy */
#venue > #mapBtn{
  position:absolute!important;
  top:auto!important;
  left:50%!important;
  right:auto!important;
  bottom:64px!important;
  transform:translateX(-50%)!important;
  z-index:20!important;
  width:min(72%,310px)!important;
  margin:0!important;
}
#venue > #mapBtn:active{
  transform:translateX(-50%) scale(.985)!important;
}
#venue .venue-copy{
  position:relative!important;
  z-index:5!important;
}
#venue > .down{
  bottom:18px!important;
  z-index:21!important;
}

@media(max-height:760px){
  #venue > #mapBtn{
    bottom:56px!important;
  }
}


/* =========================================================
   V42 — FULLSCREEN FOOTER + TRANSPARENT DRESS CODE OUTFITS
   ========================================================= */

/* Footer should feel like a full-screen final scene */
.footer-video-v39{
  min-height:100svh !important;
  height:100svh !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  padding:clamp(36px,6vh,72px) 24px !important;
  box-sizing:border-box !important;
}

.footer-video-v39 > *:not(.footer-video-v39-bg):not(.footer-video-v39-overlay){
  width:100%;
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.footer-video-v39 h1,
.footer-video-v39 h2,
.footer-video-v39 h3{
  font-size:clamp(30px,6.2vw,48px) !important;
  line-height:1.12 !important;
}

.footer-video-v39 p{
  font-size:clamp(17px,4.2vw,24px) !important;
  line-height:1.45 !important;
}

.footer-video-v39 small{
  font-size:clamp(11px,2.8vw,14px) !important;
  line-height:1.8 !important;
}

/* Strong readable type over the moving video */
.footer-video-v39 h1,
.footer-video-v39 h2,
.footer-video-v39 h3,
.footer-video-v39 p,
.footer-video-v39 small,
.footer-video-v39 a{
  color:#fff8f1 !important;
  text-shadow:
    0 2px 4px rgba(52,16,27,.45),
    0 8px 24px rgba(52,16,27,.55) !important;
}

.footer-video-v39-overlay{
  background:
    linear-gradient(180deg,
      rgba(53,19,29,.10) 0%,
      rgba(53,19,29,.16) 28%,
      rgba(53,19,29,.24) 60%,
      rgba(53,19,29,.34) 100%) !important;
}

/* Dress code: use the transparent outfits asset */
#dress .dresscode-outfits-v42{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:min(82vw,420px) !important;
  max-height:46vh !important;
  height:auto !important;
  object-fit:contain !important;
  margin:16px auto 10px !important;
  position:relative !important;
  z-index:5 !important;
  filter:drop-shadow(0 16px 26px rgba(78,34,44,.14)) !important;
}

#dress img.shoe,
#dress .dresscode-looks-v41{
  display:none !important;
}

@media (max-width: 600px){
  .footer-video-v39{
    min-height:100svh !important;
    height:100svh !important;
    padding:32px 18px !important;
  }
  #dress .dresscode-outfits-v42{
    width:min(86vw,390px) !important;
    max-height:40vh !important;
  }
}


/* ===== V43 DRESS CODE ASSET UPDATE ===== */
#dress .dresscode-outfits-v42{
  display:none!important;
}

#dress .dresscode-outfits-v43{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:relative!important;
  z-index:5!important;
  width:min(88vw,460px)!important;
  max-height:48vh!important;
  height:auto!important;
  object-fit:contain!important;
  margin:14px auto 12px!important;
  filter:drop-shadow(0 16px 28px rgba(78,34,44,.14))!important;
}

@media(max-width:600px){
  #dress .dresscode-outfits-v43{
    width:min(90vw,420px)!important;
    max-height:44vh!important;
  }
}