html.invitation-locked,html.invitation-locked body{overflow:hidden}
.invitation-intro{position:fixed;inset:0;z-index:10000;overflow:hidden;color:#455752;perspective:1600px;pointer-events:auto;transition:opacity .3s ease}
.invitation-intro[hidden]{display:none}
.invitation-scene{position:absolute;inset:0;width:100%;height:100%;perspective:1600px}
.invitation-paper-front,.invitation-paper-flap{position:absolute;inset:0;background-image:url('envelope-paper-v2.png');background-size:100% 100%;background-repeat:no-repeat}
/* Independent photographic layers expose the actual page through the flap opening. */
.invitation-paper-front{z-index:1;clip-path:polygon(0 13%,50% 51%,100% 13%,100% 100%,0 100%);transition:opacity .65s ease .85s}
.invitation-paper-flap{z-index:2;clip-path:polygon(0 0,100% 0,100% 13%,50% 51%,0 13%);transform-origin:50% 13%;transform:rotateX(0deg);transition:transform 1.35s cubic-bezier(.3,.05,.2,1),opacity .4s ease 1s;backface-visibility:hidden}
.invitation-wax{position:absolute;left:50%;top:51%;z-index:3;width:clamp(120px,34vw,190px);height:auto;aspect-ratio:1;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 5px 6px #28352845);transition:opacity .3s ease,transform .5s ease}
.invitation-open{position:absolute;inset:0;z-index:5;border:0;background:transparent;cursor:pointer}
.invitation-open:focus{outline:none}.invitation-intro.keyboard-focus .invitation-open:focus-visible{outline:2px solid #fff;outline-offset:-8px}
.invitation-caption{position:absolute;z-index:6;bottom:max(4%,20px);left:50%;transform:translateX(-50%);white-space:nowrap;font:10px 'Manrope',Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:12px 18px;border-radius:30px;background:#fbf9f6df;transition:opacity .2s}
.invitation-skip{position:absolute;right:20px;top:20px;z-index:7;border:1px solid #66787555;border-radius:30px;background:#fbf9f6df;color:#455752;padding:12px 18px;font:11px 'Manrope',Arial,sans-serif;cursor:pointer;transition:opacity .2s}
.invitation-intro.is-opening .invitation-wax{opacity:0;transform:translate(-50%,-50%) scale(.94)}
.invitation-intro.is-opening .invitation-caption,.invitation-intro.is-opening .invitation-skip{opacity:0;pointer-events:none}
.invitation-intro.flap-open .invitation-paper-flap{transform:rotateX(112deg);opacity:0}
.invitation-intro.flap-open .invitation-paper-front{opacity:0}
.invitation-intro.is-finished{opacity:0;pointer-events:none}
@media(max-width:600px){.invitation-skip{right:14px;top:14px}.invitation-caption{font-size:9px;letter-spacing:.08em}}
@media(prefers-reduced-motion:reduce){.invitation-intro,.invitation-intro *{transition:none!important}}

.invitation-rendered-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:4;pointer-events:none;opacity:0}
.invitation-rendered-film.is-ready{opacity:1}
.invitation-intro.has-film .invitation-paper-front,.invitation-intro.has-film .invitation-paper-flap,.invitation-intro.has-film .invitation-wax{visibility:hidden}

/* Fallback: the seal is a child of the hinged flap and keeps its contact shadow. */
.invitation-flap-group{position:absolute;inset:0;z-index:2;transform-origin:50% 13%;transition:transform 1.35s cubic-bezier(.3,.05,.2,1),opacity .4s ease 1s;backface-visibility:hidden}
.invitation-flap-group .invitation-paper-flap{transform:none!important;transition:none;opacity:1!important}
.invitation-flap-group .invitation-wax{filter:drop-shadow(1px 5px 5px #2835288f);transition:none;opacity:1!important;transform:translate(-50%,-50%)!important}
.invitation-intro.flap-open .invitation-flap-group{transform:rotateX(112deg);opacity:0}
.invitation-intro.has-film .invitation-flap-group{visibility:hidden}

/* Only lift the flap slightly; reveal the page before exposing its upper face. */
.invitation-flap-group{transition:transform .9s cubic-bezier(.3,.05,.2,1),opacity .65s ease .35s}
.invitation-intro.flap-open .invitation-flap-group{transform:rotateX(28deg);opacity:0}
.invitation-paper-front{transition:opacity .65s ease .35s}

/* Same closed frame before the film is decoded. */
.invitation-intro:not(.has-film):not(.is-opening):not(.is-finished){background:#747b6c url("envelope-poster-v8.png") center/cover no-repeat}
.invitation-intro:not(.has-film):not(.is-opening) .invitation-paper-front,.invitation-intro:not(.has-film):not(.is-opening) .invitation-flap-group{visibility:hidden}