/**
 * Styles CSS pour les animations au scroll
 * Complément du fichier js/scroll-animations.js
 */

/* Styles de base pour les éléments animables */
[data-animate] {
    /* will-change retiré pour économiser la mémoire GPU - les animations fonctionnent sans */
}

/* S'assurer que les images à l'intérieur des éléments animés restent visibles */
[data-animate] img,
[data-animate] .product-image,
[data-animate] .product-card-image,
[data-animate] .product-main-image {
    opacity: 1 !important;
    visibility: visible !important;
    /* S'assurer que les images sont toujours chargées même si le parent a opacity: 0 */
    display: block;
}

/* Respect des préférences de réduction des animations */
@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    [data-animate] img {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Classes utilitaires pour les animations (backward compatibility) */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.animated {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-left.animated {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-right.animated {
    opacity: 1;
    transform: translateX(0);
}

.fade-in {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.fade-in.animated {
    opacity: 1;
}

.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scale-in.animated {
    opacity: 1;
    transform: scale(1);
}

.slide-in-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-in-up.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Délai personnalisé pour les animations en cascade */
[data-animate-delay="100"] {
    transition-delay: 0.1s;
}

[data-animate-delay="200"] {
    transition-delay: 0.2s;
}

[data-animate-delay="300"] {
    transition-delay: 0.3s;
}

[data-animate-delay="400"] {
    transition-delay: 0.4s;
}

[data-animate-delay="500"] {
    transition-delay: 0.5s;
}

/* Animation pour les enfants avec délai progressif */
.animate-children [data-animate] {
    transition-delay: calc(var(--child-index, 0) * 0.1s);
}