/* ============================================================
   LTS Child — sistema de moviment (assets/js/motion/).
   Només es carrega al nivell "full" (vegeu "Sistema de moviment" a functions.php).
   Totes les regles van sota html.lts-motion-on, que només posa el JS quan arranca:
   sense JS o amb moviment reduït, les pàgines es veuen exactament com les pinten els blocs.
   ============================================================ */

/* ═══ read: lectura progressiva (read.js) ═══
   Cada paraula del paràgraf d'obertura barreja el seu color amb transparent: del 42 %
   (--r = 0) al color ple (--r = 1). El JS només escriu --r. */
html.lts-motion-on .lts-read-w {
	color: color-mix(in srgb, currentColor calc(42% + var(--r, 0) * 58%), transparent);
}
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	html.lts-motion-on .lts-read-w {
		opacity: calc(0.42 + var(--r, 0) * 0.58);
	}
}

/* ═══ flow: transicions entre blocs (flow.js) ═══
   .lts-motion-owned: reveals que ara governa flow.js (reveal.js també se'ls salta). */
html.lts-motion-on .lts-motion-owned,
html.lts-motion-on .lts-motion-owned.lts-armed {
	opacity: 1 !important;
	transform: none !important;
	will-change: auto;
}
html.lts-motion-on .lts-flow-fig {
	overflow: hidden;
	border-radius: 4px;
	will-change: transform, clip-path;
	backface-visibility: hidden;
}
html.lts-motion-on .lts-flow-fig img {
	will-change: transform;
	transform-origin: 50% 50%;
}
html.lts-motion-on .lts-flow-card {
	will-change: clip-path;
}
html.lts-motion-on .lts-flow-l {
	will-change: transform;
}

/* ═══ pin: secció de passos fixa (pin.js) ═══
   .lts-pin-stack: passos apilats amb el seu número (mòbil, pantalla baixa).
   .lts-pin-on: fixa, en dues columnes (índex sempre visible + pla del pas actiu). */
html.lts-motion-on .lts-pin-track {
	position: relative;
	max-width: none !important; /* fill directe del contingut "constrained" de WP */
	background-color: var(--wp--preset--color--fondo-claro, #fdfdfd); /* el JS hi posa el fons real de la secció */
}

/* ── Numeració dels passos quan estan apilats ── */
html.lts-motion-on .lts-pin-stack .lts-steps {
	counter-reset: lts-step;
}
html.lts-motion-on .lts-pin-stack .lts-step {
	counter-increment: lts-step;
}
html.lts-motion-on .lts-pin-stack:not(.lts-pin-on) .lts-step h3::before {
	content: counter(lts-step);
	display: block;
	margin-bottom: 12px;
	font-family: var(--wp--preset--font-family--playfair), Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: 1.75rem;
	line-height: 1;
	color: #4a4a4a;
}

/* ── Fixa: composició en dues columnes ── */
html.lts-motion-on .lts-section.lts-pin-on {
	position: sticky;
	/* top: el calcula el JS (bloc centrat sota el header) */
	box-sizing: border-box;
	padding-block: 48px;
}
html.lts-motion-on .lts-pin-on .lts-pin-stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	column-gap: clamp(40px, 6vw, 96px);
	align-items: center;
	max-width: 1140px;
	margin-inline: auto;
}
html.lts-motion-on .lts-pin-on .lts-pin-aside h2 {
	text-align: left;
	margin: 0;
	font-size: clamp(2rem, 5.6vh, 3.25rem);
	line-height: 1.15;
}
html.lts-motion-on .lts-pin-on .lts-pin-aside .lts-rule {
	margin: clamp(18px, 3vh, 30px) 0 0;
}

/* Índex: filet vertical que s'omple fins al pas actual + files número/títol */
html.lts-motion-on .lts-pin-index {
	position: relative;
	margin-top: clamp(28px, 5vh, 52px);
	padding-left: 28px;
}
html.lts-motion-on .lts-pin-bar {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(26, 26, 26, 0.14);
}
html.lts-motion-on .lts-pin-bar > span {
	position: absolute;
	left: -0.5px;
	top: 0;
	width: 2px;
	height: 100%;
	background: #1a1a1a;
	transform-origin: 50% 0;
	transform: scaleY(0);
	will-change: transform;
}
html.lts-motion-on .lts-pin-index ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
html.lts-motion-on .lts-pin-index li {
	margin: 0;
}
html.lts-motion-on .lts-pin-index button {
	appearance: none;
	display: flex;
	align-items: baseline;
	gap: 20px;
	width: 100%;
	padding: clamp(10px, 1.9vh, 18px) 0;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: #4a4a4a;
	opacity: 0.72; /* ≈ #7c7c7c sobre el fons: secundari però llegible */
	transition: color 0.3s ease, opacity 0.3s ease;
}
html.lts-motion-on .lts-pin-index button:hover {
	opacity: 1;
}
html.lts-motion-on .lts-pin-index button[aria-current] {
	color: #1a1a1a;
	opacity: 1;
}
html.lts-motion-on .lts-pin-index button:focus-visible {
	outline: 1px solid #333;
	outline-offset: 4px;
}
html.lts-motion-on .lts-pin-num {
	flex: 0 0 1.1em;
	font-family: var(--wp--preset--font-family--playfair), Georgia, serif;
	font-style: italic;
	font-size: clamp(1.6rem, 3.6vh, 2.1rem);
	line-height: 1;
}
html.lts-motion-on .lts-pin-title {
	font-family: var(--wp--preset--font-family--tenor), sans-serif;
	font-size: clamp(1.15rem, 2.8vh, 1.6rem);
	line-height: 1.3;
}

/* Pla del pas actiu: els tres comparteixen cel·la, la columna fa l'alçada del més alt */
html.lts-motion-on .lts-pin-on .lts-steps {
	display: grid;
	margin: 0;
	perspective: 1100px;
	perspective-origin: 50% 30%;
}
html.lts-motion-on .lts-pin-on .lts-steps > .lts-step {
	grid-area: 1 / 1;
	align-self: center;
	max-width: none;
	margin: 0;
	padding: 0;
	border-top: 0;
	transform-origin: 50% 0;
	will-change: transform, opacity;
	backface-visibility: hidden;
}
html.lts-motion-on .lts-pin-on .lts-step h3 {
	font-size: clamp(1.75rem, 4.6vh, 2.6rem);
	line-height: 1.15;
	margin-bottom: clamp(16px, 2.6vh, 28px);
}
html.lts-motion-on .lts-pin-on .lts-step p {
	font-size: clamp(1.125rem, 2.5vh, 1.4rem);
	line-height: 1.7;
	max-width: 54ch;
}

/* ── Passos apilats (mòbil): cada pas entra quan apareix a la pantalla. La foto es
   descobreix en cortina de baix a dalt i el text puja una mica. Animació lligada al
   scroll amb CSS (animation-timeline: view()); on no hi ha suport, sense animació. ── */
@supports (animation-timeline: view()) {
	html.lts-motion-on .lts-pin-stack:not(.lts-pin-on) .lts-step > figure {
		animation: lts-stack-curtain linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 220px;
	}
	html.lts-motion-on .lts-pin-stack:not(.lts-pin-on) .lts-step > figure img {
		animation: lts-stack-zoom linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 300px;
	}
	html.lts-motion-on .lts-pin-stack:not(.lts-pin-on) .lts-step > :not(figure) {
		animation: lts-stack-rise linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 140px;
	}
}
@keyframes lts-stack-curtain {
	from { clip-path: inset(100% 0 0 0 round 4px); }
	to { clip-path: inset(0 0 0 0 round 4px); }
}
@keyframes lts-stack-zoom {
	from { transform: scale(1.12); }
	to { transform: scale(1); }
}
@keyframes lts-stack-rise {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: none; }
}

/* ── Mòbil: els blocs que no anima el JS (seccions sense columnes de mitjà) també
   entren: cada fill directe de la secció puja i apareix quan entra a la pantalla.
   Rang en px des de l'entrada: es completa encara que el bloc estiga al final de la pàgina. ── */
@supports (animation-timeline: view()) {
	@media (max-width: 781px) {
		html.lts-motion-on main .lts-section:not(.lts-motion-owned):not(.lts-pin-stack) > * {
			animation: lts-stack-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 140px;
		}
	}
}

/* ── Mòbil: fila de passos enganxada sota el header mentre dura la secció ── */
html.lts-motion-on .lts-pin-mnav {
	position: sticky;
	z-index: 6;
	display: flex;
	gap: 22px;
	max-width: none !important;
	margin: 0 calc(-1 * var(--wp--style--root--padding-left, 16px)) 28px !important;
	padding: 12px var(--wp--style--root--padding-left, 16px) 13px;
	overflow-x: auto;
	scrollbar-width: none;
	background: inherit;
	background-color: var(--lts-pin-mnav-bg, var(--wp--preset--color--fondo-claro, #f3f1ec));
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
html.lts-motion-on .lts-pin-mnav::-webkit-scrollbar { display: none; }
html.lts-motion-on .lts-pin-mnav button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 4px 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	color: #8a8a8a;
	cursor: pointer;
	transition: color 0.25s ease;
}
html.lts-motion-on .lts-pin-mnav button[aria-current="step"] { color: var(--lts-principal, #1b1b1b); }
html.lts-motion-on .lts-pin-mnav .lts-pin-num {
	font-family: var(--wp--preset--font-family--playfair), Georgia, serif;
	font-style: italic;
	font-size: 1.05rem;
}
html.lts-motion-on .lts-pin-mnav__line {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--lts-acento, #f39a4a);
	transform: scaleX(0);
	transform-origin: 0 50%;
}
@media (min-width: 782px) {
	html.lts-motion-on .lts-pin-mnav { display: none; }
}
html.lts-motion-on .lts-pin-mnav .lts-pin-title {
	font-family: var(--wp--preset--font-family--tenor), sans-serif;
	font-size: 0.92rem;
	line-height: 1.3;
	white-space: nowrap;
}
html.lts-motion-on .lts-pin-mnav .lts-pin-num { line-height: 1; min-width: 0; }