/**
 * Movimiento del sitio: ondas, entradas, parallax y transiciones.
 * Todo lo nuevo anima solo transform, opacity y clip-path. Excepción por
 * diseño: las ondas conservan su dibujo original con stroke-dashoffset.
 */

/* Ondas: la única animación automática del sitio (dibujo con stroke-dashoffset, por diseño). */
.waves {
	width: 100%;
	pointer-events: none;
}

.waves--hero {
	position: absolute;
	right: 0;
	bottom: -10px;
	left: 0;
	z-index: 1;
	height: 170px;
}

/* En los encabezados interiores: en flujo, al pie, nunca sobre el texto. */
.waves--head {
	display: block;
	height: clamp(56px, 9vw, 110px);
	margin-top: clamp(12px, 2vw, 24px);
}

/* Los encabezados con ancho máximo en caracteres no recortan las ondas. */
.entry__head,
.calcpage__head {
	max-width: none;
}

.entry__head > :not(.waves),
.calcpage__head > :not(.waves) {
	max-width: 62ch;
}

.entry__head > .entry__title {
	max-width: 24ch;
}

.job__main > .waves--head {
	margin-top: 8px;
}

.phead > .waves--head,
.lhead > .waves--head {
	grid-column: 1 / -1;
}

.waves path {
	fill: none;
	stroke: var(--amarillo);
	stroke-width: 1.4;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: crear-draw 2.4s cubic-bezier(.6, 0, .2, 1) forwards;
}

.waves path:nth-child(2) { animation-delay: .08s; }
.waves path:nth-child(3) { animation-delay: .16s; }
.waves path:nth-child(4) { animation-delay: .24s; }
.waves path:nth-child(5) { animation-delay: .32s; }
.waves path:nth-child(6) { animation-delay: .4s; }

@keyframes crear-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.waves path {
		animation: none;
		stroke-dashoffset: 0;
	}
}

/*
 * Entrada del contenido (reveal.mjs). Solo existe con JS y sin reducir
 * movimiento: el JS pone is-pending únicamente a lo que está debajo de la
 * pantalla al arrancar y lo cambia a is-in al entrar.
 *
 * - [data-reveal]: fundido con una subida corta.
 * - [data-reveal="photo"]: barrido diagonal. Un borde inclinado como el
 *   ángulo de marca (--sk, "/") cruza de izquierda a derecha. Va en un
 *   contenedor sin corte propio, para no perder el corte diagonal de marca.
 * - --i (grupos): retraso escalonado de 60 ms.
 */
.wipe {
	display: block;
	height: 100%;
}

@media screen and (prefers-reduced-motion: no-preference) {
	[data-reveal].is-pending {
		opacity: 0;
		translate: 0 14px;
	}

	/*
	 * Solo se funden: las filas de tabla (moverlas abriría scroll en su
	 * contenedor) y las paradas de la ruta (su marcador no se despega de la línea).
	 */
	tr[data-reveal].is-pending,
	.route__item[data-reveal].is-pending {
		translate: none;
	}

	[data-reveal].is-in {
		transition:
			opacity .5s cubic-bezier(.2, .7, .2, 1),
			translate .5s cubic-bezier(.2, .7, .2, 1);
		transition-delay: calc(var(--i, 0) * 60ms);
	}

	/*
	 * El borde va de (4 % -20 %) a (-24 % 120 %): toca la esquina superior
	 * izquierda sin mostrar nada, pero la caja del recorte sí toca la foto.
	 * Así IntersectionObserver y loading="lazy" (que respetan clip-path)
	 * la siguen viendo. Al final el polígono sobra por fuera para no cortar
	 * las franjas amarillas ni el pie de foto.
	 */
	[data-reveal="photo"].is-pending {
		opacity: 1;
		translate: none;
		clip-path: polygon(-60% -20%, 4% -20%, -24% 120%, -60% 120%);
	}

	[data-reveal="photo"].is-in {
		clip-path: polygon(-60% -20%, 140% -20%, 112% 120%, -60% 120%);
		transition: clip-path .8s cubic-bezier(.6, 0, .2, 1);
		transition-delay: calc(var(--i, 0) * 60ms);
	}
}

/*
 * Profundidad al hacer scroll: la foto se mueve un poco más lento que la
 * página, dentro de su marco (que la recorta con su corte de marca). Solo CSS;
 * sin soporte de animation-timeline la foto queda estática.
 * Con ±6 % y scale(1.08) el borde de la foto solo podría asomar en los
 * extremos del recorrido, cuando ese borde ya está fuera de la pantalla.
 */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.parallax {
			animation: crear-parallax linear both;
			animation-timeline: view();
		}

		/* clip-path no recorta el desborde: sin esto la foto ampliada abre scroll lateral. */
		:has(> .parallax) {
			overflow: clip;
		}
	}
}

@keyframes crear-parallax {
	from {
		transform: translateY(-6%) scale(1.08);
	}

	to {
		transform: translateY(6%) scale(1.08);
	}
}

/*
 * Transición entre páginas (View Transitions, mismo origen) y entre secciones.
 * Solo con no-preference: con reducir movimiento no hay transición ni scroll suave.
 * La cabecera tiene su propio nombre y su grupo no se anima, así que queda fija.
 */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	html {
		scroll-behavior: smooth;
	}

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

	::view-transition-group(site-header) {
		animation: none;
	}

	::view-transition-old(site-header),
	::view-transition-new(site-header) {
		animation: none;
		mix-blend-mode: normal;
	}

	::view-transition-old(root) {
		animation: crear-vt-out 150ms ease-out both;
	}

	::view-transition-new(root) {
		animation: crear-vt-in 250ms cubic-bezier(.2, .7, .2, 1) both;
	}

	/* Resaltado del destino de un ancla: pseudo-elemento, no mueve el diseño. */
	[id^="agencia-"]:target {
		position: relative;
	}

	[id^="agencia-"]:target::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: color-mix(in srgb, var(--amarillo) 28%, transparent);
		box-shadow: inset 4px 0 0 var(--amarillo);
		animation: crear-target 1.5s ease-out .2s both;
	}

	h2[id]:target,
	h3[id]:target {
		position: relative;
	}

	h2[id]:target::after,
	h3[id]:target::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: color-mix(in srgb, var(--amarillo) 28%, transparent);
		box-shadow: inset 4px 0 0 var(--amarillo);
		animation: crear-target 1.5s ease-out .2s both;
	}
}

/* La cabecera fija no tapa el destino del ancla (solo es fija en móvil). */
@media (max-width: 1023.98px) {
	[id^="agencia-"],
	h2[id],
	h3[id] {
		scroll-margin-top: 96px;
	}
}

@keyframes crear-vt-out {
	to {
		opacity: 0;
	}
}

@keyframes crear-vt-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

@keyframes crear-target {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}