.template25-book-stage{perspective:2200px;perspective-origin:50%;container-type:inline-size}.template25-opening-title{white-space:nowrap!important;text-align:center!important;font-size:clamp(14px,5.5cqw,24px)!important;line-height:1.5!important}.template25-book-cover{will-change:transform, opacity, filter;background-color:#240e14;box-shadow:0 10px 50px #000000b3}.template25-book-spine-shadow{pointer-events:none;z-index:25;background:linear-gradient(90deg,#00000073 0%,#0003 40%,#0000000d 75%,#0000 100%);width:28px;position:absolute;top:0;bottom:0;left:0}.template25-book-inner-shadow{pointer-events:none;z-index:20;background:linear-gradient(90deg,#00000059 0%,#0000001a 60%,#0000 100%);width:24px;position:absolute;top:0;bottom:0;left:0}.opening25-shimmer:after{content:"";background:linear-gradient(90deg,#0000,#ffffffbf,#0000);width:20%;animation:3.5s ease-in-out 1.2s infinite opening25-shimmer;position:absolute;inset:-60% auto -60% -36%;transform:skew(-20deg)}@keyframes opening25-shimmer{0%,55%{opacity:0;left:-40%}65%{opacity:.95}85%,to{opacity:0;left:125%}}@keyframes opening25-pulse-glow{0%,to{box-shadow:0 0 15px #e9b1b859,0 0 30px #fde0d733}50%{box-shadow:0 0 25px #e9b1b8a6,0 0 50px #fde0d773}}.template25-glow-btn{animation:3.8s ease-in-out infinite opening25-pulse-glow}@media (prefers-reduced-motion:reduce){.opening25-shimmer:after,.template25-glow-btn{animation:none}}@keyframes template25-pill-shimmer{0%{opacity:0;transform:translate(-120%)}20%{opacity:.8}50%{opacity:.8;transform:translate(120%)}60%,to{opacity:0;transform:translate(120%)}}@media (prefers-reduced-motion:reduce){.template25-pill-shimmer{animation:none}}@keyframes template25-sparkle-twinkle{0%,to{opacity:.15;transform:scale(.8)translateY(0)}50%{opacity:.9;transform:scale(1.3)translateY(-4px)}}.template25-sparkle-dot{will-change:transform, opacity;animation:3.2s ease-in-out infinite template25-sparkle-twinkle}@media (prefers-reduced-motion:reduce){.template25-sparkle-dot{opacity:.4;animation:none}}

/* Two-stage opening, matching the production portrait and Khmer letter. */
#openingScreen{z-index:60}
#openingLetter{opacity:.85;filter:blur(2.5px);transform:scale(.98);transition:opacity 1.2s ease,filter 1.2s ease,transform 1.8s cubic-bezier(.22,1,.36,1)}
#openingLetterContent>header,#openingLetterContent>div,#openingLetterContent>section{opacity:0;transition:opacity .8s ease,transform .9s cubic-bezier(.22,1,.36,1)}
#openingLetterContent>header{transform:translateY(-14px)}
#openingLetterContent>div:first-of-type{transform:scale(.92)}
#openingLetterContent>section,#openingLetterContent>div:last-child{transform:translateY(16px)}
#openingStage.is-revealing #openingLetter{opacity:1;filter:blur(0);transform:none}
#openingStage.is-revealing #openingLetterContent>*{opacity:1;transform:none;transition-delay:.55s}
#openingStage.is-revealing #openingLetterContent>div:first-of-type{transition-delay:.7s}
#openingStage.is-revealing #openingLetterContent>section{transition-delay:.85s}
#openingStage.is-revealing #openingLetterContent>div:last-child{transition-delay:1s}
#openingCover{outline-offset:-5px}
#openingStage.is-revealing #openingCover{pointer-events:none;animation:cover-reveal 1.9s cubic-bezier(.22,1,.36,1) both}
#openingStage.is-revealing #openingFlash{animation:cover-flash 1.4s ease both}
#openingCover .will-change-transform{animation:opening-pill-float 3s ease-in-out infinite}
#openingLetter img[alt="Wedding Monogram"]{animation:opening-monogram-float 4s ease-in-out infinite}
#letterSparkles{position:absolute;inset:0;pointer-events:none;z-index:15;overflow:hidden}
#letterSparkles i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff0d6;box-shadow:0 0 8px #fde3a7;animation:template25-sparkle-twinkle 3.2s ease-in-out infinite}
#openingScreen.is-entering{pointer-events:none;animation:letter-exit .85s ease both}
#invitationShell.is-entering #invitationMain{animation:invitation-enter 1.1s cubic-bezier(.22,1,.36,1) both}
@keyframes cover-reveal{0%{opacity:1;transform:scale(1)}35%{opacity:1;transform:scale(1.018)}100%{opacity:0;transform:scale(1.045)}}
@keyframes cover-flash{0%{opacity:0}40%{opacity:.3}100%{opacity:0}}
@keyframes opening-pill-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes opening-monogram-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes letter-exit{to{opacity:0;filter:blur(5px);transform:scale(1.06)}}
@keyframes invitation-enter{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#openingLetter,#openingLetterContent>*{transition:none!important}#openingStage.is-revealing #openingCover{opacity:0}#openingScreen.is-entering{opacity:0}}