/* 
    Premium Transitions & Animations 
    Aulibre System
*/

/* 1. View Transitions API: Navegación suave entre páginas */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

/* Redefinición de la curva base para elementos interactivos */
/* Usamos una curva cubic-bezier tipo Apple/iOS (bouncy, relajada) */
:root {
    --transition-premium: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-fast: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 2. Suavizado en tarjetas, botones y elementos interactivos comunes */
.course-card, .article-card, .book-card, .module-box, 
.action-btn, .btn, button, .chip, .notes-course-picker-pill {
    transition: var(--transition-premium) !important;
}

/* Efecto de levitación/expansión premium en hover de tarjetas */
.course-card:hover, .article-card:hover, .book-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-quiet);
}

/* 3. Animaciones para Modales y Top-Layer (Dialogs, Overlays) */
dialog,
.modal-overlay,
.modal,
.modal-content,
.bottom-sheet {
    opacity: 0;
    transform: scale(0.95);
    
    /* MANDATORY: transition display and overlay for top-layer elements */
    transition-property: opacity, transform, display, overlay, background-color;
    transition-duration: 0.35s;
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-behavior: allow-discrete;
}

/* Bottom sheets suben desde abajo en vez de escalar */
.bottom-sheet {
    transform: translateY(100%);
}
.bottom-sheet.active,
.bottom-sheet[style*="display: flex"],
.bottom-sheet[style*="display: block"] {
    transform: translateY(0);
    @starting-style {
        transform: translateY(100%);
    }
}

/* Estado activo del modal */
dialog[open],
.modal-overlay.active,
.modal.active,
.modal-overlay[style*="display: flex"],
.modal[style*="display: flex"],
.modal[style*="display: block"] {
    opacity: 1;
    transform: scale(1);

    @starting-style {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Animación del fondo oscurecido (backdrop) */
dialog::backdrop,
.modal-overlay,
.modal {
    background-color: rgba(0, 0, 0, 0);
}

dialog[open]::backdrop,
.modal-overlay.active,
.modal.active,
.modal-overlay[style*="display: flex"],
.modal[style*="display: flex"],
.modal[style*="display: block"] {
    background-color: rgba(0, 0, 0, 0.4);

    @starting-style {
        background-color: rgba(0, 0, 0, 0);
    }
}

/* 4. Animaciones de Desplegables (Acordeones, Dropdowns) */
.accordion-content,
.dropdown-menu {
    transition: var(--transition-premium);
}

/* 5. Flecha de Botones en Tarjetas */
.card-btn-arrow {
    width: 1.15rem;
    height: 1.15rem;
    display: none;
    flex-shrink: 0;
    margin-left: 0.35rem;
    vertical-align: middle;
}
/* Mostrar flecha en desktop junto al texto (opcional, pero queda elegante) */
.btn-continue .card-btn-arrow,
.btn-info .card-btn-arrow,
.btn-enter .card-btn-arrow {
    display: inline-block;
}

/* 6. Minimalismo Mobile First (Limpieza Visual) */
@media (max-width: 900px) {
    /* Ocultar botón flotante de tema en móviles para reducir carga visual */
    .theme-toggle-floating {
        display: none !important;
    }
    
    /* En móviles, las tarjetas de cursos reemplazan el texto por un botón circular con flecha */
    .course-card .btn-continue span,
    .course-card .btn-info span,
    .course-card .btn-enter span,
    .article-card .btn-continue span,
    .article-card .btn-info span,
    .article-card .btn-enter span,
    .notes-btn span {
        display: none !important;
    }
    
    .course-card .btn-continue,
    .course-card .btn-info,
    .course-card .btn-enter,
    .article-card .btn-continue,
    .article-card .btn-info,
    .article-card .btn-enter {
        width: 2.75rem !important;
        height: 2.75rem !important;
        min-width: 2.75rem !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto !important;
    }
    .course-card .card-btn-arrow,
    .article-card .card-btn-arrow {
        margin-left: 0 !important;
        width: 1.35rem;
        height: 1.35rem;
    }
}

/* 7. Respetar preferencias de reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transform: none !important;
    }
    
    @starting-style {
        dialog[open],
        .modal-overlay.active,
        .modal.active {
            transform: none;
        }
    }
}