/*
	Autor: 
		PUM! estudio

	Index:
		0 -- Variables
		1 -- Main
		2 -- Layers
		3 -- Boxes
			-- Slider
*/

@charset "UTF-8";




/* 0 -- Variables */

:root {
	--box-p-t-l: var(--unit-40);
	--box-p-b-l: var(--unit-40);
	--box-p-t: var(--unit-30);
	--box-p-b: var(--unit-30);
	--box-p-t-s: var(--unit-20);
	--box-p-b-s: var(--unit-20);

	@media ( max-width: 720px ) { 
		--box-p-t-l: var(--unit-30);
		--box-p-b-l: var(--unit-30);
		--box-p-t: var(--unit-20);
		--box-p-b: var(--unit-20);
		--box-p-t-s: var(--unit-10);
		--box-p-b-s: var(--unit-10);
	} 
}




/* 1 -- Main */

.main img,
.main video { display: block; width: 100%;}




/* 2 -- Layers */

.layers { position: relative; color: var(--c-white);}
.layers-fg { position: relative; z-index: 2;}
.layers-bg { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden;}
.layers-bg img,
.layers-bg video { width: 100%; height: 100%; object-fit: cover;}
.layers-bg::after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--c-black); opacity: .4; }




/* 3 -- Boxes */

.box { padding-top: var(--box-p-t); padding-bottom: var(--box-p-b); }
.box.box-l { padding-top: var(--box-p-t-l); padding-bottom: var(--box-p-b-l);}
.box.box-s { padding-top: var(--box-p-t-s); padding-bottom: var(--box-p-b-s);}

.box-of-h { overflow: hidden;}

/* -- Text */
.box-text { height: 100dvh; display: flex; flex-direction: column; justify-content: center;}

/* -- Scroll (CARDS) */
.box-scroll { padding: 0;}
.box-scroll .box-scroll-text { position: sticky; top: 0; height: 100dvh;}
.box-scroll .box-scroll-item { position: sticky; top: 0; height: 100dvh; width: 100%; display: flex; flex-direction: column; justify-content: center;}
.box-scroll .box-scroll-item .unit-card { transform: rotateZ(var(--card-rotate, 0deg)); transition: transform 1s var(--bezier);}

.box-anchors .box-scroll-anchors { position: sticky; top: 0; z-index: 10; padding-top: var(--unit-8); padding-bottom: var(--unit-20); margin-bottom: var(--unit-30); transition: all .4s var(--bezier);}
.box-anchors .box-scroll-anchors::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, var(--c-select) 75%, transparent 100%); opacity: 0; transition: opacity .4s var(--bezier);}
.box-anchors .box-scroll-anchors .txt-h6 { max-height: 100cqh; overflow: hidden; transition: all .1s var(--bezier);}
.box-anchors .box-scroll-anchors.top { gap: 0;}
.box-anchors .box-scroll-anchors.top::before { opacity: 1; gap: 0;}
.box-anchors .box-scroll-anchors.top .txt-h6 { max-height: 0; }
.box-anchors .box-scroll-in { padding: var(--unit-20) 0;}

@container style(--size-s: true) {	
	.box-anchors .box-scroll-anchors { padding-top: var(--unit-5); padding-bottom: var(--unit-10);}
}

/* -- Scroll (FAQS) */
.box-scroll .box-scroll-text.box-scroll-faqs-text { height: auto; top: 50%;}
.box-scroll .box-scroll-text.box-scroll-faqs-text .unit-text { margin-top: calc(-.6 * var(--txt-h1-lh) );}
.box-scroll .box-scroll-text.box-scroll-faqs-text + .box-scroll-in { margin-bottom: 25vh; padding-bottom: 25vh;}

.box-text-vector { max-width: 17rem; aspect-ratio: 1/1;}
.box-text-vector svg { mix-blend-mode: multiply; max-width: 100%; height: auto;}
.box-text-vector.box-text-vector-ellipse { display: flex; flex-direction: column; align-items: center;}
.box-text-vector.box-text-vector-ellipse svg:not(:first-child) { margin-top: calc(-1 * var(--unit-4));}
.box-text-vector.box-text-vector-ellipse svg ellipse { transform-origin: 50% 0}
.box-text-vector.box-text-vector-square { position: relative;}
.box-text-vector.box-text-vector-square svg.rect { position: absolute; top: 50%; left: 50%;}

@container style(--size-s: true) {	
	.box-text-vector { max-width: 12rem;}
	.box-text-vector.box-text-vector-ellipse svg:not(:first-child) { margin-top: calc(-1 * var(--unit-2));}

}

/* The end -- :P */