/*
Modal Transitions CSS
Relies on the 'is-open' class being added/removed from the '.modal-container' element by JavaScript.
*/

/* -- Standard Modal (Fade/Scale) -- */

/* Overlay transition */
.modal-container[data-modal-type="standard"].is-open .modal-overlay {
    opacity: 1;
}

/* Content transition */
.modal-container[data-modal-type="standard"].is-open .modal-content {
    opacity: 1;
    transform: scale(1);
    /* Tailwind equivalent: opacity-100 scale-100 */
}

/* Ensure content starts scaled down/faded out (these are in the template but good fallback) */
.modal-container[data-modal-type="standard"] .modal-content {
    opacity: 0;
    transform: scale(0.95);
    /* Tailwind equivalent: opacity-0 scale-95 */
}


/* -- Slideover Right Modal (Burger Menu) -- */

/* Overlay transition (same as standard) */
.modal-container[data-modal-type="slideover-right"].is-open .modal-overlay {
    opacity: 1;
}

/* Content transition */
.modal-container[data-modal-type="slideover-right"].is-open .modal-content {
    transform: translateX(0);
    /* Tailwind equivalent: translate-x-0 */
}

/* Ensure content starts off-screen right (this is in the template but good fallback) */
.modal-container[data-modal-type="slideover-right"] .modal-content {
    transform: translateX(100%);
    /* Tailwind equivalent: translate-x-full */
}