/* Slider della home — shortcode [promoluce_hero], vedi inc/hero-slider.php */

.pl-hero {
	--pl-hero-ease: cubic-bezier(.22, .7, .2, 1);
	--pl-hero-wipe: cubic-bezier(.77, 0, .18, 1);
	--pl-hero-pad: clamp(20px, 3.2vw, 48px);
	/* Altezza della testata del sito sopra lo slider e quanto della sezione sotto deve intravedersi */
	--pl-hero-offset: 100px;
	--pl-hero-peek: 96px;
	position: relative;
	width: 100%;
	/* Proporzione delle foto (2752x1536). Se la finestra e' bassa l'altezza si ferma per far intravedere
	   la sezione sotto (peek), ma mai piu' in basso di 1/2.4 della larghezza: oltre quel rapporto il
	   taglio verticale della foto nasconde i prodotti e i testi non trovano posto. */
	--pl-hero-minh: calc(100vw / 2.4);
	aspect-ratio: 2752 / 1536;
	max-height: max(440px, var(--pl-hero-minh), calc(100vh - var(--pl-hero-offset) - var(--pl-hero-peek)));
	max-height: max(440px, var(--pl-hero-minh), calc(100svh - var(--pl-hero-offset) - var(--pl-hero-peek)));
	/* Contenitore: titolo e testi si dimensionano sull'altezza reale dello slider (unita' cqw/cqh) */
	container-type: size;
	overflow: hidden;
	background: #e9e7e4;
	color: #fff;
	font-family: "IBM Plex Sans", sans-serif;
	isolation: isolate;
}

.pl-hero__track {
	position: absolute;
	inset: 0;
	touch-action: pan-y;
}

/* ---- Slide: la nuova entra con una tendina, la vecchia scivola un poco ---- */
.pl-hero__slide {
	position: absolute;
	inset: 0;
	background: var(--bg, transparent);
	visibility: hidden;
}
.pl-hero__slide--light { color: #fff; --pl-fill: #fff; --pl-fill-ink: #111; }
.pl-hero__slide--dark { color: #111; --pl-fill: #111; --pl-fill-ink: #fff; }
.pl-hero__slide.is-active { visibility: visible; z-index: 2; }
.pl-hero__slide.is-leaving { visibility: visible; z-index: 1; }
/* Senza JS resta visibile la prima */
.pl-hero:not(.is-ready) .pl-hero__slide:first-child { visibility: visible; }

.pl-hero__slide.is-entering { animation: pl-hero-wipe-next 1.15s var(--pl-hero-wipe) both; }
.pl-hero[data-dir="prev"] .pl-hero__slide.is-entering { animation-name: pl-hero-wipe-prev; }
.pl-hero__slide.is-leaving .pl-hero__pan { animation: pl-hero-leave-next 1.15s var(--pl-hero-wipe) both; }
.pl-hero[data-dir="prev"] .pl-hero__slide.is-leaving .pl-hero__pan { animation-name: pl-hero-leave-prev; }
.pl-hero__slide.is-leaving .pl-hero__caption { animation: pl-hero-fade-out .45s ease both; }
@keyframes pl-hero-wipe-next {
	from { clip-path: inset(0 0 0 100%); }
	to { clip-path: inset(0 0 0 0); }
}
@keyframes pl-hero-wipe-prev {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}
@keyframes pl-hero-leave-next {
	to { transform: translate3d(-7%, 0, 0); }
}
@keyframes pl-hero-leave-prev {
	to { transform: translate3d(7%, 0, 0); }
}
@keyframes pl-hero-fade-out {
	to { opacity: 0; }
}
@keyframes pl-hero-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ---- Foto: solo un accenno di movimento col mouse (vedi sotto); tendina e testi come prima ---- */
/* Sopra il link a tutta slide, ma trasparente ai click tranne che sui punti prodotto */
.pl-hero__pan {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}
.pl-hero__media {
	position: absolute;
	inset: 0;
}
/* Col mouse la foto scorre appena, al contrario dei testi (profondita'): max ~0,5% in orizzontale e ~0,3% in verticale.
   scale 1.012 tiene i bordi coperti; translate/scale sono indipendenti da transform (animazione di uscita sul pan).
   I punti prodotto stanno dentro .pl-hero__media e la seguono. */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) and (prefers-reduced-motion: no-preference) {
	.pl-hero__media {
		scale: 1.012;
		translate: calc(var(--mx, 0) * -1%) calc(var(--my, 0) * -.6%);
		transition: translate 1.4s var(--pl-hero-ease);
	}
}

/* .pl-hero davanti: il tema (Elementor) ha `img { height:auto; max-width:100% }` con specificita' maggiore di una sola classe,
   e la foto resterebbe alta quanto il suo rapporto invece di riempire il riquadro (e object-position non avrebbe effetto) */
.pl-hero .pl-hero__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--pos, 50% 50%);
	user-select: none;
	-webkit-user-drag: none;
}
/* Foto verticale dedicata al mobile: nascosta altrove */
.pl-hero .pl-hero__img--m { display: none; }

/* Velo per leggere i testi chiari: piu' deciso dal lato dei testi (sinistra e basso), si spegne verso i prodotti */
.pl-hero__slide--light .pl-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .4) 24%, rgba(0, 0, 0, .12) 44%, rgba(0, 0, 0, 0) 58%),
		linear-gradient(0deg, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .34) 30%, rgba(0, 0, 0, 0) 58%);
}

.pl-hero__cover {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ---- Testi: titolo a parole con maschera, descrizione, pulsante ---- */
.pl-hero__caption {
	position: absolute;
	left: var(--pl-hero-pad);
	/* In basso a sinistra c'e' il pulsante cookie (fisso sulla finestra, 46px): sotto i testi resta sempre posto per lui,
	   anche quando lo slider e' piu' alto della finestra e il suo bordo basso sta oltre il bordo della finestra */
	bottom: max(var(--pl-hero-pad), 72px);
	bottom: max(var(--pl-hero-pad), 72px, min(calc(100cqh + var(--pl-hero-offset) + 68px - 100svh), 100px));
	z-index: 3;
	max-width: min(900px, 52%);
	pointer-events: none;
}
.pl-hero__title {
	margin: 0 0 clamp(14px, 1.5vw, 22px);
	font-size: clamp(38px, min(4.9vw, 10vh), 112px);
	/* Con il contenitore: il blocco testi resta in proporzione all'altezza reale dello slider */
	font-size: clamp(34px, min(4.4cqw, 10.5cqh), 104px);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -.03em;
	color: inherit;
}
.pl-hero__w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding: .06em .05em .14em 0;
	margin: -.06em -.05em -.14em 0;
	/* Col mouse sopra lo slider (--mx/--my dal JS) ogni parola scorre un po' con la sua profondita' */
	transform: translate3d(calc(var(--mx, 0) * (10px + var(--i, 0) * 4px)), calc(var(--my, 0) * (5px + var(--i, 0) * 1px)), 0);
	transition: transform .9s var(--pl-hero-ease);
	will-change: transform;
}
.pl-hero__w > span { display: inline-block; }
.pl-hero__slide--light .pl-hero__title,
.pl-hero__slide--light .pl-hero__desc { text-shadow: 0 1px 24px rgba(0, 0, 0, .28); }
.pl-hero__slide.is-active .pl-hero__w > span {
	animation: pl-hero-word 1s var(--pl-hero-ease) both;
	animation-delay: calc(.4s + var(--i, 0) * .08s);
}
@keyframes pl-hero-word {
	from { transform: translate3d(0, 112%, 0); }
	to { transform: none; }
}

.pl-hero__desc {
	margin: 0 0 clamp(18px, 2vw, 28px);
	max-width: min(46ch, 34cqw);
	font-size: clamp(15px, 1.15vw, 22px);
	font-weight: 400;
	line-height: 1.5;
	color: inherit;
}
/* translate e' indipendente da transform: non confligge con l'animazione di entrata */
.pl-hero__desc {
	translate: calc(var(--mx, 0) * 7px) calc(var(--my, 0) * 4px);
	transition: translate .9s var(--pl-hero-ease);
}
.pl-hero__slide--light .pl-hero__desc { color: rgba(255, 255, 255, .92); }
.pl-hero__slide--dark .pl-hero__desc { color: rgba(17, 17, 17, .82); }
.pl-hero__slide.is-active .pl-hero__desc { animation: pl-hero-rise .9s var(--pl-hero-ease) .85s both; }
.pl-hero__slide.is-active .pl-hero__cta { animation: pl-hero-rise .9s var(--pl-hero-ease) 1s both; }
@keyframes pl-hero-rise {
	from { opacity: 0; transform: translate3d(0, 16px, 0); }
	to { opacity: 1; transform: none; }
}

.pl-hero__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 30px;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	color: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-decoration: none;
	text-transform: uppercase;
	overflow: hidden;
	isolation: isolate;
	pointer-events: auto;
	/* Effetto magnetico: --bx/--by (px) dal JS quando il cursore e' vicino; ritorno morbido */
	translate: var(--bx, 0px) var(--by, 0px);
	transition: color .45s var(--pl-hero-ease), translate .6s var(--pl-hero-ease);
}
.pl-hero__cta-label {
	display: inline-block;
	translate: calc(var(--bx, 0px) * .5) calc(var(--by, 0px) * .5);
	transition: translate .6s var(--pl-hero-ease);
}
/* Riempimento che sale dal basso all'hover */
.pl-hero__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--pl-fill, #fff);
	transform: scaleY(0);
	transform-origin: 50% 100%;
	transition: transform .5s var(--pl-hero-ease);
}
.pl-hero__cta:hover,
.pl-hero__cta:focus-visible { color: var(--pl-fill-ink, #111); }
.pl-hero__cta:hover::before,
.pl-hero__cta:focus-visible::before { transform: scaleY(1); }
.pl-hero__cta:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* ---- Punti prodotto ---- */
.pl-hero__spots {
	position: absolute;
	z-index: 2;
	pointer-events: none;
}
.pl-hero__spot {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 10px;
	transform: translate(-15px, -15px);
	color: #111;
	text-decoration: none;
	pointer-events: auto;
	opacity: 0;
	transition: opacity .6s ease 1.1s;
}
.pl-hero__slide.is-active .pl-hero__spot { opacity: 1; }
.pl-hero__spot-dot {
	position: relative;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	transition: transform .3s var(--pl-hero-ease);
}
.pl-hero__spot-dot::before,
.pl-hero__spot-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
}
.pl-hero__spot-dot::before {
	inset: 11px;
	background: #111;
}
.pl-hero__spot-dot::after {
	border: 1px solid rgba(255, 255, 255, .9);
	animation: pl-hero-pulse 2.4s ease-out infinite;
}
@keyframes pl-hero-pulse {
	0% { transform: scale(1); opacity: .9; }
	100% { transform: scale(2); opacity: 0; }
}
.pl-hero__spot-label {
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .95);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .04em;
	white-space: nowrap;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .25s ease, transform .25s var(--pl-hero-ease);
	pointer-events: none;
}
.pl-hero__spot:hover .pl-hero__spot-dot,
.pl-hero__spot:focus-visible .pl-hero__spot-dot { transform: scale(1.12); }
.pl-hero__spot:hover .pl-hero__spot-label,
.pl-hero__spot:focus-visible .pl-hero__spot-label {
	opacity: 1;
	transform: none;
}
.pl-hero__spot:focus-visible { outline: none; }
.pl-hero__spot:focus-visible .pl-hero__spot-dot { outline: 2px solid #111; outline-offset: 3px; }

/* ---- Navigazione: in basso a destra (a sinistra c'e' il pulsante cookie) ---- */
.pl-hero__nav {
	position: absolute;
	right: var(--pl-hero-pad);
	bottom: var(--pl-hero-pad);
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 18px;
	color: #fff;
	transition: color .6s ease;
}
.pl-hero[data-tone="dark"] .pl-hero__nav { color: #111; }

/* Contatore 01 / 04 */
.pl-hero__count {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .1em;
	font-variant-numeric: tabular-nums;
}
.pl-hero__cur {
	display: inline-block;
	font-size: 22px;
	letter-spacing: 0;
}
.pl-hero__cur.is-tick { animation: pl-hero-rise .6s var(--pl-hero-ease) both; }
.pl-hero__tot { opacity: .65; }

.pl-hero__bars {
	display: flex;
	gap: 6px;
}
.pl-hero__bar {
	position: relative;
	width: 36px;
	height: 18px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}
.pl-hero__bar::before,
.pl-hero__bar-fill {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	height: 2px;
	width: 100%;
	background: currentColor;
	opacity: .35;
}
.pl-hero__bar-fill {
	opacity: 1;
	transform: scaleX(0);
	transform-origin: left center;
}
.pl-hero__bar.is-current .pl-hero__bar-fill {
	animation: pl-hero-fill var(--interval, 6500ms) linear forwards;
}
.pl-hero.is-paused .pl-hero__bar.is-current .pl-hero__bar-fill { animation-play-state: paused; }
.pl-hero.is-static .pl-hero__bar.is-current .pl-hero__bar-fill,
.pl-hero.is-stopped .pl-hero__bar.is-current .pl-hero__bar-fill {
	animation: none;
	transform: scaleX(1);
}
@keyframes pl-hero-fill {
	to { transform: scaleX(1); }
}

.pl-hero__btns {
	display: flex;
	gap: 8px;
}
.pl-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
	opacity: .75;
	transition: opacity .2s ease;
}
.pl-hero__btn:hover { opacity: 1; }
.pl-hero__btn svg { width: 16px; height: 16px; }
.pl-hero__bar:focus-visible,
.pl-hero__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
.pl-hero__btn .pl-hero__icon-play { display: none; }
.pl-hero.is-stopped .pl-hero__btn .pl-hero__icon-play { display: block; }
.pl-hero.is-stopped .pl-hero__btn .pl-hero__icon-pause { display: none; }

.pl-hero__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Schermi molto larghi (ultrawide, 4K): il rapporto minimo si allarga un po', cosi' lo slider non supera la finestra */
@media (min-width: 2200px) {
	.pl-hero { --pl-hero-minh: calc(100vw / 2.6); }
}

/* ---- Desktop e tablet: slide su fondo uniforme (Insider) ----
   La foto sta SEMPRE intera (contain, nessun taglio laterale) nella parte alta dello slider (82%): i faretti
   restano sopra il blocco testi a qualunque proporzione; il fondo --bg (identico a quello della foto) riempie il resto. */
@media (min-width: 768px) {
	.pl-hero__slide--contain-m .pl-hero__img {
		top: 0;
		height: 82%;
		object-fit: contain;
		object-position: 50% 0;
	}
}
/* Slider basso: la descrizione lascerebbe i testi senza posto accanto ai prodotti, resta titolo e pulsante */
@container (max-height: 740px) {
	.pl-hero__desc { display: none; }
}

/* ---- Tablet: foto piu' alta, titolo e pulsante senza descrizione ---- */
@media (min-width: 768px) and (max-width: 1100px) {
	.pl-hero { aspect-ratio: 4 / 3; }
	.pl-hero__title { font-size: clamp(34px, 5.4vw, 54px); }
	.pl-hero__desc { display: none; }
	.pl-hero__title { margin-bottom: 20px; }
}

/* ---- Mobile: taglio verticale, testi sopra la nav, nav a tutta larghezza ---- */
@media (max-width: 767px) {
	.pl-hero {
		--pl-hero-offset: 60px;
		aspect-ratio: 2 / 3;
		min-height: 0;
		max-height: calc(100vh - var(--pl-hero-offset) - var(--pl-hero-peek));
		max-height: calc(100svh - var(--pl-hero-offset) - var(--pl-hero-peek));
	}
	.pl-hero .pl-hero__img { object-position: var(--pos-m, var(--pos, 50% 50%)); }
	/* Slide con foto verticale dedicata (Insider): su mobile si mostra quella, sempre a tutto riquadro (cover) */
	.pl-hero__slide--has-m .pl-hero__img { display: none; }
	.pl-hero__slide--has-m .pl-hero__img.pl-hero__img--m { display: block; }
	.pl-hero__slide--light .pl-hero__media::after {
		background: linear-gradient(0deg, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, 0) 66%);
	}
	/* Foto con testi scuri: velo chiaro in basso, il testo scuro non si perde sul prodotto */
	.pl-hero__slide--dark .pl-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: linear-gradient(0deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .5) 34%, rgba(255, 255, 255, 0) 62%);
	}
	.pl-hero__caption {
		right: var(--pl-hero-pad);
		bottom: calc(var(--pl-hero-pad) + 40px);
		max-width: none;
	}
	/* Prodotti nella meta' bassa (Binario): testi in alto, sul fondo libero, velo chiaro dall'alto */
	.pl-hero__slide--cap-top-m .pl-hero__caption {
		top: var(--pl-hero-pad);
		bottom: auto;
	}
	.pl-hero__slide--dark.pl-hero__slide--cap-top-m .pl-hero__media::after {
		background: linear-gradient(180deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .5) 30%, rgba(255, 255, 255, 0) 52%);
	}
	.pl-hero__title { font-size: clamp(32px, 9.4vw, 44px); }
	.pl-hero__desc {
		max-width: none;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 14px;
	}
	.pl-hero__cta { min-height: 44px; padding: 0 24px; }
	.pl-hero__nav { left: var(--pl-hero-pad); gap: 14px; }
	.pl-hero__bars { flex: 1; }
	.pl-hero__bar { flex: 1; width: auto; }
	.pl-hero__btn--prev,
	.pl-hero__btn--next { display: none; }
	.pl-hero__spot-dot { width: 26px; height: 26px; }
	.pl-hero__spot-dot::before { inset: 9px; }
	.pl-hero__spot { transform: translate(-13px, -13px); }
	.pl-hero__spot-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pl-hero__slide.is-entering { animation: pl-hero-fade .3s linear both; }
	.pl-hero__slide.is-leaving .pl-hero__pan,
	.pl-hero__slide.is-leaving .pl-hero__caption,
	.pl-hero__slide.is-active .pl-hero__w > span,
	.pl-hero__slide.is-active .pl-hero__desc,
	.pl-hero__slide.is-active .pl-hero__cta,
	.pl-hero__cur.is-tick { animation: none; }
	.pl-hero__w { transform: none; transition: none; }
	.pl-hero__desc,
	.pl-hero__cta,
	.pl-hero__cta-label { translate: none; transition: none; }
	.pl-hero__cta::before,
	.pl-hero__cta { transition: none; }
	.pl-hero__spot-dot::after { animation: none; }
}