/* ==========================================================================
   Home — hero slider, sezione benvenuto, riquadri prodotti, bande parallax
   ========================================================================== */

/* ---------- HERO ---------- */
.hero {
	position: relative;
	height: calc(100vh - var(--header-h));
	min-height: 560px;
	max-height: 960px;
	background: var(--c-brown-deep);
	overflow: hidden;
}
body.has-sticky-header .hero { height: calc(100vh - var(--header-h)); }

.hero-slides { position: absolute; inset: 0; }

.hero-slide {
	position: absolute;
	inset: 0;
	visibility: hidden;
	z-index: 1;
	transition: transform 1s cubic-bezier(.65, 0, .35, 1), filter 1s ease, visibility 0s 1s;
	transform: translateY(0);
	filter: blur(0);
}
.hero-slide.is-active {
	visibility: visible;
	z-index: 3;
	transition: transform 1s cubic-bezier(.65, 0, .35, 1), filter 1s ease;
}
.hero-slide.enter-from-bottom { transform: translateY(100%); filter: blur(6px); visibility: visible; transition: none; }
.hero-slide.enter-from-top { transform: translateY(-100%); filter: blur(6px); visibility: visible; transition: none; }
.hero-slide.leave-up { transform: translateY(-100%); filter: blur(6px); visibility: visible; z-index: 2; }
.hero-slide.leave-down { transform: translateY(100%); filter: blur(6px); visibility: visible; z-index: 2; }

/* Sugli schermi grandi il blur animato full-screen è troppo costoso per
   la GPU (scatti durante la transizione): lo scorrimento resta, la
   sfocatura no. */
@media (min-width: 1600px) {
	.hero-slide,
	.hero-slide.is-active { transition: transform 1s cubic-bezier(.65, 0, .35, 1), visibility 0s 1s; filter: none; }
	.hero-slide.is-active { transition: transform 1s cubic-bezier(.65, 0, .35, 1); }
	.hero-slide.enter-from-bottom,
	.hero-slide.enter-from-top,
	.hero-slide.leave-up,
	.hero-slide.leave-down { filter: none; }
}

/* Sfondi per slide (replican l'originale) */
.hero-slide--1 { background: #3a302e; }
.hero-slide--2 { background: #92a5b3; }
.hero-slide--3 { background: #3a302e; }

/* Foto a sinistra */
.hero-slide__photo {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transform: translateY(40px);
	opacity: 0;
	transition: transform 1.1s cubic-bezier(.23, 1, .32, 1), opacity .9s ease;
}
/* Dimensioni titolo per slide come l'originale (slide 2: 80px) */
.hero-slide--2 .hero-slide__title { font-size: min(80px, 6.45vw); }

/* Frecce di navigazione: solo su mobile (su desktop si usa la rotella) */
.hero-mnav {
	display: none;
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 12;
	gap: 10px;
}
.hero-mnav__btn {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 50%;
	background: rgba(33, 24, 31, .25);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
	-webkit-tap-highlight-color: transparent;
}
.hero-mnav__btn:active { background: rgba(33, 24, 31, .5); border-color: #fff; }
@media (max-width: 900px) {
	.hero-mnav { display: flex; }
}
.hero-slide.is-active .hero-slide__photo { transform: none; opacity: 1; }

/* Metà destra colorata */
.hero-slide__shape {
	position: absolute;
	right: 0; top: 0; bottom: 0;
	width: 50%;
	transform: translateY(-101%);
	transition: transform 1s cubic-bezier(.76, 0, .24, 1) .2s;
}
.hero-slide--1 .hero-slide__shape { background: #3a302e; }
.hero-slide--2 .hero-slide__shape { background: #92a5b3; }
.hero-slide--3 .hero-slide__shape { background: #92a5b3; }
.hero-slide.is-active .hero-slide__shape { transform: none; }

/* Griglia contenuto */
.hero-slide__grid {
	position: relative;
	z-index: 5;
	display: flex;
	height: 100%;
	max-width: 1240px;
	margin: 0 auto;
}
.hero-slide__spacer-col { flex: 0 0 50%; }
.hero-slide__content {
	flex: 0 0 50%;
	align-self: center;
	/* I padding scalano con la griglia 1240 come nell'originale */
	padding: 0 min(40px, 3.2vw) 0 min(200px, 16.1vw);
}

/* Maschere di ingresso testi */
.hero-mask { display: block; overflow: hidden; }
.hero-mask > span, .hero-mask > a { display: inline-block; transform: translateY(110%); transition: transform 1.1s cubic-bezier(.23, 1, .32, 1); }
.hero-slide.is-active .hero-mask > span,
.hero-slide.is-active .hero-mask > a { transform: none; }
.hero-slide.is-active .hero-slide__title .hero-mask > span { transition-delay: .05s; }
.hero-slide.is-active .hero-slide__script .hero-mask > span { transition-delay: .1s; }
.hero-slide.is-active .hero-slide__subtitle .hero-mask > span { transition-delay: .15s; }
.hero-slide.is-active .hero-slide__text .hero-mask > span { transition-delay: .2s; }
.hero-slide.is-active .hero-slide__btn-wrap .hero-mask > span { transition-delay: .25s; }

/* Le dimensioni scalano come l'originale: griglia 1240px → fattore 100vw/1240 */
.hero-slide__title {
	margin: 0;
	font-family: 'Cinzel', serif;
	font-size: min(100px, 8.06vw);
	line-height: 1;
	letter-spacing: -.05em;
	color: #fff;
	text-transform: none;
	white-space: nowrap;
}
.hero-slide__script {
	font-family: 'Playball', cursive;
	font-size: min(75px, 6.05vw);
	line-height: 1;
	color: var(--c-blue-light);
	margin: -.45em 0 0 50px;
	position: relative;
	z-index: 2;
}
.hero-slide--2 .hero-slide__script,
.hero-slide--3 .hero-slide__script { color: var(--c-brown); }
.hero-slide__subtitle {
	font-family: 'Cinzel', serif;
	font-size: min(60px, 4.84vw);
	line-height: 1.3;
	letter-spacing: -.05em;
	color: #fff;
	margin-top: -.3em;
	white-space: nowrap;
}
.hero-slide--3 .hero-slide__subtitle { font-size: min(80px, 6.45vw); }
.hero-slide__text {
	font-family: 'Gantari', sans-serif;
	font-size: 20px;
	line-height: 35px;
	color: #fff;
	width: 80%;
	margin: 35px 0 40px;
	padding: 0 10px;
}
.hero-slide__btn {
	display: inline-block;
	font-family: 'Gantari', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 60px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
	background: var(--c-blue-light);
	padding: 0 55px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, .25);
	transition: transform .2s ease, background .2s ease, color .2s ease, filter .2s ease;
}
.hero-slide__btn:hover { transform: scale(1.06); background: var(--c-blue); color: var(--c-brown-deep); filter: brightness(1.15); }
.hero-slide--2 .hero-slide__btn { background: #fff; color: var(--c-brown); }
.hero-slide--2 .hero-slide__btn:hover { color: var(--c-blue); background: #fff; }
.hero-slide--3 .hero-slide__btn { background: #fff; color: var(--c-brown); }
.hero-slide--3 .hero-slide__btn:hover { background: var(--c-brown); color: #fff; }

/* Prodotto centrale fluttuante */
.hero-slide__product {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 320px;
	max-height: 74%;
	object-fit: contain;
	z-index: 6;
	transform: translate(-50%, calc(-50% - 60vh));
	opacity: 0;
	transition: transform 1.2s cubic-bezier(.23, 1, .32, 1) .1s, opacity .6s ease .1s;
}
.hero-slide--2 .hero-slide__product { width: 373px; }
.hero-slide--3 .hero-slide__product { width: 334px; }
.hero-slide.is-active .hero-slide__product {
	opacity: 1;
	transform: translate(-50%, calc(-50% + 30px));
	animation: hero-float 6s ease-in-out 1.4s infinite alternate;
}
@keyframes hero-float {
	from { transform: translate(-50%, calc(-50% + 20px)); }
	to   { transform: translate(-50%, calc(-50% + 40px)); }
}

@media (max-width: 1024px) {
	.hero-slide__content { padding: 0 50px 0 130px; }
	.hero-slide__title, .hero-slide__subtitle { font-size: 60px; letter-spacing: -4px; }
	.hero-slide--3 .hero-slide__subtitle { font-size: 60px; }
	.hero-slide__script { font-size: 50px; margin-top: -22px; }
	.hero-slide__text { font-size: 17px; line-height: 29px; }
	.hero-slide__btn { font-size: 14px; line-height: 52px; padding: 0 40px; }
	.hero-slide__product { width: 200px; }
	.hero-slide--2 .hero-slide__product, .hero-slide--3 .hero-slide__product { width: 220px; }
}

@media (max-width: 900px) {
	.hero { height: auto; min-height: 100vh; max-height: none; }
	.hero-slide__photo { width: 100%; height: 42%; bottom: auto; }
	.hero-slide__shape { width: 100%; height: 58%; top: auto; bottom: 0; }
	.hero-slide__grid { display: block; }
	.hero-slide__spacer-col { display: none; }
	.hero-slide__content { padding: 0 30px; position: absolute; left: 0; right: 0; top: 46%; }
	.hero-slide__title, .hero-slide__subtitle { font-size: 43px; line-height: 56px; letter-spacing: -1px; }
	.hero-slide--3 .hero-slide__subtitle { font-size: 43px; }
	.hero-slide__script { font-size: 30px; margin: -12px 0 0 30px; }
	.hero-slide__subtitle { margin-top: -18px; }
	.hero-slide__text { font-size: 16px; line-height: 27px; width: 100%; margin: 18px 0 24px; }
	/* Il prodotto resta dentro la fascia della foto (42% alto) e non
	   scende mai sopra i titoli, che partono dal 46%. */
	.hero-slide__product {
		width: 150px;
		max-height: 34%;
		top: 22%;
		left: auto;
		right: 6%;
		transform: translate(0, calc(-50% - 60vh));
	}
	.hero-slide--2 .hero-slide__product, .hero-slide--3 .hero-slide__product { width: 150px; }
	.hero-slide.is-active .hero-slide__product { transform: translate(0, -50%); animation: none; }
}

/* ---------- Sezione "Benvenuti a Tofani" ---------- */
.about { background: #fff; overflow: hidden; }
.about__inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	min-height: 1000px;
	padding: 0 20px;
}
.about__heading { position: absolute; left: 64px; top: 190px; z-index: 3; }
.about__kicker {
	font-family: 'Playball', cursive;
	font-size: 35px;
	line-height: 50px;
	letter-spacing: -1px;
	color: var(--c-brown);
}
.about__title {
	font-family: 'Cinzel', serif;
	font-size: 65px;
	line-height: 70px;
	letter-spacing: -2px;
	color: var(--c-blue);
	margin: 12px 0 0;
	text-transform: none;
}
.about__photo {
	position: absolute;
	left: -82px;
	top: 334px;
	width: 721px;
	z-index: 2;
}
.about__photo-img { display: block; width: 721px; max-width: none; height: auto; }
.about__box {
	position: absolute;
	right: 50px;
	top: 220px;
	width: 550px;
	height: 560px;
	background: var(--c-blue);
	box-shadow: 0 10px 50px rgba(0, 0, 0, .5);
	z-index: 4;
	padding: 50px;
}
.about__box-title {
	font-family: 'Cinzel', serif;
	font-size: 20px;
	line-height: 30px;
	color: #fff;
	max-width: 450px;
	margin: 0 0 30px;
}
.about__box-text {
	font-family: 'Gantari', sans-serif;
	font-size: 16px;
	line-height: 30px;
	color: #fff;
	max-width: 450px;
	margin: 30px 0 0;
}
.about__btn {
	position: absolute;
	left: 50px;
	bottom: 50px;
	display: inline-block;
	font-family: 'Gantari', sans-serif;
	font-size: 20px;
	line-height: 54px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
	border: 3px solid var(--c-blue-light);
	padding: 0 25px;
	transition: background .25s ease;
}
.about__btn:hover { background: var(--c-blue-light); color: #fff; }

@media (max-width: 1024px) {
	.about__inner { min-height: 850px; }
	.about__photo { width: 500px; left: -40px; top: 320px; }
	.about__photo-img { width: 500px; }
	.about__box { width: 440px; height: auto; min-height: 460px; padding: 40px; padding-bottom: 120px; }
}
@media (max-width: 900px) {
	.about__inner { min-height: 0; padding-bottom: 60px; }
	.about__heading { position: static; padding: 80px 10px 0; text-align: center; }
	.about__photo { position: static; width: 92%; margin: 40px auto 0; }
	.about__photo-img { width: 100%; }
	.about__box { position: relative; inset: auto; width: 92%; margin: 40px auto 0; height: auto; padding-bottom: 130px; }
	.about__btn { left: 40px; bottom: 40px; }
	.about__title { font-size: 40px; line-height: 46px; }
	.about__kicker { font-size: 25px; }
}

/* ---------- Claim "dal cuore del forno a legna" ---------- */
.home-claim { text-align: center; padding: 160px 30px; }
.home-claim__text {
	font-family: 'Cinzel', serif;
	font-size: 26px;
	line-height: 36px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--c-blue);
	margin: 0;
}

/* ---------- Riquadri prodotti ---------- */
.tiles { max-width: 1240px; margin: 0 auto; padding: 0 15px 200px; }
.tiles__row {
	display: flex;
	gap: 30px;
	margin-top: 100px;
}
.tiles__cell {
	flex: 1;
	border: 2px solid var(--c-blue);
	background: #fff;
	padding: 20px;
}
.tiles__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	padding: 200px 10px;
	position: relative;
	overflow: hidden;
}
.tiles__tile::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(33, 24, 31, 0);
	transition: background .3s ease;
}
.tiles__tile:hover::after { background: rgba(33, 24, 31, .25); }
.tiles__label {
	position: relative;
	z-index: 2;
	font-family: 'Cinzel', serif;
	font-weight: 500;
	font-size: 30px;
	letter-spacing: 3px;
	line-height: 1;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}
.tiles__bar {
	display: flex;
	border: 2px solid var(--c-blue);
	background: #fff;
	min-height: 120px;
	margin-top: 30px;
}
.tiles__question, .tiles__answer {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
}
.tiles__question {
	flex: 2;
	font-family: 'Cinzel', serif;
	font-size: 20px;
	letter-spacing: 2px;
	line-height: 30px;
	color: var(--c-brown);
	text-transform: uppercase;
}
.tiles__answer { flex: 1; border-left: 2px solid var(--c-blue); }
.tiles__answer a {
	font-family: 'Cinzel', serif;
	font-weight: 500;
	font-size: 20px;
	letter-spacing: 2px;
	line-height: 30px;
	color: var(--c-brown);
	border-bottom: 2px solid var(--c-blue);
	transition: color .3s ease, border-color .3s ease;
}
.tiles__answer a:hover { color: #000; }

@media (max-width: 900px) {
	.tiles { padding-bottom: 100px; }
	.tiles__row { flex-direction: column; gap: 20px; margin-top: 50px; }
	.tiles__tile { padding: 75px 10px; }
	.tiles__label { font-size: 25px; }
	.tiles__bar { flex-direction: column; }
	.tiles__answer { border-left: 0; border-top: 2px solid var(--c-blue); }
	.tiles__question, .tiles__answer { padding: 20px; text-align: center; }
	.tiles__question { font-size: 17px; }
	.home-claim { padding: 80px 24px; }
	.home-claim__text { font-size: 19px; letter-spacing: 3px; }
}

/* ---------- Banda pattern ---------- */
.parallax-band--pattern { margin-top: 100px; padding-top: 60px; }