/* Not My Event: "shrink the card to the corner" for an envelope card whose party shows behind it (a design turns it on with minimize: true in its scripts/ file; the behaviour is /assets/card-min.js).
   Once the card has settled it shows a small round button in its top right corner. A tap shrinks the whole card down into the bottom right corner of the screen, so the guest can see the whole party behind it;
   the RSVP and dish buttons step aside while it is small. The little card is one big button: a tap anywhere on it (it pulses a ring) brings it back to the middle. Colors come from the design (--ink, --paper, --accent). */
.scene { --ms: .28; }
.cmin, .cmax { display: none; margin: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.scene.done .cmin { display: grid; }
.scene.done.min .cmin, html.nme-edit .cmin { display: none; }
.scene.min .cmax { display: grid; }
html.nme-edit .cmax { display: none; }
.cmin { position: absolute; z-index: 4; top: calc(var(--u) * 5.4); right: calc(var(--u) * 5.4); width: max(34px, calc(var(--u) * 9.6)); height: max(34px, calc(var(--u) * 9.6)); place-items: center; border-radius: 50%; border: calc(var(--u) * .5) solid var(--accent, #c9a24b); background: var(--ink, #222); color: var(--paper, #fff); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .2s ease; }
.cmin::after { content: ""; position: absolute; inset: -8px; }
.cmin:hover { transform: scale(1.08); }
.cmin svg { width: 58%; height: 58%; }
.cmax { position: absolute; z-index: 6; inset: 0; place-items: center; border: 0; border-radius: 6px; background: transparent; }
.cmax svg { width: calc(var(--u) * 34); height: calc(var(--u) * 34); padding: calc(var(--u) * 7); border-radius: 50%; border: calc(var(--u) * 1.6) solid var(--accent, #c9a24b); background: var(--ink, #222); color: var(--paper, #fff); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #c9a24b) 80%, transparent); animation: cmax-ping 1.8s ease-out infinite; }
@keyframes cmax-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #c9a24b) 80%, transparent); } 100% { box-shadow: 0 0 0 calc(var(--u) * 12) transparent; } }

/* the move: the card goes to the bottom right corner at --ms of its size (14px from the edges, past the notch if there is one) and comes back to the middle */
.scene.done .card { transition: transform .6s cubic-bezier(.3, .9, .3, 1); }
.scene.done.min .card { animation: none; transform: translate(calc(50vw - 14px - env(safe-area-inset-right, 0px) - var(--cw) * var(--ms) / 2), calc((100svh + var(--rp-r, 0px)) / 2 - 14px - env(safe-area-inset-bottom, 0px) - var(--ch) * var(--ms) / 2)) scale(var(--ms)); }
/* the RSVP and dish buttons step aside while the card is small */
.rp-acts { transition: opacity .3s ease; }
.scene.min .rp-acts { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
@media (prefers-reduced-motion: reduce) { .scene.done .card { transition: none; } .cmax svg { animation: none; } .cmin { transition: none; } }