/*
 * Hero della home. Le regole vengono dalla fascia .hero del prototipo
 * approvato (_mockup/proto-home-2026-08-30/assets/css/style.css): qui cambiano
 * solo i nomi delle classi, che prendono il prefisso cn-.
 */

.cn-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	min-height: 100svh;
	overflow: hidden;
}

/* Due classi e non una: Elementor stampa `.elementor img { height: auto }`,
   che con una classe sola vincerebbe e rimetterebbe l'immagine sulle sue
   proporzioni originali. */
.cn-hero .cn-hero__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}

/* Sfumatura in due tempi: scurisce in cima per la testata trasparente e in
   fondo per il testo, e lascia chiaro il centro della foto. */
.cn-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		rgba(28, 20, 14, 0.42) 0%,
		rgba(28, 20, 14, 0.12) 32%,
		rgba(28, 20, 14, 0.34) 78%,
		rgba(28, 20, 14, 0.62) 100%
	);
}

.cn-hero__testo {
	width: min(100% - var(--cn-gutter) * 2, var(--cn-max-width));
	max-width: 60rem;
	margin-inline: auto;
	padding-bottom: clamp(4.5rem, 12vh, 9rem);
	color: var(--cn-panna);
}

.cn-hero__claim {
	font-size: var(--cn-titolo-hero);
	font-weight: 300;
	margin: 0 0 1rem;
	color: var(--cn-panna);
	text-wrap: balance;
	text-shadow: 0 0.1em 1.4em rgba(0, 0, 0, 0.35);
}

.cn-hero__sotto {
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
	color: rgba(245, 242, 238, 0.9);
	max-width: 34ch;
	margin: 0;
}

/* Filo verticale con la goccia di luce che scende: invita a scorrere senza
   scrivere "scorri". */
.cn-hero__giu {
	position: absolute;
	bottom: 1.6rem;
	left: 50%;
	translate: -50% 0;
	width: 1px;
	height: 3.2rem;
	background: rgba(245, 242, 238, 0.45);
	overflow: hidden;
}

.cn-hero__giu span {
	display: block;
	width: 100%;
	height: 40%;
	background: var(--cn-panna);
	animation: cn-scendi 2.6s var(--cn-ease) infinite;
}

@keyframes cn-scendi {
	0% {
		transform: translateY(-100%);
	}

	60%,
	100% {
		transform: translateY(320%);
	}
}

@media (max-width: 52rem) {
	.cn-hero {
		min-height: 92svh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cn-hero__giu span {
		animation: none;
	}
}