/*
 * avisoME · la barra de avisos de arriba del nav.
 *
 * Es un CARRUSEL CONTINUO: la pista se desliza de derecha a izquierda sin parar
 * y el degradado viaja pegado al texto, porque el degradado ES el fondo de cada
 * diapositiva. No hay dos animaciones que sincronizar: hay una sola, y el color
 * va montado en lo mismo que se mueve.
 *
 * LA COSTURA DEL LOOP
 *
 * La pista tiene un aviso de más al final: un clon del primero. Cuando el
 * recorrido termina, lo que está a la vista es el clon —idéntico al primero— y
 * la animación vuelve a cero sin que se note el salto.
 *
 * Para que tampoco se note el corte ENTRE avisos, cada diapositiva funde sus dos
 * extremos con el vecino: el borde derecho del aviso 1 y el borde izquierdo del
 * aviso 2 son exactamente el mismo color, la mezcla de los dos. El strip queda
 * continuo sin que nadie calcule un solo color: lo hace color-mix().
 *
 * CUÁNTOS SE VEN A LA VEZ
 *
 * PC y celular comparten el MISMO HTML: no se puede imprimir un DOM distinto por
 * media query. Lo único que cambia entre los dos es cuánto mide la pista —y el
 * ciclo, para que la velocidad en pantalla no cambie—. Como el ancho de cada
 * franja está en porcentaje DE LA PISTA, una pista más angosta mete más avisos
 * en la barra sin tocar nada más.
 *
 * Este archivo no cambia nunca: los anchos, el ciclo y los colores llegan en el
 * style= de la barra y de cada aviso. Así el navegador lo cachea una vez.
 */

.avm-barra {
	/* Lo que decide cuántos avisos entran a la vez. El PHP imprime los dos
	   juegos y acá se elige uno; abajo, la media query elige el otro. */
	--avm-pista: var(--avm-pista-pc, 100%);
	--avm-ciclo: var(--avm-ciclo-pc, 21s);

	position: relative;
	z-index: 9990;
	width: 100%;
	/* El carrusel vive acá adentro: lo que sale por la izquierda no se ve. */
	overflow: hidden;
	font-size: var(--avm-tamano, 14px);
	font-weight: 600;
	line-height: 1.35;
}

/* Pegada arriba mientras se hace scroll. Apagado de fábrica: si el tema ya tiene
   su header fijo, dos cosas pegadas arriba se pisan. */
.avm-barra.avm-fijo {
	position: sticky;
	top: 0;
}

/* Con sesión abierta, la barra de administración de WordPress también está fija
   arriba. Estos son los altos que usa WordPress; abajo de 600 px su barra deja de
   ser fija y se va con el scroll, así que ahí vuelve a top:0. */
body.admin-bar .avm-barra.avm-fijo {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar .avm-barra.avm-fijo {
		top: 46px;
	}
}
@media screen and (max-width: 600px) {
	body.admin-bar .avm-barra.avm-fijo {
		top: 0;
	}
}

/* Plan B: la imprimió wp_footer y el JS todavía no la subió. Oculta para que no
   se vea un segundo abajo de todo. */
.avm-barra[data-tarde] {
	display: none;
}

/*
 * La pista mide tantas veces la barra como diapositivas tenga, y se corre hacia
 * la izquierda el equivalente a todas menos el clon. translate3d y no left: se
 * resuelve en la GPU y no repinta la barra en cada cuadro.
 */
.avm-pista {
	display: flex;
	width: var(--avm-pista);
	animation: avm-correr var(--avm-ciclo) linear infinite;
	will-change: transform;
}

@keyframes avm-correr {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(var(--avm-corrida, 0%), 0, 0); }
}

/* Que la rotación no se le escape a nadie: si hay un mouse encima o alguien
   llegó con el teclado, se frena. Sin JS. */
.avm-barra:hover .avm-pista,
.avm-barra:focus-within .avm-pista {
	animation-play-state: paused;
}

/* Un solo aviso prendido: no hay carrusel, queda quieto con su degradado. */
.avm-barra.avm-quieta .avm-pista {
	animation: none;
}

.avm-aviso {
	flex: 0 0 var(--avm-ancho, 100%);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * El aire de los costados es LO QUE SEPARA UN AVISO DEL OTRO. El texto va
	 * centrado en su franja, así que entre dos textos vecinos siempre quedan al
	 * menos dos veces este valor, por más que los dos sean largos. Y justo en
	 * ese hueco es donde el degradado cambia de color: el espacio y el cambio de
	 * color dicen lo mismo, que ahí termina un mensaje y empieza otro.
	 */
	padding: 9px 26px;
	text-align: center;

	/* Reserva para navegadores sin color-mix: se ve el degradado propio de cada
	   aviso y un corte entre uno y otro. Feo, no roto. */
	background-image: linear-gradient(90deg, var(--c1), var(--c2));

	/* --c0 es el color con el que termina el aviso anterior y --c3 con el que
	   arranca el siguiente. Mezclando a mitad de camino en cada punta, el borde
	   que comparten dos diapositivas da el mismo color de los dos lados. */
	background-image: linear-gradient(
		90deg,
		color-mix(in srgb, var(--c0), var(--c1)) 0%,
		var(--c1) 8%,
		var(--c2) 92%,
		color-mix(in srgb, var(--c2), var(--c3)) 100%
	);
}

/* Especificidad suficiente para ganarle al `a {}` del tema sin usar !important. */
.avm-barra a.avm-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}
.avm-barra a.avm-link:hover,
.avm-barra a.avm-link:focus {
	color: inherit;
	opacity: 0.85;
}

/* En celular entra menos: la cantidad de avisos a la vez y el ritmo cambian. */
@media (max-width: 768px) {
	.avm-barra {
		--avm-pista: var(--avm-pista-mo, 100%);
		--avm-ciclo: var(--avm-ciclo-mo, 21s);
	}
}

@media (max-width: 480px) {
	.avm-aviso {
		padding: 8px 18px;
		font-size: 0.93em;
	}
}

/*
 * Con movimiento reducido el carrusel no se congela —perderíamos dos avisos de
 * tres— sino que pasa a saltar de uno a otro: mismo recorrido, sin un solo
 * cuadro de desplazamiento. La función viene armada desde el PHP (steps(3)) en
 * vez de calcularse acá, porque steps() con una variable adentro no es terreno
 * firme en todos los navegadores.
 */
@media (prefers-reduced-motion: reduce) {
	.avm-pista {
		animation-timing-function: var(--avm-pasos-fn, step-end);
	}
}