/* TL Hero Slider */

:where(.tl-hero) {
	position: relative;
	height: var(--tl-hero-h, 100vh);
	height: var(--tl-hero-h-s, 100svh);
	min-height: var(--tl-hero-min, 560px);
	max-height: 1100px;
	overflow: hidden;
	background: var(--e-global-color-tlnavydeep, #171B23);
	color: var(--tl-c-white, #fff);
	touch-action: pan-y;
}

@media (min-width: 768px) {
	:where(.tl-hero) {
		min-height: var(--tl-hero-min, 620px);
	}
}

:where(.tl-hero__slides, .tl-hero__slide, .tl-hero__media) {
	position: absolute;
	inset: 0;
}

:where(.tl-hero__slide) {
	z-index: 0;
	visibility: hidden;
}

:where(.tl-hero__slide.is-active) {
	z-index: 2;
	visibility: visible;
}

:where(.tl-hero__slide.is-leaving) {
	z-index: 1;
	visibility: visible;
}

:where(.tl-hero__media) {
	overflow: hidden;
}

/* ECCEZIONE (0,2,0): batte height:auto di .elementor img (0,1,1), altrimenti su mobile la foto non copre l'hero. */
.tl-hero .tl-hero__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

:where(.tl-hero__slide)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--tl-hero-overlay, #171B23) calc(var(--tl-hero-overlay-opacity, .72) * 100%), transparent) 0%, color-mix(in srgb, var(--tl-hero-overlay, #171B23) calc(var(--tl-hero-overlay-opacity, .72) * 62%), transparent) 35%, transparent 65%);
	pointer-events: none;
}

:where(.tl-hero__content) {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: var(--tl-hero-align, end);
	padding-bottom: var(--tl-hero-pad-b, 120px);
}

:where(.tl-hero__inner) {
	width: 100%;
	max-width: calc(var(--tl-content-w, 1240px) + 2 * var(--tl-gutter, 40px));
	margin-inline: auto;
	padding-inline: var(--tl-gutter, 40px);
}

@media (max-width: 1024px) {
	:where(.tl-hero__content) { padding-bottom: var(--tl-hero-pad-b, 96px); }
}

@media (max-width: 767px) {
	:where(.tl-hero__content) { padding-bottom: var(--tl-hero-pad-b, 88px); }
}

:where(.tl-hero__eyebrow) {
	margin: 0 0 16px;
	color: rgba(255, 255, 255, .85);
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .16em;
	text-transform: uppercase;
}

:where(.tl-hero__title) {
	max-width: var(--tl-hero-text-max, none);
	margin: 0;
	color: var(--tl-c-white, #fff);
	font-family: var(--e-global-typography-tldisplay-font-family, "Gotu"), "Gotu Fallback", Georgia, serif;
	font-size: var(--e-global-typography-tldisplay-font-size, clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem));
	font-weight: 400;
	line-height: var(--e-global-typography-tldisplay-line-height, 1.08);
	letter-spacing: -.01em;
}

:where(.tl-hero__line) {
	display: block;
	overflow: hidden;
	padding-block: .06em .14em;
	margin-block: -.06em -.14em;
}

:where(.tl-hero__line > span) {
	display: inline-block;
}

:where(.tl-hero__subtitle) {
	max-width: 520px;
	margin-top: 24px;
	color: color-mix(in srgb, var(--tl-c-white, #fff) 85%, transparent);
	font-size: var(--e-global-typography-secondary-font-size, 1.1875rem);
	line-height: 1.65;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .25);
}

:where(.tl-hero__subtitle) > * {
	margin: 0;
}

:where(.tl-hero__cta) {
	margin-top: 32px;
}

/* Animazioni del testo della slide attiva */
:where(.tl-hero__slide.is-active .tl-hero__eyebrow) {
	animation: tl-hero-fade .8s var(--tl-ease-std) .2s both;
}

:where(.tl-hero__slide.is-active .tl-hero__line > span) {
	animation: tl-hero-line 1s var(--tl-ease-expo) calc(.35s + var(--i, 0) * 90ms) both;
}

:where(.tl-hero__slide.is-active .tl-hero__subtitle) {
	animation: tl-hero-up .9s var(--tl-ease-expo) .65s both;
}

:where(.tl-hero__slide.is-active .tl-hero__cta) {
	animation: tl-hero-up .9s var(--tl-ease-expo) .8s both;
}

:where(.tl-hero__slide.is-leaving .tl-hero__content) {
	animation: tl-hero-out .3s var(--tl-ease-std) both;
}

/* Transizioni */
:where(.tl-hero--curtain .tl-hero__slide.is-entering) {
	animation: tl-hero-curtain 1.2s var(--tl-ease-inout) both;
}

:where(.tl-hero--fade .tl-hero__slide.is-entering) {
	animation: tl-hero-fade 1.2s var(--tl-ease-inout) both;
}

:where(.tl-hero__slide.is-leaving .tl-hero__media) {
	animation: tl-hero-leave 1.2s var(--tl-ease-inout) both;
}

/* Ken Burns */
:where(.tl-hero--kenburns .tl-hero__slide.is-active .tl-hero__img) {
	animation: tl-hero-kb calc(var(--tl-hero-speed, 7s) + 1.2s) linear both;
}

:where(.tl-hero__slide[data-kb="top-left"] .tl-hero__img) { transform-origin: top left; }
:where(.tl-hero__slide[data-kb="top-right"] .tl-hero__img) { transform-origin: top right; }
:where(.tl-hero__slide[data-kb="bottom-left"] .tl-hero__img) { transform-origin: bottom left; }
:where(.tl-hero__slide[data-kb="bottom-right"] .tl-hero__img) { transform-origin: bottom right; }

/* Controlli */
:where(.tl-hero__controls) {
	position: absolute;
	right: var(--tl-gutter, 40px);
	bottom: 40px;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--tl-hero-ui, var(--tl-c-white, #fff));
}

:where(.tl-hero__counter) {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-family: var(--e-global-typography-tlnumber-font-family, "Gotu"), "Gotu Fallback", Georgia, serif;
	font-size: 1.125rem;
	line-height: 1;
	letter-spacing: .04em;
}

:where(.tl-hero__count, .tl-cards__count) {
	display: inline-grid;
	height: 1.2em;
	overflow: hidden;
}

:where(.tl-hero__count > span, .tl-cards__count > span) {
	grid-area: 1 / 1;
	line-height: 1.2;
	transition: translate .6s var(--tl-ease-expo);
}

:where(.tl-hero__count > .is-in, .tl-cards__count > .is-in) {
	translate: 0 100%;
}

:where(.tl-hero__count > .is-out, .tl-cards__count > .is-out) {
	translate: 0 -100%;
}

:where(.tl-hero__progress) {
	position: relative;
	width: 120px;
	height: 1px;
	background: color-mix(in srgb, currentColor 30%, transparent);
}

:where(.tl-hero__progress.is-hidden) {
	visibility: hidden;
	width: 0;
}

:where(.tl-hero__progress > span) {
	position: absolute;
	inset: 0;
	background: currentColor;
	transform-origin: left;
	scale: 0 1;
}

:where(.tl-hero.is-playing .tl-hero__progress > span) {
	animation: tl-hero-progress var(--tl-hero-speed, 7s) linear forwards;
}

:where(.tl-hero.is-paused .tl-hero__progress > span) {
	animation-play-state: paused;
}

:where(.tl-hero__arrow) {
	--tl-arrow-color: var(--tl-hero-ui, var(--tl-c-white, #fff));
}

:where(.tl-hero__arrow:hover svg, .tl-hero__arrow:focus-visible svg) {
	color: var(--tl-c-primary, #202631);
}

:where(.tl-hero__pause) {
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

:where(.tl-hero__pause span)::before,
:where(.tl-hero__pause span)::after {
	content: "";
	position: absolute;
	top: 15px;
	width: 2px;
	height: 14px;
	background: currentColor;
}

:where(.tl-hero__pause span)::before { left: 17px; }
:where(.tl-hero__pause span)::after { left: 25px; }

:where(.tl-hero.is-paused .tl-hero__pause span)::before {
	left: 17px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent currentColor;
	background: none;
}

:where(.tl-hero.is-paused .tl-hero__pause span)::after {
	content: none;
}

:where(.tl-hero__cue) {
	position: absolute;
	bottom: 24px;
	left: 50%;
	z-index: 4;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 0;
	translate: -50% 0;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

:where(.tl-hero__cue)::after {
	content: "";
	width: 1px;
	height: 56px;
	background: linear-gradient(currentColor, currentColor) 0 0 / 1px 40% no-repeat, color-mix(in srgb, currentColor 30%, transparent);
	animation: tl-hero-cue 2s var(--tl-ease-inout) infinite;
}

@media (min-width: 1025px) and (min-height: 901px) {
	:where(.tl-hero__cue) {
		display: flex;
		bottom: 16px;
		opacity: .7;
	}
}

@media (max-width: 767px) {
	:where(.tl-hero__controls) {
		right: 20px;
		bottom: 24px;
		gap: 8px;
	}

	:where(.tl-hero__arrow) {
		display: none;
	}
}

@keyframes tl-hero-curtain {
	from { clip-path: inset(0 0 0 100%); }
	to { clip-path: inset(0); }
}

@keyframes tl-hero-leave {
	to { scale: 1.05; filter: brightness(.6); }
}

@keyframes tl-hero-kb {
	from { transform: scale(1); }
	to { transform: scale(1.12); }
}

@keyframes tl-hero-fade {
	from { opacity: 0; }
}

@keyframes tl-hero-out {
	to { opacity: 0; }
}

@keyframes tl-hero-line {
	from { translate: 0 105%; }
}

@keyframes tl-hero-up {
	from { opacity: 0; translate: 0 40px; }
}

@keyframes tl-hero-progress {
	to { scale: 1 1; }
}

@keyframes tl-hero-cue {
	from { background-position: 0 -40%, 0 0; }
	to { background-position: 0 140%, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
	.tl-hero__slide,
	.tl-hero__slide *,
	.tl-hero__cue::after {
		animation: none !important;
		transition: none !important;
	}
}