/**
 * Zenth Toolkit — zenth-photo-arc: mecánica del arco de miniaturas.
 *
 * Solo layout/estructura (posicionamiento, rotación, máscara de
 * desvanecido). Sin colores de marca ni tipografías: el radio de esquina
 * por defecto (--zenth-arc-radius) es geométrico, no de marca, así que se
 * queda aquí con su propio valor de reserva.
 */

.zenth-arc {
	position: relative;
	width: 100%;
	aspect-ratio: 1272 / 656;
}

/*
 * El ítem NO rota (solo se posiciona con left/top + centrado). Así, la
 * máscara de desvanecido de los extremos (--end) queda siempre vertical en
 * pantalla sin importar el ángulo del marco que contiene.
 */
.zenth-arc__item {
	position: absolute;
	width: 9.12%;
	aspect-ratio: 1;
	transform: translate( -50%, -50% );
}

/* El marco es quien rota θ y recorta la imagen a su propio cuadrado. */
.zenth-arc__frame {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: var( --zenth-arc-radius, 14% );
	transform: rotate( var( --zenth-arc-a ) );
}

/*
 * La imagen contra-rota (-θ) para quedar siempre derecha en pantalla, y se
 * escala con --zenth-arc-s para seguir cubriendo el marco cuadrado tras la
 * rotación (s = |cos θ'| + |sin θ'|, calculado en PHP).
 */
.zenth-arc__img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transform: rotate( calc( -1 * var( --zenth-arc-a ) ) ) scale( var( --zenth-arc-s ) );
}

.zenth-arc__item--end {
	mask-image: linear-gradient( to bottom, rgba( 0, 0, 0, 0.55 ) 0%, rgba( 0, 0, 0, 0 ) 100% );
	-webkit-mask-image: linear-gradient( to bottom, rgba( 0, 0, 0, 0.55 ) 0%, rgba( 0, 0, 0, 0 ) 100% );
}

/*
 * Modo rueda (.zenth-arc--rueda): el arco es la mitad superior de un
 * círculo completo que la escena 'rueda' de zenth-motion.js hace girar
 * 0 a 180 grados con el scroll. Geometría en la caja de referencia 1272x656:
 * radio 540 (el radio vertical del arco estático), centro en (636, 598).
 * Todo en porcentajes del ANCHO (margin-top en % usa el ancho del
 * contenedor) para que valga igual si el contenedor cambia de alto.
 */
.zenth-arc--rueda {
	overflow: hidden;
	/* Las fotos se desvanecen al bajar del horizonte, igual que hacían
	   las de los extremos del arco estático. */
	-webkit-mask-image: linear-gradient( to bottom, #000 0, #000 calc( 100% - 150px ), transparent 100% );
	mask-image: linear-gradient( to bottom, #000 0, #000 calc( 100% - 150px ), transparent 100% );
}

.zenth-arc__wheel {
	position: absolute;
	left: 7.5472%;          /* (1272 - 1080) / 2 / 1272 */
	top: 0;
	margin-top: 4.5597%;    /* 58 / 1272: arriba de la rueda = centro de la foto superior */
	width: 84.9057%;        /* 1080 / 1272 = diámetro */
	aspect-ratio: 1;
}

/* Cada ítem es un brazo del tamaño de la rueda, rotado θ sobre el centro. */
.zenth-arc--rueda .zenth-arc__item {
	position: absolute;
	inset: 0;
	width: auto;
	aspect-ratio: auto;
	transform: rotate( var( --zenth-arc-a ) );
}

/* La foto va en la punta del brazo, orientada hacia afuera (radial). */
.zenth-arc--rueda .zenth-arc__frame {
	position: absolute;
	left: 50%;
	top: -5.3704%;          /* -58 / 1080: centro de la foto sobre el borde */
	width: 10.7407%;        /* 116 / 1080 */
	height: auto;
	aspect-ratio: 1;
	transform: translateX( -50% );
}

.zenth-arc--rueda .zenth-arc__img {
	transform: none;
}