/**
 * WARE Effetti. Tutte le classi si applicano dal pannello "WARE · Effetti" dell'editor.
 * Senza JavaScript (o con "riduci movimento" attivo) i contenuti restano visibili e fermi.
 */

/* Nessuno scroll orizzontale quando un blocco esce fino al bordo dello schermo. */
.wp-site-blocks {
	overflow-x: clip;
}

/* ------------------------------------------------------------------
 * Animazioni all'ingresso: ware-reveal + direzione + ritardo
 * ---------------------------------------------------------------- */
.ware-js .ware-reveal {
	opacity: 0;
	transition:
		opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
		transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--ware-delay, 0s);
}

.ware-js .ware-reveal--up { transform: translateY(48px); }
.ware-js .ware-reveal--left { transform: translateX(-64px); }
.ware-js .ware-reveal--right { transform: translateX(64px); }
.ware-js .ware-reveal--zoom { transform: scale(0.92); }

.ware-js .ware-reveal.is-visible {
	opacity: 1;
	transform: none;
}

.ware-delay-1 { --ware-delay: 0.15s; }
.ware-delay-2 { --ware-delay: 0.3s; }
.ware-delay-3 { --ware-delay: 0.45s; }
.ware-delay-4 { --ware-delay: 0.6s; }

/* Titolo che appare parola per parola (le parole le divide effects.js). */
.ware-words .ware-word {
	display: inline-block;
	white-space: pre;
}

/* Si parte da un titolo già leggibile: l'animazione accompagna, non nasconde. */
.ware-js .ware-words .ware-word {
	opacity: 0.25;
	transform: translateY(0.35em);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(var(--ware-delay, 0s) + var(--ware-i, 0) * 70ms);
}

.ware-js .ware-words.is-visible .ware-word {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------------------
 * Layout fuori griglia (solo da tablet in su: su telefono tutto torna in colonna)
 * ---------------------------------------------------------------- */
@media (min-width: 782px) {
	/* Sale sopra la sezione precedente. */
	.ware-overlap-up {
		position: relative;
		z-index: 3;
		margin-top: calc(var(--wp--preset--spacing--80, 6rem) * -1) !important;
	}

	/* Esce dalla colonna fino al bordo destro / sinistro dello schermo. */
	.ware-bleed-right {
		margin-right: calc(-1 * max(var(--wp--style--root--padding-right, 0px), (100vw - var(--wp--style--global--wide-size, 1280px)) / 2)) !important;
		max-width: none !important;
	}

	.ware-bleed-left {
		margin-left: calc(-1 * max(var(--wp--style--root--padding-left, 0px), (100vw - var(--wp--style--global--wide-size, 1280px)) / 2)) !important;
		max-width: none !important;
	}

	/* Scheda che si sovrappone all'immagine sopra di lei. */
	.ware-pop-out {
		position: relative;
		z-index: 2;
		width: 52% !important;
		margin-top: -22% !important;
		margin-left: -10% !important;
		border: 10px solid var(--wp--preset--color--base, #fff);
		box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
	}

	/* Colonne sfalsate: le colonne pari scendono. */
	.ware-stagger > .wp-block-column:nth-child(even) {
		transform: translateY(var(--wp--preset--spacing--70, 4rem));
	}

	.ware-stagger {
		padding-bottom: var(--wp--preset--spacing--70, 4rem);
	}

	.ware-shift-down {
		transform: translateY(var(--wp--preset--spacing--60, 3rem));
	}

	.ware-tilt {
		transform: rotate(-2deg);
	}

	.ware-tilt-right {
		transform: rotate(2deg);
	}
}

/* ------------------------------------------------------------------
 * Effetti
 * ---------------------------------------------------------------- */

/* Zoom lento dell'immagine (Copertina o Immagine). */
.ware-kenburns {
	overflow: hidden;
}

.ware-kenburns img,
.ware-kenburns .wp-block-cover__image-background,
.ware-kenburns .wp-block-cover__video-background {
	animation: ware-kenburns 22s ease-out infinite alternate;
	transform-origin: 60% 40%;
}

@keyframes ware-kenburns {
	from { transform: scale(1); }
	to { transform: scale(1.14); }
}

/* Zoom dell'immagine al passaggio del mouse. */
.ware-hover-zoom {
	overflow: hidden;
}

.ware-hover-zoom img,
.ware-hover-zoom .wp-block-cover__image-background {
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ware-hover-zoom:hover img,
.ware-hover-zoom:hover .wp-block-cover__image-background {
	transform: scale(1.06);
}

/* Testo solo contornato (titoli decorativi molto grandi). */
.ware-outline-text {
	color: transparent !important;
	-webkit-text-stroke: 1.5px currentColor;
	-webkit-text-fill-color: transparent;
}

.ware-outline-text.has-text-color,
.ware-outline-text {
	-webkit-text-stroke-color: var(--ware-stroke, currentColor);
}

/* Scritta che scorre all'infinito (effects.js duplica il contenuto). */
.ware-marquee {
	overflow: hidden;
	flex-wrap: nowrap !important;
}

.ware-marquee__track {
	display: flex;
	flex: none;
	gap: inherit;
	width: max-content;
	animation: ware-marquee var(--ware-marquee-speed, 40s) linear infinite;
}

.ware-marquee > *,
.ware-marquee__track > * {
	flex: none;
	white-space: nowrap;
	margin: 0 !important;
}

@keyframes ware-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* Numeri che contano fino al valore (effects.js). */
.ware-countup {
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
 * Accessibilità: chi chiede meno movimento vede tutto fermo.
 * ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ware-js .ware-reveal,
	.ware-js .ware-words .ware-word {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ware-kenburns img,
	.ware-kenburns .wp-block-cover__image-background,
	.ware-marquee__track {
		animation: none;
	}
}