/**
 * NavalHEAD — Hero della home (inc/home-hero.php): slider a dissolvenza a tutto schermo.
 * Caricato dopo slider.css (slide sovrapposte, testi, frecce, pausa): qui impaginazione,
 * immagini, video e stile di base dei testi.
 */

.nh-home-hero {
	--nh-hh-bg: var(--nh-ink);   /* fondo mentre la prima immagine si carica */
	--nh-hh-veil: linear-gradient(to top, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 55%);
	--nh-hh-bottom: clamp(56px, 10vh, 200px);   /* distanza del testo dal fondo */
	--nh-hh-side: 20px;                          /* margine laterale del testo */
	--nh-hh-gap: clamp(14px, 1.5vw, 28px);       /* spazio sopra e sotto la linea */

	isolation: isolate;
	height: 100vh;
	height: 100svh;
	min-height: 520px;
	overflow: hidden;
	color: #fff;
	background: var(--nh-hh-bg);
}

/*
 * Da 768 px il testo parte dopo la freccia sinistra (bordo + freccia + 24 px):
 * la freccia sta a metà altezza e un titolo lungo può arrivarci.
 */
@media (min-width: 768px) {
	.nh-home-hero {
		--nh-hh-side: calc(var(--nh-slider-edge) + var(--nh-slider-arrow) + 24px);
	}
}

/* Slide ------------------------------------------------------------------ */

.nh-home-hero .nh-slider__stage {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.nh-home-hero__picture,
.nh-home-hero__image,
.nh-home-hero__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.nh-home-hero__picture,
.nh-home-hero__image {
	transform-origin: 50% 50%;
	animation: nh-home-hero-kenburns 24s ease-in-out infinite alternate;
	animation-play-state: running;
	will-change: transform;
}

@keyframes nh-home-hero-kenburns {
	from {
		transform: scale(1.0) translate3d(0, 0, 0);
	}
	to {
		transform: scale(1.1) translate3d(-1.1%, -1%, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nh-cta::before {
		animation: none;
	}
}

/* Il video compare solo quando parte davvero; fino ad allora si vede l'immagine. */
.nh-home-hero__video {
	opacity: 0;
	transition: opacity 0.8s ease;
}

.nh-home-hero__video.is-playing {
	opacity: 1;
}

/* Velo per la leggibilità del testo, sopra le slide e sotto il testo. */
.nh-home-hero .nh-slider__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	background: var(--nh-hh-veil);
	pointer-events: none;
}

/* Testo ------------------------------------------------------------------ */

/* I tocchi passano alle slide sotto (scorrimento col dito). */
.nh-home-hero__captions {
	position: absolute;
	right: 0;
	bottom: var(--nh-hh-bottom);
	left: 0;
	z-index: 4;
	padding: 0 var(--nh-hh-side);
	pointer-events: none;
    text-shadow: 0 0 15px #000;
}

.nh-home-hero__caption {
	width: fit-content;
	max-width: min(1060px, 100%);
}

.nh-home-hero__title {
	margin: 0;
	font-size: clamp(38px, 3.7vw, 70px);
	font-weight: 700;
	line-height: 1.04;
	color: #fff;
}

/* Linea sotto il titolo: dal bordo sinistro dello schermo alla fine del testo. */
.nh-home-hero__line {
	display: block;
	height: 1px;
	margin: var(--nh-hh-gap) 0 var(--nh-hh-gap) calc(-1 * var(--nh-hh-side));
	background: rgba(255, 255, 255, 0.5);
}

/* font-stretch ha effetto solo se Archivo è caricato in versione variabile (asse wdth). */
.nh-home-hero__subtitle {
	margin: 0;
	font-size: clamp(20px, 2.3vw, 42px);
	font-weight: 400;
	font-stretch: 125%;
	line-height: 1.15;
	color: #fff;
}

.nh-home-hero__title + .nh-home-hero__subtitle {
	margin-top: var(--nh-hh-gap);
}