/**
 * Animation reveal-on-scroll pour les vignettes .cc4-card.
 * Inspiré de la page /vertical/ de Cygni.
 *
 * Les vignettes viennent de la gauche avec un balayage staggered par colonne
 * (col 1 → col 4, delay croissant).
 *
 * Chargé sur /realisations/ ET /realisations-negatif/.
 * Le JS `js/negative-mode.js` (renommé conceptuellement en reveal-scroll)
 * pose la classe .cc4-visible sur chaque .cc4-card entrant dans le viewport.
 */

/* Transitions communes sur les 3 blocs animables */
.cc4-card .elementor-widget-image.cc4-image img,
.cc4-card .elementor-widget-cygnitextbox,
.cc4-card .elementor-widget-button {
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* État repos (avant cc4-visible) : opacity 0 + décalé à gauche + flou pour l'image */
.cc4-card:not(.cc4-visible) .elementor-widget-image.cc4-image img {
    opacity: 0;
    filter: blur(16px) saturate(0.7) grayscale(1);
    transform: translateX(-100px);
}
.cc4-card:not(.cc4-visible) .elementor-widget-cygnitextbox,
.cc4-card:not(.cc4-visible) .elementor-widget-button {
    opacity: 0;
    transform: translateX(-30px);
}

/* Fallback : animation CSS auto qui joue après 1s UNIQUEMENT si le JS
   n'a pas réussi à s'initialiser (pas de body.cc4-js-ready).
   Cela garantit la visibilité sans casser le reveal-on-scroll normal. */
body:not(.cc4-js-ready) .cc4-card:not(.cc4-visible) .elementor-widget-image.cc4-image img {
    animation: cc4RevealImg 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1s forwards;
}
body:not(.cc4-js-ready) .cc4-card:not(.cc4-visible) .elementor-widget-cygnitextbox,
body:not(.cc4-js-ready) .cc4-card:not(.cc4-visible) .elementor-widget-button {
    animation: cc4RevealText 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1s forwards;
}

@keyframes cc4RevealImg {
    to {
        opacity: 1;
        filter: grayscale(1) contrast(1.12) brightness(0.9);
        transform: translateX(0);
    }
}
@keyframes cc4RevealText {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Le hover doit battre l'animation-fill-mode:forwards → !important sur les
   deux propriétés modifiées (filter et transform). */
.cc4-card:hover .elementor-widget-image.cc4-image img {
    filter: grayscale(0) saturate(1.05) contrast(1) brightness(1) !important;
    transform: translateX(0) scale(1.07) !important;
}

/* État final (cc4-visible) : à sa position + duotone appliqué */
.cc4-card.cc4-visible .elementor-widget-image.cc4-image img {
    opacity: 1;
    transform: translateX(0);
    /* Le filter final (duotone) est appliqué par grid-4cols.css et override
       en mode négatif par negative-mode.css — pas dupliqué ici. */
}
.cc4-card.cc4-visible .elementor-widget-cygnitextbox,
.cc4-card.cc4-visible .elementor-widget-button {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger PAR COLONNE (balayage gauche → droite) */
.cc-grid-row > .elementor-container > .cc4-card:nth-child(1).cc4-visible * { transition-delay: 0s; }
.cc-grid-row > .elementor-container > .cc4-card:nth-child(2).cc4-visible * { transition-delay: 0.12s; }
.cc-grid-row > .elementor-container > .cc4-card:nth-child(3).cc4-visible * { transition-delay: 0.24s; }
.cc-grid-row > .elementor-container > .cc4-card:nth-child(4).cc4-visible * { transition-delay: 0.36s; }