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

	Elementi custom Pagina
	Amaro da Morire

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


/*
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-amaro-da-morire-purple: hsla(287, 51%, 41%, 1);
	--color-black: hsla(0, 0%, 0%, 1);
}

.color-amaro-da-morire-purple {
	color: var(--color-amaro-da-morire-purple);
}

.bg-amaro-da-morire-radial-gradient {
	background: radial-gradient(90% 50% at 50% 0%, var(--color-amaro-da-morire-purple) 25%, var(--color-black));
	background: conic-gradient(from 180deg at 50% 22.63%, #000000 0deg, #85339C 180deg, #000000 360deg);
}


.bg-amaro-da-morire-linear-gradient {
	background: linear-gradient(180deg, var(--color-amaro-da-morire-purple) 0%, var(--color-black) 100%);
}


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

body._lp-amaro-da-morire {

	/* Ricolora hamburgher */
	/* .ham-bars {
		&,
		&::before,
		&::after {
		background-color: var(--color-amaro-da-morire-purple);
		}
	} */

	/* Ricolora scrita menu */
	/* .menu-item-icon-hamburger {
		&::after {
			color: var(--color-amaro-da-morire-purple);
		}
	} */

	/* Trasforma logo in maschera con sfondo */
	/* ._nav-logo-figure._logo-isdark {
		background: var(--color-amaro-da-morire-purple);
		-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-amaro-da-morire-purple);
	} */

	/* Ricolora lente ingrandimento */
	/* ._icon.search {
		fill: var(--color-amaro-da-morire-purple);
	} */

	/* Ricolora carrello */
	/* .cart-icon ._icon-cart {
		background: var(--color-amaro-da-morire-purple);
	}
	*/

	.button:not(.glass) {
		background-color: var(--color-amaro-da-morire-purple);
		border-color: var(--color-amaro-da-morire-purple);
		color: var(--color-white);

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

}




/* Tipografia ------------ */


@font-face {
  font-family: "Roslindale";
  src: url("../fonts/RoslindaleDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Salted";
  src: url("../fonts/Salted-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}




body._lp-amaro-da-morire {
	--title-ff: "Roslindale", Georgia, serif;
}

h3 {
	text-transform: uppercase;
}

.font-salted {
	font-family: "Salted", Georgia, serif;
	line-height: 1;
	letter-spacing: 0;
	font-weight: 400;
}





/*------------------------------------*\
	Sezione 1
	Amaro da Morire hero
\*------------------------------------*/

._gt-01._main-section._amaro-da-morire-hero {
	background: radial-gradient(50% 50% at 50% 0%, var(--color-amaro-da-morire-purple), var(--color-black) 80%);
	/* background: conic-gradient(from 180deg at 50% 22.63%, #000000 0deg, #85339C 180deg, #000000 360deg); */
	overflow: hidden;
}

@media (min-width: 960px) {
	._gt-01._main-section._amaro-da-morire-hero {
		min-height: 480px;
		height: 100svh;
		overflow: hidden;
	}
}


	._amaro-da-morire-hero ._amaro-da-morire-title-svg {
		transition-duration: 5s;
		position: absolute;
		width: 100%;
	}



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

._amaro-da-morire-gt-01._main-section {
	padding: 0;
	background: linear-gradient(180deg, var(--color-amaro-da-morire-purple) 0%, var(--color-black) 100%);
}

	._amaro-da-morire-gt-01._main-section .wp-block-columns {
		gap: 0;
	}

		._amaro-da-morire-gt-01 ._col {
			min-height: 75svh; /* altezza minima colonne della parte a scacchiera */
			padding: 4rem;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

			._amaro-da-morire-gt-01 ._col p {
				max-width: 48ch;
			}

		._amaro-da-morire-gt-01 ._col._col-01 {
			position: relative;
			background: var(--color-gray-800);
			padding: 0;
		}

			._amaro-da-morire-gt-01 ._col._col-01 ._wp-block-image {
				position: absolute;
				top: 0;
				left: auto;
				right: 0;
				width: 100%;
				height: 100%;
			}

			._amaro-da-morire-gt-01 ._col._col-01 ._amaro-video-wrap {
				position: relative;
				left: 0;
				width: 100vw;
				height: 175vw;
			}

			._amaro-da-morire-gt-01._img-right ._col._col-01 ._wp-block-image {
				position: absolute;
				top: 0;
				left: 0;
				right: auto;
				width: 100%;
				height: 100%;
			}

		._amaro-da-morire-gt-01 ._col-02 {

		}


@media (min-width: 960px) {
			._amaro-da-morire-gt-01 ._col {
				min-height: 640px;
			}

			._amaro-da-morire-gt-01 ._col._col-01 ._amaro-video-wrap {
				position: absolute;
				top: 0;
				left: auto;
				right: 0;
				width: 50vw;
				height: 100%;
			}

			._amaro-da-morire-gt-01 ._col._col-01 ._wp-block-image {
				min-width: 50vw;
			}
}

		@media (min-width: 1440px) {
			._amaro-da-morire-gt-01 ._col {
				min-height: 800px;
			}
		}



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

._card-feedback-amaro {
	background: var(--color-white);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem;
}

	._card-feedback-amaro figure {
		width: 224px;
	}

	._card-feedback-amaro p {
		margin-bottom: 0;
	}



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

footer .bg-black {
	background: var(--color-amaro-da-morire-purple);
}



/* ==========================================================================
   HALLOWEEN ANIMATIONS
   --------------------------------------------------------------------------
   - Si animano solo translate / rotate / scale / opacity → tutto sul
     compositor, nessun layout o paint per frame.
   - Si usano le proprietà di trasformazione INDIVIDUALI (translate, rotate,
     scale) invece di `transform`: così una classe d'animazione non
     sovrascrive un eventuale transform di Tailwind sullo stesso elemento
     (es. -translate-x-1/2) e animazioni diverse possono convivere.
   - Ogni animazione si regola con custom properties (--hw-*), anche
     inline o con le arbitrary properties di Tailwind: [--hw-float-dur:6s]
   - NB: `animation` è una sola proprietà. Due classi hw-* sullo stesso
     elemento si sovrascrivono: per combinarle serve una classe che le
     elenchi entrambe (vedi .hw-bat).
   ========================================================================== */


/* --------------------------------------------------------------------------
	1. FLOAT — fantasma che fluttua
-------------------------------------------------------------------------- */

.hw-pulse {
  --hw-pulse-dur: 6s;
  animation: hw-pulse var(--hw-pulse-dur) ease-in-out infinite;
}

@keyframes hw-pulse {
  0%, 100% { scale: 1;        	opacity: .95;  }
  50%      { scale: 1.1;  		opacity: 1;  }
}

.hw-pulse-2 {
  --hw-pulse-2-dur: 7s;
  animation: hw-pulse-2 var(--hw-pulse-2-dur) ease-in-out infinite;
}

@keyframes hw-pulse-2 {
  50% 		{ scale: 1;        	opacity: .95;  }
  0%, 100%  { scale: 1.1;  	opacity: 1;  }
}



   /* --------------------------------------------------------------------------
   1. FLOAT — fantasma che fluttua
   -------------------------------------------------------------------------- */
.hw-float {
  --hw-float-y: 14px;
  --hw-float-dur: 4s;
  animation: hw-float var(--hw-float-dur) ease-in-out infinite;
}

@keyframes hw-float {
  0%, 100% { translate: 0 0;                              rotate: -2deg; }
  50%      { translate: 0 calc(var(--hw-float-y) * -1);   rotate: 2deg;  }
}


/* --------------------------------------------------------------------------
   2. GHOST — fluttua, deriva di lato e svanisce a tratti
   -------------------------------------------------------------------------- */
.hw-ghost {
  --hw-ghost-dur: 6s;
  animation: hw-ghost var(--hw-ghost-dur) ease-in-out infinite;
}

@keyframes hw-ghost {
  0%, 100% { translate: 0 0;        opacity: .9;  }
  25%      { translate: 8px -10px;  opacity: .6;  }
  50%      { translate: 0 -18px;    opacity: .35; }
  75%      { translate: -8px -10px; opacity: .7;  }
}


.hw-ghost-2 {
  --hw-ghost-dur: 6s;
  animation: hw-ghost-2 var(--hw-ghost-dur) ease-in-out infinite;
}

@keyframes hw-ghost-2 {
  0%, 100% { translate: -8px -14px; opacity: .5;  }
  35%      { translate: 0 -18px;    opacity: .35; }
  60%      { translate: 8px -6px;   opacity: .8;  }
  85%      { translate: 0 0;        opacity: .9;  }
}



/* --------------------------------------------------------------------------
   3. BAT — pipistrello che attraversa lo schermo sbattendo le ali
   Elemento position:absolute/fixed (es. top-[15%] left-0).
   Il parent deve avere overflow-x:clip per evitare scroll orizzontale.
   -------------------------------------------------------------------------- */
.hw-bat {
  --hw-fly-dur: 9s;
  --hw-flap-dur: .16s;
  animation:
    hw-fly  var(--hw-fly-dur)  linear      infinite,
    hw-flap var(--hw-flap-dur) ease-in-out infinite alternate;
}

/* Solo battito d'ali, senza spostamento */
.hw-flap {
  --hw-flap-dur: .16s;
  animation: hw-flap var(--hw-flap-dur) ease-in-out infinite alternate;
}

@keyframes hw-fly {
  0%   { translate: -15vw 0;     }
  25%  { translate: 20vw -5vh;   }
  50%  { translate: 55vw 2vh;    }
  75%  { translate: 90vw -6vh;   }
  100% { translate: 115vw 0;     }
}

@keyframes hw-flap {
  from { scale: 1 1;     }
  to   { scale: .35 1.1; }
}


/* --------------------------------------------------------------------------
   4. SPIDER — ragno che scende e risale dal filo
   Il filo è un ::before molto lungo che si muove con il ragno: nessuna
   animazione di height. Il parent deve tagliare (overflow:clip).
   Il colore del filo segue currentColor.
   -------------------------------------------------------------------------- */
.hw-spider {
  --hw-spider-drop: 120px;
  --hw-spider-dur: 3.5s;
  position: relative;
  animation: hw-spider var(--hw-spider-dur) cubic-bezier(.5, 0, .5, 1) infinite alternate;
}

.hw-spider::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 100vh;
  background: currentColor;
  opacity: .5;
  translate: -50% 0;
  pointer-events: none;
}

@keyframes hw-spider {
  from { translate: 0 0; }
  to   { translate: 0 var(--hw-spider-drop); }
}


/* --------------------------------------------------------------------------
   5. SWING — lanterna / cartello appeso che dondola
   -------------------------------------------------------------------------- */
.hw-swing {
  --hw-swing-angle: 8deg;
  --hw-swing-dur: 2.2s;
  transform-origin: 50% 0;
  animation: hw-swing var(--hw-swing-dur) ease-in-out infinite alternate;
}

@keyframes hw-swing {
  from { rotate: calc(var(--hw-swing-angle) * -1); }
  to   { rotate: var(--hw-swing-angle); }
}


/* --------------------------------------------------------------------------
   6. GLOW — bagliore pulsante (zucca, candela, CTA)
   Alone su ::after con radial-gradient: si animano solo opacity e scale,
   niente box-shadow / filter animati (che ridipingono a ogni frame).
   -------------------------------------------------------------------------- */
.hw-glow {
  --hw-glow-color: hsla(287, 51%, 41%, .75);
  --hw-glow-dur: 3.6s;
  position: relative;
  isolation: isolate;
}

.hw-glow::after {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--hw-glow-color), transparent);
  pointer-events: none;
  animation: hw-glow var(--hw-glow-dur) ease-in-out infinite alternate;
}

@keyframes hw-glow {
  from { opacity: .4; scale: .9;   }
  to   { opacity: 1;  scale: 1.08; }
}


/* --------------------------------------------------------------------------
   7. FLICKER — luce che sfarfalla (insegna neon, titolo, candela)
   -------------------------------------------------------------------------- */
.hw-flicker {
  --hw-flicker-dur: 3s;
  animation: hw-flicker var(--hw-flicker-dur) linear infinite;
}

@keyframes hw-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1;   }
  20%, 24%, 55%                     { opacity: .35; }
}


/* --------------------------------------------------------------------------
   8. SHIVER / SHAKE — tremore
   .hw-shiver       → brivido breve ogni N secondi (fermo per il resto)
   .hw-shake-hover  → trema all'hover / focus (CTA, card)
   -------------------------------------------------------------------------- */
.hw-shiver {
  --hw-shiver-dur: 4s;
  animation: hw-shiver var(--hw-shiver-dur) linear infinite;
}

.hw-shake-hover:hover,
.hw-shake-hover:focus-visible {
  animation: hw-shake .4s linear 2;
}

@keyframes hw-shake {
  0%, 100% { translate: 0 0;      rotate: 0deg;    }
  20%      { translate: -2px 1px; rotate: -1deg;   }
  40%      { translate: 2px -1px; rotate: 1deg;    }
  60%      { translate: -2px 0;   rotate: -.5deg;  }
  80%      { translate: 1px 1px;  rotate: .5deg;   }
}

@keyframes hw-shiver {
  0%, 88%, 100% { translate: 0 0;      rotate: 0deg;  }
  90%           { translate: -2px 1px; rotate: -1deg; }
  92%           { translate: 2px -1px; rotate: 1deg;  }
  94%           { translate: -2px 0;   rotate: -1deg; }
  96%           { translate: 1px 1px;  rotate: .5deg; }
}


/* --------------------------------------------------------------------------
   9. BLINK — occhi che sbattono le palpebre
   -------------------------------------------------------------------------- */
.hw-blink {
  --hw-blink-dur: 4s;
  transform-origin: center;
  animation: hw-blink var(--hw-blink-dur) ease-in-out infinite;
}

@keyframes hw-blink {
  0%, 92%, 100% { scale: 1 1;  }
  95%           { scale: 1 .1; }
}


/* --------------------------------------------------------------------------
   10. RISE — entrata "dalla tomba" (one-shot al caricamento)
   Stagger: style="--hw-delay:.2s" oppure in Tailwind [--hw-delay:.2s]
   -------------------------------------------------------------------------- */
.hw-rise {
  animation: hw-rise .9s cubic-bezier(.2, .8, .2, 1) var(--hw-delay, 0s) both;
}

@keyframes hw-rise {
  0%   { opacity: 0; translate: 0 60%;  rotate: -4deg; }
  60%  { opacity: 1; translate: 0 -6%;  rotate: 2deg;  }
  100% { opacity: 1; translate: 0 0;    rotate: 0deg;  }
}

/* Variante allo scroll, ZERO JavaScript (scroll-driven animations).
   Nei browser senza supporto l'elemento resta semplicemente visibile.
   animation-timeline va dichiarato DOPO lo shorthand, che lo resetta. */
@supports (animation-timeline: view()) {
  .hw-rise-scroll {
    animation: hw-rise linear both;
    animation-timeline: view();
    animation-range: entry 30% entry 100%;
  }
}


/* --------------------------------------------------------------------------
   11. FOG — banco di nebbia che scorre sul fondo della sezione
   Classe sulla sezione. Il pattern è largo 200% con tile da 50% che si
   ripete: la traslazione di -50% chiude il loop senza salti.
   -------------------------------------------------------------------------- */
.hw-fog {
  --hw-fog-color: rgb(255 255 255 / .16);
  --hw-fog-dur: 30s;
  position: relative;
  overflow: clip;
}

.hw-fog::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 200%;
  height: 45%;
  background:
    radial-gradient(25% 70% at 25% 100%, var(--hw-fog-color), transparent),
    radial-gradient(25% 55% at 75% 100%, var(--hw-fog-color), transparent);
  background-size: 50% 100%;
  background-repeat: repeat-x;
  pointer-events: none;
  animation: hw-fog var(--hw-fog-dur) linear infinite;
}

@keyframes hw-fog {
  to { translate: -50% 0; }
}


/* --------------------------------------------------------------------------
   12. TITLE REVEAL — scroll-driven
   Bordo superiore del titolo al 90% del viewport (10% dal basso) → opacity 0, +48px
   Bordo superiore del titolo al 50% del viewport                → opacity 1, 0
   Senza supporto il titolo resta semplicemente visibile.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  .hw-title-reveal {
    animation: hw-title-reveal ease-in-out both;
    animation-timeline: view(block 20% 20%); /* cioé il punto di fine è al 30% dall'alto del viewport e il punto di inizio al 90% dall'alto del viewport) */
    animation-range: entry-crossing 0% exit-crossing 0%;
  }
}

@keyframes hw-title-reveal {
  from { opacity: 0; translate: 0 0; scale: .9;}
  to   { opacity: 1; translate: 0 0; scale: 1;}
}



/* --------------------------------------------------------------------------
   ACCESSIBILITÀ — rispetta "riduci movimento" del sistema operativo.
   Gli elementi restano visibili nello stato finale/di riposo.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [class^="hw-"], [class*=" hw-"],
  [class^="hw-"]::before, [class*=" hw-"]::before,
  [class^="hw-"]::after,  [class*=" hw-"]::after {
    animation: none !important;
  }
}