/**
 * Animations CSS pour la page d'accueil Learnifi
 * Styles modulaires et performants
 */

/* ===== 1. ANIMATIONS AU SCROLL (FADE-IN) ===== */
.lf-fade-in {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.lf-fade-in.lf-animate-visible {
    opacity: 1;
}

.lf-fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.lf-fade-in-up.lf-animate-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== 2. ANIMATIONS DE PULSE POUR LES BADGES ===== */
@keyframes lf-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.lf-pulse-badge {
    animation: lf-pulse 2s ease-in-out infinite;
}

@keyframes lf-pulse-icon {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(164, 53, 240, 0.7);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(164, 53, 240, 0);
    }
}

.lf-pulse-icon {
    animation: lf-pulse-icon 2s ease-in-out infinite;
}

.lf-pulse-soft {
    animation: lf-pulse 3s ease-in-out infinite;
}

/* ===== 3. EFFET SHIMMER SUR LES BOUTONS ===== */
.lf-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    pointer-events: none;
}

@keyframes lf-shimmer-effect {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* ===== 4. ZOOM IMAGE DES CARTES DE COURS ===== */
.lf-zoom-in {
    transform: scale(1.1);
    transition: transform 0.3s ease-out;
}

.udemy-course-card .udemy-course-image {
    overflow: hidden;
}

.udemy-course-card .udemy-course-image img {
    transition: transform 0.3s ease-out;
}

/* Effet hover amélioré sur les cartes */
.udemy-course-card {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.udemy-course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
}

/* ===== 5. ANIMATION DES ICÔNES DE CATÉGORIES ===== */
@keyframes lf-bounce {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) rotate(-5deg);
    }
    50% {
        transform: translateY(0) rotate(0deg);
    }
    75% {
        transform: translateY(-5px) rotate(5deg);
    }
}

.lf-bounce {
    animation: lf-bounce 0.6s ease-in-out;
}

/* Hover sur les cartes de catégories */
.udemy-category-card {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.udemy-category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* ===== 6. ANIMATION DES NUMÉROS D'ÉTAPES ===== */
@keyframes lf-scale-in {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(0deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.step-number {
    opacity: 0;
}

.step-number.lf-scale-in {
    animation: lf-scale-in 0.6s ease-out forwards;
}

/* ===== 7. ROTATION DES ICÔNES DANS LES CARTES ===== */
@keyframes lf-rotate {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(10deg) scale(1.1);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}

.lf-rotate-icon {
    animation: lf-rotate 0.5s ease-in-out;
}

.icon-container i,
.feature-icon i {
    transition: transform 0.3s ease-out;
}

/* ===== 8. ANIMATION DES FLÈCHES DANS LES LIENS ===== */
@keyframes lf-arrow-move {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}

.lf-arrow-move {
    animation: lf-arrow-move 0.6s ease-in-out infinite;
}

/* ===== 9. AMÉLIORATION DES CARTES "POURQUOI CHOISIR" ===== */
.learning-objective-card {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.learning-objective-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.learning-objective-card .icon-container {
    transition: transform 0.3s ease-out, background-color 0.3s ease-out;
}

.learning-objective-card:hover .icon-container {
    transform: scale(1.1);
    background-color: var(--udemy-primary, #a435f0);
}

.learning-objective-card:hover .icon-container i {
    color: white !important;
}

/* ===== 10. ANIMATION DES CARTES "COMMENT ÇA MARCHE" ===== */
.how-it-works-card {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.how-it-works-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* ===== 11. ANIMATION DES TÉMOIGNAGES ===== */
.testimonial-card {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.testimonial-card:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

/* ===== 12. EFFET SUR LES STATISTIQUES ===== */
.stat-item {
    transition: transform 0.3s ease-out;
}

.stat-item:hover {
    transform: scale(1.1);
}

.stat-item .icon i {
    transition: transform 0.3s ease-out, color 0.3s ease-out;
}

.stat-item:hover .icon i {
    transform: rotate(10deg) scale(1.2);
    color: var(--udemy-primary, #a435f0);
}

.stat-number {
    font-weight: 700;
    display: inline-block;
}

/* ===== 13. ANIMATION DES SOUS-CATÉGORIES ===== */
.udemy-subcategory-card .card {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, background-color 0.3s ease-out;
}

.udemy-subcategory-card:hover .card {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    background-color: #f8f9fa;
}

/* ===== 14. ANIMATION DU BADGE "MEILLEURE VENTE" ===== */
.bestseller-badge {
    position: relative;
    overflow: hidden;
}

.bestseller-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: lf-bestseller-shine 3s ease-in-out infinite;
}

@keyframes lf-bestseller-shine {
    0% {
        left: -100%;
    }
    20%, 100% {
        left: 100%;
    }
}

/* ===== 15. EFFET SUR LES BOUTONS AU HOVER ===== */
.udemy-btn,
.learnify-btn {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.udemy-btn:hover,
.learnify-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.udemy-btn-primary:hover,
.learnify-btn-primary:hover {
    box-shadow: 0 4px 12px rgba(164, 53, 240, 0.4);
}

/* ===== 16. ANIMATION DES ONGLETS DE CATÉGORIES ===== */
.udemy-category-tab {
    transition: transform 0.2s ease-out, background-color 0.2s ease-out;
}

.udemy-category-tab:hover {
    transform: translateY(-2px);
}

/* ===== 17. LOADING SKELETON ET LOADER ===== */
@keyframes lf-skeleton-loading {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.lf-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: lf-skeleton-loading 1.5s ease-in-out infinite;
}

/* Loader pour les chargements AJAX */
.lf-loader {
    padding: 40px 20px;
    text-align: center;
}

.lf-loader i {
    color: var(--udemy-primary, #a435f0);
    animation: lf-spin 1s linear infinite;
}

.lf-loader p {
    color: #6a6f73;
    font-size: 14px;
    margin-top: 15px;
}

@keyframes lf-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ===== 18. OPTIMISATIONS POUR LES PERFORMANCES ===== */
/* Utiliser will-change pour les éléments animés fréquemment */
.udemy-course-card,
.learning-objective-card,
.how-it-works-card,
.testimonial-card,
.udemy-category-card {
    will-change: transform;
}

/* Désactiver les animations sur les appareils qui préfèrent moins de mouvement */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .lf-fade-in,
    .lf-fade-in-up {
        opacity: 1;
        transform: none;
    }
}

/* ===== 19. RESPONSIVE - RÉDUIRE LES ANIMATIONS SUR MOBILE ===== */
@media (max-width: 768px) {
    /* Réduire les transformations sur mobile pour de meilleures performances */
    .udemy-course-card:hover,
    .learning-objective-card:hover,
    .how-it-works-card:hover {
        transform: translateY(-3px);
    }
    
    /* Désactiver le parallaxe sur mobile */
    .udemy-banner img {
        transform: none !important;
    }
}

/* ===== 20. ANIMATION DU PRIX (discount) ===== */
.udemy-course-price .current-price {
    transition: transform 0.2s ease-out, color 0.2s ease-out;
}

.udemy-course-card:hover .current-price {
    transform: scale(1.1);
    color: var(--udemy-primary, #a435f0);
}

.original-price {
    position: relative;
    text-decoration: line-through;
}

/* ===== 21. CARROUSEL HORIZONTAL INFINI (Défilement droite → gauche) ===== */
.lf-horizontal-carousel {
    width: 100%;
    overflow: hidden !important;
    position: relative;
    padding: 20px 0;
    background: #fff;
}

.lf-carousel-track {
    display: flex !important;
    gap: 20px;
    animation: lf-scroll-left 30s linear infinite !important;
    will-change: transform;
    flex-wrap: nowrap !important;
}

/* Pause au hover pour lire */
.lf-carousel-track:hover {
    animation-play-state: paused !important;
}

.lf-carousel-item {
    flex: 0 0 auto !important;
    width: calc(25% - 15px) !important; /* 4 items visibles */
    min-width: 280px;
    max-width: 320px;
}

/* Animation de défilement infini */
@keyframes lf-scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50% - 10px)); /* Défile la moitié, puis boucle */
    }
}

/* Responsive pour tablettes */
@media (max-width: 991px) {
    .lf-carousel-item {
        flex: 0 0 auto !important;
        width: calc(33.333% - 14px) !important; /* 3 items visibles */
        min-width: 260px;
    }
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .lf-carousel-item {
        flex: 0 0 auto !important;
        width: calc(50% - 10px) !important; /* 2 items visibles */
        min-width: 240px;
    }
}

/* Très petits écrans */
@media (max-width: 576px) {
    .lf-carousel-item {
        flex: 0 0 auto !important;
        width: calc(90% - 20px) !important; /* 1 item visible, centré */
        min-width: 280px;
    }
    
    .lf-carousel-track {
        gap: 15px;
    }
}