/* ==========================================================================
   Reformas en Toledo · Movimiento (paso 7)

   Criterio (filosofía de Emil Kowalski):
   - Sin animación de entrada al cargar páginas: se cargan decenas de veces
     al día y lo que se lee no debe moverse (además, las de Blockspare
     dejaban el contenido invisible). Única excepción: la banda de cuentas
     de la portada, que se presenta una vez al llegar a ella (front.css);
     sin JavaScript se ve igual, quieta.
   - Hover y pulsación: casi imperceptibles, solo para confirmar que la
     interfaz responde. Solo si hay ratón o touchpad (any-hover): en táctil
     el hover se dispara al tocar. No se usa (hover: hover) and (pointer:
     fine) porque en portátiles con pantalla táctil el puntero principal se
     declara táctil y los efectos no aparecían ni con ratón.
   - Menú móvil: se abre de vez en cuando; entra en 200ms desde su barra.
   - Solo transform, opacity y color. Nada de «transition: all».
   ========================================================================== */

:root {
	--rt-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--rt-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--rt-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
	--rt-ease-out-slow: cubic-bezier(0.16, 1, 0.3, 1);
	--rt-dur-fast: 150ms;
	--rt-dur: 200ms;
	--rt-dur-media: 250ms;
}


/* --------------------------------------------------------------------------
   Color: enlaces, titulares, etiquetas, botones
   -------------------------------------------------------------------------- */
body .entry-content a,
body .rt-card__title a,
body .blockspare-posts-block-post-grid-title a,
body .entry-title a,
body .article-title a,
body .aft-readmore,
body .rt-section__more,
body .main-navigation #primary-menu > li > a,
body .site-footer a,
body #ez-toc-container a,
body .post-navigation a {
	transition:
		color var(--rt-dur-fast) ease,
		text-decoration-color var(--rt-dur-fast) ease;
}

body .rt-card__cat,
body .cat-links a,
body .blockspare-posts-block-post-category a,
body :is(button, input[type="submit"]),
body .wp-element-button,
body .cky-btn {
	transition:
		background-color var(--rt-dur-fast) ease,
		color var(--rt-dur-fast) ease,
		border-color var(--rt-dur-fast) ease,
		transform 120ms var(--rt-ease-out);
}

/* El tema anima «all» en los enlaces del menú móvil. */
body .main-navigation .menu .menu-mobile li a {
	transition:
		color var(--rt-dur-fast) ease,
		background-color var(--rt-dur-fast) ease;
}


/* --------------------------------------------------------------------------
   Pulsación: el botón cede un poco al presionarlo
   -------------------------------------------------------------------------- */
body :is(button, input[type="submit"]):not(.slick-arrow):active,
body .wp-element-button:active,
body .cky-btn:active {
	transform: scale(0.97);
}


/* --------------------------------------------------------------------------
   Tarjetas: la foto se acerca apenas al pasar el ratón por la tarjeta
   -------------------------------------------------------------------------- */
/* Acercamiento lento y corto, como una cámara que se aproxima: se nota sin
   llamar la atención. Las tarjetas con el titular sobre la foto oscurecen
   además un poco el velo para que el texto gane presencia. */
.rt-card__media img,
body .blockspare-posts-block-post-img img,
body .read-img img,
body .post-thumbnail img {
	transition: transform 700ms var(--rt-ease-out-slow);
}

.rt-card__media {
	transform: translateZ(0); /* recorta el zoom con bordes limpios en Safari */
}

.rt-card--overlay .rt-card__body {
	transition: background-color 500ms ease;
}

@media (any-hover: hover) {
	.rt-card:hover .rt-card__media img,
	body article:hover .read-img img {
		transform: scale(1.045);
	}

	.rt-card--overlay:hover .rt-card__body {
		background-color: rgb(22 20 17 / 0.12);
	}

	.rt-card:hover .rt-card__title a {
		color: var(--rt-accent);
	}

	/* «Ver todo →»: la flecha avanza un poco. */
	body .rt-section__more span[aria-hidden] {
		display: inline-block;
		transition: transform var(--rt-dur) var(--rt-ease-out);
	}

	body .rt-section__more:hover span[aria-hidden] {
		transform: translateX(3px);
	}
}


/* --------------------------------------------------------------------------
   Menú móvil: entra desde la barra en lugar de aparecer de golpe
   CoverNews lo muestra pasando de display:none a block; @starting-style
   anima ese primer fotograma sin tocar su JavaScript.
   -------------------------------------------------------------------------- */
.main-navigation .menu .menu-mobile {
	transition:
		opacity var(--rt-dur) var(--rt-ease-out),
		transform var(--rt-dur) var(--rt-ease-out);
}

@starting-style {
	.main-navigation .menu .menu-mobile {
		opacity: 0;
		transform: translateY(-6px);
	}
}


/* --------------------------------------------------------------------------
   Correcciones al movimiento de CoverNews
   -------------------------------------------------------------------------- */

/* Subrayado del menú: el tema animaba «width» (recalcula la maquetación en
   cada fotograma). Ahora es una escala desde la izquierda, en la GPU. */
#masthead .main-navigation .navigation-container ul > li > a::after {
	width: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--rt-dur) var(--rt-ease-out);
}

#masthead .main-navigation .navigation-container ul > li:is(.current-menu-item, .current-menu-ancestor) > a::after,
#masthead .main-navigation .navigation-container ul > li > a:focus-visible::after {
	transform: scaleX(1);
}

@media (any-hover: hover) {
	#masthead .main-navigation .navigation-container ul > li > a:hover::after {
		transform: scaleX(1);
	}
}

/* Buscador: el tema animaba «top» durante 400ms. Ahora sale de la lupa
   (arriba a la derecha) en 200ms y se cierra algo más rápido. */
#masthead .af-search-form {
	top: 100%;
	transform: translateY(-6px) scale(0.97);
	transform-origin: top right;
	transition:
		opacity 150ms ease,
		transform 150ms var(--rt-ease-out),
		visibility 0s linear 150ms;
}

#masthead .search-overlay.reveal-search .af-search-form {
	top: 100%;
	transform: none;
	transition:
		opacity var(--rt-dur) var(--rt-ease-out),
		transform var(--rt-dur) var(--rt-ease-out),
		visibility 0s;
}

/* Hamburguesa → X: ya usa transformaciones; se acota «transition: all». */
#masthead .ham,
#masthead .ham::before,
#masthead .ham::after {
	transition:
		transform var(--rt-dur) var(--rt-ease-in-out),
		background-color var(--rt-dur) ease;
}

/* Las migas no cambian de estado: nada que animar. */
.em-breadcrumbs {
	transition: none;
}


/* --------------------------------------------------------------------------
   Aviso de cookies: sube desde abajo la primera vez que aparece
   Lo ve cada visitante una sola vez; sin animación, un panel grande surge
   de golpe sobre el texto. CookieYes lo muestra quitando .cky-hide
   (display:none), así que @starting-style anima su primer fotograma.
   Al aceptar o rechazar desaparece al instante: la respuesta del sistema
   no debe hacer esperar.
   -------------------------------------------------------------------------- */
.cky-consent-container.cky-classic-bottom {
	transition:
		transform 300ms var(--rt-ease-drawer),
		opacity 300ms var(--rt-ease-drawer);
}

@starting-style {
	.cky-consent-container.cky-classic-bottom {
		transform: translateY(100%);
		opacity: 0;
	}
}


/* --------------------------------------------------------------------------
   Movimiento reducido: se mantienen los cambios de color, sin desplazamientos
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.rt-card__media img,
	body .blockspare-posts-block-post-img img,
	body .read-img img,
	body .post-thumbnail img,
	body .rt-section__more span[aria-hidden] {
		transition: none;
		transform: none !important;
	}

	body :is(button, input[type="submit"]):active,
	body .wp-element-button:active,
	body .cky-btn:active {
		transform: none;
	}

	.main-navigation .menu .menu-mobile {
		transition: opacity var(--rt-dur) ease;
	}

	@starting-style {
		.main-navigation .menu .menu-mobile {
			opacity: 0;
			transform: none;
		}
	}

	#masthead .main-navigation .navigation-container ul > li > a::after,
	#masthead .ham,
	#masthead .ham::before,
	#masthead .ham::after {
		transition: none;
	}

	#masthead .af-search-form,
	#masthead .search-overlay.reveal-search .af-search-form {
		transform: none;
	}

	.cky-consent-container.cky-classic-bottom {
		transition: opacity 300ms ease;
	}

	@starting-style {
		.cky-consent-container.cky-classic-bottom {
			transform: none;
			opacity: 0;
		}
	}
}