/* ==========================================================================
   KEYWEB FLATSOME KIT — animazioni
   Nel markup si scrive solo la classe del tipo: kw-anim kw-anim--titolo.
   Lo stato iniziale lo decide l'impostazione, stampata nel <head>.
   ========================================================================== */

.kw-js .kw-anim {
	transition:
		opacity var(--kw-anim-durata, .8s) var(--kw-curva),
		transform var(--kw-anim-durata, .8s) var(--kw-curva),
		filter var(--kw-anim-durata, .8s) var(--kw-curva),
		letter-spacing var(--kw-anim-durata, .8s) var(--kw-curva),
		clip-path var(--kw-anim-durata, .8s) var(--kw-curva);
	will-change: opacity, transform;
}

.kw-js .kw-anim.is-in {
	opacity: 1;
	transform: none;
	filter: none;
	clip-path: none;
	letter-spacing: inherit;
}

/* --- ritardi e durate ---------------------------------------------------- */

.kw-js .kw-delay-1.is-in { transition-delay: .1s; }
.kw-js .kw-delay-2.is-in { transition-delay: .2s; }
.kw-js .kw-delay-3.is-in { transition-delay: .3s; }
.kw-js .kw-delay-4.is-in { transition-delay: .45s; }
.kw-js .kw-delay-5.is-in { transition-delay: .6s; }

.kw-js .kw-dur-fast { transition-duration: .5s; }
.kw-js .kw-dur-slow { transition-duration: 1.2s; }

/* --- contenitori a cascata ----------------------------------------------- */

.kw-js .kw-stagger > * {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity var(--kw-anim-durata, .8s) var(--kw-curva),
		transform var(--kw-anim-durata, .8s) var(--kw-curva);
}

.kw-js .kw-stagger.is-in > * { opacity: 1; transform: none; }
.kw-js .kw-stagger.is-in > * { transition-delay: calc(var(--kw-i, 0) * 90ms); }
.kw-js .kw-stagger--fast.is-in > * { transition-delay: calc(var(--kw-i, 0) * 45ms); }
.kw-js .kw-stagger--slow.is-in > * { transition-delay: calc(var(--kw-i, 0) * 160ms); }

/* --- filetto e tracciati -------------------------------------------------- */

.kw-line-draw {
	height: 1px;
	background: currentColor;
	opacity: .2;
	transform: scaleX(0);
	transform-origin: left center;
}

.kw-js .kw-line-draw.is-in {
	transform: scaleX(1);
	transition: transform 1.2s var(--kw-curva);
}

.kw-js .kw-draw path,
.kw-js .kw-draw line,
.kw-js .kw-draw circle {
	stroke-dasharray: var(--kw-len, 1000);
	stroke-dashoffset: var(--kw-len, 1000);
}

.kw-js .kw-draw.is-in path,
.kw-js .kw-draw.is-in line,
.kw-js .kw-draw.is-in circle {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.6s var(--kw-curva);
}

/* --- legate allo scorrimento, in css puro -------------------------------- */
/* Dentro @supports: senza la guardia, i browser che non riconoscono
   animation-timeline eseguono l'animazione a tempo, tutta insieme al
   caricamento e nel punto sbagliato. */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.kw-scroll--parallax {
			animation: kw-parallax linear both;
			animation-timeline: view();
			animation-range: cover;
		}

		@keyframes kw-parallax {
			from { transform: translateY(calc(var(--kw-depth, 12) * -1%)); }
			to { transform: translateY(calc(var(--kw-depth, 12) * 1%)); }
		}

		.kw-scroll--zoom {
			animation: kw-zoom linear both;
			animation-timeline: view();
			animation-range: cover;
		}

		@keyframes kw-zoom {
			from { scale: 1; }
			to { scale: 1.14; }
		}

		.kw-progress {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 300;
			width: 100%;
			height: 3px;
			background: var(--kw-secondario);
			transform-origin: left center;
			animation: kw-progress linear both;
			animation-timeline: scroll(root block);
		}

		@keyframes kw-progress {
			from { transform: scaleX(0); }
			to { transform: scaleX(1); }
		}
	}
}

/* --- supporto al livello GSAP -------------------------------------------- */
/* Stato iniziale degli elementi che GSAP anima: evita il lampo prima che lo
   script entri in funzione. */

.kw-js [data-kw-gsap^="split-"],
.kw-js [class*="kw-gsap--split-"] { opacity: 0; }

.kw-js [data-kw-gsap^="split-"].kw-gsap-ready,
.kw-js [class*="kw-gsap--split-"].kw-gsap-ready { opacity: 1; }

.kw-reveal-panel {
	position: absolute;
	inset: 0;
	z-index: 2;
	transform-origin: left center;
}

[data-kw-gsap="magnetic"],
.kw-gsap--magnetic { display: inline-block; will-change: transform; }

[data-kw-gsap="marquee"],
.kw-gsap--marquee {
	display: flex;
	gap: var(--kw-gap, 40px);
	overflow: hidden;
	white-space: nowrap;
}

[data-kw-gsap="marquee"] > *,
.kw-gsap--marquee > * { flex: 0 0 auto; }

/* Lo script mette il contenuto in una traccia interna ed è quella che
   scorre: il contenitore resta fermo e ritaglia. */
.kw-marquee__traccia {
	display: flex;
	gap: var(--kw-gap, 40px);
	width: max-content;
	white-space: nowrap;
}

.kw-marquee__traccia > * { flex: 0 0 auto; }

.kw-site button.kw-marquee-pausa {
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	min-height: 0;
	margin: .75rem 0 0;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	line-height: 1;
	box-shadow: none;
	cursor: pointer;
}

.kw-site button.kw-marquee-pausa::before {
	content: "";
	box-sizing: border-box;
	width: .7rem;
	height: .8rem;
	border-right: .22rem solid currentColor;
	border-left: .22rem solid currentColor;
}

.kw-site button.kw-marquee-pausa[aria-pressed="true"]::before {
	margin-left: .15rem;
	border: 0;
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* --- chi ha chiesto meno movimento non lo riceve ------------------------- */

@media (prefers-reduced-motion: reduce) {
	.kw-js .kw-anim,
	.kw-js .kw-stagger > *,
	.kw-line-draw,
	.kw-js .kw-draw path {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
		letter-spacing: inherit !important;
		stroke-dashoffset: 0 !important;
		transition: none !important;
		animation: none !important;
	}

	.kw-progress { display: none; }

	/* Fermo, e si scorre a mano. */
	[data-kw-gsap="marquee"],
	.kw-gsap--marquee { overflow-x: auto; }
	.kw-js [data-kw-gsap^="split-"],
	.kw-js [class*="kw-gsap--split-"] { opacity: 1 !important; }
}