/**
 * WS Booster - Image FX
 * Effets clip-path animes sur widget Image (natif Elementor) et assimiles.
 *
 * Fonctionne via data-ws-img-fx="effet" sur le wrapper du widget.
 * L'image cible : img interne (Elementor natif : .elementor-widget-image img).
 *
 * Triggers :
 * - data-ws-img-fx-trigger="scroll" : l'effet joue une fois quand l'element entre dans le viewport
 *   (ajoute via JS la classe .ws-img-fx-in)
 * - data-ws-img-fx-trigger="load" : l'effet joue au chargement (on ajoute ws-img-fx-in direct)
 * - data-ws-img-fx-trigger="hover" : l'effet joue au :hover
 */

[data-ws-img-fx] {
    --ws-img-fx-duration: 1.1s;
    --ws-img-fx-delay: 0s;
    overflow: visible !important;
}

[data-ws-img-fx] img {
    transition:
        clip-path var(--ws-img-fx-duration) cubic-bezier(0.65, 0, 0.35, 1) var(--ws-img-fx-delay),
        transform var(--ws-img-fx-duration) cubic-bezier(0.65, 0, 0.35, 1) var(--ws-img-fx-delay),
        opacity var(--ws-img-fx-duration) ease var(--ws-img-fx-delay);
    will-change: clip-path, transform;
}

/* ========= LOAD TRIGGER : joue direct ========= */
[data-ws-img-fx][data-ws-img-fx-trigger="load"] img {
    animation-delay: var(--ws-img-fx-delay);
}

/* ========= 1. PARALLELOGRAM WIPE ========= */
[data-ws-img-fx="parallelogram"] img {
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

[data-ws-img-fx="parallelogram"][data-ws-img-fx-trigger="load"] img,
[data-ws-img-fx="parallelogram"][data-ws-img-fx-trigger="scroll"].ws-img-fx-in img,
[data-ws-img-fx="parallelogram"][data-ws-img-fx-trigger="hover"]:hover img {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* ========= 2. HEXAGON REVEAL ========= */
[data-ws-img-fx="hexagon"] img {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

[data-ws-img-fx="hexagon"][data-ws-img-fx-trigger="load"] img,
[data-ws-img-fx="hexagon"][data-ws-img-fx-trigger="scroll"].ws-img-fx-in img,
[data-ws-img-fx="hexagon"][data-ws-img-fx-trigger="hover"]:hover img {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* ========= 3. CURTAIN SPLIT (deux moities s'ecartent) ========= */
[data-ws-img-fx="curtain"] img {
    clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);
}

[data-ws-img-fx="curtain"][data-ws-img-fx-trigger="load"] img,
[data-ws-img-fx="curtain"][data-ws-img-fx-trigger="scroll"].ws-img-fx-in img,
[data-ws-img-fx="curtain"][data-ws-img-fx-trigger="hover"]:hover img {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* ========= 4. CIRCLE ZOOM ========= */
[data-ws-img-fx="circle-zoom"] img {
    clip-path: circle(0% at 50% 50%);
}

[data-ws-img-fx="circle-zoom"][data-ws-img-fx-trigger="load"] img,
[data-ws-img-fx="circle-zoom"][data-ws-img-fx-trigger="scroll"].ws-img-fx-in img,
[data-ws-img-fx="circle-zoom"][data-ws-img-fx-trigger="hover"]:hover img {
    clip-path: circle(75% at 50% 50%);
}

/* ========= 5. DIAGONAL BLINDS ========= */
[data-ws-img-fx="diagonal-blinds"] img {
    clip-path: polygon(
        0% 0%, 0% 0%,
        100% 0%, 100% 0%,
        100% 100%, 100% 100%,
        0% 100%, 0% 100%
    );
    opacity: 0;
    transform: scale(0.95);
}

[data-ws-img-fx="diagonal-blinds"][data-ws-img-fx-trigger="load"] img,
[data-ws-img-fx="diagonal-blinds"][data-ws-img-fx-trigger="scroll"].ws-img-fx-in img,
[data-ws-img-fx="diagonal-blinds"][data-ws-img-fx-trigger="hover"]:hover img {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    opacity: 1;
    transform: scale(1);
}

/* ========= 6. MORPH BLOB -> RECTANGLE ========= */
[data-ws-img-fx="morph-blob"] img {
    clip-path: polygon(
        40% 0%, 80% 10%, 100% 40%,
        95% 75%, 70% 100%, 30% 98%,
        5% 80%, 0% 40%, 15% 10%
    );
    transform: scale(0.95);
}

[data-ws-img-fx="morph-blob"][data-ws-img-fx-trigger="load"] img,
[data-ws-img-fx="morph-blob"][data-ws-img-fx-trigger="scroll"].ws-img-fx-in img,
[data-ws-img-fx="morph-blob"][data-ws-img-fx-trigger="hover"]:hover img {
    clip-path: polygon(
        0% 0%, 100% 0%, 100% 0%,
        100% 100%, 100% 100%, 0% 100%,
        0% 100%, 0% 0%, 0% 0%
    );
    transform: scale(1);
}

/* ========= 7. KEN BURNS (continu, pas de trigger) ========= */
[data-ws-img-fx="ken-burns"] img {
    animation: ws-img-fx-ken-burns 20s ease-in-out infinite alternate;
    transform-origin: center center;
}

@keyframes ws-img-fx-ken-burns {
    0% {
        transform: scale(1) translate(0, 0);
    }
    50% {
        transform: scale(1.12) translate(-2%, -1%);
    }
    100% {
        transform: scale(1.08) translate(2%, 1%);
    }
}

/* ========= 8. TILT 3D au hover souris ========= */
[data-ws-img-fx="tilt-3d"] {
    perspective: 1200px;
    transform-style: preserve-3d;
}

[data-ws-img-fx="tilt-3d"] img {
    transform: rotateX(0) rotateY(0);
    transition: transform 0.25s ease-out;
    will-change: transform;
}

[data-ws-img-fx="tilt-3d"]:hover img {
    transform: rotateX(var(--ws-tilt-y, 0deg)) rotateY(var(--ws-tilt-x, 0deg)) scale(1.02);
}

/* === REDUCE MOTION === */
@media (prefers-reduced-motion: reduce) {
    [data-ws-img-fx] img {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}