/*------------------------------------*\
****************************************

	Elementi custom Pagina
	Vermouth Torino Superiore Rosso

****************************************
\*------------------------------------*/


/*
Il layout della bottiglia considera sia larghezza, sia altezza schermo.
La bottiglia si riduce per schermi piccoli sia per altezza sia larghezza fino a dimensioni minime sotto cui non ha senso ridursi.
Altezza larghezza della bottiglia sono considerate spesso in prorporzione rispetto a pagina, quindi se bottgilia pressoché tutta altezza allora es. height: 90vh; top: 5vvh;


- Dimensioni minime pagina -> 640 x 480px
	- Quindi se un aggetto deve essere metà altezza schermo sarà min-height: 240px poi height: 50vh
	- Se un oggetto deve essere altezza quasi piena es. 90% sarà min-height: 432px poi height: 90vh

- Dimensioni massime pagina -> da definire si vedrà

- Tutti gli oggetti dovrebbero avere idealmente 3 livelli per posizionamento corretto
	- livello 1 = wrap = posizionamento globale nello schermo, spesso con clamp o max
		- fa width, height, top, left quindi il grosso dell'ingombro minimo e massimo e posizione
		- sui livello 1 si applicano anche i _tos e le animazioni
		es. height: max(120px, 25vh); quindi altezza minima 1/4 di 480px da lì poi sali in proporzione
		- di solito livello 1 è flex justify-center per centrare livello 2

	- livello 2 = figure = posizionamento relativo all'interno del wrap, spesso height 100% per prendere impostazioni livello 1 e width auto, impostata tramite aspect ratio e centrata dal flex del livello 1
	- livello 3 = img = posizionamento locale, spesso con contain per non tagliare nulla
*/



/*------------------------------------*\
	Impostazioni globali e menu
\*------------------------------------*/


:root {
	--color-aperifree-red: hsla(8, 76%, 50%, 1);
}


.color-aperifree-red {
	color: var(--color-aperifree-red);
}


/* In questa pagina che ha css custom aggiuntivo non minimizzato
si può fare nesting degli elementi e risparmiare molte dichiarazioni */

body._lp-aperifree {

	/* Ricolora hamburgher */
	/* .ham-bars {
		&,
		&::before,
		&::after {
		background-color: var(--color-aperifree-red);
		}
	} */

	/* Ricolora scrita menu */
	/* .menu-item-icon-hamburger {
		&::after {
			color: var(--color-aperifree-red);
		}
	} */

	/* Trasforma logo in maschera con sfondo */
	/* ._nav-logo-figure._logo-isdark {
		background: var(--color-aperifree-red);
		-webkit-mask: url(https://distilleriaquaglia.it/wp-content/uploads/2026/01/Quaglia-logo-white.svg) center top / contain no-repeat;
		mask: url(https://distilleriaquaglia.it/wp-content/uploads/2026/01/Quaglia-logo-white.svg) center top / contain no-repeat;
	} */

		/* Spegne img logo bianco */
		/* ._nav-logo-figure._logo-isdark .logo {
			display: none;
		} */

	/* Ricolora voci menu */
	/* ._menu-dsk .menu-item a,
	._nav-dsk select.gt_selector {
		color: var(--color-aperifree-red);
	} */

	/* Ricolora lente ingrandimento */
	/* ._icon.search {
		fill: var(--color-aperifree-red);
	} */

	/* Ricolora carrello */
	/* .cart-icon ._icon-cart {
		background: var(--color-aperifree-red);
	}
	*/

	.button:not(.glass) {
		background-color: var(--color-aperifree-red);
		border-color: var(--color-aperifree-red);
		color: var(--color-white);

		._text-wrap {
			color: var(--color-white);
		}
	}

}



/* Transform degli oggetti con tocs */

/* ._prlx-y {
	transition: transform .15s ease-out;
} */

._aperifree-hero-title {
	line-height: .8;
}


/*------------------------------------*\
	Sezione 1
	Bottiglia + Scritte
	- mob
	- dsk
\*------------------------------------*/

._ms-aperifree-01 {
	background: linear-gradient(180deg, hsla(209, 78%, 91%, 1), hsla(206, 68%, 81%, 1));
}


/* Livello 1 - Wrapper della figure bottiglia, per posizionamento globale */
._lp-aperifree-bottiglia-wrap {
	position: relative;
	width: 100%;
	height: max(480px, 80vh);
	z-index: 3;
	will-change: transform;
	/* animation-name: vermouth-bottiglia-wave;
	animation-duration: 10s;
	animation-timing-function: ease-out;
	animation-fill-mode: both;
	animation-iteration-count: infinite; */
	/* al suo interno è flex e centra orizzontalmente la bottiglia che ha width auto e height 100% */
	display: flex;
	justify-content: center;
}

	/* @keyframes vermouth-bottiglia-wave {
		0% {
			transform: rotate(2deg);
		}
		50% {
			transform: rotate(-1deg);
		}
		100% {
			transform: rotate(2deg);
		}
	} */

	/* Livello 2 - Figure della bottiglia */
	._lp-aperifree-bottiglia-figure {
		@apply relative w-full h-full;
	}

		/* Livello 3 - Img della bottiglia */
		._lp-aperifree-bottiglia-figure img {
			@apply absolute h-full object-contain object-center; /* solo height 100%, larghezza auto che si imposta con aspect ratio */
			width: auto;
		}


._block-2-1 {
	position: relative;
	margin-top: 4rem;
	width: 90%;
	left: 5%;
}

._block-1-1 {
	position: relative;
	margin-top: 4rem;
	width: 90%;
	left: 5%;
}

._block-2-2 {
	position: relative;
	margin-top: 4rem;
	width: 90%;
	left: 5%;
}



/* Medium ------------------- */
@media (min-width: 640px) {

	._lp-vermouth-bottiglia-wrap {
		position: sticky;
		top: max(80px, 9vh);
	}

	._block-2-1 {
		margin-top: 0;
		width: 100%;
		left: 0%;
	}

	._block-1-1 {
		width: 100%;
		left: 0%;
	}

	._block-2-2 {
		width: 100%;
		left: 0%;
	}

}


/* Large ------------------- */
@media (min-width: 960px) {

	._lp-vermouth-bottiglia-wrap {
		top: max(80px, 9vh);
		width: 300px;
		height: max(520px, 80vh);
	}

	._block-2-1 { }

	._block-1-1 {
		margin-top: max(180px, 30vh);
	}

	._block-2-2 {
		margin-top: max(180px, 30vh);
	}

}


/* XLarge ------------------- */
@media (min-width: 1280px) {

	._lp-vermouth-bottiglia-wrap {
		height: max(640px, 82vh);
	}

}


/* XXLarge ------------------- */
@media (min-width: 1440px) {


}



/*------------------------------------*\
	Sezione 2
	Video quaglia che vola
\*------------------------------------*/


._ms-aperifree-02 {
	background: hsla(205, 85%, 84%, 1);
}

	._video-flying-01 {
		aspect-ratio: 4 / 3;
		width: 280px;
		mix-blend-mode: darken;
	}