/**
 * Homepage hero — the crimson stage.
 *
 * The block markup carries structure and content; everything here is the
 * decorative layer core cannot express: a two-stop radial gradient, the
 * optically centred cup, and the maiolica tile band. Gradient stops come
 * from theme.json custom values, not literals.
 */

.hero-stage {
	position: relative;
	min-height: 100vh;
	overflow: hidden;

	/* Misura unica della tazzina. Sta qui e non sul `figure` perché non la legge
	   solo la tazzina: l'hashtag ci si ancora sopra, e le due misure devono
	   restare la stessa cosa — scritte due volte, prima o poi una delle due
	   cambia da sola e il cartiglio finisce sopra il piattino. Chi la ridefinisce
	   (le media query più sotto) sposta entrambi in un colpo solo. */
	--cn-cup-width: clamp( 400px, 47vw, 660px );
	background-image:
		radial-gradient( ellipse 70% 60% at 45% 30%,
			var(--wp--custom--hero--glow) 0%,
			var(--wp--custom--hero--glow-mid) 30%,
			transparent 75% ),
		radial-gradient( ellipse 90% 100% at 50% 50%,
			var(--wp--preset--color--rosso) 0%,
			var(--wp--preset--color--crimson) 60%,
			var(--wp--custom--hero--deep) 100% );
}

/* Paper-noise warmth. Decorative only, so it is inert to pointers and
   invisible to assistive tech. */
.hero-stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		radial-gradient( circle at 20% 30%, rgba( 255, 255, 255, 0.04 ), transparent 40% ),
		radial-gradient( circle at 80% 70%, rgba( 255, 255, 255, 0.03 ), transparent 40% );
}

/* Maiolica tile band across the lower third. */

/* La fascia parte dal bordo alto della fotografia, non dal basso.
   L'immagine è un ritaglio di un pavimento più grande, tagliato di netto sulla
   fuga fra due file: la sua prima riga di pixel È la fuga, senza un margine
   sopra. Ancorandola in basso, tutto quel che avanzava rispetto ai `50vh` del
   riquadro veniva via dall'alto — prima la fuga, poi la cima dei motivi — e la
   prima fila si vedeva rasata. Quanto se ne perdesse dipendeva dalle
   proporzioni della finestra (niente sotto al 16:9, mezza fila abbondante su
   uno schermo largo e basso), quindi il difetto compariva e spariva da sé.

   Il riquadro ricava ora l'altezza dalla larghezza tramite le proporzioni della
   fotografia — le dichiara `inc/media.php`, lette dall'allegato, così restano
   giuste anche se un giorno la si sostituisce con un'altra — e `max-height` gli
   rimette il tetto di prima. Sopra al tetto l'immagine sborda in basso, dove
   c'è già la fila monca del ritaglio e dove il bordo inferiore dell'hero la
   nasconde; sotto al tetto le due misure coincidono e non si taglia niente.
   Il bordo alto della fascia resta dov'era: `50vh` è ancora il massimo, e con
   esso il punto in cui le maioliche attraversano la tazzina. */
.hero-stage::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;

	/* La larghezza va dichiarata, non lasciata dedurre da `left`/`right`:
	   quella sarebbe una larghezza automatica, e quando `max-height` accorcia il
	   riquadro le proporzioni si mantengono restringendo il lato che è rimasto
	   automatico — cioè la fascia si stacca dal bordo destro invece di sbordare
	   sotto. Con una larghezza definita le proporzioni possono governare solo
	   l'altezza, che è quel che serve. */
	width: 100%;
	aspect-ratio: var(--cn-media-tile-pattern-ratio);
	max-height: 50vh;
	z-index: 2;
	pointer-events: none;
	background-image: var(--cn-media-tile-pattern);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
}

/* Niente padding orizzontale, come .hero-stage-inner nel riferimento. Il
   layout "constrained" lo applicherebbe (has-global-padding) e la tazzina,
   larga 92vw ma limitata da max-width: 100%, verrebbe rimpicciolita dal
   contenitore ristretto invece di arrivare quasi a bordo schermo. */
.hero-stage__inner.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

/* Il padding inferiore è 100px come nel riferimento, non il preset spacing 60
   (che si ferma a 80px): l'altezza complessiva dell'hero ne dipende, e con
   80px la fascia di maioliche e il bagliore del gradiente cadevano 20px più
   in alto rispetto all'originale. */
/* Nel riferimento la navigazione sta dentro l'hero ed è nel flusso: occupa
   la sua altezza e spinge in giù questo contenitore. Da noi l'header è
   fixed, quindi fuori dal flusso, e senza compensazione l'inner partirebbe
   da y=0 — tutta la composizione, tazzina inclusa, salirebbe rispetto alla
   fascia di maioliche, che invece resta ancorata al fondo dell'hero.

   Il margine riserva esattamente quello spazio. L'altezza arriva dal modulo
   che misura la barra a riposo; gli 88px sono il ripiego se non è partito. */
.hero-stage .hero-stage__inner {
	position: relative;
	z-index: 10;
	width: 100%;
	margin-top: var(--cn-header-height, 88px);
	min-height: calc( 100vh - 110px );
	padding-block: var(--wp--preset--spacing--40) 100px;
}

/* --- Tazzina -------------------------------------------------------- */

/* Posizionata in percentuale del contenitore, come nel riferimento: è quella
   percentuale a tenere insieme tazzina e fascia di maioliche, perché entrambe
   si misurano sullo stesso box. Centrandola col flusso la sua posizione
   dipenderebbe dall'altezza del contenuto e il rapporto con la fascia si
   perderebbe.

   Le percentuali sono sicure anche nell'editor: si risolvono sul contenitore.
   Il guaio visto prima erano le unità viewport (50vh) dentro una tela più
   bassa dello schermo, non il posizionamento assoluto in sé. */
.hero-stage__cup {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	width: var( --cn-cup-width );
	max-width: 92vw;
	margin: 0;
	z-index: 8;
}

.hero-stage__cup img {
	display: block;
	width: 100%;
	height: auto;
	/* Luce dall'alto a destra, quindi l'ombra cade in basso a sinistra.
	   `drop-shadow` e non `box-shadow`: segue il canale alfa della tazzina, non
	   il riquadro dell'immagine. Due passaggi invece di uno — un'ombra corta di
	   contatto e una più lunga — perché con una sola sfocatura il bordo della
	   tazzina si sfalda invece di appoggiarsi al piano. Sfocature strette: la
	   sagoma dell'ombra resta leggibile, non è un alone. */
	filter:
		drop-shadow( -10px 12px 6px rgba( 0, 0, 0, 0.3 ) )
		drop-shadow( -34px 28px 18px rgba( 0, 0, 0, 0.22 ) );

	/* L'angolo lo scrive il JS in --cn-scroll-rot (circa 1° ogni 80px di
	   scroll). La transizione lunga smussa i salti fra un frame e l'altro,
	   così il movimento resta lento e continuo invece che a scatti. */
	transform: rotate( var( --cn-scroll-rot, 0deg ) );
	transition: transform 0.8s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

/* Sul telefono il palco esce di campo dopo poche centinaia di pixel di
   scorrimento: col passo del desktop la tazzina compie una decina di gradi in
   tutto e il movimento non si legge. Il JS continua a scrivere un valore solo,
   qui si moltiplica la resa — che è il mestiere di questo file. Sta prima del
   blocco qui sotto perché chi chiede meno animazioni deve continuare a vincere. */
@media ( max-width: 900px ) {
	.hero-stage__cup img {
		transform: rotate( calc( var( --cn-scroll-rot, 0deg ) * 4 ) );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.hero-stage__cup img {
		transform: none;
		transition: none;
	}
}

/* La misura qui sopra guarda solo la larghezza, e il riferimento fa lo stesso:
   la tazzina resta al suo massimo anche in una finestra alta 700. Ma il palco è
   alto `100vh`, e la tazzina è quadrata, quindi su uno schermo basso — un
   portatile da 13 pollici sta sui 780px di viewport — diventa più alta del palco
   che la contiene e sembra enorme.
 *
 * Si aggiunge quindi un limite legato all'altezza, e solo sotto i 900px di
 * viewport: da lì in su non cambia niente. Il valore incontra i 660px esatti
 * alla soglia, quindi non c'è nessuno scalino quando la si attraversa, e da lì
 * cala con una pendenza di 1,8 — cioè più in fretta della finestra, che è
 * quello che serve perché la tazzina rientri invece di limitarsi a seguirla.
 * `180vh - 960px` è quella retta: 660px a 900 di altezza, 444 a 780, 300 a 700.
 *
 * `min-width` tiene fuori il telefono in orizzontale, che è basso ma ha già la
 * sua regola più sotto; il pavimento a 300px impedisce che in una finestra
 * schiacciata la tazzina sparisca. */
@media ( min-width: 901px ) and ( max-height: 900px ) {
	.hero-stage {
		--cn-cup-width: max(
			300px,
			min( clamp( 400px, 47vw, 660px ), calc( 180vh - 960px ) )
		);
	}
}

/* --- Hashtag -------------------------------------------------------- */

/* Unico elemento ancora sovrapposto. È ancorato a .hero-stage, che è un
   antenato stabile in entrambi i contesti, non al contenitore interno. */
/* Ancorato dal basso, non dall'alto: il bordo inferiore del testo sta appena
   sopra la metà verticale, come nel riferimento. Con top: 50% finirebbe
   invece sotto il centro.

   La percentuale si riferisce all'altezza del contenitore, non al viewport.
   Con 50vh, nell'editor la tela è più bassa dello schermo e l'hashtag
   finiva sopra il bordo, ritagliato da overflow: hidden. */
.hero-stage__hashtag {
	position: absolute;

	/* Ancorato alla tazzina, non al bordo del contenitore: legandolo al bordo
	   destro, ogni variazione di wideSize lo sposterebbe sopra il piattino.

	   Mezza tazzina è esattamente il bordo del piattino. Da lì si torna indietro
	   di mezzo cancelletto, così il piattino ne copre la metà sinistra e la
	   parola resta tutta leggibile. Il rientro è in `em` e non in pixel, così la
	   sovrapposizione resta la stessa a ogni corpo. Non è però mezza larghezza
	   di glifo secca: `left` misura il bordo della riga, e fra quello e l'asta
	   del cancelletto c'è l'avvicinamento laterale del carattere. 0,6em è mezzo
	   glifo *più* quel margine — misurato a schermo, non calcolato.
	   Il riferimento usava 0,335, che cade *dentro* il piattino: reggeva finché
	   la tazzina era grande, ma rimpicciolita ci finiva sotto tutta la parola. */
	left: calc( 50% + 0.5 * var( --cn-cup-width ) - 0.6em );
	right: auto;
	/* Formula del riferimento — calc(50vh + 24px) — con un tetto al 70% del
	   contenitore. Nell'editor la tela è più bassa dello schermo e i 50vh
	   supererebbero l'altezza del box, spingendo l'hashtag oltre il bordo
	   dove overflow: hidden lo taglia. Il tetto interviene solo lì: sul
	   frontend vince sempre il calc, quindi la posizione è quella esatta. */
	bottom: clamp( 0px, calc( 50vh + 24px ), 70% );
	transform: none;
	z-index: 6;
	margin: 0;
	font-style: italic;
	font-weight: 400;
	/* 3vw e non i 3,5 del riferimento. Spostato il cartiglio fuori dal piattino,
	   quello che gli resta è la fascia fra il bordo del piattino e il bordo
	   destro: a 1024px sono ~233px, e a 3,5vw «#omegliocafè» ne chiede 257 —
	   toccava il bordo, e `overflow: hidden` sul palco lo tagliava. La pendenza
	   più dolce lo tiene dentro a ogni larghezza senza spostarlo di nuovo
	   sopra la tazzina. */
	font-size: clamp( 28px, 3vw, 50px );
	line-height: 0.9;
	letter-spacing: -0.015em;
	text-align: right;
	white-space: nowrap;
	pointer-events: none;
	text-shadow: 0 4px 20px rgba( 0, 0, 0, 0.25 );
}

/* `!important` obbligato, e non è pigrizia: il blocco porta la classe
   `has-display-font-size`, e WordPress stampa le classi dei preset con
   `!important` addosso. Senza, quella vince e la misura qui sopra non entra mai
   in gioco — il cartiglio resta agli 80px fissi del preset «Display», che è
   fisso e non scende mai: a 1440px sfora il bordo destro di 108px e «omegliocafè»
   si legge a metà. Con la misura del riferimento sta dentro a ogni larghezza.

   L'alternativa sarebbe togliere l'attributo del preset dal blocco, ma il markup
   di quella pagina è appiattito nel `post_content`: cambiare il pattern non
   toccherebbe le pagine già salvate. */
.hero-stage__hashtag.has-display-font-size {
	font-size: clamp( 28px, 3vw, 50px ) !important;
}

.hero-stage__hash {
	font-style: normal;
	font-weight: 300;
	/* Sempre 1,2 volte la parola — la stessa proporzione del riferimento, con la
	   pendenza riportata a quella nuova di `.hero-stage__hashtag`. */
	font-size: clamp( 34px, 3.6vw, 60px );
	color: color-mix( in srgb, var(--wp--preset--color--floral) 70%, transparent );
	margin-right: 2px;
	vertical-align: -0.04em;
}

/* --- Small screens --------------------------------------------------- */

/* The cup is the whole composition, so on narrow viewports it keeps the
   centre and the hashtag moves below it rather than overlapping. */
/* Soglia a 900px come nel riferimento, non a 781px.

   Le altezze passano da vh a svh: su iOS 100vh comprende la barra del
   browser, quindi l'hero cambia altezza quando la barra compare o sparisce
   e la composizione "salta". svh misura il viewport piccolo, quello che
   resta sempre visibile, e regge fermo. Prima di ogni svh resta la riga in
   vh come ripiego per i browser che non lo conoscono. */
@media ( max-width: 900px ) {
	.hero-stage {
		min-height: 100vh;
		min-height: 100svh;
	}

	/* Il contenitore occupa esattamente lo schermo meno la barra: parte sotto
	   di essa e si ferma a fondo viewport. Così top: 50% sulla tazzina la
	   centra nello spazio effettivamente visibile, senza contare l'header. */
	.hero-stage .hero-stage__inner {
		margin-top: var(--cn-header-height, 88px);
		min-height: calc( 100vh - var(--cn-header-height, 88px) );
		min-height: calc( 100svh - var(--cn-header-height, 88px) );
		padding-block: 14px 0;
	}

	/* 44% e non 50%: il riferimento tiene la tazzina appena sopra il centro,
	   ed è quello scarto a far cadere il bordo della fascia al 57% della
	   tazzina invece che a metà. Centrandola esattamente, le maioliche la
	   taglierebbero troppo in alto. */
	.hero-stage {
		--cn-cup-width: clamp( 250px, 69vw, 365px );
	}

	.hero-stage__cup {
		top: 44%;
		max-width: none;
	}

	/* Tornando la tazzina fuori dal flusso, l'hashtag resta l'unico elemento
	   in flusso e si appoggia da solo in cima — esattamente il meccanismo del
	   riferimento. Non serve più forzarlo con order. */
	.hero-stage__hashtag {
		position: static;
		transform: none;
		margin-top: 16px;
		text-align: center;
	}

	/* Su mobile la banda di maioliche è più alta e in "cover": deve tagliare
	   il terzo inferiore della tazzina come sul desktop, e con
	   background-size: 100% auto risulterebbe troppo bassa. */
	/* Qui l'altezza è dichiarata, quindi le proporzioni della regola generale
	   non servono più; il tetto va tolto perché in orizzontale su un telefono
	   `50vh` è meno del minimo del clamp e taglierebbe la fascia. In "cover"
	   l'immagine riempie comunque il riquadro: il bordo alto è già il suo. */
	.hero-stage::after {
		aspect-ratio: auto;
		max-height: none;
		height: clamp( 240px, 46vh, 360px );
		height: clamp( 240px, 46svh, 360px );
		background-size: cover;
		background-position: center top;
	}
}