/**
 * Movimiento y detalle. Se carga con los DOS estilos (Clásico y Claro):
 * no cambia colores ni maquetación, solo cómo responde la interfaz.
 *
 * El tema no tenía ni una transición: todo cambiaba de golpe. Las reglas
 * de aquí siguen el criterio de las skills de diseño de Emil Kowalski:
 *
 * - Curvas propias, no las de serie de CSS, que son demasiado flojas.
 * - ease-out para lo que entra o sale (empieza rápido: se siente ágil).
 *   Nunca ease-in en interfaz: arranca lento justo en el momento en que
 *   el usuario está mirando, y hace que todo parezca pesado.
 * - ease-in-out para lo que se mueve por la pantalla, ease para cambios
 *   de color.
 * - Por debajo de 300 ms. Un desplegable de 180 ms se siente más rápido
 *   que uno de 400 ms aunque la diferencia sea imperceptible en el reloj.
 *
 * Y todo se apaga entero con prefers-reduced-motion, que no es un extra:
 * hay gente a la que el movimiento le provoca mareo.
 */

:root {
	/* Curvas. Las de CSS (ease, ease-out) no tienen suficiente carácter. */
	--cine-curva-salida: cubic-bezier( 0.23, 1, 0.32, 1 );
	--cine-curva-movimiento: cubic-bezier( 0.77, 0, 0.175, 1 );

	/* Duraciones por tipo de elemento. */
	--cine-t-pulsacion: 140ms;
	--cine-t-color: 180ms;
	--cine-t-desplegable: 200ms;
	--cine-t-tarjeta: 300ms;
}

/* -------------------------------------------------------------------
   Enlaces, botones y controles
   ------------------------------------------------------------------- */

a,
.cine-nav-principal a,
.cine-footer a {
	transition: color var( --cine-t-color ) ease;
}

/* La pulsación necesita respuesta inmediata: es lo que convierte un
   botón en algo que "se puede apretar". */
.cine-boton-comprar,
.cine-selector-dia a,
.cine-carrusel-flecha,
.cine-nav-movil-boton,
.wp-block-button__link {
	transition:
		background-color var( --cine-t-color ) ease,
		border-color var( --cine-t-color ) ease,
		color var( --cine-t-color ) ease,
		transform var( --cine-t-pulsacion ) var( --cine-curva-salida );
}

.cine-boton-comprar:active,
.cine-selector-dia a:active,
.cine-carrusel-flecha:active,
.wp-block-button__link:active {
	transform: scale( 0.97 );
}

/* Foco visible siempre, y del color de acento: quien navega con teclado
   tiene que saber dónde está. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var( --cine-acento );
	outline-offset: 2px;
	border-radius: 2px;
}

/* -------------------------------------------------------------------
   Carteles
   ------------------------------------------------------------------- */

/* El cartel crece un poco dentro de su marco, que se queda quieto: así
   la rejilla no se mueve al pasar el ratón por encima. */
.cine-tarjeta-pelicula a {
	display: block;
	overflow: hidden;
	border-radius: var( --cine-radio );
}

.cine-tarjeta-pelicula img {
	transition: transform var( --cine-t-tarjeta ) var( --cine-curva-salida );
}

.cine-tarjeta-pelicula a:hover img,
.cine-tarjeta-pelicula a:focus-visible img {
	transform: scale( 1.04 );
}

.cine-dia-cartelera-enlace img,
.cine-lateral-promo img,
.cine-banner img {
	transition: transform var( --cine-t-tarjeta ) var( --cine-curva-salida );
}

.cine-dia-cartelera-enlace:hover img,
.cine-banner a:hover img,
.cine-lateral-promo a:hover img {
	transform: scale( 1.03 );
}

.cine-banner,
.cine-lateral-promo {
	overflow: hidden;
}

/* -------------------------------------------------------------------
   Tráiler
   ------------------------------------------------------------------- */

.cine-trailer img {
	transition:
		opacity var( --cine-t-tarjeta ) ease,
		transform var( --cine-t-tarjeta ) var( --cine-curva-salida );
}

.cine-trailer:hover img {
	opacity: 1;
	transform: scale( 1.03 );
}

.cine-trailer-play span {
	transition: transform var( --cine-t-pulsacion ) var( --cine-curva-salida );
}

.cine-trailer:hover .cine-trailer-play span {
	transform: scale( 1.08 );
}

/* -------------------------------------------------------------------
   Menú desplegable (móvil y tableta)
   ------------------------------------------------------------------- */

/*
 * Solo se anima la entrada. La salida no: el menú se cierra con
 * display:none y forzar ahí una animación obligaría a rehacer cómo
 * funciona el desplegable, con el riesgo de romper el caso sin
 * JavaScript, en el que el menú tiene que estar siempre visible.
 */
@media ( max-width: 900px ) {
	.js .cine-nav-principal.cine-nav-abierta {
		animation: cine-desplegar var( --cine-t-desplegable ) var( --cine-curva-salida );
	}

	.js .cine-nav-principal.cine-nav-abierta ~ .cine-header-redes {
		animation: cine-desplegar var( --cine-t-desplegable ) var( --cine-curva-salida ) 60ms both;
	}
}

@keyframes cine-desplegar {
	from {
		opacity: 0;
		transform: translateY( -8px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* -------------------------------------------------------------------
   Redes sociales y ventanas emergentes
   ------------------------------------------------------------------- */

.cine-red {
	transition:
		background-color var( --cine-t-color ) ease,
		color var( --cine-t-color ) ease,
		transform var( --cine-t-pulsacion ) var( --cine-curva-salida );
}

.cine-red:hover {
	transform: translateY( -2px );
}

.cine-popup-fondo,
.cine-popup-caja {
	animation: cine-aparecer var( --cine-t-desplegable ) var( --cine-curva-salida );
}

@keyframes cine-aparecer {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* -------------------------------------------------------------------
   Menos movimiento
   ------------------------------------------------------------------- */

/*
 * Reducir movimiento no es quitar toda respuesta: se conservan los
 * cambios de color, que ayudan a entender qué está pasando, y se quitan
 * los desplazamientos y las escalas, que son los que marean.
 */
@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.cine-tarjeta-pelicula a:hover img,
	.cine-tarjeta-pelicula a:focus-visible img,
	.cine-dia-cartelera-enlace:hover img,
	.cine-banner a:hover img,
	.cine-lateral-promo a:hover img,
	.cine-trailer:hover img,
	.cine-trailer:hover .cine-trailer-play span,
	.cine-red:hover,
	.cine-boton-comprar:active,
	.cine-selector-dia a:active,
	.cine-carrusel-flecha:active,
	.wp-block-button__link:active {
		transform: none;
	}
}