/* Animations pour l'image de l'avatar */
.avatar-animation {
    position: relative;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease;
}

/* Animation d'entrée avec apparition progressive */
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation de pulsation subtile pour donner vie à l'image */
@keyframes subtlePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 5px 20px rgba(30, 136, 229, 0.4);
    }
    50% {
        transform: scale(1.01);
        box-shadow: 0 10px 30px rgba(30, 136, 229, 0.6);
    }
}

/* Animation de lueur qui tourne autour de l'image */
@keyframes glowingBorder {
    0% {
        box-shadow: 0 0 15px rgba(30, 136, 229, 0.8);
    }
    25% {
        box-shadow: 5px 5px 15px rgba(30, 136, 229, 0.8);
    }
    50% {
        box-shadow: 10px 0 15px rgba(30, 136, 229, 0.8);
    }
    75% {
        box-shadow: 5px -5px 15px rgba(30, 136, 229, 0.8);
    }
    100% {
        box-shadow: 0 0 15px rgba(30, 136, 229, 0.8);
    }
}

/* Animation d'énergie qui rayonne depuis l'image */
@keyframes energyWave {
    0% {
        box-shadow: 0 0 0 0 rgba(30, 136, 229, 0.4);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(30, 136, 229, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(30, 136, 229, 0);
    }
}

/* Animation d'aura qui entoure l'image */
.avatar-image {
    width: 100%;
    height: auto;
    z-index: 2;
    border-radius: 12px;
    animation: 
        fadeInScale 1s ease-out forwards,
        subtlePulse 3s ease-in-out infinite;
}

.avatar-image.downloaded {
    animation: glowingBorder 4s linear infinite;
}

/* Overlay pour les effets d'aura */
.aura-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    pointer-events: none;
    z-index: 3;
    opacity: 0.5;
    background: radial-gradient(circle, transparent 40%, rgba(30, 136, 229, 0.1) 70%, transparent 100%);
    animation: energyWave 3s infinite;
}

/* Effet 3D au survol */
.avatar-animation:hover {
    transform: perspective(1000px) rotateY(5deg);
}

/* Animation pour le téléchargement réussi */
@keyframes successPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.download-success {
    animation: successPulse 0.5s ease-in-out;
}

/* Styles pour les particules de l'aura */
.aura-particle {
    position: absolute;
    background-color: rgba(30, 136, 229, 0.6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    top: var(--y);
    left: var(--x);
    animation: floatParticle var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
    filter: blur(1px);
}

@keyframes floatParticle {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translate(10px, -15px) scale(1.2);
        opacity: 0.6;
    }
    50% {
        transform: translate(-5px, 10px) scale(0.8);
        opacity: 0.4;
    }
    75% {
        transform: translate(-10px, -5px) scale(1.1);
        opacity: 0.7;
    }
}

/* Effet flash lors de la révélation de l'image */
.avatar-flash {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 10;
    border-radius: 12px;
    animation: flashEffect 1s ease-out forwards;
}

@keyframes flashEffect {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Animation de révélation */
.avatar-animation.reveal .avatar-image {
    animation: revealImage 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes revealImage {
    0% {
        transform: scale(0.9);
        filter: blur(10px) brightness(0.8);
    }
    100% {
        transform: scale(1);
        filter: blur(0) brightness(1);
    }
}

/* Styles pour le badge de génération */
.generation-badge {
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.8s;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Styles pour l'effet de confettis */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.confetti {
    position: absolute;
    z-index: 9999;
    animation: confettiFall linear forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(1000px) rotate(720deg);
        opacity: 0;
    }
}

/* Transition douce pour tous les éléments */
.result-container * {
    transition: all 0.3s ease;
}

/* Animation lorsque le téléchargement commence */
.avatar-image.downloaded {
    animation: downloadPulse 1s ease-in-out;
}

@keyframes downloadPulse {
    0% {
        filter: saturate(1);
    }
    50% {
        filter: saturate(1.5) brightness(1.1);
    }
    100% {
        filter: saturate(1);
    }
}

/* Support pour les 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;
    }
}