/**************************************************************************************************************
***** EFFECTS *************************************************************************************************
**************************************************************************************************************/
/**********************/
/* Effects ************/
/**********************/
.transition{transition: var(--trans);}

.image,
.aspect-ratio-square,
.aspect-ratio-portrait,
.aspect-ratio-landscape		{width: 100%;}
.aspect-ratio-square img	{aspect-ratio: var(--aspect-ratio--square);}
.aspect-ratio-portrait img	{aspect-ratio: var(--aspect-ratio--portrait);}
.aspect-ratio-landscape	img	{aspect-ratio: var(--aspect-ratio--landscape);}

[data-aspect-ratio]				{width: 100%;}
[data-aspect-ratio] img			{object-fit: contain;}
[data-aspect-ratio="free"] 		img{aspect-ratio: unset;}
[data-aspect-ratio="square"] 	picture,
[data-aspect-ratio="square"] 	img{aspect-ratio: var(--image-aspect-ratio-sq);}
[data-aspect-ratio="portrait"]  picture,
[data-aspect-ratio="portrait"]  img{aspect-ratio: var(--image-aspect-ratio-pr);}
[data-aspect-ratio="landscape"] picture,
[data-aspect-ratio="landscape"] img{aspect-ratio: var(--image-aspect-ratio-lp);}

/* Effect Image Scale */
.effect--image-scale img{
	transition: var(--trans-image);
}
.effect--image-scale:hover img,
.effect--image-scale:focus img{
	transform: var(--transform-image);
}

/* Effect - Images Overlay */
.effect--image-overlay{
	position: relative;
}
.effect--image-overlay::after{
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--image-overlay, #0000001A);
	pointer-events: none;
}

/* Effect - Image Border Radius */
.effect--image-br{
	--effect-size: 30px;
}
.effect--image-br picture{
	border-bottom-left-radius: calc(var(--effect-size));
	border-top-right-radius: calc(var(--effect-size));
	overflow: hidden;
}
.effect--image-br picture img{
	width: 100%;
	aspect-ratio: var(--image-aspect-ratio-lp);
}

.effect--image-br.effect--image-br--alt picture{
	border-radius: 0;
	border-top-left-radius: calc(var(--effect-size));
	border-bottom-right-radius: calc(var(--effect-size));
	overflow: hidden;
}


/* Effect - Box Shadow */
.effect--box-shadow{box-shadow: var(--box-shadow);}


/****************************/
/* Loading ******************/
/****************************/
body > .loading-wrapper{
	position: fixed;
}
.loading-wrapper{
	position: absolute;
	inset: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-white-60);
	transition: var(--trans-300);
	z-index: var(--z-top);
	opacity: 1;
}
.loading-wrapper svg{
	width: var(--size-200);
	height: var(--size-200);
}
.loading-wrapper svg{
	animation: var(--animation-spinner);
}
.loading-wrapper.inactive{
	opacity: 0;
	pointer-events: none;
}
@keyframes spinner{
	100%{
		transform: rotate(360deg);
	}
}

/**************************************************************************************************************
***** GSAP ****************************************************************************************************
**************************************************************************************************************/
/****************************/
/* GSAP Reveal **************/
/****************************/
.reveal{opacity: 0;transform: translateY(50px);}

/****************************/
/* GSAP Reveal Picture ******/
/****************************/
.reveal-picture{clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);}
.reveal-picture picture,
.reveal-picture figure{height:100%;transform: translateY(20%);opacity: 0}

/* .reveal-picture{clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);}
.reveal-picture picture{transform: translateY(20%);} */

.reveal-picture-zoomOut picture{transform: scale(1.2);}

/****************************/
/* GSAP Reveal Batch ********/
/****************************/
.reveal-batch .item{
    opacity: 0;
    transform: translateY(50px);
    transition: none;
}

/***************************************/
/* GSAP Reveal Banner Background Image */
/***************************************/
[data-component="banner"] [data-widget="background-image"] picture{
	width: 100%;
	height: 100%;
	object-fit: cover;
	clip-path: inset(var(--padding-container-inline));
	clip-path: inset(5%);
}
@media(min-width: 1025px){

	[data-component="banner"] [data-widget="background-image"] picture {
		clip-path: inset(10%);
	}
}

/*****************************/
/* GSAP Reveal Filtered Item */
/*****************************/
.item.item--reveal{
    opacity: 0;
	transform: translateY(50px);
	transition: none;
}



/*****************************/
/* GSAP Parallax Item ********/
/*****************************/
main:has([data-component="parallax-items"]){
	isolation: isolate;
	position: relative;
	overflow: hidden;
}
[data-component="parallax-items"]{
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	height: 100%;
}
[data-component="parallax-items"] .parallax-item{
	position: absolute;
	top: 0%;
	width: auto;
}
[data-component="parallax-items"] .parallax-item svg{
	width: min(50vw, 200px);
}
[data-component="parallax-items"] .parallax-item:nth-child(odd){
	left: 0;
}
[data-component="parallax-items"] .parallax-item:nth-child(even){
	right: 0;
}
[data-component="parallax-items"] .parallax-item:nth-child(odd) svg{
	transform: translateX(-30%);
}
[data-component="parallax-items"] .parallax-item:nth-child(even) svg{
	transform: translateX(30%) scaleX(-1);
}

[data-component="parallax-items"] .parallax-item:nth-child(1){
	top: 33%;
}
[data-component="parallax-items"] .parallax-item:nth-child(2){
	top: 66%;
}

@media(min-width:1025px){
	[data-component="parallax-items"] .parallax-item svg{
		width: 300px;
	}
}


/*************************************************************************************************************/
/***** PROJECT ***********************************************************************************************/
/*************************************************************************************************************/
/* Effect - Image Before & After Colors */
.effect--image-before-after{
	--effect-size: min(4vw, 30px);
}
.effect--image-before-after .item__thumbnail{
	position: relative;
	isolation: isolate;
	padding: var(--effect-size);
}
.effect--image-before-after .item__thumbnail:before,
.effect--image-before-after .item__thumbnail:after{
	content: '';
	position: absolute;
	width: calc(100% - (2 * var(--effect-size)));
	height: calc(100% - (2 * var(--effect-size)));
	aspect-ratio: var(--image-aspect-ratio-lp);
	overflow: hidden;
	z-index: -1;
}
.effect--image-before-after .item__thumbnail:before{
	top: calc(2 * var(--effect-size));
	left: 0;
	background-color: hsla(var(--init-accent-400-hsl), 1);
}
.effect--image-before-after .item__thumbnail:after{
	top: 0px;
	left: calc(2 * var(--effect-size));
	background-color: hsla(var(--init-accent-410-hsl), 1);
}

.effect--image-before-after .item__thumbnail,
.effect--image-before-after picture{
	/* border-bottom-left-radius: calc(var(--effect-size)); */
	/* border-top-right-radius: calc(var(--effect-size)); */
	overflow: hidden;
}
.effect--image-before-after picture img{
	width: 100%;
	aspect-ratio: var(--image-aspect-ratio-lp);
}

/* Effects - Combination Background Before */
[data-component="swiper"][data-type="gallery"]:has(+ [data-component="features"]),
[data-component="swiper"][data-type="gallery"]:has(+ [data-component="features"]) + [data-component="features"],
[data-component="abstract-content-image-content"]:has(+ [data-component="image"]),
[data-component="abstract-content-image-content"]:has(+ [data-component="image"]) + [data-component="image"]{
	position: relative;
	isolation: isolate;
}
[data-component="swiper"][data-type="gallery"]:has(+ [data-component="features"]):before,
[data-component="swiper"][data-type="gallery"]:has(+ [data-component="features"]) + [data-component="features"]:before,
[data-component="abstract-content-image-content"]:has(+ [data-component="image"])::before,
[data-component="abstract-content-image-content"]:has(+ [data-component="image"]) + [data-component="image"]::before{
	content: '';
	position: absolute;
	background-color: var(--init-background-alt);
}
[data-component="swiper"][data-type="gallery"]:has(+ [data-component="features"]):before,
[data-component="abstract-content-image-content"]:has(+ [data-component="image"])::before{
	inset: 50% 0 0 0;
}
[data-component="swiper"][data-type="gallery"]:has(+ [data-component="features"]) + [data-component="features"]:before,
[data-component="abstract-content-image-content"]:has(+ [data-component="image"]) + [data-component="image"]::before{
	inset: 0 0 75% 0;
}

@media(min-width: 1025px){
	[data-component="swiper"][data-type="gallery"]:has(+ [data-component="features"]):before,
	[data-component="abstract-content-image-content"]:has(+ [data-component="image"])::before{
		inset: 70% 0 0 0;
	}
}