/* Estado inicial de los reveals. Sin la clase .gsap-ready (que solo pone
   motion.js si GSAP cargó y no hay prefers-reduced-motion) esta regla no
   aplica y el contenido se ve normal — nunca depende de JS para ser visible. */

.gsap-ready [data-reveal] {
	opacity: 0;
	transform: translateY(28px);
}

/* Nozzle del loader: barrido sutil mientras se "deposita" material. */

.loader__nozzle {
	animation: di3d-nozzle-sweep 1.6s ease-in-out infinite;
}

@keyframes di3d-nozzle-sweep {
	0%,
	100% {
		transform: translateX(-16px);
	}
	50% {
		transform: translateX(16px);
	}
}

/* Silueta que se construye: línea que se dibuja junto al proceso. */

.process__line {
	position: absolute;
	left: 27px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	pointer-events: none;
}

.process__line-path {
	stroke: var(--color-accent);
	stroke-width: 2;
	fill: none;
}

/* Recorrido diagonal: silueta naranja tipo trazo de impresión que
   atraviesa "El punto de partida" y "Soluciones", y se disuelve al llegar
   a Casos. isolation:isolate crea un contexto de apilamiento propio para
   que z-index:-1 la mande detrás de esas dos secciones sin arriesgar el
   apilamiento del resto de la página. */

.journey {
	position: relative;
	isolation: isolate;
}

.journey__line {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: visible;
	pointer-events: none;
}

.journey__line-path {
	stroke: var(--color-accent);
	stroke-width: 2;
	stroke-linecap: round;
	fill: none;
}

/* Hover-reveal en Casos: un resplandor sutil que sigue el cursor. */

.case-item {
	position: relative;
}

.case-item__glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(
		circle 220px at var(--x, 50%) var(--y, 50%),
		color-mix(in srgb, var(--color-accent) 14%, transparent),
		transparent 70%
	);
	transition: opacity 200ms ease;
}

.case-item:hover .case-item__glow {
	opacity: 1;
}

/* Cursor personalizado (solo desktop con mouse real). */

.cursor-dot {
	position: fixed;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border: 1px solid var(--color-accent);
	border-radius: 50%;
	pointer-events: none;
	z-index: 9998;
	opacity: 0;
	transition: opacity 200ms ease, width 150ms ease, height 150ms ease, margin 150ms ease;
}

.cursor-dot.is-active {
	opacity: 1;
}

.cursor-dot.is-hovering {
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.loader__nozzle {
		animation: none;
	}
}