.image-effect-wrapper{position:relative;display:inline-block}.image-effect-wrapper img{width:100%;display:block;transition:all .5s ease;border-radius:var(--radius, 0)}.image-effect-wrapper.blur img{filter:blur(var(--blur-value, 5px))}.image-effect-wrapper.fadein img{opacity:0;animation:fadeIn var(--fadein-time, 2s) forwards}@keyframes fadeIn{to{opacity:1}}.image-effect-wrapper .bubbles-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 10% 10%, rgba(255,255,255,0.5) 10%, transparent 10%),radial-gradient(circle at 20% 30%, rgba(255,255,255,0.4) 10%, transparent 10%);background-size:20% 20%;animation:bubbles 5s infinite;pointer-events:none}@keyframes bubbles{0%{background-position:0 0, 50% 50%}100%{background-position:0 -100%,50% -100%}}.image-effect-wrapper .stripes-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-image:repeating-linear-gradient(45deg, var(--stripe-color, red), var(--stripe-color, red) 10px, transparent 10px, transparent 20px);animation:stripesAnim 2s ease-out forwards;opacity:0;pointer-events:none}@keyframes stripesAnim{0%{transform:translateY(20px);opacity:0}100%{transform:translateY(0);opacity:1}}.image-quadrant-effect-wrapper-container{padding:2rem}.image-quadrant-effect-wrapper-container .split-image-container{position:relative;width:300px;height:300px;margin:0 auto}.image-quadrant-effect-wrapper-container .quadrant{position:absolute;width:50%;height:50%;background-image:url("https://picsum.photos/300/300");background-size:300px 300px;transition:transform .3s ease}.image-quadrant-effect-wrapper-container .quadrant-1{top:0;left:0;background-position:top left}.image-quadrant-effect-wrapper-container .quadrant-2{top:0;right:0;background-position:top right}.image-quadrant-effect-wrapper-container .quadrant-3{bottom:0;left:0;background-position:bottom left}.image-quadrant-effect-wrapper-container .quadrant-4{bottom:0;right:0;background-position:bottom right}.image-quadrant-effect-wrapper-container .split-image-container:hover .quadrant-1{transform:translate(-10px, -10px)}.image-quadrant-effect-wrapper-container .split-image-container:hover .quadrant-2{transform:translate(10px, -10px)}.image-quadrant-effect-wrapper-container .split-image-container:hover .quadrant-3{transform:translate(-10px, 10px)}.image-quadrant-effect-wrapper-container .split-image-container:hover .quadrant-4{transform:translate(10px, 10px)}.iew-overlay-image-container{display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(3, 1fr);width:600px;grid-gap:.5rem}.iew-overlay-image-container .image{position:relative;padding-bottom:100%}.iew-overlay-image-container .image img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;left:0;position:absolute;top:0}.iew-overlay-image-container .image img:nth-of-type(1){filter:grayscale(1) brightness(40%)}.iew-overlay-image-container .image img:nth-of-type(2){-webkit-clip-path:var(--clip-start);clip-path:var(--clip-start);transition:-webkit-clip-path .5s;transition:clip-path .5s;transition:clip-path .5s,-webkit-clip-path .5s}.iew-overlay-image-container .image:hover img:nth-of-type(2){-webkit-clip-path:var(--clip-end);clip-path:var(--clip-end)}.iew-crossed-image-container img{--g:#0000, #000 .5deg 90deg, #0000 91deg;--m:conic-gradient(from 45deg, var(--g)) 20px 0 no-repeat,
    conic-gradient(from 135deg, var(--g)) 0 20px no-repeat,
      conic-gradient(from 225deg,var(--g)) -20px 0 no-repeat,
    conic-gradient(from 315deg, var(--g)) 0 -20px no-repeat;-webkit-mask:var(--m);mask:var(--m);transition:.3s linear;filter:grayscale(.5);cursor:pointer}.iew-crossed-image-container img:hover{-webkit-mask-position:0 0;mask-position:0 0;filter:grayscale(0)}.iew-sliced-image-container{--g:8px;display:grid;clip-path:inset(1px)}.iew-sliced-image-container>img{--_p:calc(-1 * var(--g));grid-area:1/1;width:350px;aspect-ratio:1;cursor:pointer;transition:.4s .1s}.iew-sliced-image-container>img:first-child{clip-path:polygon(0 0, calc(100% + var(--_p)) 0, 0 calc(100% + var(--_p)))}.iew-sliced-image-container>img:last-child{clip-path:polygon(100% 100%, 100% calc(0% - var(--_p)), calc(0% - var(--_p)) 100%)}.iew-sliced-image-container:hover>img:last-child,.iew-sliced-image-container:hover>img:first-child:hover{--_p:calc(50% - var(--g))}.iew-sliced-image-container:hover>img:first-child,.iew-sliced-image-container:hover>img:first-child:hover+img{--_p:calc(-50% - var(--g))}.iew-sliced-4sqr-image-container img{--_i:0;--_g:10%/45% 45% no-repeat conic-gradient(#000 0 0);mask:left var(--_i) top var(--_g),bottom var(--_i) left var(--_g),top var(--_i) right var(--_g),right var(--_i) bottom var(--_g);filter:grayscale();transition:.3s linear;cursor:pointer}.iew-sliced-4sqr-image-container img:hover{--_i:10%;filter:grayscale(0)}.iew-css-mask-image-container{position:relative;display:inline-block}.iew-css-mask-image-container img{display:block;width:100%;height:auto}.iew-css-mask-image-container .eiew-pattern-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.iew-img-mask-image-container img{mask:url('../masks/circles-mask-whole.svg') no-repeat center;max-width:100%;display:block;aspect-ratio:1;object-fit:cover}/*# sourceMappingURL=style.css.map */