/* Ishiku Lemu · movimiento.css — transiciones del sitio (todas las páginas).

   Idea única: "enfoque". La marca habla de mirar lo pequeño y de observación lenta
   (brandbook § 0 y § 3: sin rebotes ni entradas llamativas). El movimiento es el de un
   lente que enfoca: la foto del hero pasa de borrosa a nítida mientras aparece el
   título, y las fotos del contenido se enfocan al entrar en pantalla. La segunda voz,
   pedida por Felipe, es lenta y del mismo mundo: las hojas de línea brotan con el scroll (el tallo
   se dibuja y después hojas y nervios) a medida que su sección aparece. Nada más se
   mueve solo; el resto son respuestas a acciones (hover, foco, cambio de página).

   Solo transform, opacity, filter y el trazo de las hojas (stroke-dashoffset, que no
   recalcula el layout). Todo se apaga con prefers-reduced-motion y en
   equipos de baja gama: en esos casos el script del <head> (functions.php,
   cc_activar_movimiento) no agrega html.cc-mov. */

:root {
	--cc-mov-lento: 1200ms;
	--cc-mov-medio: 700ms;
	--cc-mov-rapido: 300ms;
	--cc-mov-curva: cubic-bezier(0.22, 1, 0.36, 1); /* sale rápido y se asienta lento */
	--cc-mov-desenfoque: 8px;
}

/* ---------- Cambio de página: fundido suave ---------------------------------------- */

/* Sin view-transition-name en el header: crea un contexto de apilamiento y la barra
   fija de Divi (position: fixed dentro de .et-l--header, de alto 0) quedaba debajo del
   hero. El header se funde con el resto de la página. */
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 380ms;
	animation-timing-function: var(--cc-mov-curva);
}

/* ---------- Hero: el lente enfoca (una vez, al cargar) ------------------------------ */

/* El desenfoque va en el velo (backdrop-filter): la foto se enfoca y el texto, que está
   encima del velo, nunca se ve borroso. Primera diapositiva del primer slider de la
   página (el hero en todas las páginas con slider). */
html.cc-mov .et_pb_slider:first-of-type .et_pb_slide:first-child .et_pb_slide_overlay_container {
	animation: cc-enfocar var(--cc-mov-lento) var(--cc-mov-curva) both;
}

html.cc-mov .et_pb_slider:first-of-type .et_pb_slide:first-child .et_pb_slide_description > * {
	animation: cc-aparecer var(--cc-mov-medio) var(--cc-mov-curva) both;
}

html.cc-mov .et_pb_slider:first-of-type .et_pb_slide:first-child .et_pb_slide_description > :nth-child(1) {
	animation-delay: 150ms;
}

html.cc-mov .et_pb_slider:first-of-type .et_pb_slide:first-child .et_pb_slide_description > :nth-child(2) {
	animation-delay: 300ms;
}

html.cc-mov .et_pb_slider:first-of-type .et_pb_slide:first-child .et_pb_slide_description > :nth-child(3) {
	animation-delay: 450ms;
}

@keyframes cc-enfocar {
	from {
		-webkit-backdrop-filter: blur(var(--cc-mov-desenfoque));
		backdrop-filter: blur(var(--cc-mov-desenfoque));
	}

	to {
		-webkit-backdrop-filter: blur(0);
		backdrop-filter: blur(0);
	}
}

@keyframes cc-aparecer {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

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

/* ---------- Fotos del contenido: se enfocan al entrar en pantalla ------------------- */

/* main.js marca las fotos con .cc-por-enfocar y les quita la clase al verlas. Sin JS (o
   con movimiento reducido) la clase nunca se pone y las fotos se ven nítidas. */
html.cc-mov img.cc-por-enfocar {
	opacity: 0.55;
	filter: blur(var(--cc-mov-desenfoque));
	transform: scale(1.02);
}

html.cc-mov img.cc-enfocable {
	transition:
		opacity var(--cc-mov-medio) var(--cc-mov-curva),
		filter var(--cc-mov-lento) var(--cc-mov-curva),
		transform var(--cc-mov-lento) var(--cc-mov-curva);
}

/* ---------- Respuestas a acciones ------------------------------------------------- */

/* Enlaces de texto: el subrayado entra al pasar el cursor (color y grosor, sin saltos). */
#main-content .et_pb_text a:not(.et_pb_button) {
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--cc-mov-rapido) ease, color var(--cc-mov-rapido) ease;
}

#main-content .et_pb_text a:not(.et_pb_button):hover,
#main-content .et_pb_text a:not(.et_pb_button):focus-visible {
	text-decoration-color: currentColor;
}

/* ---------- Hojas que brotan con el scroll (cc-hoja: layout.css y main.js) ---------- */

/* main.js pone --brote (0 → 1, según la posición en pantalla) y --n (cantidad de trazos).
   Cada trazo trae pathLength="1" y su turno --i (scripts/hojas.py). El avance se reparte
   en una ola: cada trazo se dibuja durante un tramo de --ola turnos, empezando en su
   turno, así el tallo va primero y las hojas lo siguen. La hoja entera además se
   despliega desde su base (solo con html.cc-mov: con movimiento reducido el trazo igual
   avanza con el scroll, sin giro ni escala). Una transición corta suaviza los saltos de
   la rueda. Los cruces tienen muchos trazos: su ola es más ancha. */
html.cc-brote .cc-hoja {
	--brote: 0;
	--ola: 6;
}

html.cc-mov .cc-hoja:not(.cc-hoja--cruce) svg {
	transform: scale(calc(0.86 + 0.14 * var(--brote))) rotate(calc(-6deg * (1 - var(--brote))));
	transform-origin: 50% 100%;
	transition: transform 180ms linear;
}

/* Lo que nace en la esquina de arriba se despliega desde ahí. */
html.cc-mov .cc-hojas-pos--esquina-arriba-der .cc-hoja:not(.cc-hoja--cruce) svg,
html.cc-mov .cc-hoja.cc-hoja--esquina svg {
	transform-origin: 100% 0;
}

/* El relleno de una mata aparece mientras se dibuja su borde (no antes). */
html.cc-brote .cc-hoja path.cc-relleno {
	fill-opacity: clamp(0, var(--p) * 3, 1);
}

/* El cartel aparece al final, cuando la planta ya brotó (sin trazo animado). */
html.cc-brote .cc-hoja .cc-cartel {
	opacity: calc(clamp(0, (var(--brote) - 0.85) * 7, 1) * var(--cc-cartel-op));
	transition: opacity 400ms ease;
}

html.cc-brote .cc-hoja .cc-cartel-fondo {
	opacity: clamp(0, (var(--brote) - 0.85) * 7, 1);
	transition: opacity 400ms ease;
}

html.cc-brote .cc-hoja .cc-cartel path {
	stroke-dasharray: none;
	stroke-dashoffset: 0;
	opacity: 1;
}

html.cc-brote .cc-hoja--cruce {
	--ola: 14;
}

html.cc-brote .cc-hoja path {
	/* Avance propio de este trazo (0 → 1). Raya de 1 y hueco de 2: en cero, el desfase de
	   1,05 deja el trazo dentro del hueco; además la opacidad lo apaga del todo, porque
	   Chrome igual pinta puntos de las puntas redondeadas. */
	--p: clamp(0, (var(--brote) * (var(--n, 20) + var(--ola)) - var(--i, 0)) / var(--ola), 1);
	stroke-dasharray: 1 2;
	stroke-dashoffset: calc(1.05 * (1 - var(--p)));
	opacity: clamp(0, var(--p) * 12, 1);
	transition: stroke-dashoffset 180ms linear, opacity 180ms linear;
}

/* ---------- Movimiento reducido ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
}