/* 
 * animations.css - Animations pour cestnicoquipaye.fr
 * Emplacement: /assets/css/animations.css
 */

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

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

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes floatUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes rotateFloat {
    0% {
        transform: rotate(0deg) translateY(0);
    }
    25% {
        transform: rotate(5deg) translateY(-5px);
    }
    50% {
        transform: rotate(0deg) translateY(-10px);
    }
    75% {
        transform: rotate(-5deg) translateY(-5px);
    }
    100% {
        transform: rotate(0deg) translateY(0);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(246, 224, 94, 0.4);
    }
    50% {
        box-shadow: 0 0 20px 10px rgba(246, 224, 94, 0.2);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* Classes d'animation */
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

/* Animations pour les stats */
.stat-card {
    animation: fadeInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }

/* Animation du nombre de stats au survol */
.stat-card:hover .stat-number {
    /*animation: pulseGlow 1.5s ease-in-out infinite;*/
}

/* Animation pour les questions du quiz */
.question-card.active {
    animation: slideInUp 0.5s ease-out;
}

/* Animation pour les résultats du quiz */
.quiz-result.show {
    animation: popIn 0.6s ease-out;
}

/* Animation pour les fact cards */
.fact-card {
    position: relative;
    overflow: hidden;
}

.fact-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -200%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 100%
    );
    animation: shimmer 3s ease-in-out infinite;
}

/* Animation flottante pour certains éléments */
.float-animation {
    animation: floatUpDown 3s ease-in-out infinite;
}

/* Animation de rotation pour les éléments décoratifs */
.rotate-float {
    animation: rotateFloat 6s ease-in-out infinite;
}

/* Animation pour le header au scroll */
@keyframes headerSlideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

.header.scrolled {
    animation: headerSlideDown 0.3s ease-out;
}

/* Animation pour les boutons */
@keyframes buttonPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.btn:hover {
    animation: buttonPulse 0.6s ease-in-out;
}

/* Animation pour les notifications */
@keyframes notificationSlideIn {
    from {
        transform: translateX(4000px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.notification.show {
    animation: notificationSlideIn 0.4s ease-out;
}

/* Animation pour les options du quiz */
@keyframes optionHighlight {
    0% {
        background-color: transparent;
    }
    50% {
        background-color: rgba(246, 224, 94, 0.1);
    }
    100% {
        background-color: transparent;
    }
}

.quiz-option.selected {
    animation: optionHighlight 0.5s ease-out;
}

/* Animation de chargement */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Animations pour les éléments qui apparaissent au scroll */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Animation pour le compteur de chiffres */
@keyframes countUp {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.fact-number {
    animation: countUp 0.8s ease-out;
}

/* Animation de vague pour le fond */
@keyframes wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1);
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55);
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1);
    }
}

.wave-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23ffffff' fill-opacity='0.1'/%3E%3C/svg%3E");
    background-size: 50% 100px;
    animation: wave 10s linear infinite;
}

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

.particle {
    position: fixed;
    pointer-events: none;
    opacity: 0;
    animation: particleFloat 10s linear infinite;
}

/* Animation pour les liens sociaux */
@keyframes socialBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.social-link:hover {
    animation: socialBounce 0.5s ease-in-out;
}

/* Animation de pulsation pour les éléments importants */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

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

/* Animation de texte qui apparaît progressivement */
@keyframes textReveal {
    0% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

.text-reveal {
    animation: textReveal 1s ease-out forwards;
}

/* Effet de brillance sur les boutons */
@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 200%;
    }
}

.btn {
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s;
}

.btn:hover::after {
    animation: shine 0.5s ease-out;
}

/* Media queries pour les animations */
@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;
    }
}