/*
 * Travelounge – classi di animazione (Avanzate > Classi CSS su widget/container).
 * Gli stati iniziali si applicano solo con html.tl-js e mai nell'editor Elementor.
 * Ogni animazione parte una volta sola (core.js aggiunge .is-inview).
 * Si usano animation (non transition) per non dipendere dalle transition di Elementor.
 * Su un elemento usare o queste classi o le animazioni d'ingresso di Elementor.
 */

:where(.tl-delay-1) { --tl-delay: 150ms; }
:where(.tl-delay-2) { --tl-delay: 300ms; }
:where(.tl-delay-3) { --tl-delay: 450ms; }
:where(.tl-delay-4) { --tl-delay: 600ms; }

/* ---------- Stati iniziali (solo JS attivo, non nell'editor) ---------- */

:where(.tl-js body:not(.elementor-editor-active) :is(.tl-reveal-up, .tl-reveal-fade, .tl-reveal-mask):not(.is-inview)) {
	opacity: 0;
}

/*
 * Tendine: il clip-path va sui FIGLI del widget (img, link, wrapper), mai sul widget stesso:
 * IntersectionObserver considera il clip-path del target, e con inset(100%) non scatterebbe mai.
 */
:where(.tl-img-curtain) { --tl-curtain: tl-curtain-up; }
:where(.tl-img-curtain--left) { --tl-curtain: tl-curtain-left; }
:where(.tl-img-curtain--right) { --tl-curtain: tl-curtain-right; }

:where(.tl-img-curtain, .tl-img-curtain--left, .tl-img-curtain--right) {
	overflow: hidden;
}

:where(.tl-js body:not(.elementor-editor-active) :is(.tl-img-curtain, .tl-img-curtain--left, .tl-img-curtain--right):not(.is-inview) > *) {
	clip-path: inset(100% 0 0 0);
}

:where(.tl-js body:not(.elementor-editor-active) .tl-img-curtain--left:not(.is-inview) > *) {
	clip-path: inset(0 100% 0 0);
}

:where(.tl-js body:not(.elementor-editor-active) .tl-img-curtain--right:not(.is-inview) > *) {
	clip-path: inset(0 0 0 100%);
}

:where(.tl-js body:not(.elementor-editor-active) .tl-line-draw:not(.is-inview)) {
	scale: 0 1;
}

/* ---------- Ingresso ---------- */

:where(.tl-reveal-up.is-inview, .tl-reveal-mask.is-inview:not(.is-split)) {
	animation: tl-reveal-up .9s var(--tl-ease-expo) var(--tl-delay, 0ms) both;
}

:where(.tl-reveal-fade.is-inview) {
	animation: tl-reveal-fade .8s var(--tl-ease-std) var(--tl-delay, 0ms) both;
}

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

:where(.tl-reveal-mask .tl-line__in) {
	display: inline-block;
	animation: tl-line-up 1s var(--tl-ease-expo) calc(var(--tl-delay, 0ms) + var(--i, 0) * 90ms) both;
}

:where(:is(.tl-img-curtain, .tl-img-curtain--left, .tl-img-curtain--right).is-inview > *) {
	animation: var(--tl-curtain) 1.2s var(--tl-ease-inout) var(--tl-delay, 0ms) both;
}

:where(:is(.tl-img-curtain, .tl-img-curtain--left, .tl-img-curtain--right).is-inview > :not(img)) img {
	animation: tl-curtain-zoom 1.2s var(--tl-ease-inout) var(--tl-delay, 0ms) both;
}

:where(.tl-line-draw) {
	transform-origin: left center;
}

:where(.tl-line-draw.is-inview) {
	animation: tl-line-draw .9s var(--tl-ease-expo) var(--tl-delay, 0ms) both;
}

/* Liste dei widget (data-tl-items): card con stagger di 120 ms, max 6. */
:where(.tl-js body:not(.elementor-editor-active) [data-tl-items]:not(.is-inview) :is(.tl-cards__item, .tl-list__item)) {
	opacity: 0;
}

:where([data-tl-items].is-inview :is(.tl-cards__item, .tl-list__item)) {
	animation: tl-reveal-up .9s var(--tl-ease-expo) calc(min(var(--i, 0), 6) * 120ms) both;
}

/* ---------- Ken Burns (in pausa fuori viewport) ---------- */

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

:where(.tl-kenburns) img {
	animation: tl-kenburns 8s linear infinite alternate;
	animation-play-state: paused;
}

:where(.tl-kenburns.is-inview) img {
	animation-play-state: running;
}

/* ---------- Hover ---------- */

:where(.tl-hover-zoom .elementor-widget-image) {
	overflow: hidden;
}

:where(.tl-hover-zoom) img {
	transition: scale .7s var(--tl-ease-expo);
}

@media (hover: hover) {
	:where(.tl-hover-zoom:hover, .tl-hover-zoom:focus-within) {
		box-shadow: var(--tl-shadow-card);
	}

	:where(.tl-hover-zoom:hover, .tl-hover-zoom:focus-within) img {
		scale: 1.06;
	}
}

/* ---------- Parallax: CSS scroll-driven, nessun JS, solo transform, da 768 px ---------- */

:where(.tl-parallax) { --tl-px: 8%; --tl-px-scale: 1.16; }
:where(.tl-parallax--soft) { --tl-px: 4%; --tl-px-scale: 1.08; }
:where(.tl-parallax--strong) { --tl-px: 14%; --tl-px-scale: 1.28; }

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		:where(.tl-parallax, .tl-parallax--soft, .tl-parallax--strong) {
			overflow: hidden;
		}

		:where(.tl-parallax, .tl-parallax--soft, .tl-parallax--strong) img {
			animation: tl-parallax linear both;
			animation-timeline: view();
			animation-range: cover;
		}

		:where(:is(.tl-img-curtain, .tl-img-curtain--left, .tl-img-curtain--right).is-inview:is(.tl-parallax, .tl-parallax--soft, .tl-parallax--strong)) img {
			animation: var(--tl-curtain) 1.2s var(--tl-ease-inout) var(--tl-delay, 0ms) both, tl-parallax linear both;
			animation-timeline: auto, view();
			animation-range: normal, cover;
		}
	}
}

/* ---------- Keyframes ---------- */

@keyframes tl-reveal-up {
	from { opacity: 0; translate: 0 40px; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes tl-reveal-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

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

@keyframes tl-curtain-up {
	from { clip-path: inset(100% 0 0 0); scale: 1.15; }
	to { clip-path: inset(0); scale: 1; }
}

@keyframes tl-curtain-left {
	from { clip-path: inset(0 100% 0 0); scale: 1.15; }
	to { clip-path: inset(0); scale: 1; }
}

@keyframes tl-curtain-right {
	from { clip-path: inset(0 0 0 100%); scale: 1.15; }
	to { clip-path: inset(0); scale: 1; }
}

@keyframes tl-curtain-zoom {
	from { scale: 1.15; }
	to { scale: 1; }
}

@keyframes tl-line-draw {
	from { scale: 0 1; }
	to { scale: 1 1; }
}

@keyframes tl-kenburns {
	from { transform: scale(1); }
	to { transform: scale(1.1); }
}

@keyframes tl-parallax {
	from { transform: translateY(calc(var(--tl-px) * -1)) scale(var(--tl-px-scale)); }
	to { transform: translateY(var(--tl-px)) scale(var(--tl-px-scale)); }
}

/* ---------- Movimento ridotto: tutto visibile subito, nessun movimento ---------- */

@media (prefers-reduced-motion: reduce) {
	:is(.tl-reveal-up, .tl-reveal-fade, .tl-reveal-mask, .tl-img-curtain, .tl-img-curtain--left, .tl-img-curtain--right, .tl-line-draw),
	:is(.tl-reveal-mask) .tl-line__in,
	[data-tl-items] :is(.tl-cards__item, .tl-list__item) {
		opacity: 1 !important;
		clip-path: none !important;
		translate: none !important;
		scale: none !important;
		animation: none !important;
	}

	:is(.tl-img-curtain, .tl-img-curtain--left, .tl-img-curtain--right, .tl-kenburns, .tl-hover-zoom) img {
		animation: none !important;
		scale: none !important;
		transform: none !important;
	}
}