/* Flip Modal — shared design tokens for every modal with a card-flip
   entrance/exit animation. Today's consumers:
     - .qr-modal-overlay / .qr-modal     (in-guide QR FAB, base.html)
     - #pix-qr-modal / .pix-flip-panel   (Pix modal, _pix_modal.html)
   New flip modals should just adopt the .flip-modal-overlay and
   .flip-modal-panel classes — backdrop color, blur, timing and the
   flip transform stay consistent across the product.

   Pair with flip-modal.js (AccordfyFlip) — JS owns toggling `.is-open`
   on the overlay and `.is-flipped` on the panel. JS also forces a
   reflow between mounting the panel and toggling `.is-flipped`, which
   is what makes the OPEN animation run (without the reflow the
   browser collapses initial + final state into one paint). */

.flip-modal-overlay {
    position: fixed;
    inset: 0;
    /* slate-900 @ 55% — desaturated dark, looks elegant against any
       brand color. Same value used to fade in/out via opacity below. */
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Perspective applies to the panel inside so rotateY reads as a
       real 3D flip rather than a 2D squish. */
    perspective: 1200px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.flip-modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.flip-modal-panel {
    transform-origin: center center;
    transform: rotateY(-92deg) scale(0.85);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.flip-modal-panel.is-flipped {
    transform: rotateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .flip-modal-overlay {
        transition: opacity 0.15s ease;
    }
    .flip-modal-panel {
        transition: none;
    }
}