/**
 * FM Banner Home — dissolvenze.
 *
 * Regola che vale per tutte le transizioni: l'immagine uscente resta piena
 * sotto (is-prev, z-index 1, nessuna transizione) e la nuova sale sopra
 * dissolvendo da 0 a 1 (is-current, z-index 2). Facendo svanire entrambe in
 * croce, a metà transizione si vedrebbe il fondo del contenitore.
 */

.fm-hb {
	--fm-hb-duration: 900ms;
	--fm-hb-dwell: 5000ms;
	--fm-hb-ease: cubic-bezier(.4, 0, .2, 1);
	--fm-hb-ratio: 16 / 6;
	--fm-hb-radius: 0px;
	position: relative;
	width: 100%;
}

.fm-hb__viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: var(--fm-hb-ratio);
	border-radius: var(--fm-hb-radius);
	background-color: var(--fm-hb-backdrop, #111);
	isolation: isolate;
}

.fm-hb__slide {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	transition: opacity var(--fm-hb-duration) var(--fm-hb-ease);
}

.fm-hb__slide.is-prev {
	z-index: 1;
	opacity: 1;
	transition: none;
}

.fm-hb__slide.is-current {
	z-index: 2;
	opacity: 1;
}

.fm-hb__media {
	position: absolute;
	inset: 0;
	background-image: var(--fm-hb-img-mob);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transition:
		transform var(--fm-hb-duration) var(--fm-hb-ease),
		filter var(--fm-hb-duration) var(--fm-hb-ease);
	will-change: transform, filter;
}

@media (min-width: 768px) {
	.fm-hb__media {
		background-image: var(--fm-hb-img-desk);
	}
}

.fm-hb__overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: var(--fm-hb-overlay, transparent);
}

/* --- 01 dissolvenza semplice: nessuna regola aggiuntiva ------------------ */

/* --- 02 deriva lenta: la scala prosegue anche mentre la slide esce ------- */
.fm-hb[data-fx="ken"] .fm-hb__slide.is-current .fm-hb__media,
.fm-hb[data-fx="ken"] .fm-hb__slide.is-prev .fm-hb__media {
	animation: fm-hb-ken calc(var(--fm-hb-duration) + var(--fm-hb-dwell) + 1200ms) linear both;
}

@keyframes fm-hb-ken {
	from { transform: scale(1.005); }
	to { transform: scale(1.085); }
}

/* --- 03 fuori fuoco ------------------------------------------------------ */
.fm-hb[data-fx="blur"] .fm-hb__slide.is-prev .fm-hb__media {
	filter: blur(16px) saturate(1.25);
}

.fm-hb[data-fx="blur"] .fm-hb__slide.is-current .fm-hb__media {
	animation: fm-hb-unblur var(--fm-hb-duration) var(--fm-hb-ease) both;
}

@keyframes fm-hb-unblur {
	from { filter: blur(14px); }
	to { filter: blur(0); }
}

/* --- 04 parallasse verticale -------------------------------------------- */
.fm-hb[data-fx="rise"] .fm-hb__media {
	transform: translateY(26px);
}

.fm-hb[data-fx="rise"] .fm-hb__slide.is-current .fm-hb__media {
	transform: translateY(0);
}

.fm-hb[data-fx="rise"] .fm-hb__slide.is-prev .fm-hb__media {
	transform: translateY(-18px);
}

/* --- 05 bande sfumate ---------------------------------------------------- */
.fm-hb[data-fx="slats"] .fm-hb__slide.is-current {
	transition: none;
}

.fm-hb[data-fx="slats"] .fm-hb__media {
	background-image: none;
}

.fm-hb__slat {
	position: absolute;
	inset: 0;
	opacity: 0;
	background-image: var(--fm-hb-img-mob);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: opacity calc(var(--fm-hb-duration) * .62) var(--fm-hb-ease);
	transition-delay: calc(var(--fm-hb-slat-index) * var(--fm-hb-slat-step, 70ms));
}

@media (min-width: 768px) {
	.fm-hb__slat {
		background-image: var(--fm-hb-img-desk);
	}
}

.fm-hb__slide.is-current .fm-hb__slat {
	opacity: 1;
}

.fm-hb__slide.is-prev .fm-hb__slat {
	opacity: 1;
	transition: none;
}

/* --- area cliccabile ----------------------------------------------------- */
.fm-hb__hit {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: block;
	border: 0;
	text-decoration: none;
}

.fm-hb__hit:focus-visible {
	outline: 2px solid var(--fm-hb-focus, #fff);
	outline-offset: -6px;
}

/* --- pulsante ------------------------------------------------------------ */
.fm-hb__cta {
	position: absolute;
	z-index: 5;
	display: flex;
	max-width: calc(100% - var(--fm-hb-cta-inline, 32px) * 2);
	inset-inline-start: var(--fm-hb-cta-inline, 32px);
	inset-inline-end: var(--fm-hb-cta-inline, 32px);
	bottom: var(--fm-hb-cta-block, 32px);
	justify-content: var(--fm-hb-cta-align, flex-end);
	pointer-events: none;
}

.fm-hb__cta.is-top {
	top: var(--fm-hb-cta-block, 32px);
	bottom: auto;
}

.fm-hb__cta.is-middle {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}

/* La comparsa sta sul contenitore e l'effetto continuo sul pulsante: due
   elementi distinti, altrimenti le due animazioni si contendono transform. */
.fm-hb__cta-inner {
	display: flex;
	max-width: 100%;
}

/* Con l'intera immagine cliccabile il pulsante è uno <span>: i selettori PULSE
   sono qualificati su a/button, quindi il contratto va riscritto qui sulle
   stesse variabili. Sull'ancora vincono comunque le regole di Trigger System,
   che leggono gli stessi valori: l'aspetto non cambia. */
.fm-hb__button {
	position: relative;
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	min-height: var(--fm-panel-button-min-height, 46px);
	padding: var(--fm-panel-button-padding, 13px 18px);
	border-color: var(--fm-panel-button-border-color, var(--fm-panel-button-background, #111));
	border-style: var(--fm-panel-button-border-style, solid);
	border-width: var(--fm-panel-button-border-width, 1px);
	border-radius: var(--fm-panel-button-radius, 0);
	background: var(--fm-panel-button-background, #111);
	color: var(--fm-panel-button-color, #fff);
	pointer-events: auto;
	text-align: center;
	text-decoration: none;
	transition:
		color .2s ease,
		background-color .2s ease,
		border-color .2s ease,
		box-shadow .2s ease;
}

:where(.fm-hb__button) {
	font-family: var(--e-global-typography-accent-font-family, inherit);
	font-size: var(--e-global-typography-accent-font-size, inherit);
	font-style: var(--e-global-typography-accent-font-style, inherit);
	font-weight: var(--e-global-typography-accent-font-weight, 600);
	letter-spacing: var(--e-global-typography-accent-letter-spacing, inherit);
	line-height: var(--e-global-typography-accent-line-height, normal);
	text-transform: var(--e-global-typography-accent-text-transform, inherit);
}

/* Il pulsante decorativo non ha un hover proprio: risponde a quello dell'area
   cliccabile, che è il vero link. */
.fm-hb__viewport:hover .fm-hb__cta.is-decorative .fm-hb__button,
.fm-hb__hit:focus-visible ~ .fm-hb__cta .fm-hb__button {
	background: var(--fm-panel-button-hover-background, #fff);
	border-color: var(--fm-panel-button-hover-background, #fff);
	color: var(--fm-panel-button-hover-color, #111);
}

.fm-hb__cta.is-decorative .fm-hb__button {
	pointer-events: none;
}

.fm-hb__cta.is-entering > .fm-hb__cta-inner {
	animation: fm-hb-cta-in var(--fm-hb-cta-duration, 620ms) var(--fm-hb-ease) var(--fm-hb-cta-delay, 420ms) both;
}

@keyframes fm-hb-cta-in {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

/* Bagliore neon pulsante: è l'effetto già nel framework — la stessa animazione
   `fm-panel-button-neon-pulse` dichiarata in Trigger System, con gli stessi
   --fm-panel-button-glow-*. L'unica differenza rispetto al pulsante PULSE
   standard è che qui resta acceso sempre invece che su hover e focus. */
.fm-hb__button--glow {
	animation: fm-panel-button-neon-pulse var(--fm-panel-button-glow-duration, 1.8s) ease-in-out infinite;
}

/* --- indicatori ---------------------------------------------------------- */
.fm-hb__dots {
	position: absolute;
	z-index: 6;
	left: 50%;
	bottom: var(--fm-hb-dots-block, 18px);
	display: flex;
	gap: var(--fm-hb-dots-gap, 8px);
	transform: translateX(-50%);
}

.fm-hb__dot {
	width: var(--fm-hb-dot-size, 22px);
	height: var(--fm-hb-dot-thickness, 3px);
	padding: 0;
	border: 0;
	border-radius: var(--fm-hb-dot-radius, 0);
	background: var(--fm-hb-dot-color, rgba(255, 255, 255, .45));
	cursor: pointer;
	transition: background-color .25s ease;
}

.fm-hb__dot[aria-current="true"] {
	background: var(--fm-hb-dot-active-color, #fff);
}

.fm-hb__dot:focus-visible {
	outline: 2px solid var(--fm-hb-focus, #fff);
	outline-offset: 3px;
}

/* --- stato vuoto (solo editor) ------------------------------------------- */
.fm-hb__empty {
	display: flex;
	min-height: 180px;
	align-items: center;
	justify-content: center;
	padding: 24px;
	border: 1px dashed currentColor;
	opacity: .7;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.fm-hb__slide,
	.fm-hb__media,
	.fm-hb__slat,
	.fm-hb__button,
	.fm-hb__cta.is-entering > .fm-hb__cta-inner {
		animation: none !important;
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}

	.fm-hb[data-fx="rise"] .fm-hb__media,
	.fm-hb[data-fx="rise"] .fm-hb__slide.is-prev .fm-hb__media {
		transform: none;
	}
}