/**
 * WS Booster - Masque Move
 * Masques animes appliques au widget Image (et assimiles).
 * Pendant anime du masque natif Elementor.
 *
 * Active via data-ws-mask-move="<shape>" sur le wrapper du widget.
 * Variables CSS :
 *   --ws-mm-speed : vitesse de l'animation (default 3s)
 *   --ws-mm-size  : taille du masque en % (default 90%)
 */

[data-ws-mask-move] {
    --ws-mm-speed: 3s;
    --ws-mm-size: 90%;
    overflow: visible !important;
}

[data-ws-mask-move] img {
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: var(--ws-mm-size) var(--ws-mm-size);
            mask-size: var(--ws-mm-size) var(--ws-mm-size);
    will-change: mask-position, mask-size, transform;
}

/* ========================================================================
   1. BLOB PULSE — la forme blob respire (scale)
   ======================================================================== */
[data-ws-mask-move="blob-pulse"] img {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='black' d='M100,15 C145,15 180,55 180,100 C180,145 145,185 100,185 C55,185 20,145 20,100 C20,55 55,15 100,15 Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='black' d='M100,15 C145,15 180,55 180,100 C180,145 145,185 100,185 C55,185 20,145 20,100 C20,55 55,15 100,15 Z'/></svg>");
    animation: ws-mm-scale var(--ws-mm-speed) ease-in-out infinite alternate;
}

@keyframes ws-mm-scale {
    from { -webkit-mask-size: var(--ws-mm-size) var(--ws-mm-size); mask-size: var(--ws-mm-size) var(--ws-mm-size); }
    to   { -webkit-mask-size: calc(var(--ws-mm-size) - 15%) calc(var(--ws-mm-size) - 15%); mask-size: calc(var(--ws-mm-size) - 15%) calc(var(--ws-mm-size) - 15%); }
}

/* ========================================================================
   2. BLOB MORPH — clip-path qui transitionne entre 4 formes blob
   On utilise clip-path au lieu de mask pour pouvoir morpher avec keyframes
   ======================================================================== */
[data-ws-mask-move="blob-morph"] img {
    -webkit-mask-image: none;
            mask-image: none;
    clip-path: polygon(50% 5%, 80% 12%, 95% 38%, 92% 70%, 70% 92%, 35% 95%, 12% 78%, 5% 45%, 22% 18%);
    animation: ws-mm-blob-morph var(--ws-mm-speed) ease-in-out infinite;
}

@keyframes ws-mm-blob-morph {
    0%   { clip-path: polygon(50% 5%, 80% 12%, 95% 38%, 92% 70%, 70% 92%, 35% 95%, 12% 78%, 5% 45%, 22% 18%); }
    25%  { clip-path: polygon(48% 8%, 75% 5%, 95% 28%, 95% 65%, 78% 90%, 40% 95%, 8% 80%, 5% 40%, 18% 12%); }
    50%  { clip-path: polygon(55% 8%, 88% 18%, 92% 50%, 88% 78%, 65% 95%, 30% 92%, 8% 70%, 8% 35%, 28% 10%); }
    75%  { clip-path: polygon(45% 5%, 78% 15%, 92% 45%, 95% 75%, 72% 95%, 28% 88%, 5% 65%, 8% 30%, 25% 8%); }
    100% { clip-path: polygon(50% 5%, 80% 12%, 95% 38%, 92% 70%, 70% 92%, 35% 95%, 12% 78%, 5% 45%, 22% 18%); }
}

/* ========================================================================
   3. CERCLE PULSE — clip-path circle qui s'etend/retracte
   ======================================================================== */
[data-ws-mask-move="circle-pulse"] img {
    -webkit-mask-image: none;
            mask-image: none;
    clip-path: circle(45% at 50% 50%);
    animation: ws-mm-circle-pulse var(--ws-mm-speed) ease-in-out infinite alternate;
}

@keyframes ws-mm-circle-pulse {
    from { clip-path: circle(45% at 50% 50%); }
    to   { clip-path: circle(35% at 50% 50%); }
}

/* ========================================================================
   4. HEXAGONE SPIN — polygon hexagone qui tourne
   ======================================================================== */
[data-ws-mask-move="hexagon-spin"] img {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><polygon fill='black' points='100,10 180,55 180,145 100,190 20,145 20,55'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><polygon fill='black' points='100,10 180,55 180,145 100,190 20,145 20,55'/></svg>");
    animation: ws-mm-spin var(--ws-mm-speed) linear infinite;
}

@keyframes ws-mm-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ========================================================================
   5. ETOILE SPIN — etoile 5 branches qui tourne lentement
   ======================================================================== */
[data-ws-mask-move="star-spin"] img {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><polygon fill='black' points='100,15 122,75 188,80 138,120 158,185 100,148 42,185 62,120 12,80 78,75'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><polygon fill='black' points='100,15 122,75 188,80 138,120 158,185 100,148 42,185 62,120 12,80 78,75'/></svg>");
    animation: ws-mm-spin-slow calc(var(--ws-mm-speed) * 2) linear infinite;
}

@keyframes ws-mm-spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ========================================================================
   6. DROP PULSE — goutte qui s'etire vers le bas
   ======================================================================== */
[data-ws-mask-move="drop-pulse"] img {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='black' d='M100,15 C140,15 175,80 175,125 C175,165 145,190 100,190 C55,190 25,165 25,125 C25,80 60,15 100,15 Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='black' d='M100,15 C140,15 175,80 175,125 C175,165 145,190 100,190 C55,190 25,165 25,125 C25,80 60,15 100,15 Z'/></svg>");
    animation: ws-mm-drop var(--ws-mm-speed) ease-in-out infinite alternate;
}

@keyframes ws-mm-drop {
    from { -webkit-mask-size: var(--ws-mm-size) var(--ws-mm-size); mask-size: var(--ws-mm-size) var(--ws-mm-size); transform: scaleY(1); }
    to   { -webkit-mask-size: var(--ws-mm-size) var(--ws-mm-size); mask-size: var(--ws-mm-size) var(--ws-mm-size); transform: scaleY(1.08) translateY(-2%); }
}

/* ========================================================================
   7. ARC SWEEP — arc qui balaye 360 degres
   ======================================================================== */
[data-ws-mask-move="arc-sweep"] img {
    -webkit-mask-image: conic-gradient(from 0deg, black 0deg, black 90deg, transparent 110deg, transparent 360deg);
            mask-image: conic-gradient(from 0deg, black 0deg, black 90deg, transparent 110deg, transparent 360deg);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    animation: ws-mm-spin var(--ws-mm-speed) linear infinite;
}

/* ========================================================================
   8. WAVE FLOW — masque qui ondule horizontalement
   ======================================================================== */
[data-ws-mask-move="wave-flow"] img {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='black' d='M0,40 Q50,20 100,40 T200,40 L200,200 L0,200 Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='black' d='M0,40 Q50,20 100,40 T200,40 L200,200 L0,200 Z'/></svg>");
    -webkit-mask-size: 200% 100%;
            mask-size: 200% 100%;
    animation: ws-mm-wave var(--ws-mm-speed) linear infinite;
}

@keyframes ws-mm-wave {
    from { -webkit-mask-position: 0% center; mask-position: 0% center; }
    to   { -webkit-mask-position: -100% center; mask-position: -100% center; }
}

/* ========================================================================
   INVERT : la forme devient le trou, l'image visible AUTOUR
   ======================================================================== */
[data-ws-mask-move-invert="yes"] img {
    -webkit-mask-mode: alpha;
            mask-mode: alpha;
    -webkit-mask-composite: source-out;
            mask-composite: subtract;
}

/* Pour clip-path based shapes : on inverse via clip-path "evenodd" rule
   (impossible en pure CSS clip-path, donc on switch sur mask SVG inverse) */
[data-ws-mask-move-invert="yes"][data-ws-mask-move="blob-morph"] img,
[data-ws-mask-move-invert="yes"][data-ws-mask-move="circle-pulse"] img {
    /* Pour les clip-path, on triche : on applique un contour-mask via box-shadow
       OU on switche vers SVG mask pour ces 2 shapes en mode invert */
    clip-path: none;
}

[data-ws-mask-move-invert="yes"][data-ws-mask-move="circle-pulse"] img {
    -webkit-mask-image: radial-gradient(circle at center, transparent 35%, black 36%);
            mask-image: radial-gradient(circle at center, transparent 35%, black 36%);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    animation: ws-mm-circle-invert var(--ws-mm-speed) ease-in-out infinite alternate;
}

@keyframes ws-mm-circle-invert {
    from { -webkit-mask-image: radial-gradient(circle at center, transparent 35%, black 36%); mask-image: radial-gradient(circle at center, transparent 35%, black 36%); }
    to   { -webkit-mask-image: radial-gradient(circle at center, transparent 45%, black 46%); mask-image: radial-gradient(circle at center, transparent 45%, black 46%); }
}

/* === REDUCE MOTION === */
@media (prefers-reduced-motion: reduce) {
    [data-ws-mask-move] img {
        animation: none !important;
        transition: none !important;
    }
}