/* ===== ANIMATIONS.CSS - ANIMATIONS COSMIQUES AVANCÉES ===== */

/* ===== ANIMATIONS DE BASE ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

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

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

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

@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== ANIMATIONS COSMIQUES SPÉCIFIQUES ===== */

/* Animation de pulsation cosmique */
@keyframes cosmicPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 40px rgba(0, 255, 136, 0.6);
    }
}

/* Animation de rotation cosmique */
@keyframes cosmicRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Animation de flottement */
@keyframes cosmicFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Animation de brillance */
@keyframes cosmicShine {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* Animation de particules */
@keyframes particleRise {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-100px) rotate(360deg);
    }
}

/* Animation d'expansion d'onde */
@keyframes waveExpand {
    0% {
        width: 0;
        height: 0;
        opacity: 0.8;
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

/* Animation de scintillement */
@keyframes starTwinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    25% {
        opacity: 0.6;
        transform: scale(1.2);
    }
    50% {
        opacity: 1;
        transform: scale(1.5);
        box-shadow: 0 0 15px currentColor;
    }
    75% {
        opacity: 0.8;
        transform: scale(1.3);
    }
}

/* Animation de text typing */
@keyframes textType {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Animation de gradient cosmique */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ===== ANIMATIONS DE BOUTONS ===== */

/* Animation de click cosmique */
@keyframes buttonClick {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

/* Animation de hover cosmique */
@keyframes buttonHover {
    0% {
        box-shadow: 0 5px 15px rgba(0, 255, 136, 0.2);
    }
    100% {
        box-shadow: 0 15px 35px rgba(0, 255, 136, 0.4);
    }
}

/* Animation de ripple */
@keyframes ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

/* ===== ANIMATIONS DE NAVIGATION ===== */

/* Animation d'apparition de la navigation */
@keyframes navSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation de changement de section active */
@keyframes navActiveChange {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1.1);
    }
}

/* ===== ANIMATIONS DE CARTES ===== */

/* Animation d'apparition de carte */
@keyframes cardAppear {
    0% {
        opacity: 0;
        transform: translateY(50px) rotateX(45deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}

/* Animation de hover de carte */
@keyframes cardHover {
    0% {
        transform: translateY(0) scale(1);
    }
    100% {
        transform: translateY(-10px) scale(1.02);
    }
}

/* ===== ANIMATIONS DE CRYPTO ===== */

/* Animation de prix en hausse */
@keyframes priceUp {
    0% {
        color: inherit;
        transform: scale(1);
    }
    50% {
        color: #00ff88;
        transform: scale(1.1);
    }
    100% {
        color: #00ff88;
        transform: scale(1);
    }
}

/* Animation de prix en baisse */
@keyframes priceDown {
    0% {
        color: inherit;
        transform: scale(1);
    }
    50% {
        color: #ff4757;
        transform: scale(1.1);
    }
    100% {
        color: #ff4757;
        transform: scale(1);
    }
}

/* Animation de satellite crypto */
@keyframes satelliteOrbit {
    from {
        transform: rotate(0deg) translateX(150px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(150px) rotate(-360deg);
    }
}

/* ===== ANIMATIONS DE CHARGEMENT ===== */

/* Animation de spinner cosmique */
@keyframes cosmicSpin {
    0% {
        transform: rotate(0deg);
        border-color: #00ff88 transparent transparent transparent;
    }
    25% {
        border-color: #00ccff #00ff88 transparent transparent;
    }
    50% {
        border-color: #ff6b7a #00ccff #00ff88 transparent;
    }
    75% {
        border-color: #ffa502 #ff6b7a #00ccff #00ff88;
    }
    100% {
        transform: rotate(360deg);
        border-color: #00ff88 transparent transparent transparent;
    }
}

/* Animation de loading dots */
@keyframes loadingDots {
    0%, 20% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(0.8);
    }
}

/* Animation de barre de progression */
@keyframes progressBar {
    0% {
        width: 0%;
        background-position: 0% 50%;
    }
    100% {
        width: 100%;
        background-position: 100% 50%;
    }
}

/* ===== ANIMATIONS DE MODAL ===== */

/* Animation d'ouverture de modal */
@keyframes modalOpen {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Animation de fermeture de modal */
@keyframes modalClose {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.8) translateY(-50px);
    }
}

/* Animation de backdrop de modal */
@keyframes backdropFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ===== ANIMATIONS DE NOTIFICATION ===== */

/* Animation d'entrée de notification */
@keyframes notificationSlideIn {
    0% {
        opacity: 0;
        transform: translateX(100%) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Animation de sortie de notification */
@keyframes notificationSlideOut {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(100%) scale(0.8);
    }
}

/* ===== ANIMATIONS DE SCROLL ===== */

/* Animation de l'indicateur de scroll */
@keyframes scrollIndicator {
    0%, 100% {
        opacity: 0.7;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(10px);
    }
}

/* Animation de scroll parallax */
@keyframes parallaxMove {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50px);
    }
}

/* ===== ANIMATIONS D'EFFETS SPÉCIAUX ===== */

/* Animation d'explosion cosmique */
@keyframes cosmicExplosion {
    0% {
        opacity: 1;
        transform: scale(0);
        filter: brightness(2);
    }
    50% {
        opacity: 0.8;
        transform: scale(1);
        filter: brightness(1.5);
    }
    100% {
        opacity: 0;
        transform: scale(2);
        filter: brightness(1);
    }
}

/* Animation de traînée laser */
@keyframes laserTrail {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
    }
    100% {
        opacity: 0;
        transform: scaleX(1.2);
    }
}

/* Animation de particules flottantes */
@keyframes floatingParticles {
    0% {
        opacity: 0;
        transform: translateY(100vh) rotate(0deg);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-100px) rotate(360deg);
    }
}

/* Animation de distorsion spatiale */
@keyframes spaceDistortion {
    0%, 100% {
        filter: blur(0px) hue-rotate(0deg);
        transform: scale(1);
    }
    25% {
        filter: blur(1px) hue-rotate(90deg);
        transform: scale(1.02);
    }
    50% {
        filter: blur(2px) hue-rotate(180deg);
        transform: scale(0.98);
    }
    75% {
        filter: blur(1px) hue-rotate(270deg);
        transform: scale(1.01);
    }
}

/* ===== ANIMATIONS RESPONSIVES ===== */

/* Animation pour mobile */
@keyframes mobileSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animation de menu burger */
@keyframes burgerToX {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

/* ===== CLASSES D'ANIMATION UTILITAIRES ===== */

/* Classes de timing */
.animate-fast {
    animation-duration: 0.3s !important;
}

.animate-normal {
    animation-duration: 0.6s !important;
}

.animate-slow {
    animation-duration: 1s !important;
}

.animate-slower {
    animation-duration: 1.5s !important;
}

/* Classes de délai */
.animate-delay-1 {
    animation-delay: 0.1s !important;
}

.animate-delay-2 {
    animation-delay: 0.2s !important;
}

.animate-delay-3 {
    animation-delay: 0.3s !important;
}

.animate-delay-4 {
    animation-delay: 0.4s !important;
}

.animate-delay-5 {
    animation-delay: 0.5s !important;
}

/* Classes d'animation répétée */
.animate-infinite {
    animation-iteration-count: infinite !important;
}

.animate-bounce-infinite {
    animation: bounceIn 2s ease-in-out infinite;
}

.animate-pulse-infinite {
    animation: cosmicPulse 3s ease-in-out infinite;
}

.animate-float-infinite {
    animation: cosmicFloat 4s ease-in-out infinite;
}

.animate-rotate-infinite {
    animation: cosmicRotate 10s linear infinite;
}

/* Classes d'easing */
.animate-ease-in {
    animation-timing-function: ease-in !important;
}

.animate-ease-out {
    animation-timing-function: ease-out !important;
}

.animate-ease-in-out {
    animation-timing-function: ease-in-out !important;
}

.animate-ease-bounce {
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

/* ===== ANIMATIONS D'INTERACTION ===== */

/* Hover animations */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.hover-glow {
    transition: all 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 30px var(--cosmic-primary);
    border-color: var(--cosmic-primary);
}

.hover-scale {
    transition: transform 0.3s ease;
}

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

.hover-rotate {
    transition: transform 0.3s ease;
}

.hover-rotate:hover {
    transform: rotate(5deg);
}

/* Click animations */
.click-shrink {
    transition: transform 0.1s ease;
}

.click-shrink:active {
    transform: scale(0.95);
}

.click-ripple {
    position: relative;
    overflow: hidden;
}

.click-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.click-ripple:active::after {
    width: 300px;
    height: 300px;
}

/* ===== ANIMATIONS DE PERFORMANCE ===== */

/* Utilisation de will-change pour les performances */
.will-animate {
    will-change: transform, opacity, filter;
}

/* Accélération GPU */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ===== ANIMATIONS RESPONSIVE ===== */

/* Réduction des animations sur mobile pour les performances */
@media (max-width: 768px) {
    .reduce-motion {
        animation-duration: 0.3s !important;
        animation-iteration-count: 1 !important;
    }
    
    .disable-complex-animations {
        animation: none !important;
        transition: none !important;
    }
}

/* Respect des préférences utilisateur pour reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .respect-motion-preference {
        animation: none !important;
        transition: none !important;
    }
}

/* ===== ANIMATIONS DE DEBUG ===== */

/* Animation pour le développement */
@keyframes debugBlink {
    0%, 50% {
        background-color: red;
    }
    51%, 100% {
        background-color: transparent;
    }
}

.debug-animate {
    animation: debugBlink 1s infinite;
}

/* ===== ANIMATIONS COMPLEXES COMBINÉES ===== */

/* Animation cosmique complexe */
.cosmic-entrance {
    animation: 
        fadeInUp 0.8s ease-out,
        cosmicPulse 2s ease-in-out 0.8s infinite;
}

/* Animation de héro complexe */
.hero-complex {
    animation: 
        scaleIn 1s ease-out,
        cosmicFloat 4s ease-in-out 1s infinite;
}

/* Animation de carte premium */
.premium-card {
    animation: 
        cardAppear 0.8s ease-out,
        cosmicPulse 3s ease-in-out 0.8s infinite;
}

/* ===== TRANSITIONS PERSONNALISÉES ===== */

/* Transition cosmique standard */
.transition-cosmic {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Transition bounce */
.transition-bounce {
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Transition rapide */
.transition-fast {
    transition: all 0.2s ease-out;
}

/* Transition lente */
.transition-slow {
    transition: all 0.8s ease-in-out;
}

/* ===== KEYFRAMES POUR EFFECTS SPÉCIAUX ===== */

/* Animation de portail cosmique */
@keyframes cosmicPortal {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
        filter: blur(20px);
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 0.8;
        filter: blur(5px);
    }
    100% {
        transform: scale(1) rotate(360deg);
        opacity: 1;
        filter: blur(0px);
    }
}

/* Animation de téléportation */
@keyframes teleport {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
    }
    50% {
        opacity: 0;
        transform: scale(0.1);
        filter: blur(10px);
    }
    51% {
        transform: scale(0.1) translateX(200px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateX(200px);
        filter: blur(0px);
    }
}

/* Animation de décomposition digitale */
@keyframes digitalDissolve {
    0% {
        opacity: 1;
        filter: contrast(1) brightness(1);
        transform: scale(1);
    }
    25% {
        filter: contrast(1.5) brightness(1.2);
        transform: scale(1.02);
    }
    50% {
        filter: contrast(2) brightness(0.8);
        transform: scale(0.98);
    }
    75% {
        filter: contrast(0.5) brightness(2);
        transform: scale(1.05);
    }
    100% {
        opacity: 0;
        filter: contrast(0) brightness(0);
        transform: scale(0);
    }
}

/* ===== ANIMATIONS FINALES ===== */

/* Animation de fin de chargement */
@keyframes loadComplete {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

/* Animation de succès */
@keyframes successPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(0, 255, 136, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 255, 136, 0);
    }
}