/*
 * ANIMATIONS — keyframes CSS y la salvaguarda global de reduced motion.
 *
 * Regla del tema: NINGÚN elemento se oculta por CSS esperando a GSAP.
 * Los estados iniciales de las animaciones de scroll los pone JS, de modo
 * que sin JavaScript todo el contenido es visible.
 */

/* Palabras de los titulares divididos por motion.js. */
.word {
	display: inline-block;
}

@keyframes logos-scroll {
	to {
		transform: translateX(-50%);
	}
}

/*
 * VIEW TRANSITIONS entre páginas (MPA, sin JS). El header mantiene su
 * propia transición para que la navegación se sienta de aplicación.
 * Solo se activa si el usuario acepta movimiento.
 */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root) {
		animation-duration: 180ms;
	}

	::view-transition-new(root) {
		animation-duration: 220ms;
	}

	.site-header {
		view-transition-name: site-header;
	}
}

/*
 * BARRA DE PROGRESO DE LECTURA en entradas — CSS scroll-driven, cero JS.
 * Solo en navegadores con animation-timeline; el resto no pierde nada.
 */
@supports (animation-timeline: scroll(root)) {
	@media (prefers-reduced-motion: no-preference) {
		body.single-post::before {
			content: '';
			position: fixed;
			inset-block-start: 0;
			inset-inline-start: 0;
			inline-size: 100%;
			block-size: 3px;
			background-color: var(--color-accent);
			transform-origin: 0 50%;
			transform: scaleX(0);
			z-index: var(--z-progress);
			animation: trx-reading-progress linear both;
			animation-timeline: scroll(root);
		}
	}
}

@keyframes trx-reading-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/*
 * MODOS DE CONTRASTE — Windows High Contrast / forced-colors elimina
 * fondos: los elementos que se definen solo por fondo necesitan borde.
 */
@media (forced-colors: active) {
	.btn,
	.filter-btn,
	.theme-toggle,
	.slider__btn {
		border: 1px solid;
	}

	.card,
	.plan,
	.testimonial,
	.work {
		border: 1px solid;
	}
}

@media (prefers-contrast: more) {
	:root {
		--color-ink-soft: var(--color-ink);
		--color-line: oklch(60% 0.02 255);
	}
}

/*
 * Reduced motion: se anula todo lo decorativo. Las transiciones quedan a
 * una duración imperceptible (en vez de none) para no romper estados que
 * dependen de transitionend.
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.logos__track {
		animation: none;
		flex-wrap: wrap;
		width: auto;
	}

	.logos__list[aria-hidden='true'] {
		display: none;
	}
}