/*
 * GOYN — Goccia
 *
 * Fonte: src/components/Bottle.jsx e le classi .drop* di src/styles.css del
 * progetto React.
 *
 * ISOLAMENTO: nessun selettore globale. Tutto discende da `.goyn-bottle`.
 *
 * DAL TEMA, NON RISCRITTI: `.goyn-btn` e le sue varianti, `.goyn-line`,
 * `.goyn-outline`, `.goyn-eyebrow`, `.goyn-display`, `.goyn-label`,
 * `.goyn-accent`, `.goyn-wrap`.
 *
 * DA reveal.css: `.is-armed` / `.is-in` e le entrate. Qui solo le misure.
 *
 * ⚠️ Nessuna regola di base parte da `opacity: 0`.
 *
 * INDICE
 *   1. Radice e costanti locali
 *   2. La fotografia di fondo
 *   3. I tre veli
 *   4. I cerchi tratteggiati
 *   5. Impaginazione: intestazione, griglia, chiusura
 *   6. Il beneficio
 *   7. Entrate: le misure di questa sezione
 *   8. Responsive
 *   9. prefers-reduced-motion
 */

/* ============================================================
   1. Radice e costanti locali
   ------------------------------------------------------------
   La sezione è alta almeno uno schermo e centra il contenuto. `min-height` e
   non `height`: su un portatile basso l'ultima riga di testo finirebbe tagliata
   dall'`overflow: hidden`, e la nota è nell'originale — non è una precauzione
   teorica.

   Le spaziature sono fluide sull'ALTEZZA della finestra (`vh`) e non sulla
   larghezza: è una sezione che deve stare in uno schermo, quindi ciò che conta
   è quanto è alto.
   ============================================================ */

.goyn-bottle {
	--goyn-bt-bg: var(--goyn-cream-2, #efebe0);

	/* Un crema più chiaro del fondo, fuori palette: è il colore dei tre veli. */
	--goyn-bt-veil: #f7f4ec;
	--goyn-bt-veil-opacity: 0.38;
	--goyn-bt-ring: rgba(184, 92, 56, 0.4);

	--goyn-bt-eyebrow: var(--goyn-rust, #c0603c);
	--goyn-bt-title: var(--goyn-petrol, #1f535d);
	--goyn-bt-outline: var(--goyn-rust, #c0603c);
	--goyn-bt-outline-w: 1.6px;
	--goyn-bt-label: var(--goyn-petrol, #1f535d);
	--goyn-bt-chip: var(--goyn-petrol-deep, #163e46);
	--goyn-bt-text: var(--goyn-ink, #1a2c30);
	--goyn-bt-claim: var(--goyn-rust, #c0603c);

	--goyn-bt-shot-position: center;
	--goyn-bt-pad-top: 92px;
	--goyn-bt-pad-bottom: 96px;
	--goyn-bt-center: 30vw;
	--goyn-bt-item-max: 360px;

	--goyn-bt-row-stagger: 120ms;
	--goyn-bt-col-stagger: 60ms;

	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	/* I due `clamp` dell'originale: lo spazio non scende sotto 48/56px e non
	   supera il valore scelto nel pannello. */
	padding: clamp(48px, 8vh, var(--goyn-bt-pad-top)) var(--goyn-pad, clamp(22px, 5vw, 80px))
		clamp(56px, 7vh, var(--goyn-bt-pad-bottom));
	background-color: var(--goyn-bt-bg);
}

/* `svh` e non `vh`: su mobile `vh` include la barra del browser, e la sezione
   risulterebbe più alta dello schermo utile con l'ultima riga sotto la piega. */
.goyn-bottle--full {
	min-height: 100svh;
}

/* ============================================================
   2. La fotografia di fondo
   ------------------------------------------------------------
   Non si usa `.goyn-photo` del tema: quello porta un fondo petrol scuro, che
   qui si vedrebbe ai bordi mentre la foto carica su una sezione crema.
   ============================================================ */

.goyn-bottle__shot {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.goyn-bottle .goyn-bottle__shot-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--goyn-bt-shot-position);
}

/* ============================================================
   3. I tre veli
   ------------------------------------------------------------
   Uno uniforme e due sfumature, ai lati e sopra-sotto. Insieme fanno una cosa
   sola: schiarire le due fasce dove sta il testo e lasciare pulito il centro,
   dove sta la goccia.

   Le opacità sono quelle dell'originale. Il colore è uno solo, e le gradazioni
   si ricavano con `color-mix()`: così il cliente cambia un colore e i tre veli
   restano coerenti. `color-mix` con `transparent` è il modo standard di dire
   "questo colore al 62%" senza conoscerne i canali.

   ⚠️ Ogni `color-mix()` è preceduto dal valore dell'originale in `rgba()`. Non è
      ridondanza: su un browser che non lo supporta la dichiarazione viene
      scartata, e senza ripiego i veli sarebbero trasparenti — cioè il testo
      finirebbe direttamente sulla fotografia, illeggibile. Il ripiego perde solo
      la possibilità di cambiare colore dal pannello.
   ============================================================ */

.goyn-bottle__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Il primo: uniforme, smorza tutta la foto. */
.goyn-bottle__veil {
	background-color: rgba(247, 244, 236, 0.38);
	background-color: color-mix(in srgb, var(--goyn-bt-veil) calc(var(--goyn-bt-veil-opacity) * 100%), transparent);
}

/*
 * Il secondo: opaco ai bordi, trasparente fra il 40% e il 60%. È la finestra
 * che lascia vedere la goccia.
 */
.goyn-bottle__veil--x {
	background-color: transparent;
	background-image: linear-gradient(
		90deg,
		rgba(247, 244, 236, 0.9) 0%,
		rgba(247, 244, 236, 0.62) 22%,
		rgba(247, 244, 236, 0) 40%,
		rgba(247, 244, 236, 0) 60%,
		rgba(247, 244, 236, 0.62) 78%,
		rgba(247, 244, 236, 0.9) 100%
	);
	background-image: linear-gradient(
		90deg,
		color-mix(in srgb, var(--goyn-bt-veil) 90%, transparent) 0%,
		color-mix(in srgb, var(--goyn-bt-veil) 62%, transparent) 22%,
		transparent 40%,
		transparent 60%,
		color-mix(in srgb, var(--goyn-bt-veil) 62%, transparent) 78%,
		color-mix(in srgb, var(--goyn-bt-veil) 90%, transparent) 100%
	);
}

/* Il terzo: schiarisce sopra e sotto, dove la sezione incontra le vicine. */
.goyn-bottle__veil--y {
	background-color: transparent;
	background-image: linear-gradient(
		180deg,
		rgba(247, 244, 236, 0.85) 0%,
		rgba(247, 244, 236, 0) 22%,
		rgba(247, 244, 236, 0) 74%,
		rgba(247, 244, 236, 0.88) 100%
	);
	background-image: linear-gradient(
		180deg,
		color-mix(in srgb, var(--goyn-bt-veil) 85%, transparent) 0%,
		transparent 22%,
		transparent 74%,
		color-mix(in srgb, var(--goyn-bt-veil) 88%, transparent) 100%
	);
}

/* ============================================================
   4. I cerchi tratteggiati
   ------------------------------------------------------------
   Due cerchi concentrici dietro la goccia. Le misure sono `min(vw, px)` come
   nell'originale: crescono con la finestra ma non oltre un limite, o su un
   monitor largo diventerebbero due anelli enormi.

   Il tratteggio è più tenue di quello dei cerchi dei benefici — 0.22 contro
   0.4 — e si ricava dal medesimo colore con `color-mix`, per non avere due
   controlli che dicono la stessa cosa.
   ============================================================ */

.goyn-bottle__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	aspect-ratio: 1;
	translate: -50% -50%;
	border: 1px dashed rgba(184, 92, 56, 0.22);
	border-color: color-mix(in srgb, var(--goyn-bt-ring) 55%, transparent);
	border-radius: 50%;
	pointer-events: none;
}

.goyn-bottle__ring--lg {
	width: min(58vw, 760px);
}

.goyn-bottle__ring--sm {
	width: min(42vw, 540px);
}

/* ============================================================
   5. Impaginazione
   ------------------------------------------------------------
   Tre colonne: benefici, spazio libero per la goccia, benefici. La colonna
   centrale ha una larghezza MINIMA di 220px, così su schermi stretti la goccia
   resta visibile invece di essere schiacciata dalle due colonne di testo.
   ============================================================ */

.goyn-bottle__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.goyn-bottle__head,
.goyn-bottle__foot {
	text-align: center;
}

.goyn-bottle__eyebrow {
	margin: 0;
	color: var(--goyn-bt-eyebrow);
}

.goyn-bottle__title {
	margin: 14px 0 0;
	font-size: clamp(34px, 6vw, 86px);
	line-height: 0.95;
	color: var(--goyn-bt-title);
}

/* `.goyn-outline` del tema porta il contorno; qui solo colore e spessore, che
   sono due controlli. */
.goyn-bottle__outline {
	-webkit-text-stroke: var(--goyn-bt-outline-w) var(--goyn-bt-outline);
}

.goyn-bottle__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(220px, var(--goyn-bt-center)) minmax(0, 1fr);
	gap: clamp(18px, 2.4vw, 44px);
	flex: 1 1 auto;
	/* Senza, una colonna con molto testo farebbe crescere la griglia oltre lo
	   spazio disponibile invece di distribuirsi. */
	min-height: 0;
	margin: clamp(20px, 3vh, 44px) 0 clamp(18px, 2.5vh, 36px);
}

.goyn-bottle__col {
	display: flex;
	flex-direction: column;
	/* `space-between` e non `flex-start`: i due benefici di una colonna si
	   allontanano fino a occupare tutta l'altezza, che è ciò che fa stare il
	   primo in alto e il secondo in basso ai lati della goccia. */
	justify-content: space-between;
	gap: clamp(28px, 4vw, 56px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.goyn-bottle__col--l {
	align-items: flex-end;
	text-align: right;
}

.goyn-bottle__col--r {
	align-items: flex-start;
	text-align: left;
}

.goyn-bottle__claim {
	margin: 0;
	font-size: clamp(19px, 1.8vw, 25px);
	line-height: 1.4;
	color: var(--goyn-bt-claim);
}

.goyn-bottle__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}

/* ============================================================
   6. Il beneficio
   ============================================================ */

.goyn-bottle__item {
	display: flex;
	flex-direction: column;
	max-width: var(--goyn-bt-item-max);
}

.goyn-bottle__col--l .goyn-bottle__item {
	align-items: flex-end;
}

.goyn-bottle__col--r .goyn-bottle__item {
	align-items: flex-start;
}

/*
 * Il cerchio con la foto — o con l'etichetta, se la foto manca. `display: grid`
 * con `place-items: center` centra entrambi i casi senza regole separate.
 */
.goyn-bottle__node {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(112px, 11vw, 176px);
	aspect-ratio: 1;
	margin-bottom: clamp(10px, 1.2vw, 18px);
	overflow: hidden;
	font-size: 11.5px;
	letter-spacing: 2px;
	color: var(--goyn-bt-label);
	background-color: rgba(247, 244, 236, 0.62);
	background-color: color-mix(in srgb, var(--goyn-bt-veil) 62%, transparent);
	border: 1px dashed var(--goyn-bt-ring);
	border-radius: 50%;
}

.goyn-bottle .goyn-bottle__node-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.goyn-bottle__chip {
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	color: var(--goyn-bt-chip);
	background-color: rgba(247, 244, 236, 0.94);
	background-color: color-mix(in srgb, var(--goyn-bt-veil) 94%, transparent);
}

/*
 * L'ombra del testo non è decorativa: la descrizione sta sopra la fotografia, e
 * dove la foto ha un dettaglio chiaro il testo perderebbe il contorno. È
 * un'alone dello stesso crema dei veli, non un'ombra scura.
 */
.goyn-bottle__text {
	margin: 14px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--goyn-bt-text);
	text-shadow: 0 1px 10px rgba(247, 244, 236, 0.9);
	text-shadow: 0 1px 10px color-mix(in srgb, var(--goyn-bt-veil) 90%, transparent);
}

/* Avviso mostrato solo nell'editor quando la sezione è vuota. */
.goyn-bottle__notice {
	margin: 0;
	padding: 12px 14px;
	border: 1px dashed currentColor;
	border-radius: 4px;
	font-size: 12px;
	opacity: 0.75;
}

/* ============================================================
   7. Entrate: le misure di questa sezione
   ------------------------------------------------------------
   Il meccanismo è reveal.css + reveal.js. I valori dell'originale: tutto sale
   di 22px con una durata di 0.8s, tranne le righe del titolo che usano la
   maschera. I ritardi dei benefici li compone il template, perché dipendono da
   due indici — riga e colonna.
   ============================================================ */

.goyn-bottle [data-goyn-rise] {
	--goyn-rise-shift: 22px;
	--goyn-rise-dur: 0.8s;
}

.goyn-bottle__eyebrow,
.goyn-bottle__claim {
	--goyn-rise-dur: 0.9s;
	--goyn-rise-shift: 34px;
}

.goyn-bottle .goyn-line > span[data-goyn-rise-line] {
	--goyn-rise-dur: 1s;
	--goyn-delay: calc(var(--goyn-bt-line, 0) * 90ms);
}

/* ============================================================
   8. Responsive
   ------------------------------------------------------------
   Sotto gli 860px la composizione a tre colonne non ha senso: la goccia non ha
   più due fasce ai lati, e i benefici vanno in colonna centrati sotto
   l'intestazione. Cade anche l'altezza minima — su un telefono uno schermo
   pieno non basterebbe a contenere quattro benefici in fila.
   ============================================================ */

@media (max-width: 860px) {
	.goyn-bottle--full {
		min-height: 0;
	}

	.goyn-bottle {
		padding: 56px var(--goyn-pad, 20px) 60px;
	}

	.goyn-bottle__grid {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
		gap: 28px;
		margin: 26px 0 30px;
	}

	/* Il posto lasciato alla goccia non serve più: in colonna la foto di fondo
	   sta dietro al testo, con i veli che la smorzano. */
	.goyn-bottle__center {
		display: none;
	}

	.goyn-bottle__col {
		gap: 28px;
	}

	.goyn-bottle__col--l,
	.goyn-bottle__col--r {
		align-items: center;
		text-align: center;
	}

	.goyn-bottle__col--l .goyn-bottle__item,
	.goyn-bottle__col--r .goyn-bottle__item {
		align-items: center;
	}

	/*
	 * Velo uniforme più coprente: in colonna il testo attraversa il centro della
	 * foto, dove il velo laterale è trasparente per lasciare vedere la goccia.
	 * Senza questo, la descrizione finisce sul soggetto e diventa illeggibile.
	 */
	.goyn-bottle__veil {
		background-color: rgba(250, 247, 240, 0.5);
		background-color: color-mix(in srgb, var(--goyn-bt-veil) 50%, transparent);
	}
}

/* ============================================================
   9. prefers-reduced-motion
   ------------------------------------------------------------
   Non c'è nulla da annullare qui: le entrate le spegne reveal.css, e questa
   sezione non ha parallassi né hover animati. La regola resta come promemoria
   di questo controllo, fatto e non dimenticato.
   ============================================================ */