/* Pellegrini Theme — home.
   La home è solo la hero a tutto schermo: intro con le ante, la camminata nel
   corridoio in video, il titolo in basso sul pavimento, i due pulsanti in alto
   verso il catalogo. Niente da scorrere e nessun piè di pagina (front-page.php).
   Il pavimento che continua e i pannelli sospesi stanno nel catalogo (pavimento.css). */

/* =========================================================================
 * 0. Intro: due ante scure che si aprono sulla galleria (template-parts/intro.php)
 *    Compare solo con la classe "con-intro" messa in testa (inc/assets.php);
 *    il filo si riempie col caricamento vero del video (assets/js/showroom.js).
 * ====================================================================== */

.intro {
	display: none;
}

.con-intro:not(.intro-via) .intro {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: block;
}

.con-intro:not(.intro-via):not(.intro-apre) body {
	overflow: hidden;
}

.intro__anta {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50.2%;
	background: #11100E;
	transition: transform 1.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.intro__anta--sinistra {
	left: 0;
	/* Il filo dove le ante si toccano. */
	box-shadow: inset -1px 0 0 rgba(232, 228, 220, 0.07);
}

.intro__anta--destra {
	right: 0;
}

.intro--apre .intro__anta--sinistra {
	transform: translateX(-100%);
}

.intro--apre .intro__anta--destra {
	transform: translateX(100%);
}

.intro__centro {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: var(--calce);
	animation: intro-entra 1s var(--curva) both;
	transition: opacity 0.4s ease, transform 0.6s var(--curva);
}

.intro--apre .intro__centro {
	opacity: 0;
	transform: scale(0.97);
}

.intro .intro__stemma {
	width: 31px;
	height: 40px;
	opacity: 0.92;
}

.intro .intro__lettering {
	width: 164px;
	height: auto;
	opacity: 0.8;
}

.intro__filo {
	position: relative;
	width: 176px;
	height: 1px;
	margin-top: 18px;
	overflow: hidden;
	background: rgba(232, 228, 220, 0.14);
}

/* Si riempie dal centro verso i lati, come le ante che poi si aprono. */
.intro__carica {
	position: absolute;
	inset: 0;
	background: var(--calce);
	transform: scaleX(0);
	transform-origin: 50% 50%;
}

.intro__cifra {
	min-width: 3ch;
	color: rgba(232, 228, 220, 0.5);
	font-size: 10px;
	font-weight: var(--peso-dati);
	font-variant-numeric: tabular-nums;
	font-variation-settings: "wght" 500, "wdth" 125;
	letter-spacing: 0.24em;
	text-align: center;
}

@keyframes intro-entra {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* =========================================================================
 * 1. Hero "showroom": l'ingresso nella galleria (assets/js/showroom.js)
 *    Il video riempie la sezione; il testo sta in basso, sul pavimento, e
 *    lascia libere le volte, le nicchie e la luce in fondo.
 * ====================================================================== */

.showroom {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/* Più 64px: la hero comincia 64px sopra lo schermo (vedi sotto) e deve
	   comunque riempirlo tutto. */
	min-height: calc(100vh + 64px);
	min-height: calc(100svh + 64px);
	/* Sale sotto la testata con 64px di margine: la testata reale può essere più
	   alta del token, e una sovrapposizione stretta lascerebbe una banda scura. */
	margin-top: calc((var(--testata-altezza) + 64px) * -1);
	padding: calc(var(--testata-altezza) + 64px + var(--passo) * 2) var(--margine-lato) clamp(80px, 12.5vh, 150px);
	overflow: hidden;
	/* Sotto l'immagine, finché non arriva: il colore del pavimento. */
	background: #D8C3A0;
	color: var(--carbone);
	text-align: center;
}

.showroom__scena {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* L'immagine di partenza e il video della galleria, a tutta sezione. Il video
   entra in dissolvenza quando scorre davvero (showroom.js). Due classi: il CSS
   di WooCommerce (img {height: auto}) non deve vincere. */
.showroom .showroom__poster,
.showroom .showroom__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
}

.showroom__video {
	opacity: 0;
	transition: opacity 0.6s var(--curva);
}

/* 0,999 e non 1: a opacità piena Chrome (Windows) passa il video a un overlay della
   scheda video che non applica il profilo colore dello schermo. Sugli schermi a gamma
   ampia il video diventerebbe più caldo e saturo dell'immagine di partenza, che invece
   è gestita: così i due restano identici. A occhio non si vede differenza. */
.showroom--video .showroom__video {
	opacity: 0.999;
}

/* In alto un velo leggero per la testata, un poco più denso agli angoli dietro
   lo stemma e il carrello, che stanno sopra le pelli appese (centri a 100px: la
   hero comincia 64px sopra lo schermo); in basso, solo dietro il testo, la luce
   calda del pavimento un poco più chiara. Il resto della galleria è libero. */
.showroom__nebbia {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(460px 120px at 200px 100px, rgba(238, 229, 214, 0.78), rgba(238, 229, 214, 0) 100%),
		radial-gradient(300px 120px at calc(100% - 130px) 100px, rgba(238, 229, 214, 0.78), rgba(238, 229, 214, 0) 100%),
		linear-gradient(to bottom, rgba(232, 220, 200, 0.5) 0, rgba(232, 220, 200, 0.22) 120px, rgba(232, 220, 200, 0) 240px),
		radial-gradient(ellipse 40% 38% at 50% 85%, rgba(246, 238, 224, 0.74) 0%, rgba(246, 238, 224, 0.44) 46%, rgba(246, 238, 224, 0) 100%);
	pointer-events: none;
}

.showroom__testo {
	position: relative;
	z-index: 2;
	max-width: 44rem;
	transition:
		opacity 1.1s var(--curva) 0.5s,
		transform 1.3s var(--curva) 0.5s;
}

/* Dietro le ante il testo aspetta; entra quando si aprono. */
.con-intro:not(.intro-apre):not(.intro-via) .showroom__testo {
	opacity: 0;
	transform: translateY(16px);
}

/* Il corridoio e' bianco e in fondo c'e' la luce: un poco piu' scuro e un alone chiaro
   dietro le lettere, che le stacca anche dalle pelli colorate ai lati. */
.showroom__testo .occhiello {
	margin-bottom: calc(var(--passo) * 2);
	color: rgba(34, 33, 31, 0.86);
	text-shadow: 0 0 10px rgba(246, 238, 224, 0.95), 0 0 2px rgba(246, 238, 224, 0.9);
	font-size: 11px;
	letter-spacing: 0.24em;
}

/* Titolo sottile: Archivo leggero, la seconda riga in Bodoni corsivo (h1 em, base.css). */
.showroom__titolo {
	margin: 0 0 calc(var(--passo) * 2);
	font-size: clamp(2.25rem, 3.4vw, 3.5rem);
	font-weight: 300;
	font-stretch: 100%;
	font-variation-settings: "wght" 300, "wdth" 100;
	line-height: 1.04;
	letter-spacing: -0.02em;
}

.showroom__titolo em {
	line-height: 1.1;
}

.showroom__sottotitolo {
	max-width: 54ch;
	margin: 0 auto;
	color: rgba(34, 33, 31, 0.78);
	font-size: var(--misura-16);
	line-height: 1.55;
	text-wrap: balance;
}

/* Home solo hero (front-page.php): la testata esce dal flusso e sta sopra la
   hero, che comincia 64px sopra lo schermo come sempre. La pagina è alta
   esattamente quanto lo schermo: niente da scorrere. */
body.solo-hero .testata {
	position: fixed;
	right: 0;
	left: 0;
}

body.solo-hero .showroom {
	margin-top: -64px;
}

/* I due pulsanti stanno in alto, sotto la testata: la hero comincia 64px sopra lo
   schermo e la testata è alta 72, quindi lo spazio libero comincia a 136px. Il
   testo resta in basso sul pavimento; in mezzo il corridoio è libero. */
.showroom__azioni {
	position: absolute;
	top: calc(var(--testata-altezza) + 64px + clamp(12px, 2.6vh, 28px));
	left: 50%;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(var(--passo) * 1.25);
	width: max-content;
	max-width: calc(100% - var(--margine-lato) * 2);
	transform: translateX(-50%);
	transition: opacity 1.1s var(--curva) 0.7s;
}

/* Dietro le ante aspettano anche loro; entrano poco dopo il titolo. */
.con-intro:not(.intro-apre):not(.intro-via) .showroom__azioni {
	opacity: 0;
}

.showroom__azioni .bottone {
	min-height: 44px;
	padding-inline: calc(var(--passo) * 2.75);
	font-size: 11px;
	letter-spacing: 0.14em;
}

/* Fondo pieno, niente sfocatura: sopra il video la sfocatura va ricalcolata a
   ogni fotogramma e toglie fluidità. */
.showroom__azioni .bottone--filo-scuro {
	background: rgba(246, 238, 224, 0.82);
}

/* ---- Pausa: visibile mentre il video scorre ---- */

.showroom__pausa {
	position: absolute;
	bottom: calc(var(--passo) * 3);
	left: var(--margine-lato);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: var(--passo);
	min-height: 40px;
	padding: 0 calc(var(--passo) * 1.5);
	border: 0;
	/* Un fondo chiaro suo: sotto possono passare le pelli scure. Pieno, senza
	   sfocatura (sopra il video costa a ogni fotogramma). */
	background: rgba(239, 229, 211, 0.92);
	color: var(--carbone);
	font-size: 10px;
	font-weight: var(--peso-dati);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.showroom__pausa[hidden] {
	display: none;
}

.showroom__pausa-icona {
	fill: currentColor;
}

.showroom__pausa-avvia,
.showroom__pausa[aria-pressed="true"] .showroom__pausa-ferma {
	display: none;
}

.showroom__pausa[aria-pressed="true"] .showroom__pausa-avvia {
	display: inline;
}

.showroom :focus-visible {
	outline-color: var(--carbone);
}

/* ---- Testata sopra la hero chiara: trasparente, testo e marchio scuri ----
   La home non scorre (è solo la hero): la testata resta sempre trasparente. */

.home .testata--trasparente:not(.testata--aperta) {
	color: var(--carbone);
}

.home .testata--trasparente:not(.testata--aperta) :is(.navigazione-principale a, .selettore-lingua, .carrello-testata) {
	color: rgba(34, 33, 31, 0.72);
}

.home .testata--trasparente:not(.testata--aperta) :is(.navigazione-principale a:hover, .navigazione-principale a[aria-current="page"], .selettore-lingua .attiva, .carrello-testata:hover, .carrello-testata--pieno) {
	color: var(--carbone);
}

.home .testata--trasparente:not(.testata--aperta) .testata__menu {
	color: var(--carbone);
}

/* Il marchio calce diventa carbone: stesso file, luminosità portata a quella del carbone. */
.home .marchio-testata img {
	transition: filter var(--durata-stato) var(--curva);
}

.home .testata--trasparente:not(.testata--aperta) .marchio-testata img {
	filter: brightness(0.15);
}

/* Telefono: i pulsanti affiancati in alto, il testo in basso sul pavimento, la
   pausa (solo l'icona) nell'angolo in basso a destra. */
@media (max-width: 767px) {
	.showroom {
		padding-bottom: calc(var(--passo) * 8);
	}

	.showroom__titolo {
		font-size: clamp(2rem, 9vw, 2.6rem);
	}

	.showroom__sottotitolo {
		max-width: 36ch;
		font-size: var(--misura-14);
	}

	.showroom__azioni {
		top: calc(var(--testata-altezza) + 64px + 10px);
		flex-wrap: nowrap;
		gap: var(--passo);
		width: calc(100% - var(--margine-lato) * 2);
	}

	.showroom__azioni .bottone {
		flex: 1 1 0;
		min-width: 0;
		padding-inline: 10px;
		font-size: 10px;
		letter-spacing: 0.1em;
		line-height: 1.25;
		text-align: center;
	}

	.showroom__nebbia {
		background:
			radial-gradient(260px 110px at 100px 100px, rgba(238, 229, 214, 0.78), rgba(238, 229, 214, 0) 100%),
			radial-gradient(220px 110px at calc(100% - 90px) 100px, rgba(238, 229, 214, 0.78), rgba(238, 229, 214, 0) 100%),
			linear-gradient(to bottom, rgba(232, 220, 200, 0.5) 0, rgba(232, 220, 200, 0.22) 110px, rgba(232, 220, 200, 0) 220px),
			linear-gradient(to top, rgba(240, 230, 212, 0.9) 0%, rgba(240, 230, 212, 0.62) 30%, rgba(240, 230, 212, 0) 56%);
	}

	.showroom__pausa {
		right: var(--margine-lato);
		bottom: calc(var(--passo) * 1.5);
		left: auto;
		justify-content: center;
		min-width: 40px;
		padding: 0;
	}

	.showroom__pausa-testo {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}