/* Full-width horizontal scan beam; source QR image remains unchanged. */
.qr-scan-window{display:none;position:absolute;inset:6px;z-index:7;overflow:hidden;pointer-events:none;border-radius:8px}
.qr-scan-enabled .qr-scan-window{display:block}
.qr-effect-scan::before{display:none!important}
.qr-scan-enabled .qr-scan-line{display:block;position:absolute;inset:0;width:100%;height:100%;border-radius:0;opacity:1;background:none;box-shadow:none;animation:wedding-qr-sweep 2.4s cubic-bezier(.45,0,.55,1) infinite alternate}
/* A single thin beam spans the QR, not just its two side rails. */
.qr-scan-enabled .qr-scan-line::before{display:none;content:none}
.qr-scan-enabled .qr-scan-line::after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;width:100%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent 0%,rgba(169,23,43,.12) 8%,rgba(169,23,43,.7) 25%,#dc1829 50%,rgba(169,23,43,.7) 75%,rgba(169,23,43,.12) 92%,transparent 100%);opacity:.65;box-shadow:none;pointer-events:none}
/* Remove all CSS heart decorations, including saved heart-frame selections. */
.clone-qr-visual .qr-heart,.clone-qr-visual .clone-qr-decor,.clone-qr-visual .clone-qr-visual-inner{display:none!important}
.clone-qr-visual .clone-qr-card::before,.clone-qr-visual .clone-qr-card::after{display:none!important;content:none!important}
/* Keep shimmer behind the opaque image, and pulse only the decorative frame. */
.clone-qr-visual.qr-effect-shimmer::after,.clone-qr-visual .qr-heart{z-index:2}
.clone-qr-visual.qr-effect-pulse{animation:none}
.qr-effect-pulse .clone-qr-card{animation:qr-card-pulse 2.35s ease-in-out infinite}
.clone-qr-visual .clone-gift-qr{border-radius:0!important;animation:none!important;transform:none!important;filter:none!important;opacity:1!important}
@keyframes wedding-qr-sweep{0%,5%{transform:translate3d(0,-98%,0);opacity:1}30%,70%{opacity:1}95%,100%{transform:translate3d(0,-2%,0);opacity:1}}
/* CSS-only decorations with a bounded particle count controlled by admin. */
.ambient-fireflies i{top:var(--y);width:5px;height:5px;background:#f6d483;border-radius:50%;box-shadow:0 0 8px 2px #e6b34f77;animation:wedding-firefly var(--speed) ease-in-out infinite alternate;animation-delay:var(--delay)}
@keyframes wedding-firefly{0%{transform:translate3d(0,12px,0);opacity:0}30%{opacity:.65}70%{opacity:.25}100%{transform:translate3d(var(--drift),-60px,0);opacity:.8}}
.ambient-bokeh i{top:var(--y);width:calc(var(--size)*3);height:calc(var(--size)*3);border:1px solid #e4c98f4d;background:radial-gradient(circle at 35% 30%,#fff4ce38,#e4b85f0d);border-radius:50%;animation:wedding-bokeh var(--speed) ease-in-out infinite alternate;animation-delay:var(--delay)}
@keyframes wedding-bokeh{0%{opacity:0;transform:translate3d(0,28px,0) scale(.65)}45%{opacity:.55}100%{opacity:.1;transform:translate3d(var(--drift),-100px,0) scale(1.25)}}
.ambient-gold-dust i{width:3px;height:3px;border-radius:50%;background:#e3be65;box-shadow:0 0 5px #e9c67d66;animation:wedding-dust var(--speed) linear infinite;animation-delay:var(--delay)}
@keyframes wedding-dust{0%{opacity:0;transform:translate3d(0,110vh,0)}25%,60%{opacity:.7}100%{opacity:0;transform:translate3d(var(--drift),-4vh,0)}}
.ambient-lanterns i{width:calc(var(--size)*1.1);height:calc(var(--size)*1.4);background:radial-gradient(ellipse at 50% 30%,#f3ce81,#bc35448c);border:1px solid #e5ba6166;border-radius:35%;box-shadow:0 0 8px #edab4c30;animation:wedding-lantern var(--speed) ease-in-out infinite;animation-delay:var(--delay)}
.ambient-lanterns i::before{content:"";position:absolute;top:-3px;left:22%;right:22%;height:3px;background:#d4b065;border-radius:2px}
.ambient-lanterns i::after{content:"";position:absolute;top:100%;left:50%;height:8px;border-left:1px solid #c39a53}
@keyframes wedding-lantern{0%{opacity:0;transform:translate3d(0,110vh,0) rotate(-10deg)}15%,75%{opacity:.6}50%{transform:translate3d(var(--drift),50vh,0) rotate(8deg)}100%{opacity:0;transform:translate3d(0,-5vh,0) rotate(-10deg)}}
html.wedding-tab-hidden .qr-scan-line,html.wedding-tab-hidden .qr-scan-line::before,html.wedding-tab-hidden #wedding-effects i{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){#wedding-effects{display:none!important}.qr-scan-enabled .qr-scan-window{display:none}.qr-scan-enabled .qr-scan-line{animation:none!important}.motdoi-opening-seal::after{animation:none!important}}

@media(prefers-reduced-motion:reduce){.qr-effect-pulse .clone-qr-card{animation:none!important}}

/* Clean frame without heart ornaments. */
.qr-scan-enabled .clone-qr-card{border-color:rgba(188,28,52,.3);box-shadow:0 0 0 1px #e9c27d55}
.clone-gift-section .clone-gift-thanks,.clone-gift-dialog .clone-gift-thanks{font-family:'Be Vietnam Pro',Arial,sans-serif;font-size:17px!important;line-height:1.65;font-weight:500;font-style:italic;max-width:420px;margin:18px auto 24px;padding:0 8px;border:0;color:var(--site-primary,#7e1518);text-align:center}

/* Soft beam edges include the glow, so no solid ends remain. */
.qr-scan-enabled .qr-scan-line::after{filter:drop-shadow(0 0 2px #d3464d55)}
/* Falling hearts use a stable vector silhouette instead of a platform font. */
#wedding-effects.ambient-hearts i{width:var(--size);height:var(--size);background:#c8294e;border-radius:0;-webkit-mask:url('/thiep-moi/assets/heart-petal-v697.svg') center/contain no-repeat;mask:url('/thiep-moi/assets/heart-petal-v697.svg') center/contain no-repeat;animation:wedding-heart-petal var(--speed) linear infinite;animation-delay:var(--delay);opacity:0}
#wedding-effects.ambient-hearts i:nth-child(3n){background:#e894a5}
#wedding-effects.ambient-hearts i:nth-child(4n){background:#a5203d}
#wedding-effects.ambient-hearts i::before,#wedding-effects.ambient-hearts i::after{content:none}
@keyframes wedding-heart-petal{0%{opacity:0;transform:translate3d(0,-5vh,0) rotate(-14deg) scale(.85)}10%{opacity:var(--heart-opacity,.4)}35%{transform:translate3d(var(--drift),35vh,0) rotate(16deg) scale(1)}65%{transform:translate3d(calc(var(--drift)*-.4),70vh,0) rotate(-12deg) scale(.92)}88%{opacity:var(--heart-opacity,.4)}100%{opacity:0;transform:translate3d(calc(var(--drift)*.6),110vh,0) rotate(12deg) scale(.85)}}
/* High-end smooth section reveals with Apple-grade spring cubic-bezier and subtle blur */
html[data-wedding-motion="on"].wedding-reveal-ready .clone-reveal{opacity:0;transform:translate3d(0,28px,0) scale(.982);filter:blur(2px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1),filter .65s ease-out;will-change:opacity,transform,filter}
html[data-wedding-motion="on"].wedding-reveal-ready .clone-reveal.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0);will-change:auto}
html[data-wedding-motion="on"] #music-toggle.is-playing{box-shadow:0 0 0 5px #c9a24b20,0 5px 18px #7e151826}
@media(hover:hover){html[data-wedding-motion="on"] #gallery img{transition:transform .65s cubic-bezier(.16,1,.3,1)}html[data-wedding-motion="on"] #gallery img:hover{transform:scale(1.045)}}
html[data-wedding-motion="on"] main button:active{translate:0 1px}
/* Opening arrives in perspective; the existing open action, names and audio remain intact. */
html[data-wedding-motion="on"] #wedding-opening{perspective:1200px}
html[data-wedding-motion="on"] #wedding-opening:not(.opening-leave) .motdoi-opening-card{animation:wedding-card-arrive .9s cubic-bezier(.18,.7,.2,1) both;transform-origin:50% 80%}
html[data-wedding-motion="on"] #wedding-opening:not(.opening-leave) .motdoi-opening-names{animation:wedding-names-arrive .8s .15s both}
html[data-wedding-motion="on"] #wedding-opening:not(.opening-leave) .motdoi-opening-seal{animation:wedding-seal-halo 3.2s 1s ease-in-out infinite}
html[data-wedding-motion="on"] #wedding-opening.opening-leave{opacity:1;transform:none;transition:none;animation:wedding-opening-fade .94s ease both}
html[data-wedding-motion="on"] #wedding-opening.opening-leave .motdoi-opening-card{animation:wedding-card-open .92s cubic-bezier(.3,.05,.25,1) both;transform-origin:12% 50%}
@keyframes wedding-card-arrive{from{opacity:0;transform:translate3d(0,26px,0) rotateX(8deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes wedding-names-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes wedding-seal-halo{0%,100%{box-shadow:0 0 0 0 #e6c87e00}50%{box-shadow:0 0 0 8px #e6c87e1a,0 0 22px #c9a24b38}}
@keyframes wedding-opening-fade{0%,45%{opacity:1}100%{opacity:0}}
@keyframes wedding-card-open{0%{opacity:1;transform:none}35%{opacity:1;transform:translate3d(0,-12px,20px) rotateY(-9deg) rotateX(3deg)}100%{opacity:0;transform:translate3d(0,-65px,70px) rotateY(-25deg) rotateX(7deg) scale(1.07)}}
html.wedding-tab-hidden #wedding-opening .motdoi-opening-seal{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){html.wedding-reveal-ready .clone-reveal{opacity:1!important;transition:none!important}#wedding-opening,#wedding-opening *{animation:none!important;transition:none!important}}

/* Compact circles stay round even in a narrow mobile flex layout. */
#guestbook-inline-signature .sig-progress{height:auto!important;min-height:72px;padding:18px 58px 18px 18px!important;align-items:center;gap:8px}
#guestbook-inline-signature .sig-progress>[data-p]{width:32px!important;height:32px!important;min-width:32px;flex:0 0 32px!important;aspect-ratio:1;border-radius:50%;font-size:14px;line-height:1;display:grid;place-items:center}
#guestbook-inline-signature .sig-progress>i{flex:0 1 24px;max-width:24px;height:2px;margin:0!important}
#guestbook-inline-signature .sig-progress>button{top:18px!important;width:32px!important;height:32px!important;font-size:24px}
html[data-cloud] #guestbook-open::after{display:none!important;content:none!important}
.sig-dialog .sig-bottom-actions{background:transparent!important;background-image:none!important;box-shadow:none;position:static;padding-bottom:8px}
#sig-clear,#sig-next-1,#sig-next-2{background:transparent!important;background-image:none!important;box-shadow:none!important;border:0!important;color:var(--site-primary,#7e1518)}
#sig-clear{color:#49362f}
/* Disable native image drag/callout without intercepting input elsewhere on the page. */
.sig-placement,.sig-placement img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.sig-placement{touch-action:none;overscroll-behavior:contain}
.sig-placement .sig-photo{pointer-events:none;display:block;transform:none!important;filter:none!important;transition:none!important;animation:none!important}
.sig-placement .sig-drag{pointer-events:none;transition:none!important;animation:none!important;filter:none!important;background:transparent;border:1px dashed #a51c20;padding:0}
.sig-placement.is-dragging{cursor:grabbing}
.sig-placement.is-dragging .sig-drag{border-color:transparent}
/* Keep falling decorations out of the signature editor, especially on touch devices. */
body:has(#guestbook-inline-signature:not([hidden])) #wedding-effects,body:has(#clone-guestbook-modal:not([hidden])) #wedding-effects{visibility:hidden}

/* The complete outer album frame follows the arch, including its paper border. */
#gallery:not([data-gallery-layout]) [data-gallery-item]:first-child,#gallery[data-gallery-layout="template"] [data-gallery-item]:first-child{border-radius:130px 130px 14px 14px!important;overflow:hidden}
#gallery:not([data-gallery-layout]) [data-gallery-item]:first-child>div,#gallery[data-gallery-layout="template"] [data-gallery-item]:first-child>div{border-radius:124px 124px 8px 8px!important;overflow:hidden}
/* Match the compact filled buttons in the supplied signature reference. */
#guestbook-inline-signature .sig-bottom-actions{justify-content:flex-start;gap:12px;flex-wrap:wrap;background:transparent!important}
#guestbook-inline-signature .sig-bottom-actions .sig-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 1 auto!important;min-width:86px;min-height:44px;padding:11px 16px;border-radius:12px;font-size:14px;font-weight:500;line-height:1.4}
#guestbook-inline-signature #sig-clear,#guestbook-inline-signature #sig-back-2,#guestbook-inline-signature #sig-back-3{background:#fff!important;color:#49362f!important;border:1px solid #e8ddd7!important;box-shadow:none!important}
#guestbook-inline-signature #sig-next-1,#guestbook-inline-signature #sig-next-2,#guestbook-inline-signature #gb-save{background:var(--site-primary,#b71f24)!important;color:#fff8ea!important;border:1px solid var(--site-primary,#b71f24)!important;box-shadow:0 8px 18px rgba(126,21,24,.16)!important}
#guestbook-inline-signature .sig-btn.light:hover{background:#fffaf5!important;border-color:rgba(126,21,24,.28)!important}
#guestbook-inline-signature .sig-btn.red:hover{filter:brightness(1.04)}
.signature-action-icon{display:block;flex:0 0 20px;vertical-align:middle}
/* Frame dimensions depend only on the viewport, never text, font or loaded images. */
#wedding-opening .motdoi-opening-card{box-sizing:border-box!important;width:min(360px,calc(100vw - 24px))!important;min-width:0!important;height:min(650px,calc(100svh - 24px))!important;min-height:0!important;max-height:none!important;flex:none!important;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;transition:none!important}
#wedding-opening .motdoi-opening-inner{box-sizing:border-box;min-height:100%!important;height:auto;flex-shrink:0}
#wedding-opening .motdoi-opening-inner>img{flex-shrink:0}
#wedding-opening .motdoi-opening-knot{width:100px!important;height:100px!important}
html[data-wedding-motion="on"] #wedding-opening:not(.opening-leave) .motdoi-opening-card{animation:wedding-card-unveil .9s ease both}
html[data-wedding-motion="on"] #wedding-opening:not(.opening-leave) .motdoi-opening-card::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,#fff8dc55 48%,transparent 65%);animation:wedding-paper-light 1.25s .1s ease-out both}
html[data-wedding-motion="on"] #wedding-opening.opening-leave .motdoi-opening-card{animation:wedding-card-unveil-out .92s ease both}
@keyframes wedding-card-unveil{from{opacity:0}to{opacity:1}}
@keyframes wedding-paper-light{from{opacity:0;transform:translateX(-100%)}30%{opacity:1}to{opacity:0;transform:translateX(100%)}}
@keyframes wedding-card-unveil-out{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){#wedding-opening .motdoi-opening-card::before{display:none!important}}

/* Shared font roles cover the invitation, dialogs and opening consistently. */
:root{--wedding-script-font:'Great Vibes',cursive;--wedding-heading-font:'Cormorant Garamond',serif;--wedding-body-font:'Be Vietnam Pro',sans-serif;--font-great-vibes:'Great Vibes';--font-cormorant:'Cormorant Garamond';--font-be-vietnam:'Be Vietnam Pro';--font-inter:'Inter'}
body{font-family:var(--wedding-body-font)!important}
.font-be-vietnam,.motdoi-opening-eyebrow,.motdoi-opening-hint,.opening-paper-label,.sig-dialog,.rsvp-dialog{font-family:var(--wedding-body-font)!important}
.font-great-vibes,#wedding-opening .motdoi-opening-name,.clone-gift-dialog h3{font-family:var(--wedding-script-font)!important;font-weight:400;font-style:normal}
.font-cormorant,#wedding-opening .motdoi-opening-guest,#wedding-opening .motdoi-opening-amp,.opening-date,.clone-gift-section h2,.gift-account h4,.clone-schedule-event h3{font-family:var(--wedding-heading-font)!important}
#wedding-opening .motdoi-opening-names{width:100%;flex-shrink:0}
/* The overlay and card use the same viewport allowance; scroll long text inside the border. */
#wedding-opening.motdoi-opening{padding:12px!important;overflow:hidden}
#wedding-opening .motdoi-opening-card{height:min(650px,calc(100svh - 24px))!important;overflow:hidden;scrollbar-gutter:auto;padding:11px}
#wedding-opening .motdoi-opening-inner{height:100%!important;min-height:0!important;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain}
#wedding-opening .motdoi-opening-inner::-webkit-scrollbar{display:none}
#wedding-opening .motdoi-opening-inner>*{flex-shrink:0}
#wedding-opening .motdoi-opening-card::before{position:absolute;inset:0}

/* v6.9.11: lock the document on iOS; only the paper content can scroll. */
#wedding-opening.motdoi-opening{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;box-sizing:border-box!important;transform:none;align-items:center;justify-content:center;overflow:hidden!important}
#wedding-opening .motdoi-opening-card{margin:0!important;max-width:100%!important}
#wedding-opening .motdoi-opening-inner{overflow-anchor:none;-webkit-overflow-scrolling:touch;touch-action:pan-y}

@keyframes opening-content-reveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){html.opening-ready #wedding-opening .motdoi-opening-inner{animation:none}}



/* v6.9.12: content stays visible; tilt only affects the paper, not its layout. */
#wedding-opening{perspective:880px!important;perspective-origin:50% 46%!important}
#wedding-opening .motdoi-opening-card{transform:translate3d(var(--opening-tx,0px),var(--opening-ty,0px),24px) rotateX(var(--opening-rx,0deg)) rotateY(var(--opening-ry,0deg)) scale(1.018);transform-origin:center;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .11s cubic-bezier(.2,.72,.25,1),box-shadow .16s ease-out!important;box-shadow:var(--opening-shadow-x,0px) var(--opening-shadow-y,28px) 62px rgba(0,0,0,.34),4px 4px 0 #dbc69f,7px 7px 0 #a78357}
#wedding-opening .opening-motion-toggle{position:absolute;right:20px;bottom:16px;z-index:5;background:#fff8e8e8;color:#7e1518;border:1px solid #c9a24b66;border-radius:20px;padding:8px 12px;font:400 11px/1.3 var(--wedding-body-font);cursor:pointer}
html[data-wedding-motion="on"] #wedding-opening.opening-leave{animation:opening-scene-exit .94s ease both}
html[data-wedding-motion="on"] #wedding-opening.opening-leave .motdoi-opening-card{animation:opening-paper-turn .92s cubic-bezier(.4,0,.2,1) both;transform-origin:8% 50%;pointer-events:none}
@keyframes opening-paper-turn{0%{transform:translateZ(24px) rotateY(0deg) scale(1.018);opacity:1}34%{transform:translate3d(-2%,0,115px) rotateY(-30deg) rotateX(3deg) scale(1.035);opacity:1}100%{transform:translate3d(-18%,0,35px) rotateY(-118deg) rotateX(5deg) scale(.98);opacity:0}}
@keyframes opening-scene-exit{0%,40%{opacity:1}100%{opacity:0}}
html[data-wedding-motion="off"] #wedding-opening .motdoi-opening-card,html[data-wedding-motion="minimal"] #wedding-opening .motdoi-opening-card{transform:none;box-shadow:0 18px 45px #0005,3px 3px 0 #dbc69f,5px 5px 0 #a78357}
@media(prefers-reduced-motion:reduce){#wedding-opening .motdoi-opening-card{transform:none!important;animation:none!important;transition:none!important}.opening-motion-toggle{display:none!important}}

/* Show the full invitation immediately, without an initial fade from blank. */
html[data-wedding-motion="on"] #wedding-opening:not(.opening-leave) .motdoi-opening-card,html[data-wedding-motion="on"] #wedding-opening:not(.opening-leave) .motdoi-opening-names{animation:none}

/* Timeline hours follow the selected heading face, including uploaded fonts. */
.clone-schedule-event time{font-family:var(--wedding-heading-font)!important}

/* ==========================================================================
   SPECTACULAR WEDDING MOTION & ANIMATION SUITE (ĐỨC TÀI & PHƯƠNG NGA)
   ========================================================================== */

/* 1. STAGGERED CASCADING DELAYS (Hiệu ứng xuất hiện so le nhịp nhàng) */
html[data-wedding-motion="on"].wedding-reveal-ready .grid.grid-cols-4 > div:nth-child(1){transition-delay:.04s}
html[data-wedding-motion="on"].wedding-reveal-ready .grid.grid-cols-4 > div:nth-child(2){transition-delay:.12s}
html[data-wedding-motion="on"].wedding-reveal-ready .grid.grid-cols-4 > div:nth-child(3){transition-delay:.20s}
html[data-wedding-motion="on"].wedding-reveal-ready .grid.grid-cols-4 > div:nth-child(4){transition-delay:.28s}

html[data-wedding-motion="on"].wedding-reveal-ready #couple .grid-cols-2 > div:nth-child(1){transition-delay:.06s}
html[data-wedding-motion="on"].wedding-reveal-ready #couple .grid-cols-2 > div:nth-child(2){transition-delay:.20s}

html[data-wedding-motion="on"].wedding-reveal-ready #timeline .space-y-10 > div:nth-child(1){transition-delay:.06s}
html[data-wedding-motion="on"].wedding-reveal-ready #timeline .space-y-10 > div:nth-child(2){transition-delay:.15s}
html[data-wedding-motion="on"].wedding-reveal-ready #timeline .space-y-10 > div:nth-child(3){transition-delay:.24s}
html[data-wedding-motion="on"].wedding-reveal-ready #timeline .space-y-10 > div:nth-child(4){transition-delay:.33s}

html[data-wedding-motion="on"].wedding-reveal-ready #gallery [data-gallery-item]:nth-child(1){transition-delay:.04s}
html[data-wedding-motion="on"].wedding-reveal-ready #gallery [data-gallery-item]:nth-child(2){transition-delay:.10s}
html[data-wedding-motion="on"].wedding-reveal-ready #gallery [data-gallery-item]:nth-child(3){transition-delay:.16s}
html[data-wedding-motion="on"].wedding-reveal-ready #gallery [data-gallery-item]:nth-child(4){transition-delay:.22s}
html[data-wedding-motion="on"].wedding-reveal-ready #gallery [data-gallery-item]:nth-child(5){transition-delay:.28s}
html[data-wedding-motion="on"].wedding-reveal-ready #gallery [data-gallery-item]:nth-child(6){transition-delay:.34s}
html[data-wedding-motion="on"].wedding-reveal-ready #gallery [data-gallery-item]:nth-child(7){transition-delay:.40s}
html[data-wedding-motion="on"].wedding-reveal-ready #gallery [data-gallery-item]:nth-child(8){transition-delay:.46s}
html[data-wedding-motion="on"].wedding-reveal-ready #gallery [data-gallery-item]:nth-child(9){transition-delay:.52s}

/* 2. MÀN MỞ THIỆP: Hào quang Song Hỷ phát sáng & Nhịp thở hoàng gia */
html[data-wedding-motion="on"] .motdoi-opening-seal{position:relative;animation:seal-breathe 3.2s ease-in-out infinite;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
@keyframes seal-breathe{0%,100%{transform:scale(1);box-shadow:0 0 0 6px rgba(201,162,75,.22),0 12px 24px rgba(52,6,7,.4)}50%{transform:scale(1.038);box-shadow:0 0 0 10px rgba(201,162,75,.38),0 0 26px rgba(201,162,75,.45),0 16px 34px rgba(52,6,7,.55)}}
html[data-wedding-motion="on"] .motdoi-opening-seal::after{content:"";position:absolute;inset:-10px;border:1.5px solid rgba(201,162,75,.85);border-radius:50%;pointer-events:none;animation:wedding-seal-halo-pulse 2.6s ease-out infinite}
@keyframes wedding-seal-halo-pulse{0%{transform:scale(.92);opacity:.95;box-shadow:0 0 0 0 rgba(230,200,126,.55)}65%{transform:scale(1.24);opacity:0;box-shadow:0 0 20px 6px rgba(201,162,75,.3)}100%{transform:scale(1.28);opacity:0}}
html[data-wedding-motion="on"] .motdoi-opening-seal:hover{transform:scale(1.08);box-shadow:0 0 0 8px rgba(201,162,75,.4),0 20px 40px rgba(126,21,24,.65)}
html[data-wedding-motion="on"] .motdoi-opening-seal:active{transform:scale(.95)}
html[data-wedding-motion="on"] .motdoi-opening-knot{animation:natural-knot-sway 4.8s cubic-bezier(.44,.05,.55,.95) infinite}
@keyframes natural-knot-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* 3. HERO & ĐÈN LỒNG: Trôi bồng bềnh đa chiều & Ruy băng phát sáng */
html[data-wedding-motion="on"] #home img[src*="lantern"]{animation:natural-lantern-sway 6.8s cubic-bezier(.45,.05,.55,.95) infinite alternate;will-change:transform}
html[data-wedding-motion="on"] #home img[src*="lantern"]:last-of-type{animation-delay:-3.4s}
@keyframes natural-lantern-sway{0%{transform:translate3d(0,0,0) rotate(0deg)}40%{transform:translate3d(3px,11px,0) rotate(2deg)}75%{transform:translate3d(-2px,7px,0) rotate(-1.5deg)}100%{transform:translate3d(1px,12px,0) rotate(1deg)}}

html[data-wedding-motion="on"] #home .relative.mt-7 > .rounded-xl{transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s ease;box-shadow:0 24px 50px rgba(93,15,17,.24),0 0 0 1px rgba(201,162,75,.45)}
@media(hover:hover){
  html[data-wedding-motion="on"] #home .relative.mt-7:hover > .rounded-xl{transform:translateY(-4px) scale(1.015);box-shadow:0 32px 64px rgba(93,15,17,.32),0 0 0 1.5px rgba(230,200,126,.7)}
}
html[data-wedding-motion="on"] #home .relative.mt-7 .rounded-full{animation:ribbon-glow 3.8s ease-in-out infinite alternate}
@keyframes ribbon-glow{0%{box-shadow:0 10px 22px rgba(93,15,17,.4),inset 0 0 0 1px rgba(230,200,126,.5)}100%{box-shadow:0 14px 28px rgba(93,15,17,.55),inset 0 0 0 1.5px rgba(246,237,218,.85),0 0 18px rgba(201,162,75,.4)}}

/* 4. TIÊU ĐỀ THƯ PHÁP: Giữ nguyên màu sắc sang trọng & chống cắt dấu/chữ (Anti-clipping for Cursive) */
.font-great-vibes,h2.font-great-vibes{
  line-height:1.28!important;
  overflow:visible!important;
  padding-top:6px!important;
  padding-bottom:4px!important;
}

/* 5. ĐỒNG HỒ ĐẾM NGƯỢC: Nhịp thở sống động và tương tác mượt */
html[data-wedding-motion="on"] .grid.grid-cols-4 > div{transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s ease,border-color .32s ease;will-change:transform}
@media(hover:hover){
  html[data-wedding-motion="on"] .grid.grid-cols-4 > div:hover{transform:translateY(-2.5px) scale(1.025);box-shadow:0 10px 22px rgba(126,21,24,.14),0 0 0 1px rgba(201,162,75,.65)}
}
html[data-wedding-motion="on"] .grid.grid-cols-4 > div:nth-child(4){animation:countdown-sec-pulse 1s ease-in-out infinite}
@keyframes countdown-sec-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}

/* 6. CHÂN DUNG CÔ DÂU & CHÚ RỂ: Zoom chiều sâu Ken Burns & Viền ánh kim */
html[data-wedding-motion="on"] #couple article{transition:transform .45s cubic-bezier(.16,1,.3,1)}
html[data-wedding-motion="on"] #couple article .relative.aspect-\[4\/5\]{overflow:hidden;transition:border-color .4s ease,box-shadow .4s ease}
html[data-wedding-motion="on"] #couple article img{transition:transform 1.1s cubic-bezier(.16,1,.3,1);will-change:transform}
@media(hover:hover){
  html[data-wedding-motion="on"] #couple article:hover{transform:translateY(-3.5px)}
  html[data-wedding-motion="on"] #couple article:hover .relative.aspect-\[4\/5\]{border-color:rgba(230,200,126,.9);box-shadow:0 22px 46px rgba(34,3,5,.42)}
  html[data-wedding-motion="on"] #couple article:hover img{transform:scale(1.055)}
}

/* 7. DÒNG THỜI GIAN LỊCH TRÌNH: Tia sáng vàng chạy dọc đường line */
html[data-wedding-motion="on"] #timeline .relative.pl-\[58px\] > .absolute.bottom-3{overflow:hidden}
html[data-wedding-motion="on"] #timeline .relative.pl-\[58px\] > .absolute.bottom-3::after{
  content:"";
  position:absolute;
  inset:0;
  height:75px;
  background:linear-gradient(to bottom,transparent,#e6c87e,#fff,transparent);
  animation:timeline-beam 3.5s ease-in-out infinite;
}
@keyframes timeline-beam{0%{transform:translateY(-100%)}100%{transform:translateY(420px)}}

html[data-wedding-motion="on"] #timeline .relative.pb-7 .rounded-full{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
@media(hover:hover){
  html[data-wedding-motion="on"] #timeline .relative.pb-7:hover .rounded-full{transform:scale(1.14);box-shadow:0 0 0 6px rgba(201,162,75,.25),0 8px 22px rgba(126,21,24,.28)}
}

/* 8. NGÀY HÔN LỄ TRONG LỊCH (18/10): Nhịp đập trái tim & Vòng sáng */
html[data-wedding-motion="on"] .ta-calendar-heart-major{animation:heart-major-pulse 2s ease-in-out infinite}
@keyframes heart-major-pulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 transparent)}50%{transform:scale(1.1);filter:drop-shadow(0 0 10px rgba(201,162,75,.75))}}

/* 9. THIỆP MỜI: Nút chuyển Nhà Trai / Gái & Nút xem bản đồ */
html[data-wedding-motion="on"] [data-side]{transition:transform .25s cubic-bezier(.16,1,.3,1),background-color .3s ease,color .3s ease,box-shadow .3s ease}
html[data-wedding-motion="on"] [data-side]:active{transform:scale(.94)}
html[data-wedding-motion="on"] a[href*="maps"]{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease,background-color .25s ease}
@media(hover:hover){
  html[data-wedding-motion="on"] a[href*="maps"]:hover{transform:translateY(-1.5px);box-shadow:0 6px 16px rgba(163,30,35,.24)}
}
html[data-wedding-motion="on"] a[href*="maps"]:active{transform:translateY(1px) scale(.97)}

/* 10. CHUYỆN CHÚNG MÌNH: Polaroid 4 mùa nghiêng tự nhiên & nhấc nhẹ */
html[data-wedding-motion="on"] [data-story-row] .w-\[118px\]{transition:transform .65s cubic-bezier(.16,1,.3,1),box-shadow .65s ease;will-change:transform}
@media(hover:hover){
  html[data-wedding-motion="on"] [data-story-row] .w-\[118px\]:hover{transform:translateY(-5px) rotate(0deg) scale(1.045)!important;box-shadow:0 20px 40px rgba(0,0,0,.42)!important}
}

/* 11. ALBUM HỶ SỰ: Lướt nhẹ, Zoom và Vệt sáng phản chiếu */
html[data-wedding-motion="on"] #gallery [data-gallery-item]{position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}
html[data-wedding-motion="on"] #gallery [data-gallery-item] img{transition:transform .75s cubic-bezier(.16,1,.3,1);will-change:transform}
html[data-wedding-motion="on"] #gallery [data-gallery-item]::after{
  content:"";
  position:absolute;
  inset:-50%;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-150%) rotate(25deg);
  transition:transform .85s ease;
  pointer-events:none;
}
@media(hover:hover){
  html[data-wedding-motion="on"] #gallery [data-gallery-item]:hover{transform:translateY(-3.5px);box-shadow:0 16px 32px rgba(126,21,24,.2),0 0 0 1px rgba(201,162,75,.7)}
  html[data-wedding-motion="on"] #gallery [data-gallery-item]:hover img{transform:scale(1.05)}
  html[data-wedding-motion="on"] #gallery [data-gallery-item]:hover::after{transform:translateX(150%) rotate(25deg)}
}

/* 12. SỔ LƯU BÚT: Nút "Ký tên & gửi lời chúc" lướt dải sáng Liquid Gold */
html[data-wedding-motion="on"] #guestbook-open{position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
html[data-wedding-motion="on"] #guestbook-open::after{content:"";position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 35%,rgba(255,248,220,.4) 50%,transparent 65%);transform:translateX(-150%) rotate(25deg);animation:button-liquid-shimmer 4.5s cubic-bezier(.4,0,.2,1) infinite;pointer-events:none}
@keyframes button-liquid-shimmer{0%,70%{transform:translateX(-150%) rotate(25deg)}100%{transform:translateX(150%) rotate(25deg)}}
html[data-wedding-motion="on"] #guestbook-open:active{transform:scale(.96)}

/* 13. XÁC NHẬN THAM DỰ (RSVP): Phản hồi chạm mượt */
html[data-wedding-motion="on"] [data-rsvp]{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease}
@media(hover:hover){
  html[data-wedding-motion="on"] [data-rsvp]:hover{transform:translateY(-2.5px);box-shadow:0 10px 24px rgba(126,21,24,.14)}
}
html[data-wedding-motion="on"] [data-rsvp]:active{transform:scale(.96)}

/* 14. NÚT PHÁT NHẠC: Xoay đĩa than & Vòng sóng âm lan tỏa */
html[data-wedding-motion="on"] #music-toggle{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
html[data-wedding-motion="on"] #music-toggle.is-playing{animation:music-vinyl-rotate 6s linear infinite;box-shadow:0 0 0 4px rgba(201,162,75,.28),0 0 0 9px rgba(201,162,75,.12),0 10px 26px rgba(126,21,24,.38)}
@keyframes music-vinyl-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* 15. HIỆU ỨNG CHẠM / CLICK: Trái tim bay bổng lãng mạn (Romantic Floating Heart Tap) */
.wedding-tap-heart{position:fixed;pointer-events:none;z-index:99999;transform:translate(-50%,-50%) scale(.3) rotate(var(--rot,-10deg));animation:wedding-heart-tap-bloom .75s cubic-bezier(.16,1,.3,1) forwards;filter:drop-shadow(0 3px 8px rgba(200,41,78,.45));will-change:transform,opacity}
.wedding-tap-heart svg{display:block;width:100%;height:100%}
@keyframes wedding-heart-tap-bloom{0%{transform:translate(-50%,-50%) scale(.3) rotate(var(--rot,-10deg));opacity:1}50%{opacity:.96;transform:translate(calc(-50% + var(--drift,4px)),calc(-50% - 30px)) scale(1.18) rotate(calc(var(--rot,-10deg)*-.5))}100%{transform:translate(calc(-50% + calc(var(--drift,4px)*1.6)),calc(-50% - 60px)) scale(.8) rotate(calc(var(--rot,-10deg)*1.2));opacity:0}}

/* 16. ĐÔI BƯỚM UYÊN ƯƠNG TƯƠNG TÁC (Interactive Wedding Butterflies) */
.wedding-butterflies-layer{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:9990;
  overflow:hidden;
  contain:layout paint style;
  opacity:0;
  transition:opacity 1s ease;
}
html[data-wedding-motion="on"]:not(.wedding-opening-lock) .wedding-butterflies-layer{
  opacity:1;
}

.wedding-butterfly{
  position:fixed;
  top:0;
  left:0;
  width:44px;
  height:42px;
  margin-top:-21px;
  margin-left:-22px;
  pointer-events:auto;
  cursor:pointer;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  z-index:9991;
  will-change:transform;
  transform-style:preserve-3d;
  filter:drop-shadow(0 6px 14px rgba(93,15,17,.32));
  transition:filter .4s ease;
  user-select:none;
  -webkit-user-select:none;
}

.wedding-butterfly.is-resting{
  filter:drop-shadow(0 2px 5px rgba(93,15,17,.42));
}

.butterfly-shadow{
  position:absolute;
  bottom:2px;
  left:50%;
  width:26px;
  height:8px;
  margin-left:-13px;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(62,43,34,.36) 0%, transparent 72%);
  pointer-events:none;
  transition:transform .4s ease, opacity .4s ease;
}
.wedding-butterfly.is-resting .butterfly-shadow{
  transform:scale(.85) translateY(1px);
  opacity:.65;
}

.butterfly-3d{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  transform-style:preserve-3d;
  perspective:500px;
}

.butterfly-wing{
  position:absolute;
  top:2px;
  width:22px;
  height:38px;
  transform-style:preserve-3d;
  will-change:transform;
}

.butterfly-wing.wing-left{
  right:50%;
  margin-right:-2px;
  transform-origin:right 45%;
  animation:butterfly-wing-l .15s ease-in-out infinite alternate;
}

.butterfly-wing.wing-right{
  left:50%;
  margin-left:-2px;
  transform-origin:left 45%;
  animation:butterfly-wing-r .15s ease-in-out infinite alternate;
}

.butterfly-body{
  position:relative;
  z-index:3;
  width:10px;
  height:34px;
  margin:0 auto;
  pointer-events:none;
}

.butterfly-wing svg,
.butterfly-body svg{
  display:block;
  width:100%;
  height:100%;
}

/* Cánh vỗ bay tự nhiên */
@keyframes butterfly-wing-l{
  0%{transform:rotateY(0deg) rotateZ(0deg)}
  100%{transform:rotateY(68deg) rotateZ(-4deg)}
}
@keyframes butterfly-wing-r{
  0%{transform:rotateY(0deg) rotateZ(0deg)}
  100%{transform:rotateY(-68deg) rotateZ(4deg)}
}

/* Khi bướm đậu nghỉ: nhịp thở chậm rãi, cánh khẽ khép mở dịu dàng */
.wedding-butterfly.is-resting .butterfly-wing.wing-left{
  animation:butterfly-wing-l-rest 2.2s cubic-bezier(.4,0,.2,1) infinite alternate;
}
.wedding-butterfly.is-resting .butterfly-wing.wing-right{
  animation:butterfly-wing-r-rest 2.2s cubic-bezier(.4,0,.2,1) infinite alternate;
}
@keyframes butterfly-wing-l-rest{
  0%{transform:rotateY(55deg) rotateZ(-2deg)}
  60%{transform:rotateY(68deg) rotateZ(-4deg)}
  100%{transform:rotateY(25deg) rotateZ(0deg)}
}
@keyframes butterfly-wing-r-rest{
  0%{transform:rotateY(-55deg) rotateZ(2deg)}
  60%{transform:rotateY(-68deg) rotateZ(4deg)}
  100%{transform:rotateY(-25deg) rotateZ(0deg)}
}

/* Khi bướm giật mình (startled): đập cánh siêu tốc để vút bay */
.wedding-butterfly.is-startled .butterfly-wing.wing-left{
  animation:butterfly-wing-l-fast .072s ease-in-out infinite alternate;
}
.wedding-butterfly.is-startled .butterfly-wing.wing-right{
  animation:butterfly-wing-r-fast .072s ease-in-out infinite alternate;
}
@keyframes butterfly-wing-l-fast{
  0%{transform:rotateY(-10deg)}
  100%{transform:rotateY(78deg)}
}
@keyframes butterfly-wing-r-fast{
  0%{transform:rotateY(10deg)}
  100%{transform:rotateY(-78deg)}
}

/* Hạt lấp lánh khi bướm bị chạm */
.butterfly-sparkle{
  position:fixed;
  pointer-events:none;
  z-index:99999;
  transform:translate(-50%,-50%);
  border-radius:50%;
  animation:butterfly-sparkle-fade .7s cubic-bezier(.1,1,.3,1) forwards;
}
@keyframes butterfly-sparkle-fade{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,-25px))) scale(.2)}
}

/* 17. TRỢ NĂNG: Tự động vô hiệu hóa nếu bật giảm chuyển động */
@media(prefers-reduced-motion:reduce){
  html[data-wedding-motion="on"].wedding-reveal-ready .clone-reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  #music-toggle.is-playing,#guestbook-open::after,.motdoi-opening-seal::after,#home img[src*="lantern"],.motdoi-opening-knot,.ta-calendar-heart-major,.grid.grid-cols-4 > div:nth-child(4),#timeline .relative.pl-\[58px\] > .absolute.bottom-3::after,.wedding-butterflies-layer{animation:none!important;display:none!important}
}