/**
 * Mosaico de rostos usado como mídia de fundo (inc/hero-mosaic.php).
 */

/* O mosaico é publicado claro; ajuste aqui a intensidade do escurecimento. */
.vtr-hero-mosaic {
	filter: brightness( var( --vtr-hero-mosaic-brightness, 0.55 ) );
}

/**
 * Cascata: cada quadro gira em 3D e revela o segundo mosaico.
 * Os quadros são montados por hero-mosaic.js sobre a imagem.
 */
.vtr-hero-mosaic-cascade {
	overflow: hidden;
	pointer-events: none;
}

.vtr-hero-mosaic-cascade__stage {
	position: absolute;
}

.vtr-hero-mosaic-cascade__tile {
	position: absolute;
	perspective: 900px;
	/* Mesmo cinza das faixas entre os quadros, visível durante o giro. */
	background: rgb( 118, 118, 118 );
}

.vtr-hero-mosaic-cascade__card {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform 900ms cubic-bezier( 0.65, 0, 0.35, 1 ) var( --vtr-mosaic-delay, 0ms );
}

.vtr-hero-mosaic-cascade.is-flipped .vtr-hero-mosaic-cascade__card {
	transform: rotateY( 180deg );
}

.vtr-hero-mosaic-cascade__face {
	position: absolute;
	inset: 0;
	background-image: var( --vtr-mosaic-front );
	background-position: var( --vtr-mosaic-position );
	background-repeat: no-repeat;
	background-size: var( --vtr-mosaic-size );
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.vtr-hero-mosaic-cascade__face--back {
	background-image: var( --vtr-mosaic-back );
	transform: rotateY( 180deg );
}

@media ( prefers-reduced-motion: reduce ) {
	.vtr-hero-mosaic-cascade {
		display: none;
	}
}