/*! IDEA Motion Kit 0.2.0 — firma "Facetado". IDEA IA / IDEALIDAD.
   Regla de oro: nada se oculta en frío. Todo lo que oculta cuelga de html.im-js;
   html.im-static (reduced-motion, saveData o JS caído) fuerza el estado final. */

:root {
	--im-ease: cubic-bezier(.22, 1, .36, 1);
	--im-micro: 200ms;
	--im-entrada: 600ms;
	--im-dibujo: 900ms;
	--im-stagger: 80ms;
	--im-dist: 24px;
	/* Colores: el tema los sobreescribe (por defecto, paleta SLCPFYR). */
	--im-glow-color: var(--wp--preset--color--marine-light, #2ea3a8);
	--im-grad-1: var(--wp--preset--color--marine, #0c6168);
	--im-grad-2: var(--wp--preset--color--marine-light, #2ea3a8);
	/* Faceta: desplazamiento horizontal del borde diagonal (≈18° sobre un cuadrado). */
	--im-faceta-skew: 32%;
}

@property --im-mx { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
@property --im-my { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
@property --im-ang { syntax: "<angle>"; inherits: false; initial-value: 135deg; }

/* ---------- Escalonado: --im-i por posición (tope 8) ---------- */
:is(.is-im-stagger, .is-im-draw) > :nth-child(2) { --im-i: 1; }
:is(.is-im-stagger, .is-im-draw) > :nth-child(3) { --im-i: 2; }
:is(.is-im-stagger, .is-im-draw) > :nth-child(4) { --im-i: 3; }
:is(.is-im-stagger, .is-im-draw) > :nth-child(5) { --im-i: 4; }
:is(.is-im-stagger, .is-im-draw) > :nth-child(6) { --im-i: 5; }
:is(.is-im-stagger, .is-im-draw) > :nth-child(7) { --im-i: 6; }
:is(.is-im-stagger, .is-im-draw) > :nth-child(8) { --im-i: 7; }
:is(.is-im-stagger, .is-im-draw) > :nth-child(n+9) { --im-i: 8; }

/* ---------- Revelado (opacidad + desplazamiento corto) ---------- */
html.im-js .is-im-reveal,
html.im-js .is-im-stagger > * {
	opacity: 0;
	transform: translateY(var(--im-dist));
	transition: opacity var(--im-entrada) var(--im-ease), transform var(--im-entrada) var(--im-ease);
	transition-delay: calc(var(--im-i, 0) * var(--im-stagger));
}
html.im-js .is-im-reveal.is-visible,
html.im-js .is-im-stagger.is-visible > * {
	opacity: 1;
	transform: none;
}

/* ---------- Faceta: clip-path diagonal cerrado → abierto ----------
   FIX 4-sep: el estado "cerrado" original era un polígono de área CERO
   (cuatro puntos degenerados fuera de la caja). Chrome incorpora el
   clip-path del propio elemento al calcular su rectángulo de intersección,
   así que un área cero deja al IntersectionObserver reportando
   intersectionRatio:0 para siempre, sin importar el scroll — el elemento
   nunca recibe `.is-visible` (verificado con un IntersectionObserver de
   prueba: área 0×N con el polígono original, 800×542 con clip-path:none).
   Solución: la ocultación real la hace `opacity:0` (no afecta la geometría
   de intersección); el clip-path de partida pasa a ser una cuña real
   (~24 % del área, muy por encima del threshold 0.12) invisible igual por
   la opacidad, que crece hasta cubrir la caja completa en el reveal. */
html.im-js .is-im-faceta {
	opacity: 0;
	clip-path: polygon(0 0, 70% 0, 0 70%);
	transition: opacity var(--im-entrada) var(--im-ease), clip-path var(--im-entrada) var(--im-ease);
	transition-delay: calc(var(--im-i, 0) * var(--im-stagger));
}
html.im-js .is-im-faceta.is-visible {
	opacity: 1;
	clip-path: polygon(0 0, calc(100% + var(--im-faceta-skew)) 0, 100% 100%, 0 100%);
}

/* ---------- Dibujo de trazos (SVG con pathLength="1") ---------- */
html.im-js .is-im-draw :where(path, line, polyline, polygon, circle, rect, ellipse) {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}
html.im-js .is-im-draw.is-visible :where(path, line, polyline, polygon, circle, rect, ellipse) {
	animation: im-draw var(--im-dibujo) var(--im-ease) forwards;
	animation-delay: calc(var(--im-i, 0) * var(--im-stagger));
}
@keyframes im-draw { to { stroke-dashoffset: 0; } }

/* ---------- Hero: nunca se oculta (protege el LCP) ---------- */
.is-im-hero,
html.im-js .is-im-hero {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
}

/* ---------- Contador ---------- */
.is-im-count { font-variant-numeric: tabular-nums; }

/* ---------- Estado estático: todo visible, sin efectos ---------- */
html.im-static .is-im-reveal,
html.im-static .is-im-faceta,
html.im-static .is-im-stagger > * {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
	transition: none !important;
}
html.im-static .is-im-draw :where(path, line, polyline, polygon, circle, rect, ellipse) {
	stroke-dasharray: none !important;
	stroke-dashoffset: 0 !important;
	animation: none !important;
}
html.im-static .is-im-gradiente,
html.im-static .is-im-marquee > *,
html.im-static .is-im-parallax img {
	animation: none !important;
}

/* ---------- Borde luminoso que sigue al puntero (solo hover real) ---------- */
@media (hover: hover) {
	.is-im-glow {
		position: relative;
		--im-mx: 50%;
		--im-my: 50%;
	}
	.is-im-glow::before {
		content: "";
		position: absolute;
		inset: 0;
		padding: 1px;
		border-radius: inherit;
		background: radial-gradient(180px circle at var(--im-mx) var(--im-my), var(--im-glow-color), transparent 70%);
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask-composite: exclude;
		opacity: 0;
		transition: opacity var(--im-micro) var(--im-ease);
		pointer-events: none;
	}
	.is-im-glow:hover::before { opacity: 1; }
}

/* ---------- Gradiente CTA: ciclo de 4,8 s (< 5 s, WCAG 2.2.2) ---------- */
.is-im-gradiente {
	background-image: linear-gradient(var(--im-ang), var(--im-grad-1), var(--im-grad-2));
	animation: im-ang 4.8s linear infinite;
}
@keyframes im-ang { to { --im-ang: 495deg; } }

/* ---------- Marquee: pista duplicada; pausa en hover/focus ---------- */
.is-im-marquee {
	display: flex;
	gap: var(--im-marquee-gap, 3rem);
	overflow: hidden;
}
.is-im-marquee > * {
	display: flex;
	flex: none;
	gap: inherit;
	min-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: im-marquee var(--im-marquee-dur, 40s) linear infinite;
}
.is-im-marquee:hover > *,
.is-im-marquee:focus-within > * { animation-play-state: paused; }
@keyframes im-marquee { to { transform: translateX(calc(-100% - var(--im-marquee-gap, 3rem))); } }

/* ---------- Parallax nativo: ±4 % (8 % total), solo con soporte y sin reduced-motion ---------- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.is-im-parallax { overflow: clip; }
		.is-im-parallax img {
			scale: 1.08;
			animation: im-parallax linear both;
			animation-timeline: view();
		}
	}
}
@keyframes im-parallax { from { translate: 0 -4%; } to { translate: 0 4%; } }

/* ---------- Magnético (el JS escribe `translate`) ---------- */
.is-im-magnetico { transition: translate var(--im-micro) var(--im-ease); }

/* ---------- Reduced motion: fundido de 200 ms como único sustituto ---------- */
@media (prefers-reduced-motion: reduce) {
	html.im-js .is-im-reveal,
	html.im-js .is-im-faceta,
	html.im-js .is-im-stagger > * {
		transform: none;
		clip-path: none;
		transition: opacity var(--im-micro) linear;
		transition-delay: 0s;
	}
	html.im-js .is-im-faceta { opacity: 0; }
	html.im-js .is-im-faceta.is-visible { opacity: 1; }
	html.im-js .is-im-draw :where(path, line, polyline, polygon, circle, rect, ellipse) {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
		animation: none;
	}
	.is-im-gradiente,
	.is-im-marquee > * { animation: none; }
	.is-im-marquee,
	.is-im-marquee > * { flex-wrap: wrap; min-width: 0; }
	.is-im-marquee > :nth-child(2) { display: none; }
	.is-im-glow::before { display: none; }
	.is-im-magnetico { transition: none; translate: none !important; }
}

/* ---------- Forced colors (alto contraste): sin efectos ---------- */
@media (forced-colors: active) {
	html.im-js .is-im-reveal,
	html.im-js .is-im-faceta,
	html.im-js .is-im-stagger > * {
		opacity: 1;
		transform: none;
		clip-path: none;
		transition: none;
	}
	html.im-js .is-im-draw :where(path, line, polyline, polygon, circle, rect, ellipse) {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
		animation: none;
	}
	.is-im-glow::before { display: none; }
	.is-im-gradiente,
	.is-im-parallax img { animation: none; }
}