.is-style-round-corners img {
	border-radius: 20px;
}

/*
mask
--------------------------------------------- */

.wp-block-image[class*="is-style-mask-clip"] {
	background-size: 0;
	background-position: center;
	position: relative;
	overflow: hidden;
	z-index: 1;
	-webkit-mask-image: url(../images/mask.png);
	mask-image: url(../images/mask.png);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.wp-block-image[class*="is-style-mask-clip"] img {
	width: 100%;
}

.wp-block-image.is-style-mask-clip2 {
	-webkit-mask-image: url(../images/mask2.png);
	mask-image: url(../images/mask2.png);
}

.wp-block-image.is-style-mask-clip3 {
	-webkit-mask-image: url(../images/mask3.png);
	mask-image: url(../images/mask3.png);
}

.wp-block-image.is-style-mask-clip4 {
	-webkit-mask-image: url(../images/mask4.png);
	mask-image: url(../images/mask4.png);
}

.wp-block-image.is-style-mask-clip5 {
	-webkit-mask-image: url(../images/mask5.png);
	mask-image: url(../images/mask5.png);
}

/*
mask animate
--------------------------------------------- */

.animate-image {
	position: relative;
}

.animate-image:before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(249,249,249,0.5);
	transform: translate(0,0);
	transition: all 0.7s ease;
	z-index: 1;
}

.animate-image:after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--six);
	transform: translate(0,0);
	transition: all 0.7s ease;
	z-index: 3;
}

.animate-image img {
	transition: all 0.7s ease;
	transform: translate(0, 0);
}

.animate-image.in-view .animate-overlay {
	background-size: cover;
	background-position: center;
	position: absolute;
	inset: 0;
	transform: translate(0, 0);
	transition: all 0.5s ease;
	animation-delay: 0.7s;
	width: calc(100% + 2px);
	left: -1px;
	z-index: 5;
}

.editor-styles-wrapper .animate-image img {
	clip-path: none;
}

/* Animate Bottom-left → top-right */

.animate-bottom-left:before,
.animate-bottom-left:after,
.animate-bottom-left img {
	clip-path: polygon(0 60%, 5% 60%, 5% 80%, 0 80%);
	transform-origin: bottom left;
}

.animate-bottom-left.in-view img {
	transform-origin: bottom left;
	animation: imageGrow 2s forwards;
}

.animate-bottom-left.in-view .animate-overlay {
	clip-path: polygon(0 60%, 5% 60%, 5% 80%, 0 80%);
	animation: imageGrow 4s forwards;
    animation-delay: 0.7s;
	transform-origin: bottom left;
}

.animate-bottom-left.in-view:before {
	animation: imageGrow 2s forwards;
	animation-delay: 0.4s;
}

.animate-bottom-left.in-view:after {
	animation: imageGrow 3s forwards;
	animation-delay: 0.5s;
}

@keyframes imageGrow {
	0%   { clip-path: polygon(0 35%, 25% 35%, 25% 100%, 0% 100%);}
	20%  { clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);} /* grow */
	100% { clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);} /* stay */
}

/* Animate Bottom-right → top-left */

.animate-bottom-right:before,
.animate-bottom-right:after,
.animate-bottom-right img {
	clip-path: polygon(100% 60%, 95% 60%, 95% 80%, 100% 80%);
	transform-origin: bottom right;
}

.animate-bottom-right.in-view img {
	animation: imageGrowBR 2s forwards;
}

.animate-bottom-right.in-view:before {
	background: rgb(28 45 51 / 90%);
	background-blend-mode: multiply;
	mix-blend-mode: multiply;
	animation: imageGrowBR 2s forwards;
	animation-delay: 0.4s;
}

.animate-bottom-right.in-view:after {
	animation: imageGrowBR 3s forwards;
	animation-delay: 0.5s;
}

.animate-bottom-right.in-view .animate-overlay {
	clip-path: polygon(100% 60%, 95% 60%, 95% 80%, 100% 80%);
	transform-origin: bottom right;
	animation: imageGrowBR 4s forwards;
	animation-delay: 0.7s;
}

@keyframes imageGrowBR {
    0% {
        clip-path: polygon(100% 35%, 75% 35%, 75% 100%, 100% 100%);
    }
    20% {
        clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
    }
    100% {
        clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
    }
}

@media only screen and (max-width: 980px) {

	.wp-block-image[class*="is-style-mask-clip"] {
		margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
		margin-left: calc(-1 * var(--wp--style--root--padding-right, 0px));
	}

}