/* Entrance animation for the app-wide modal system (.app-modal-backdrop /
   .app-modal-panel, toggled via the .is-open class in AppModal.js). Uses
   CSS @keyframes rather than `transition` because the backdrop switches
   from display:none to display:flex in the same frame that .is-open is
   added — a `transition` would need a style recalculation in between to
   play, which never happens; a keyframe `animation` starts reliably even
   when it's applied on the same tick the element becomes visible.

   Neither the backdrop nor the panel animate `opacity`. The backdrop has
   backdrop-blur-sm applied, and the panel sits directly on top of it — in
   both cases, fading the element's own opacity mid-frame while a blur
   filter is active immediately behind/around it makes Chrome composite a
   ghosted/streaked frame (double text, diagonal tearing). Only `transform`
   is animated, which never touches compositing opacity, so the panel just
   slides/scales into place while staying fully opaque throughout. */
.app-modal-backdrop.is-open .app-modal-panel {
    animation: appModalPanelIn var(--app-modal-duration, 0.3s) var(--app-ease-entrance, cubic-bezier(0.22, 1, 0.36, 1));
    will-change: transform;
}

@keyframes appModalPanelIn {
    from {
        transform: translateY(16px) scale(0.97);
    }

    to {
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-modal-backdrop.is-open .app-modal-panel {
        animation: none;
    }
}