/* ========================================
   ANIMATIONS POUR LES IMAGES D'INTRODUCTION
   ======================================== */

/* Animation de base pour toutes les sections d'introduction */
.page-intro {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Animation directe sur la section d'introduction */
.page-intro {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation: introImageFloat 20s ease-in-out infinite !important;
}

/* Pseudo-élément pour l'image de fond animée (fallback) */
.page-intro::before {
    content: '';
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    animation: introImageFloat 25s ease-in-out infinite;
    filter: brightness(1.1);
}

/* Animation de flottement subtil */
@keyframes introImageFloat {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1) contrast(1);
    }
    25% {
        transform: scale(1.03) rotate(0.8deg);
        filter: brightness(1.05) contrast(1.1);
    }
    50% {
        transform: scale(1.08) rotate(0deg);
        filter: brightness(1.1) contrast(1.05);
    }
    75% {
        transform: scale(1.03) rotate(-0.8deg);
        filter: brightness(1.05) contrast(1.1);
    }
}

/* Animation au survol */
.page-intro:hover {
    transform: scale(1.05);
    filter: brightness(1.1) contrast(1.1);
}

.page-intro:hover::before {
    transform: scale(1.1) rotate(1deg);
}

/* Animation de parallaxe au scroll */
.page-intro.parallax::before {
    transform: translateY(var(--parallax-offset, 0px)) scale(1.05);
}

/* Animations spécifiques par page */

/* Page d'accueil - Carrousel avec transition */
.home-intro .intro-slide {
    transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    animation: slideZoom 15s ease-in-out infinite;
}

@keyframes slideZoom {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}

.home-intro .intro-slide.active {
    animation: slideZoomActive 12s ease-in-out infinite;
}

@keyframes slideZoomActive {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.1);
        filter: brightness(1.1);
    }
}

/* Page À propos - Animation de rotation douce */
.about-intro::before {
    animation: aboutImageRotate 25s linear infinite;
}

@keyframes aboutImageRotate {
    0% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.03) rotate(0.5deg);
    }
    50% {
        transform: scale(1.06) rotate(0deg);
    }
    75% {
        transform: scale(1.03) rotate(-0.5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* Page Services - Animation de pulsation */
.services-intro::before {
    animation: servicesImagePulse 18s ease-in-out infinite;
}

@keyframes servicesImagePulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1) contrast(1);
    }
    33% {
        transform: scale(1.04);
        filter: brightness(1.05) contrast(1.1);
    }
    66% {
        transform: scale(1.08);
        filter: brightness(1.1) contrast(1.05);
    }
}

/* Page Équipe - Animation de balancement */
.team-intro::before {
    animation: teamImageSway 22s ease-in-out infinite;
}

@keyframes teamImageSway {
    0%, 100% {
        transform: scale(1) translateX(0px);
    }
    25% {
        transform: scale(1.02) translateX(5px);
    }
    50% {
        transform: scale(1.05) translateX(0px);
    }
    75% {
        transform: scale(1.02) translateX(-5px);
    }
}

/* Page Géographique - Animation de vague */
.geographic-intro::before {
    animation: geographicImageWave 20s ease-in-out infinite;
}

@keyframes geographicImageWave {
    0%, 100% {
        transform: scale(1) skewX(0deg);
    }
    25% {
        transform: scale(1.03) skewX(0.5deg);
    }
    50% {
        transform: scale(1.06) skewX(0deg);
    }
    75% {
        transform: scale(1.03) skewX(-0.5deg);
    }
}

/* Page Contact - Animation de zoom progressif */
.contact-intro::before {
    animation: contactImageZoom 16s ease-in-out infinite;
}

@keyframes contactImageZoom {
    0%, 100% {
        transform: scale(1);
        filter: saturate(1);
    }
    50% {
        transform: scale(1.12);
        filter: saturate(1.2);
    }
}

/* Effets de particules flottantes */
.page-intro::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    z-index: 1;
    animation: particlesFloat 30s ease-in-out infinite;
    pointer-events: none;
}

@keyframes particlesFloat {
    0%, 100% {
        opacity: 0.3;
        transform: translateY(0px);
    }
    50% {
        opacity: 0.6;
        transform: translateY(-10px);
    }
}

/* Animation d'entrée pour les images */
.page-intro.animate-in::before {
    animation: imageSlideIn 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes imageSlideIn {
    0% {
        transform: scale(1.2) translateY(50px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0px);
        opacity: 1;
    }
}

/* Responsive - Réduire les animations sur mobile */
@media (max-width: 768px) {
    .page-intro::before {
        animation-duration: 30s;
        transform: scale(1.02);
    }
    
    .page-intro:hover::before {
        transform: scale(1.05);
    }
    
    /* Désactiver les animations complexes sur mobile pour les performances */
    @media (prefers-reduced-motion: reduce) {
        .page-intro::before,
        .page-intro::after {
            animation: none;
        }
    }
}

/* Animation de chargement */
.page-intro.loading::before {
    animation: imageLoading 2s ease-in-out infinite;
}

@keyframes imageLoading {
    0%, 100% {
        filter: blur(0px) brightness(1);
    }
    50% {
        filter: blur(1px) brightness(1.1);
    }
}

/* Effet de brillance qui traverse l'image */
.page-intro .shine-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    z-index: 2;
    animation: shine 8s ease-in-out infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}