/* ──────────────────────────────────────────────────────────────────────
   Modal Animations — Applied globally to all modals across the platform
   Smooth bounce-in entry and fade-out exit animations
   ────────────────────────────────────────────────────────────────────── */

/* Animación de entrada suave con rebote */
@keyframes modalBounceIn {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    60% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animación de salida suave */
@keyframes modalFadeOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Fade del fondo oscuro al entrar */
@keyframes overlayFadeIn {
    from { background-color: rgba(0,0,0,0); }
    to   { background-color: rgba(0,0,0,0.55); }
}

/* Fade del fondo oscuro al salir */
@keyframes overlayFadeOut {
    from { background-color: rgba(0,0,0,0.55); }
    to   { background-color: rgba(0,0,0,0); }
}

/* Estado base: fondo transparente (la animación lo lleva a opaco al abrir) */
.modal-overlay {
    background-color: rgba(0,0,0,0);
}

/* Fondo oscuro: fade-in simultáneo con el bounce del contenido */
.modal-overlay.show {
    animation: overlayFadeIn 0.3s ease forwards;
}

/* Fondo oscuro: fade-out simultáneo con la salida del contenido (solo al cerrar) */
.modal-overlay.closing {
    animation: overlayFadeOut 0.3s ease forwards;
}

/* Aplicar animación al modal cuando tiene clase 'show' */
.modal-overlay.show .modal-content {
    animation: modalBounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Aplicar animación de salida cuando se cierra el modal */
.modal-overlay.closing .modal-content {
    animation: modalFadeOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ──────────────────────────────────────────────────────────────────────
   Special case: pwd-modal-overlay (teacher.html password change modal)
   Uses 'active' class instead of 'show' and 'pwd-modal-card' instead of 'modal-content'
   ────────────────────────────────────────────────────────────────────── */

/* Aplicar animación al modal pwd cuando tiene clase 'active' */
.pwd-modal-overlay.active .pwd-modal-card {
    animation: modalBounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Aplicar animación de salida cuando se quita clase 'active' */
.pwd-modal-overlay:not(.active) .pwd-modal-card {
    animation: modalFadeOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ──────────────────────────────────────────────────────────────────────
   Tests: modal-overlay con clase 'open' y modal-box como contenido
   ────────────────────────────────────────────────────────────────────── */

/* Animación de entrada */
.modal-overlay.open .modal-box {
    animation: modalBounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}