/* Kinetonos Style: animazioni opzionali.
   Si attivano dal pannello "Animazione" del blocco (o aggiungendo la classe a mano).
   Nessun !important. Tutto e' disattivato se il visitatore ha chiesto "riduci animazioni".
   Senza JavaScript i contenuti restano sempre visibili. */

@media (prefers-reduced-motion: no-preference) {

	/* ---------- Entrata allo scorrimento ---------- */
	.kn-js :is(.kn-anim-up, .kn-anim-fade, .kn-anim-left, .kn-anim-right, .kn-anim-zoom, .kn-anim-blur) {
		opacity: 0;
		transition:
			opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
			transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
			filter 0.7s ease,
			translate 0.25s ease,
			box-shadow 0.25s ease;
		transition-delay: var(--kn-delay, 0s), var(--kn-delay, 0s), var(--kn-delay, 0s), 0s, 0s;
	}

	.kn-js .kn-anim-up { transform: translateY(28px); }
	.kn-js .kn-anim-left { transform: translateX(-36px); }
	.kn-js .kn-anim-right { transform: translateX(36px); }
	.kn-js .kn-anim-zoom { transform: scale(0.94); }
	.kn-js .kn-anim-blur { transform: translateY(12px); filter: blur(10px); }

	.kn-js :is(.kn-anim-up, .kn-anim-fade, .kn-anim-left, .kn-anim-right, .kn-anim-zoom, .kn-anim-blur).is-visible {
		opacity: 1;
		transform: none;
		filter: none;
	}

	/* ---------- Ritardo ---------- */
	.kn-delay-1 { --kn-delay: 0.12s; }
	.kn-delay-2 { --kn-delay: 0.25s; }
	.kn-delay-3 { --kn-delay: 0.4s; }

	/* ---------- Elementi a cascata (per Gruppo, Colonne, Pulsanti) ---------- */
	.kn-js .kn-anim-stagger > * {
		opacity: 0;
		transform: translateY(24px);
		transition:
			opacity 0.6s ease,
			transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
			translate 0.25s ease,
			box-shadow 0.25s ease;
	}

	.kn-js .kn-anim-stagger.is-visible > * {
		opacity: 1;
		transform: none;
	}

	.kn-js .kn-anim-stagger.is-visible > :nth-child(2) { transition-delay: 0.1s, 0.1s, 0s, 0s; }
	.kn-js .kn-anim-stagger.is-visible > :nth-child(3) { transition-delay: 0.2s, 0.2s, 0s, 0s; }
	.kn-js .kn-anim-stagger.is-visible > :nth-child(4) { transition-delay: 0.3s, 0.3s, 0s, 0s; }
	.kn-js .kn-anim-stagger.is-visible > :nth-child(5) { transition-delay: 0.4s, 0.4s, 0s, 0s; }
	.kn-js .kn-anim-stagger.is-visible > :nth-child(6) { transition-delay: 0.5s, 0.5s, 0s, 0s; }
	.kn-js .kn-anim-stagger.is-visible > :nth-child(7) { transition-delay: 0.6s, 0.6s, 0s, 0s; }
	.kn-js .kn-anim-stagger.is-visible > :nth-child(8) { transition-delay: 0.7s, 0.7s, 0s, 0s; }

	/* ---------- Effetti: solleva al passaggio ---------- */
	.kn-fx-lift {
		transition: translate 0.25s ease, box-shadow 0.25s ease;
	}

	.kn-fx-lift:hover {
		translate: 0 -6px;
		box-shadow: 0 18px 40px rgba(6, 24, 26, 0.16);
	}

	/* ---------- Effetti: galleggia ---------- */
	.kn-fx-float {
		animation: kn-float 6s ease-in-out infinite alternate;
	}

	@keyframes kn-float {
		from { translate: 0 0; }
		to { translate: 0 -12px; }
	}

	/* ---------- Effetti: sottolineatura che si disegna ---------- */
	.kn-fx-underline {
		width: fit-content;
		max-width: 100%;
		padding-bottom: 8px;
		background: linear-gradient(var(--wp--preset--color--copper), var(--wp--preset--color--copper)) no-repeat 0 100% / 100% 3px;
	}

	.kn-js .kn-fx-underline {
		background-size: 0 3px;
		transition: background-size 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s;
	}

	.kn-js .kn-fx-underline.is-visible {
		background-size: 100% 3px;
	}

	/* ---------- Effetti: sfumatura in movimento (per le sezioni) ---------- */
	body .kn-fx-gradient {
		background-image: linear-gradient(120deg, var(--wp--preset--color--mint), var(--wp--preset--color--mist), var(--wp--preset--color--mint), var(--wp--preset--color--mist));
		background-size: 300% 300%;
		animation: kn-gradient 18s ease-in-out infinite;
	}

	body .is-style-kn-section-dark.kn-fx-gradient {
		background-image: linear-gradient(120deg, var(--wp--preset--color--ink), var(--wp--preset--color--deep), var(--wp--preset--color--ink-soft), var(--wp--preset--color--ink));
	}

	@keyframes kn-gradient {
		0% { background-position: 0% 50%; }
		50% { background-position: 100% 50%; }
		100% { background-position: 0% 50%; }
	}

	/* ---------- Effetti: pulsanti ---------- */
	.kn-fx-shine .wp-block-button__link {
		position: relative;
		overflow: hidden;
		isolation: isolate;
	}

	.kn-fx-shine .wp-block-button__link::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
		translate: -120% 0;
		transition: translate 0.7s ease;
	}

	.kn-fx-shine .wp-block-button__link:hover::after {
		translate: 120% 0;
	}

	.kn-fx-pulse .wp-block-button__link {
		animation: kn-pulse 2.6s ease-out infinite;
	}

	@keyframes kn-pulse {
		0% { box-shadow: 0 0 0 0 rgba(31, 90, 94, 0.45); }
		70% { box-shadow: 0 0 0 14px rgba(31, 90, 94, 0); }
		100% { box-shadow: 0 0 0 0 rgba(31, 90, 94, 0); }
	}
}