/* Aparició suau en fer scroll: els elements amb [data-reveal] pugen una mica i es fan visibles
   quan entren a la pantalla (assets/js/reveal.js). Només s'amaguen si el JS ha marcat <html>
   amb .has-reveal; sense JS o amb «reduir moviment» es veuen sempre. */
.has-reveal [data-reveal]:not(.is-revealed) {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
}

/* La transició només mentre apareix, per no trepitjar les pròpies de cada element (hover...) */
.has-reveal [data-reveal].is-revealing {
	transition:
		opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: var(--reveal-delay, 0s);
}

/* Missatge del hero: en carregar la pàgina, el títol, el subtítol i el text apareixen un
   darrere l'altre. Mateixa condició: només amb .has-reveal (sense «reduir moviment») */
@keyframes hero-in {
	from {
		opacity: 0;
		transform: translate3d(0, 20px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.has-reveal .hero__content > * {
	animation: hero-in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	animation-delay: 0.15s;
}

.has-reveal .hero__content > :nth-child(2) {
	animation-delay: 0.35s;
}

.has-reveal .hero__content > :nth-child(3) {
	animation-delay: 0.55s;
}

.has-reveal .hero__content > :nth-child(n + 4) {
	animation-delay: 0.75s;
}