/* DM WP Animation - frontend */

/* Hint al browser di promuovere a layer compositato SOLO gli elementi che il
   JS sta effettivamente animando (le classi *-active le aggiunge il runtime). */
.dmwpa-h-active,
.dmwpa-pin-active > * {
	will-change: transform;
}

/* --- Scroll orizzontale ---------------------------------------------------
   Il layout in riga clippata viene attivato dal JS (.dmwpa-h-active) solo quando
   l'animazione parte davvero. Senza JS o con prefers-reduced-motion i pannelli
   restano nel flusso normale e leggibili, invece di essere tagliati. */
.dmwpa-h-active {
	overflow: hidden;
}

.dmwpa-h-active .dmwpa-h-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
}

.dmwpa-h-active .dmwpa-h-track > * {
	flex: 0 0 auto;
}

/* --- Pin / card stacking --------------------------------------------------
   Stesso principio: la sovrapposizione assoluta delle card è attiva solo con
   .dmwpa-pin-active. In fallback le card scorrono verticalmente come blocchi
   normali (niente sovrapposizione, niente layout rotto).
   La prima card resta nel flusso e definisce l'altezza del riquadro; le altre
   sono assolute sopra di essa e vengono fatte salire da JS. */
.dmwpa-pin-active {
	position: relative;
	/* Ritaglia le card che partono sotto il riquadro, così non sbucano dal
	   bordo inferiore mentre il container è pinnato. */
	overflow: hidden;
}

.dmwpa-pin-active > * {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* Origine centrata: lo scale di profondità della card sottostante è simmetrico. */
	transform-origin: center center;
}

.dmwpa-pin-active > *:first-child {
	position: relative;
}

/* --- Marquee / ticker infinito --------------------------------------------
   La riga clippata in loop è attiva solo con .dmwpa-marquee-active (aggiunta dal
   JS quando l'animazione parte). In fallback / reduced i contenuti restano nel
   flusso normale (possono andare a capo) e leggibili. */
.dmwpa-marquee-active {
	overflow: hidden;
}

.dmwpa-marquee-active .dmwpa-marquee-inner {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
}

.dmwpa-marquee-active .dmwpa-marquee-track {
	display: flex;
	flex-wrap: nowrap;
	flex: 0 0 auto;
	align-items: center;
}

.dmwpa-marquee-active .dmwpa-marquee-track > * {
	flex: 0 0 auto;
}

/* --- Scroll video ---------------------------------------------------------
   Il riquadro a tutta altezza con il video in object-fit è attivo solo con
   .dmwpa-video-active (aggiunta dal JS quando l'effetto parte). Senza JS o con
   prefers-reduced-motion il <video> resta nel flusso normale, responsive e
   fermo sul poster. */
.dmwpa-scroll-video__media {
	display: block;
	width: 100%;
	height: auto;
}

.dmwpa-video-active {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.dmwpa-video-active .dmwpa-scroll-video__media {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
}

.dmwpa-video-active[data-fit="contain"] .dmwpa-scroll-video__media {
	object-fit: contain;
}

/* --- Crawl 3D (sigla stile Guerre Stellari) -------------------------------
   Il layout 3D (viewport in prospettiva, piano del testo coricato e assoluto)
   e attivo solo con .dmwpa-crawl-active, aggiunta dal JS. Senza JS o con
   prefers-reduced-motion il testo resta nel flusso normale e leggibile. */
.dmwpa-crawl-active .dmwpa-crawl__viewport {
	position: relative;
	height: 100vh;
	overflow: hidden;
	/* Prospettiva: piu il valore e piccolo, piu marcato e lo scorcio. */
	perspective: 400px;
	perspective-origin: 50% 0%;
	/* Sfuma la cima cosi il testo svanisce verso il punto di fuga. Il punto in
	   cui sparisce del tutto e --dmwpa-fade (impostata dal JS dall'attributo
	   "Altezza di dissolvenza"); la sfumatura inizia 45 punti piu in basso. */
	-webkit-mask-image: linear-gradient( to top, rgba(0,0,0,1) calc( var( --dmwpa-fade, 92% ) - 45% ), rgba(0,0,0,0) var( --dmwpa-fade, 92% ) );
	mask-image: linear-gradient( to top, rgba(0,0,0,1) calc( var( --dmwpa-fade, 92% ) - 45% ), rgba(0,0,0,0) var( --dmwpa-fade, 92% ) );
}

.dmwpa-crawl-active .dmwpa-crawl__content {
	position: absolute;
	/* Centrato con left/right/margin: il transform resta libero per GSAP
	   (rotateX + traslazione), che altrimenti sovrascriverebbe un translateX. */
	left: 0;
	right: 0;
	top: 0;
	margin: 0 auto;
	width: 90%;
	max-width: 40em;
	transform-origin: 50% 0%;
	text-align: center;
	will-change: transform;
}