/* ==========================================================================
   TW Image Mask - CSS masks for Elementor Image widget
   ========================================================================== */

/* --- Base styles --- */
.tw-image-mask img {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: var(--tw-mask-size, contain);
    mask-size: var(--tw-mask-size, contain);
    transform: rotate(var(--tw-mask-rotate, 0deg)) scaleX(var(--tw-mask-flip-x, 1)) scaleY(var(--tw-mask-flip-y, 1));
}

/* Flip via CSS classes (zamiast inline styles) */
.tw-mask-flip-h img { --tw-mask-flip-x: -1; }
.tw-mask-flip-v img { --tw-mask-flip-y: -1; }

/* ==========================================================================
   Blob shapes (6)
   ========================================================================== */

.tw-mask-blob-1 img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M120,2 C155,-5 195,25 200,65 C205,105 185,155 155,180 C125,205 85,210 55,195 C25,180 5,145 0,110 C-5,75 10,35 40,15 C70,-5 85,9 120,2Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M120,2 C155,-5 195,25 200,65 C205,105 185,155 155,180 C125,205 85,210 55,195 C25,180 5,145 0,110 C-5,75 10,35 40,15 C70,-5 85,9 120,2Z' fill='black'/%3E%3C/svg%3E");
}

.tw-mask-blob-2 img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M75,15 C115,-5 165,0 195,30 C210,55 205,95 190,130 C175,165 145,200 105,200 C65,200 25,175 8,140 C-10,105 0,60 20,35 C40,10 50,20 75,15Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M75,15 C115,-5 165,0 195,30 C210,55 205,95 190,130 C175,165 145,200 105,200 C65,200 25,175 8,140 C-10,105 0,60 20,35 C40,10 50,20 75,15Z' fill='black'/%3E%3C/svg%3E");
}

.tw-mask-blob-3 img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M95,2 C130,-5 170,15 192,48 C214,81 218,122 200,155 C182,188 142,213 105,210 C68,207 35,178 16,143 C-3,108 -8,67 12,40 C32,13 60,9 95,2Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M95,2 C130,-5 170,15 192,48 C214,81 218,122 200,155 C182,188 142,213 105,210 C68,207 35,178 16,143 C-3,108 -8,67 12,40 C32,13 60,9 95,2Z' fill='black'/%3E%3C/svg%3E");
}

.tw-mask-blob-4 img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100,0 C125,5 155,20 175,48 C195,76 205,105 195,135 C185,165 162,190 132,200 C102,210 68,200 45,178 C22,156 8,125 3,95 C-2,65 5,38 22,20 C39,2 75,-5 100,0Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100,0 C125,5 155,20 175,48 C195,76 205,105 195,135 C185,165 162,190 132,200 C102,210 68,200 45,178 C22,156 8,125 3,95 C-2,65 5,38 22,20 C39,2 75,-5 100,0Z' fill='black'/%3E%3C/svg%3E");
}

.tw-mask-blob-5 img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M110,5 C150,0 185,25 198,62 C211,99 208,145 185,175 C162,205 122,215 88,205 C54,195 25,165 10,128 C-5,91 0,48 22,22 C44,-4 70,10 110,5Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M110,5 C150,0 185,25 198,62 C211,99 208,145 185,175 C162,205 122,215 88,205 C54,195 25,165 10,128 C-5,91 0,48 22,22 C44,-4 70,10 110,5Z' fill='black'/%3E%3C/svg%3E");
}

.tw-mask-blob-6 img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M80,8 C120,-5 160,10 185,40 C210,70 215,112 200,148 C185,184 150,210 112,208 C74,206 40,182 18,150 C-4,118 -10,78 8,48 C26,18 40,21 80,8Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M80,8 C120,-5 160,10 185,40 C210,70 215,112 200,148 C185,184 150,210 112,208 C74,206 40,182 18,150 C-4,118 -10,78 8,48 C26,18 40,21 80,8Z' fill='black'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Geometric shapes (7)
   ========================================================================== */

.tw-mask-circle img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='100' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='100' fill='black'/%3E%3C/svg%3E");
}

.tw-mask-hexagon img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='100,0 186.6,50 186.6,150 100,200 13.4,150 13.4,50' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='100,0 186.6,50 186.6,150 100,200 13.4,150 13.4,50' fill='black'/%3E%3C/svg%3E");
}

.tw-mask-diamond img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='100,0 200,100 100,200 0,100' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='100,0 200,100 100,200 0,100' fill='black'/%3E%3C/svg%3E");
}

.tw-mask-triangle img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='100,10 190,190 10,190' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='100,10 190,190 10,190' fill='black'/%3E%3C/svg%3E");
}

.tw-mask-star img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='100,5 122.3,69.3 190.4,70.6 136.1,111.7 155.8,176.9 100,138 44.2,176.9 63.9,111.7 9.6,70.6 77.7,69.3' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='100,5 122.3,69.3 190.4,70.6 136.1,111.7 155.8,176.9 100,138 44.2,176.9 63.9,111.7 9.6,70.6 77.7,69.3' fill='black'/%3E%3C/svg%3E");
}

.tw-mask-pentagon img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='100,0 195.1,69.1 158.8,180.9 41.2,180.9 4.9,69.1' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='100,0 195.1,69.1 158.8,180.9 41.2,180.9 4.9,69.1' fill='black'/%3E%3C/svg%3E");
}

.tw-mask-octagon img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='100,0 170.7,29.3 200,100 170.7,170.7 100,200 29.3,170.7 0,100 29.3,29.3' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='100,0 170.7,29.3 200,100 170.7,170.7 100,200 29.3,170.7 0,100 29.3,29.3' fill='black'/%3E%3C/svg%3E");
}

.tw-mask-chevron-right img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='195,100 135,20 5,20 65,100 5,180 135,180' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='195,100 135,20 5,20 65,100 5,180 135,180' fill='black'/%3E%3C/svg%3E");
}

.tw-mask-chevron-left img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='5,100 65,20 195,20 135,100 195,180 65,180' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='5,100 65,20 195,20 135,100 195,180 65,180' fill='black'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Wave shapes (6)
   ========================================================================== */

.tw-mask-wave-1 img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M0,0 L200,0 L200,150 C180,190 150,175 120,180 C90,185 60,200 30,185 C10,175 0,160 0,150Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M0,0 L200,0 L200,150 C180,190 150,175 120,180 C90,185 60,200 30,185 C10,175 0,160 0,150Z' fill='black'/%3E%3C/svg%3E");
}

.tw-mask-wave-2 img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M0,40 C30,10 70,30 100,20 C130,10 170,0 200,30 L200,160 C170,190 130,170 100,180 C70,190 30,200 0,170Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M0,40 C30,10 70,30 100,20 C130,10 170,0 200,30 L200,160 C170,190 130,170 100,180 C70,190 30,200 0,170Z' fill='black'/%3E%3C/svg%3E");
}

.tw-mask-wave-3 img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M10,50 C20,15 60,-5 100,5 C140,15 180,10 195,45 C205,80 200,120 195,155 C185,190 145,210 105,200 C65,195 20,195 8,155 C-5,120 0,85 10,50Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M10,50 C20,15 60,-5 100,5 C140,15 180,10 195,45 C205,80 200,120 195,155 C185,190 145,210 105,200 C65,195 20,195 8,155 C-5,120 0,85 10,50Z' fill='black'/%3E%3C/svg%3E");
}

.tw-mask-wave-4 img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100,0 C120,15 145,5 165,20 C185,35 195,60 195,85 C205,105 200,135 185,155 C170,175 150,190 125,195 C105,205 75,200 55,190 C35,175 15,160 5,135 C-5,110 0,85 5,60 C15,35 35,15 55,5 C75,-5 80,-15 100,0Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100,0 C120,15 145,5 165,20 C185,35 195,60 195,85 C205,105 200,135 185,155 C170,175 150,190 125,195 C105,205 75,200 55,190 C35,175 15,160 5,135 C-5,110 0,85 5,60 C15,35 35,15 55,5 C75,-5 80,-15 100,0Z' fill='black'/%3E%3C/svg%3E");
}

.tw-mask-wave-5 img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M5,60 C15,20 55,-5 100,5 C145,15 190,10 200,50 L200,140 C190,180 155,200 115,195 C75,190 35,205 10,180 C-5,160 -5,100 5,60Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M5,60 C15,20 55,-5 100,5 C145,15 190,10 200,50 L200,140 C190,180 155,200 115,195 C75,190 35,205 10,180 C-5,160 -5,100 5,60Z' fill='black'/%3E%3C/svg%3E");
}

.tw-mask-wave-6 img {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M0,50 C25,0 75,30 100,10 C125,-10 175,10 200,50 L200,150 C175,200 125,170 100,190 C75,210 25,200 0,150Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M0,50 C25,0 75,30 100,10 C125,-10 175,10 200,50 L200,150 C175,200 125,170 100,190 C75,210 25,200 0,150Z' fill='black'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Animation keyframes — wszystkie animują TYLKO maskę (mask-position/mask-size),
   obrazek pozostaje nieruchomy
   ========================================================================== */

/* Rotate: maska orbituje wokół obrazka po okręgu */
@keyframes tw-mask-rotate {
    0%   { -webkit-mask-position: 50% 44%; mask-position: 50% 44%; }
    25%  { -webkit-mask-position: 56% 50%; mask-position: 56% 50%; }
    50%  { -webkit-mask-position: 50% 56%; mask-position: 50% 56%; }
    75%  { -webkit-mask-position: 44% 50%; mask-position: 44% 50%; }
    100% { -webkit-mask-position: 50% 44%; mask-position: 50% 44%; }
}

/* Pulse: maska pulsuje (rośnie/maleje) */
@keyframes tw-mask-pulse {
    0%, 100% {
        -webkit-mask-size: var(--tw-mask-size, contain);
        mask-size: var(--tw-mask-size, contain);
    }
    50% {
        -webkit-mask-size: calc(var(--tw-mask-size, 100%) * 1.08);
        mask-size: calc(var(--tw-mask-size, 100%) * 1.08);
    }
}

/* Float: maska unosi się w górę i opada */
@keyframes tw-mask-float {
    0%, 100% {
        -webkit-mask-position: center 50%;
        mask-position: center 50%;
    }
    50% {
        -webkit-mask-position: center 43%;
        mask-position: center 43%;
    }
}

/* Wobble: maska kołysze się na boki */
@keyframes tw-mask-wobble {
    0%, 100% {
        -webkit-mask-position: 46% center;
        mask-position: 46% center;
    }
    50% {
        -webkit-mask-position: 54% center;
        mask-position: 54% center;
    }
}

/* Morph: maska pulsuje + przesuwa się w różne strony */
@keyframes tw-mask-morph {
    0%, 100% {
        -webkit-mask-size: var(--tw-mask-size, contain);
        mask-size: var(--tw-mask-size, contain);
        -webkit-mask-position: center;
        mask-position: center;
    }
    25% {
        -webkit-mask-size: calc(var(--tw-mask-size, 100%) * 1.05);
        mask-size: calc(var(--tw-mask-size, 100%) * 1.05);
        -webkit-mask-position: 47% 53%;
        mask-position: 47% 53%;
    }
    50% {
        -webkit-mask-size: var(--tw-mask-size, contain);
        mask-size: var(--tw-mask-size, contain);
        -webkit-mask-position: 53% 47%;
        mask-position: 53% 47%;
    }
    75% {
        -webkit-mask-size: calc(var(--tw-mask-size, 100%) * 0.96);
        mask-size: calc(var(--tw-mask-size, 100%) * 0.96);
        -webkit-mask-position: 50% 53%;
        mask-position: 50% 53%;
    }
}

/* ==========================================================================
   Animation application — continuous
   ========================================================================== */

.tw-mask-anim-rotate.tw-mask-trigger-continuous img {
    animation: tw-mask-rotate var(--tw-mask-anim-duration, 2.5s) linear infinite;
}
.tw-mask-anim-pulse.tw-mask-trigger-continuous img {
    animation: tw-mask-pulse var(--tw-mask-anim-duration, 2.5s) ease-in-out infinite;
}
.tw-mask-anim-float.tw-mask-trigger-continuous img {
    animation: tw-mask-float var(--tw-mask-anim-duration, 2.5s) ease-in-out infinite;
}
.tw-mask-anim-wobble.tw-mask-trigger-continuous img {
    animation: tw-mask-wobble var(--tw-mask-anim-duration, 2.5s) ease-in-out infinite;
}
.tw-mask-anim-morph.tw-mask-trigger-continuous img {
    animation: tw-mask-morph var(--tw-mask-anim-duration, 2.5s) ease-in-out infinite;
}

/* ==========================================================================
   Animation application — hover
   ========================================================================== */

.tw-mask-anim-rotate.tw-mask-trigger-hover img,
.tw-mask-anim-float.tw-mask-trigger-hover img,
.tw-mask-anim-wobble.tw-mask-trigger-hover img {
    transition: -webkit-mask-position 0.3s ease, mask-position 0.3s ease;
}

.tw-mask-anim-pulse.tw-mask-trigger-hover img,
.tw-mask-anim-morph.tw-mask-trigger-hover img {
    transition: -webkit-mask-size 0.3s ease, mask-size 0.3s ease,
                -webkit-mask-position 0.3s ease, mask-position 0.3s ease;
}

.tw-mask-anim-rotate.tw-mask-trigger-hover:hover img {
    animation: tw-mask-rotate var(--tw-mask-anim-duration, 2.5s) linear infinite;
}
.tw-mask-anim-pulse.tw-mask-trigger-hover:hover img {
    animation: tw-mask-pulse var(--tw-mask-anim-duration, 2.5s) ease-in-out infinite;
}
.tw-mask-anim-float.tw-mask-trigger-hover:hover img {
    animation: tw-mask-float var(--tw-mask-anim-duration, 2.5s) ease-in-out infinite;
}
.tw-mask-anim-wobble.tw-mask-trigger-hover:hover img {
    animation: tw-mask-wobble var(--tw-mask-anim-duration, 2.5s) ease-in-out infinite;
}
.tw-mask-anim-morph.tw-mask-trigger-hover:hover img {
    animation: tw-mask-morph var(--tw-mask-anim-duration, 2.5s) ease-in-out infinite;
}

/* Czas animacji kontrolowany przez CSS variable --tw-mask-anim-duration (ustawiana przez slider w Elementorze) */