/*
 * Efectos de las páginas interiores.
 *
 * Aquí vive todo lo que responde **a la mano**: lo que se levanta al señalarlo,
 * la fotografía que se acerca dentro de su marco, el pictograma que crece, el
 * punto del mapa que late. Las entradas al desplazarse son otra cosa y viven en
 * assets/js/animaciones-paginas.js.
 *
 * ---------------------------------------------------------------------------
 * Por qué en un archivo aparte
 *
 * Porque tiene que **cargarse después de paginas.css**. Casi todo lo de aquí es
 * un « transition » o un « transform » sobre piezas que aquel archivo ya
 * describe, y con la misma cuenta de clases gana el último que se declara. Al
 * final del archivo grande también valdría; aparte se lee mejor y se puede
 * apagar entero el día que sobre.
 *
 * ---------------------------------------------------------------------------
 * Reglas que se respetan
 *
 * - **Nada se mueve por decoración.** Cada efecto contesta a algo: señalar una
 *   tarjeta, entrar en una pestaña, llegar a un sitio del mapa.
 * - **Ningún efecto cambia la composición.** Solo « transform », « opacity »,
 *   color y sombra: nada que obligue al navegador a recolocar la página, que en
 *   una rejilla de catorce tarjetas se nota.
 * - **Solo se acercan las fotografías que están dentro de una caja recortada.**
 *   Una imagen que crece en una caja sin « overflow: hidden » se sale por las
 *   esquinas redondeadas y se ve el canto recto. Las que no tienen esa caja no
 *   se tocan, salvo « .sjo-s__tarjeta-foto », a la que se le pone aquí.
 * - **« prefers-reduced-motion » manda.** Al final del archivo se apaga todo:
 *   los colores se quedan, el movimiento no.
 */

.sjo-s {
	/* La curva con la que se mueve casi todo: sale deprisa y se posa. */
	--sjo-fx-curva: cubic-bezier( 0.22, 0.61, 0.36, 1 );

	/* El azul oscuro de las sombras del diseño, no un gris. */
	--sjo-fx-sombra: 0 18px 32px rgba( 0, 26, 56, 0.16 );
	--sjo-fx-sombra-corta: 0 10px 18px rgba( 0, 26, 56, 0.12 );
}

/* ---------------------------------------------------------------------------
 * Las tarjetas que se levantan
 *
 * Las que son una caja de verdad —con su fondo y su radio—, porque lo que se
 * levanta tiene que tener canto. Un elemento de lista sin fondo subiendo seis
 * píxeles no se lee como una tarjeta que reacciona: se lee como un texto que se
 * ha movido solo.
 * ------------------------------------------------------------------------ */

.sjo-s__colegio,
.sjo-s__destaque,
.sjo-s__plana-area,
.sjo-s__organi-rama,
.sjo-s__valor.es-rector {
	transition: transform 0.35s var( --sjo-fx-curva ), box-shadow 0.35s var( --sjo-fx-curva );
}

.sjo-s__colegio:hover,
.sjo-s__destaque:hover,
.sjo-s__plana-area:hover,
.sjo-s__organi-rama:hover,
.sjo-s__valor.es-rector:hover {
	transform: translateY( -6px );
	box-shadow: var( --sjo-fx-sombra );
}

/* El colegio propio ya viene marcado en rojo: al señalarlo sube igual pero la
   sombra recoge su color, o parecería que se le apaga la marca. */
.sjo-s__colegio.es-nuestro:hover {
	box-shadow: 0 18px 32px rgba( 173, 0, 29, 0.22 );
}

/* ---------------------------------------------------------------------------
 * Las tarjetas sobre azul
 *
 * Sobre el fondo oscuro una sombra no se ve: lo que hace de relieve es el
 * propio velo blanco, que sube un punto. El desplazamiento es más corto porque
 * el cambio de color ya hace la mitad del trabajo.
 * ------------------------------------------------------------------------ */

.sjo-s__ficha,
.sjo-s__escalon,
.sjo-s__tramo {
	transition: transform 0.35s var( --sjo-fx-curva ), background-color 0.3s ease;
}

.sjo-s__ficha:hover {
	transform: translateY( -4px );
	background-color: rgba( 255, 255, 255, 0.12 );
}

.sjo-s__escalon:hover,
.sjo-s__tramo:hover {
	transform: translateY( -4px );
}

/* ---------------------------------------------------------------------------
 * Las fotografías que se acercan
 *
 * Solo dentro de cajas que ya recortan lo que sobra. La lista es literalmente
 * la de los « overflow: hidden » de paginas.css, más el marco de la tarjeta de
 * la tira, que no lo tenía y se le pone aquí junto con el efecto: el radio está
 * en la imagen y en su caja, así que sin recorte la imagen crecida asomaría por
 * las cuatro esquinas.
 * ------------------------------------------------------------------------ */

.sjo-s__tarjeta-foto {
	overflow: hidden;
}

.sjo-s__tarjeta-foto img,
.sjo-s__retrato-foto img,
.sjo-s__escalon-foto img,
.sjo-s__triptico-foto img,
.sjo-s__collage-foto img,
.sjo-s__ruta-medio img,
.sjo-s__form-medio img,
.sjo-s--cita .sjo-s__medio img {
	transition: transform 0.6s var( --sjo-fx-curva );
}

.sjo-s__tarjeta:hover .sjo-s__tarjeta-foto img,
.sjo-s__retrato:hover .sjo-s__retrato-foto img,
.sjo-s__escalon:hover .sjo-s__escalon-foto img,
.sjo-s__triptico-foto:hover img,
.sjo-s__collage-foto:hover img,
.sjo-s__ruta-medio:hover img,
.sjo-s__form-medio:hover img,
.sjo-s--cita .sjo-s__medio:hover img {
	transform: scale( 1.06 );
}

/* El retrato: la caja entera sube y la fotografía se acerca dentro. Se mueve la
   caja y no el elemento de lista para que el nombre y el cargo, que van debajo,
   se queden donde están: son lo que hay que leer. */
.sjo-s__retrato-caja {
	transition: transform 0.35s var( --sjo-fx-curva ), box-shadow 0.35s var( --sjo-fx-curva );
}

.sjo-s__retrato:hover .sjo-s__retrato-caja {
	transform: translateY( -6px );
	box-shadow: var( --sjo-fx-sombra-corta );
}

/* ---------------------------------------------------------------------------
 * Los pictogramas
 *
 * Crecen un punto con un rebote corto cuando se señala su tarjeta. Es el único
 * sitio donde se usa una curva con rebote: en una caja grande se lee como un
 * temblor, pero en un icono de veinticuatro píxeles es justo lo que lo separa
 * de un cambio de tamaño.
 * ------------------------------------------------------------------------ */

.sjo-s__ficha-pic,
.sjo-s__colegio-pic,
.sjo-s__valor-pic,
.sjo-s__cifra-pic,
.sjo-s__tarjeta-pic,
.sjo-s__datos-pic,
.sjo-s__destaque-pic,
.sjo-s__punto-pic {
	display: inline-block;
	transition: transform 0.4s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

.sjo-s__ficha:hover .sjo-s__ficha-pic,
.sjo-s__colegio:hover .sjo-s__colegio-pic,
.sjo-s__valor:hover .sjo-s__valor-pic,
.sjo-s__cifra:hover .sjo-s__cifra-pic,
.sjo-s__tarjeta:hover .sjo-s__tarjeta-pic,
.sjo-s__datos:hover .sjo-s__datos-pic,
.sjo-s__destaque:hover .sjo-s__destaque-pic,
.sjo-s__punto:hover .sjo-s__punto-pic {
	transform: scale( 1.14 );
}

/* ---------------------------------------------------------------------------
 * Los numerales de orden
 *
 * El número de un área, de un paso o de un tramo se enciende en rojo al señalar
 * su fila. No se mueve: es el ancla de la lista, y una cifra que se desplaza
 * rompe la columna que forman todas.
 * ------------------------------------------------------------------------ */

.sjo-s__area-num,
.sjo-s__paso-num,
.sjo-s__tramo-num,
.sjo-s__ficha-num,
.sjo-s__equipos-num {
	transition: color 0.3s ease, opacity 0.3s ease;
}

.sjo-s__area:hover .sjo-s__area-num,
.sjo-s__paso:hover .sjo-s__paso-num,
.sjo-s__tramo:hover .sjo-s__tramo-num,
.sjo-s__ficha:hover .sjo-s__ficha-num,
.sjo-s__equipos-fila:hover .sjo-s__equipos-num {
	color: var( --wp--preset--color--rojo, #e00026 );
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * El organigrama
 *
 * Las cajas no llevan a ninguna parte —no son enlaces—, así que el efecto es
 * mínimo: la que se señala se adelanta un poco y coge canto. Lo justo para
 * seguir con el dedo de qué cuelga qué en un dibujo con veinte cajas.
 * ------------------------------------------------------------------------ */

.sjo-s__nodo {
	transition: transform 0.3s var( --sjo-fx-curva ), box-shadow 0.3s var( --sjo-fx-curva ),
		border-color 0.3s ease;
}

.sjo-s__nodo:hover {
	transform: translateY( -3px );
	box-shadow: var( --sjo-fx-sombra-corta );
}

.sjo-s__nodo.es-contorno:hover {
	border-color: var( --wp--preset--color--azul, #004078 );
}

/* ---------------------------------------------------------------------------
 * Las pestañas de «Equipos»
 *
 * La activa ya se distingue por el fondo azul. Lo que se añade es el empujón
 * corto de la que se señala, que es lo que hace que un « pill » se lea como un
 * botón y no como una etiqueta.
 * ------------------------------------------------------------------------ */

.sjo-s__pestana {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
		transform 0.25s var( --sjo-fx-curva );
}

.sjo-s__pestana:hover {
	transform: translateY( -2px );
}

/* La activa se queda quieta: ya está elegida, y moverla al pasar por encima
   sugiere que aún se puede elegir. */
.sjo-s__pestana.es-activa:hover {
	transform: none;
}

/* El panel que entra se funde. El escalonado de los nombres lo hace GSAP; esto
   es el respaldo para cuando no está, y no cuesta nada. */
.sjo-s__panel.es-activo {
	animation: sjo-fx-panel 0.35s ease both;
}

@keyframes sjo-fx-panel {
	from {
		opacity: 0;
		transform: translateY( 8px );
	}

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

/* ---------------------------------------------------------------------------
 * El mapa de la Familia Marianista
 *
 * Al marcador **no se le toca el « transform »**: ahí vive su colocación sobre
 * la coordenada, que además compensa medio disco. Lo que crece es el disco de
 * dentro, que no está colocado con nada.
 * ------------------------------------------------------------------------ */

.sjo-s__marcador-cifra {
	transition: transform 0.3s cubic-bezier( 0.34, 1.56, 0.64, 1 ), background-color 0.3s ease,
		color 0.3s ease;
}

.sjo-s__marcador:hover .sjo-s__marcador-cifra {
	transform: scale( 1.18 );
	background-color: var( --wp--preset--color--rojo, #e00026 );
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s__marcador-rotulo {
	transition: color 0.3s ease;
}

.sjo-s__marcador:hover .sjo-s__marcador-rotulo {
	color: var( --wp--preset--color--base, #fff );
}

/*
 * El latido del punto propio.
 *
 * Tres vueltas contadas y se acaba, encendidas por assets/js/animaciones-paginas.js
 * cuando el mapa termina de dibujarse. Una animación infinita en una página que
 * nadie está mirando es batería gastada, y esto se ve una vez: es el «aquí
 * estamos nosotros» del final del recorrido.
 *
 * El halo es el « box-shadow » del pseudoelemento que ya dibuja el punto, así
 * que lo que se anima es ese mismo box-shadow: no hace falta añadir marcado.
 */
.sjo-s__marcador-local.es-latiendo::before {
	animation: sjo-fx-latido 1.5s ease-out 3;
}

@keyframes sjo-fx-latido {
	0% {
		box-shadow: 0 0 0 0.25rem rgba( 224, 0, 38, 0.45 );
	}

	70% {
		box-shadow: 0 0 0 1.5rem rgba( 224, 0, 38, 0 );
	}

	100% {
		box-shadow: 0 0 0 0.5rem rgba( 224, 0, 38, 0.25 );
	}
}

/* ---------------------------------------------------------------------------
 * Las cifras
 *
 * Solo la fila: el pictograma ya crece por su cuenta. La cifra en sí no se
 * toca porque durante la cuenta la está escribiendo GSAP letra a letra, y dos
 * cosas sobre el mismo elemento se pisan.
 * ------------------------------------------------------------------------ */

.sjo-s__cifra {
	transition: transform 0.35s var( --sjo-fx-curva );
}

.sjo-s__cifra:hover {
	transform: translateY( -4px );
}

/* ---------------------------------------------------------------------------
 * El foco, donde no lo hubiera ya
 *
 * Los enlaces de sección ya traen el suyo en paginas.css. Los controles de los
 * carruseles y las pestañas no: sin esto, recorrer una sección con el tabulador
 * es ir a ciegas.
 * ------------------------------------------------------------------------ */

.sjo-s__pestana:focus-visible,
.sjo-s__carrusel-punto:focus-visible,
.sjo-s__control:focus-visible {
	outline: 2px solid var( --wp--preset--color--rojo, #e00026 );
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Cuando se pide menos movimiento
 *
 * Se apaga el movimiento, no la respuesta: los cambios de color y de sombra se
 * quedan, porque son los que dicen qué está señalado. Lo que desaparece es todo
 * lo que se desplaza, crece o late.
 * ------------------------------------------------------------------------ */

@media ( prefers-reduced-motion: reduce ) {
	.sjo-s__colegio,
	.sjo-s__destaque,
	.sjo-s__plana-area,
	.sjo-s__organi-rama,
	.sjo-s__valor.es-rector,
	.sjo-s__ficha,
	.sjo-s__escalon,
	.sjo-s__tramo,
	.sjo-s__cifra,
	.sjo-s__nodo,
	.sjo-s__pestana,
	.sjo-s__retrato-caja,
	.sjo-s__ficha-pic,
	.sjo-s__colegio-pic,
	.sjo-s__valor-pic,
	.sjo-s__cifra-pic,
	.sjo-s__tarjeta-pic,
	.sjo-s__datos-pic,
	.sjo-s__destaque-pic,
	.sjo-s__punto-pic,
	.sjo-s__marcador-cifra,
	.sjo-s__tarjeta-foto img,
	.sjo-s__retrato-foto img,
	.sjo-s__escalon-foto img,
	.sjo-s__triptico-foto img,
	.sjo-s__collage-foto img,
	.sjo-s__ruta-medio img,
	.sjo-s__form-medio img,
	.sjo-s--cita .sjo-s__medio img {
		transition-property: background-color, border-color, color, box-shadow;
	}

	.sjo-s__colegio:hover,
	.sjo-s__destaque:hover,
	.sjo-s__plana-area:hover,
	.sjo-s__organi-rama:hover,
	.sjo-s__valor.es-rector:hover,
	.sjo-s__ficha:hover,
	.sjo-s__escalon:hover,
	.sjo-s__tramo:hover,
	.sjo-s__cifra:hover,
	.sjo-s__nodo:hover,
	.sjo-s__pestana:hover,
	.sjo-s__retrato:hover .sjo-s__retrato-caja,
	.sjo-s__ficha:hover .sjo-s__ficha-pic,
	.sjo-s__colegio:hover .sjo-s__colegio-pic,
	.sjo-s__valor:hover .sjo-s__valor-pic,
	.sjo-s__cifra:hover .sjo-s__cifra-pic,
	.sjo-s__tarjeta:hover .sjo-s__tarjeta-pic,
	.sjo-s__datos:hover .sjo-s__datos-pic,
	.sjo-s__destaque:hover .sjo-s__destaque-pic,
	.sjo-s__punto:hover .sjo-s__punto-pic,
	.sjo-s__marcador:hover .sjo-s__marcador-cifra,
	.sjo-s__tarjeta:hover .sjo-s__tarjeta-foto img,
	.sjo-s__retrato:hover .sjo-s__retrato-foto img,
	.sjo-s__escalon:hover .sjo-s__escalon-foto img,
	.sjo-s__triptico-foto:hover img,
	.sjo-s__collage-foto:hover img,
	.sjo-s__ruta-medio:hover img,
	.sjo-s__form-medio:hover img,
	.sjo-s--cita .sjo-s__medio:hover img {
		transform: none;
	}

	.sjo-s__panel.es-activo {
		animation: none;
	}

	.sjo-s__marcador-local.es-latiendo::before {
		animation: none;
	}
}