/* Motion uses a hinged lid and a clipped reveal: no blurred frame crossfade. */
.invitation-motion{position:relative;display:inline-block;aspect-ratio:1;perspective:850px;pointer-events:none;isolation:isolate}
.invitation-motion img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;max-width:none!important;border:0!important;pointer-events:none}
.invitation-motion .motion-base{z-index:0}
.invitation-motion .motion-open{z-index:1;clip-path:inset(100% 0 0);transition:clip-path .55s cubic-bezier(.22,.65,.3,1)}
.invitation-motion .motion-lid{z-index:2;transform-origin:50% 41%;clip-path:polygon(8% 40%,92% 40%,92% 44%,50% 76%,8% 44%);transition:transform .55s cubic-bezier(.22,.65,.3,1),opacity .1s .18s;backface-visibility:hidden}
.invitation-trigger:is(:hover,:focus-visible) .motion-open{clip-path:inset(0)}
.invitation-trigger:is(:hover,:focus-visible) .motion-lid{transform:rotateX(-175deg);opacity:0}
.invitation-motion.clam{aspect-ratio:3/2}
.clam .motion-lid{clip-path:inset(0 0 29%);transform-origin:50% 68%}
.clam .motion-open{transition-duration:.65s}
.clam-light{position:absolute;z-index:3;left:24%;right:24%;top:69%;height:2%;border-radius:50%;background:#fff8c2;box-shadow:0 -3px 12px 4px #ffe6a688,0 0 26px 10px #b9f7df55;animation:clam-secret 2.8s ease-in-out infinite;transition:opacity .3s}
.invitation-trigger:is(:hover,:focus-visible) .clam-light{opacity:0;animation:none}
@keyframes clam-secret{0%,100%{transform:scaleX(.85);filter:brightness(.85)}50%{transform:scaleX(1.05);filter:brightness(1.2);box-shadow:0 -7px 18px 7px #ffe6a6aa,0 -4px 32px 13px #b9f7df55}}
.surface-invite>.invitation-motion{width:100%;height:100%;display:block}
.deep-invite>.invitation-motion{position:absolute;left:8%;top:8%;width:84%;height:78%;transform:rotate(-6deg)}
.invitation-compact{display:inline-flex!important;align-items:center;justify-content:center;gap:9px;position:relative;min-height:44px}
.invitation-compact>.invitation-motion{width:64px;height:64px;flex:0 0 64px;margin-top:-14px;margin-bottom:-4px}
.invitation-compact:focus-visible{outline:2px solid #edcf93;outline-offset:5px}
@media(max-width:600px){.invitation-compact>.invitation-motion{width:48px;height:48px;flex-basis:48px;margin-top:-8px}}
@media(prefers-reduced-motion:reduce){.invitation-motion .motion-open,.invitation-motion .motion-lid{transition:none}.clam-light{animation:none}}

.invitation-motion .motion-base{transition:opacity .12s .25s}.invitation-trigger:is(:hover,:focus-visible) .motion-base{opacity:0}
@media(prefers-reduced-motion:reduce){.invitation-motion .motion-base{transition:none}}