/**
 * Motion layer.
 *
 * Livello di animazione centralizzato e guidato da attributi `data-reveal`.
 * Nessuna dipendenza esterna: il motore è in `assets/dist/js/main.js`.
 *
 * Vocabolario di marca (dal logo: blocchi geometrici separati da tagli diagonali):
 * 1. il taglio      -> rivelazione diagonale di immagini e pannelli;
 * 2. la cucitura    -> linea tratteggiata che si disegna sotto i titoli di sezione;
 * 3. bozzetto/colore -> le card passano da desaturate a colore pieno sull'interazione.
 *
 * Ordine del file:
 * 1. token di movimento;
 * 2. primitive del motore;
 * 3. sequenza hero;
 * 4. cucitura di sezione;
 * 5. card;
 * 6. header condensato;
 * 7. transizioni di pagina;
 * 8. preferenze di accessibilità.
 */

/* 1. Token di movimento ---------------------------------------------------- */

:root {
	--ans-ease-cut: cubic-bezier(0.22, 1, 0.36, 1);
	--ans-motion-fast: 320ms;
	--ans-motion-base: 620ms;
	--ans-motion-slow: 900ms;
	--ans-stagger: 70ms;
}

/* 2. Primitive del motore -------------------------------------------------- */

/**
 * Gli stati iniziali esistono solo quando il motore è attivo (`html.ans-motion`,
 * impostata inline nell'head) e quando l'utente non ha chiesto meno movimento.
 * Senza JavaScript il contenuto resta visibile.
 */
@media (prefers-reduced-motion: no-preference) {
	.ans-motion [data-reveal] {
		--ans-delay: calc(var(--ans-i, 0) * var(--ans-stagger));
	}

	.ans-motion [data-reveal="rise"] {
		opacity: 0;
		transform: translateY(1.4rem);
		transition:
			opacity var(--ans-motion-base) var(--ans-ease-cut) var(--ans-delay),
			transform var(--ans-motion-base) var(--ans-ease-cut) var(--ans-delay);
	}

	.ans-motion [data-reveal="rise"].is-revealed {
		opacity: 1;
		transform: none;
	}

	/**
	 * Il taglio: la superficie si apre lungo una diagonale.
	 *
	 * Realizzato con una maschera e non con `clip-path`: un clip che riduce
	 * l'elemento ad area zero azzera anche il rapporto di intersezione, e
	 * l'IntersectionObserver non lo rivelerebbe mai. La maschera agisce solo
	 * in fase di disegno e lascia intatta la geometria osservata.
	 */
	.ans-motion [data-reveal="cut"] {
		-webkit-mask-image: linear-gradient(105deg, #000 0 47%, rgb(0 0 0 / 0%) 53%);
		mask-image: linear-gradient(105deg, #000 0 47%, rgb(0 0 0 / 0%) 53%);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 300% 100%;
		mask-size: 300% 100%;
		-webkit-mask-position: 100% 0;
		mask-position: 100% 0;
		transition:
			-webkit-mask-position var(--ans-motion-slow) var(--ans-ease-cut) var(--ans-delay),
			mask-position var(--ans-motion-slow) var(--ans-ease-cut) var(--ans-delay);
	}

	.ans-motion [data-reveal="cut"].is-revealed {
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
	}

	.ans-motion [data-reveal="cut"] img {
		transform: scale(1.06);
		transition: transform calc(var(--ans-motion-slow) + 300ms) var(--ans-ease-cut) var(--ans-delay);
	}

	.ans-motion [data-reveal="cut"].is-revealed img {
		transform: none;
	}

	/* Parole del titolo: risalgono da sotto una linea di piega. */
	.ans-motion .ans-word {
		display: inline-block;
		overflow: hidden;
		vertical-align: top;
	}

	.ans-motion .ans-word > span {
		display: inline-block;
		transform: translateY(110%);
		transition: transform var(--ans-motion-base) var(--ans-ease-cut)
			calc(var(--ans-i, 0) * 45ms);
	}

	.ans-motion [data-reveal="words"].is-revealed .ans-word > span {
		transform: none;
	}
}

/* 3. Sequenza hero --------------------------------------------------------- */

.home-hero {
	position: relative;
}

.home-hero__grid,
.home-hero__content {
	position: relative;
	z-index: 1;
}

/**
 * Esclusa dalla regola sopra: con la foto in evidenza `.home-hero__media` è lo
 * sfondo a tutta area del pannello (`position: absolute`, vedi main.css) e non
 * un elemento in flusso — un `position: relative` qui, applicato per ultimo
 * nell'ordine dei file, lo sovrascriverebbe silenziosamente.
 */
.home-hero__media {
	z-index: 0;
}

/**
 * La linea di taglio: il segno tratteggiato che il sarto traccia sul tessuto,
 * inclinato come il marchio. Attraversa la hero al caricamento.
 */
.home-hero::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 64%;
	left: -8%;
	width: 130%;
	height: 2px;
	background-image: repeating-linear-gradient(
		90deg,
		var(--ans-orange) 0 18px,
		transparent 18px 34px
	);
	opacity: 0.65;
	transform: rotate(-8deg);
	transform-origin: left center;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.ans-motion .home-hero::before {
		width: 0;
		opacity: 0;
		transition:
			width 1400ms var(--ans-ease-cut) 260ms,
			opacity var(--ans-motion-fast) linear 260ms;
	}

	.ans-motion .home-hero.is-revealed::before {
		width: 130%;
		opacity: 0.65;
	}
}

/* 4. Cucitura di sezione --------------------------------------------------- */

.section-heading h2::after {
	content: "";
	display: block;
	width: 6.5rem;
	height: 3px;
	margin-top: 1rem;
	background-image: repeating-linear-gradient(
		90deg,
		var(--ans-magenta) 0 14px,
		transparent 14px 24px
	);
}

@media (prefers-reduced-motion: no-preference) {
	.ans-motion [data-reveal="seam"] h2::after {
		width: 0;
		transition: width var(--ans-motion-slow) var(--ans-ease-cut) 140ms;
	}

	.ans-motion [data-reveal="seam"].is-revealed h2::after {
		width: 6.5rem;
	}
}

/* 5. Card: dal bozzetto al colore ------------------------------------------ */

.content-card__media img {
	filter: saturate(0.35) contrast(1.04);
	transition: filter 420ms ease, transform 280ms ease;
}

.content-card:hover .content-card__media img,
.content-card:focus-within .content-card__media img {
	filter: none;
}

.evidence-gallery__item img {
	filter: saturate(0.4) contrast(1.04);
	transition: filter 420ms ease, transform 480ms var(--ans-ease-cut);
}

.evidence-gallery__item:hover img,
.evidence-gallery__item:focus-within img {
	filter: none;
	transform: scale(1.04);
}

/* 6. Header condensato ----------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	transition: box-shadow 240ms ease, background-color 240ms ease;
}

/* L'header sticky non deve coprire la destinazione degli anchor link. */
html {
	scroll-padding-top: 7rem;
}

.site-header__main {
	transition: padding-block 320ms var(--ans-ease-cut);
}

.custom-logo,
.site-branding__fallback img {
	transition: max-height 320ms var(--ans-ease-cut);
}

/**
 * Fondo pieno e non sfocato: `backdrop-filter` su un elemento sticky obbliga il
 * browser a ridipingere l'area a ogni frame di scroll e produce sfarfallio.
 */
.site-header.is-condensed {
	background: var(--ans-paper);
	box-shadow: 0 10px 30px rgb(17 17 17 / 7%);
}

.site-header.is-condensed .site-header__main {
	padding-block: 0.6rem;
}

.site-header.is-condensed .custom-logo,
.site-header.is-condensed .site-branding__fallback img {
	max-height: 58px;
}

/* 7. Transizioni di pagina ------------------------------------------------- */

@view-transition {
	navigation: auto;
}

/* L'header resta fermo, il contenuto si scambia. */
.site-header {
	view-transition-name: ans-header;
}

::view-transition-old(root) {
	animation: ans-vt-out 200ms ease both;
}

::view-transition-new(root) {
	animation: ans-vt-in 420ms var(--ans-ease-cut) both;
}

@keyframes ans-vt-out {
	to {
		opacity: 0;
	}
}

@keyframes ans-vt-in {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
}

/* 8. Preferenze di accessibilità ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

@media (max-width: 960px) {
	.site-header.is-condensed .custom-logo,
	.site-header.is-condensed .site-branding__fallback img {
		max-height: 44px;
	}
}