/*
 Animations subtiles et professionnelles
*/

/* Animations principales */
@keyframes fadeInUp { 
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    } 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}

@keyframes fadeIn { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}

@keyframes slideInRight { 
    from { 
        transform: translateX(30px); 
        opacity: 0; 
    } 
    to { 
        transform: translateX(0); 
        opacity: 1; 
    } 
}

@keyframes slideInLeft { 
    from { 
        transform: translateX(-30px); 
        opacity: 0; 
    } 
    to { 
        transform: translateX(0); 
        opacity: 1; 
    } 
}

@keyframes subtlePulse { 
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.8; 
    } 
    50% { 
        transform: scale(1.02); 
        opacity: 1; 
    } 
}

@keyframes gentleGlow { 
    0% { 
        filter: brightness(1); 
        box-shadow: 0 0 0 rgba(79, 172, 254, 0); 
    } 
    100% { 
        filter: brightness(1.1); 
        box-shadow: 0 0 20px rgba(79, 172, 254, 0.2); 
    } 
}

/* Variante utilisée par le logo du header */
@keyframes gentle-glow {
    0% { filter: brightness(1); }
    100% { filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 25, 131, 0.3)); }
}

/* === Migrated from components.css: header background animation === */
@keyframes headerGradientShift {
    0%, 100% { transform: translateX(-100%) scale(1.1); opacity: 0.8; }
    25% { transform: translateX(-50%) scale(1.05); opacity: 1; }
    50% { transform: translateX(0%) scale(1); opacity: 0.9; }
    75% { transform: translateX(50%) scale(1.05); opacity: 1; }
}

/* Header decoration slim line */
@keyframes decorationSlide {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

/* Header search dropdown */
@keyframes searchSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Micro-interactions */
@keyframes btnPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes logoSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

@keyframes subtleFloat { 
    0%, 100% { 
        transform: translateY(0px); 
        opacity: 0.1; 
    } 
    50% { 
        transform: translateY(-15px); 
        opacity: 0.2; 
    } 
}

@keyframes scrollIndicator { 
    0% { 
        opacity: 0; 
        transform: translateY(-3px); 
    } 
    50% { 
        opacity: 1; 
    } 
    100% { 
        opacity: 0; 
        transform: translateY(10px); 
    } 
}

@keyframes smoothRipple { 
    to { 
        transform: scale(3); 
        opacity: 0; 
    } 
}

/* Classes d'animation modernes */
.fade-in-up { 
    animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; 
}

.fade-in { 
    animation: fadeIn 0.6s ease-out forwards; 
}

.slide-in-right { 
    animation: slideInRight 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; 
}

.slide-in-left { 
    animation: slideInLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; 
}

/* Micro-interactions */
.hover-lift {
    transition: var(--transition-all);
}

.hover-lift:hover { 
    transform: translateY(-2px); 
}

.hover-scale {
    transition: var(--transition-all);
}

.hover-scale:hover { 
    transform: scale(1.02); 
}

.hover-glow {
    transition: var(--transition-all);
}

.hover-glow:hover {
    filter: brightness(1.1);
    box-shadow: 0 8px 25px rgba(79, 172, 254, 0.15);
}

/* Animations avec délais */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* Éléments décoratifs subtils */
.floating-elements { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    pointer-events: none; 
    z-index: 0;
}

.floating-element { 
    position: absolute; 
    background: rgba(79, 172, 254, 0.03); 
    border-radius: 50%; 
    animation: subtleFloat 20s ease-in-out infinite; 
}

/* États de focus améliorés */
.focus-ring:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .floating-element,
    .hover-lift,
    .hover-scale,
    .hover-glow {
        animation: none !important;
        transform: none !important;
    }
}

    /* === Scroll indicators === */
    .scroll-indicator {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
        transform-origin: left;
        z-index: 9999;
    }

    /* === Canvas particules === */
    #particle-canvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: -1;
        opacity: 0.3;
    }