/**************************************************************************************************************
***** 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 - Images Overlay Gradient */
.effect--image-overlay-gradient::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--image-overlay-gradient);
}

/* Effect Image Background Glow */
.effect--image-bg-glow{
	position: relative;
	isolation: isolate;
}
.effect--image-bg-glow::before{
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.90) 100%);
	filter: blur(50px);
}

/* 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 */
/***************************************/

.banner__backgroundImage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	clip-path: inset(var(--padding-container-inline));
	clip-path: inset(5%);
}
@media(min-width: 1025px){
	.banner__backgroundImage img {
		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;
	}
}