/* ==========================================================================
   Máster Big Data UPO — motion.css
   Capa de movimiento (mejora progresiva).
   - Sin JS no queda nada oculto: los estados iniciales dependen de html.motion.
   - prefers-reduced-motion: reduce → sin animaciones ni transiciones (ver main.css).
   - Solo transform / opacity / stroke-dashoffset / offset-distance / variables CSS. Sin reflow.
   Concepto: THE DATA LINE — Datos → Analítica → IA → Negocio → Impacto.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	/* ----------------------------------------------------------------------
	   Keyframes
	   ---------------------------------------------------------------------- */
	@keyframes mbu-rise {
		from { opacity: 0; transform: translateY(18px); }
		to   { opacity: 1; transform: translateY(0); }
	}
	@keyframes mbu-fade {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
	@keyframes mbu-hero-img {
		from { transform: scale(1.06); }
		to   { transform: scale(1); }
	}
	@keyframes mbu-draw {
		to { stroke-dashoffset: 0; }
	}
	@keyframes mbu-halo {
		0%, 100% { opacity: 0.1; transform: scale(1); }
		50%      { opacity: 0.32; transform: scale(1.35); }
	}
	@keyframes mbu-travel {
		0%   { offset-distance: 0%; opacity: 0; }
		8%   { opacity: 1; }
		92%  { opacity: 1; }
		100% { offset-distance: 100%; opacity: 0; }
	}
	@keyframes mbu-drift {
		0%, 100% { transform: translate3d(0, 0, 0); }
		50%      { transform: translate3d(2.5%, -3%, 0); }
	}
	@keyframes mbu-breathe {
		0%, 100% { transform: scale(1); }
		50%      { transform: scale(1.04); }
	}
	@keyframes mbu-core {
		0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.9); }
		50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
	}
	@keyframes mbu-orbit {
		from { transform: translate(-50%, -50%) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(0deg); }
		to   { transform: translate(-50%, -50%) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(360deg); }
	}
	@keyframes mbu-spark {
		0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.35; }
		50%      { transform: translate3d(6px, -14px, 0) scale(1.35); opacity: 1; }
	}
	@keyframes mbu-dash {
		to { stroke-dashoffset: -416; }
	}
	@keyframes mbu-scroll-cue {
		0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
		35%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
		65%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
		100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
	}
	@keyframes mbu-play-pulse {
		0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 8px rgba(252, 193, 0, 0.18); }
		50%      { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 14px rgba(252, 193, 0, 0.06); }
	}
	@keyframes mbu-menu-item {
		from { opacity: 0; transform: translateX(14px); }
		to   { opacity: 1; transform: translateX(0); }
	}

	/* ----------------------------------------------------------------------
	   1. Hero — entrada en CSS puro (~1,4 s). El H1 es legible antes de 0,4 s.
	   La imagen LCP nunca arranca oculta: solo un leve zoom-out; el velo sí se funde.
	   ---------------------------------------------------------------------- */
	.hero__picture   { animation: mbu-hero-img 1.6s var(--ease) both; transform-origin: 60% 30%; }
	.hero__shade     { animation: mbu-fade 1.2s var(--ease) both; }
	.hero__eyebrow    { animation: mbu-rise 0.7s var(--ease) 0.05s both; }
	.hero__title-pre  { animation: mbu-rise 0.7s var(--ease) 0.1s both; }
	.hero__title-main { animation: mbu-rise 0.8s var(--ease) 0.16s both; }
	.hero__title-org  { animation: mbu-rise 0.7s var(--ease) 0.28s both; }
	.hero__lead       { animation: mbu-rise 0.7s var(--ease) 0.38s both; }
	.hero__actions    { animation: mbu-rise 0.7s var(--ease) 0.48s both; }
	.hero__meta       { animation: mbu-rise 0.7s var(--ease) 0.6s both; }
	.hero__side       { animation: mbu-fade 1s var(--ease) 0.9s both; }
	.hero__scroll     { animation: mbu-scroll-cue 2.6s ease-in-out 1.6s infinite; }

	/* Hero — red de datos: trazado inicial, nodos, halos y un pulso viajero (origen de THE DATA LINE) */
	.hero__network-lines path {
		stroke-dasharray: 1200;
		stroke-dashoffset: 1200;
		animation: mbu-draw 2.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
	}
	.hero__network-nodes circle { animation: mbu-fade 0.9s var(--ease) 1.2s both; }
	.hero__network-halo circle {
		transform-box: fill-box;
		transform-origin: center;
		animation: mbu-halo 5.5s ease-in-out infinite;
	}
	.hero__network-halo circle:nth-child(2) { animation-delay: -1.8s; }
	.hero__network-halo circle:nth-child(3) { animation-delay: -3.6s; }
	.hero__pulse {
		offset-path: path("M150 520 L190 340 L320 260 L450 300 L560 170");
		offset-rotate: 0deg;
		opacity: 0;
		animation: mbu-travel 9s linear 2.8s infinite;
	}
	@supports not (offset-path: path("M0 0 L1 1")) {
		.hero__pulse { display: none; }
	}

	@media (min-width: 1024px) {
		.hero__picture,
		.hero__network { will-change: transform; }
	}

	/* Loops en pausa fuera del viewport (solo con JS) */
	html.motion .hero:not(.is-visible) .hero__network *,
	html.motion .hero:not(.is-visible) .hero__scroll { animation-play-state: paused; }

	/* ----------------------------------------------------------------------
	   2. Reveals al entrar en viewport (reveal.js añade .is-in)
	   ---------------------------------------------------------------------- */
	html.motion [data-reveal] {
		opacity: 0;
		transform: translateY(20px);
		transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
		transition-delay: var(--d, 0ms);
	}
	html.motion [data-reveal].is-in {
		opacity: 1;
		transform: translateY(0);
	}
	html.motion [data-reveal-group] > * {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
		transition-delay: calc(var(--i, 0) * 70ms);
	}
	html.motion [data-reveal-group].is-in > * {
		opacity: 1;
		transform: translateY(0);
	}

	/* La línea del eyebrow se dibuja al revelar la cabecera de sección */
	html.motion [data-reveal] .eyebrow::before {
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.7s var(--ease) 0.25s;
	}
	html.motion [data-reveal].is-in .eyebrow::before { transform: scaleX(1); }

	/* Hilo narrativo: entra desde el borde superior de la sección */
	html.motion .thread {
		transform: scaleY(0);
		transform-origin: top center;
		transition: transform 0.9s var(--ease) 0.1s;
	}
	html.motion .thread.is-in { transform: scaleY(1); }

	/* ----------------------------------------------------------------------
	   3. Datos clave — las tarjetas suben desde el hero (data-reveal-group)
	   ---------------------------------------------------------------------- */
	html.motion .key-facts [data-reveal-group] > * {
		transform: translateY(26px);
		transition-duration: 0.7s;
		transition-delay: calc(var(--i, 0) * 90ms + 0.35s);
	}

	/* ----------------------------------------------------------------------
	   4. Programa — THE DATA LINE
	   ---------------------------------------------------------------------- */
	.dataline__dot::after {
		content: "";
		position: absolute;
		inset: -9px;
		border-radius: 50%;
		box-shadow: 0 0 22px 5px rgba(252, 193, 0, 0.55);
		opacity: var(--glow, 0);
		pointer-events: none;
	}
	html.motion .dataline__head::before {
		transform: rotate(45deg) scale(0);
		transition: transform 0.5s var(--ease) 0.25s;
	}
	html.motion .dataline__head.is-in::before { transform: rotate(45deg) scale(1); }

	/* Tarjetas-nodo: aparecen al entrar en viewport (IntersectionObserver), nunca dependen del scrub */
	html.motion .dataline__card {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 0.6s var(--ease) 0.15s, transform 0.6s var(--ease) 0.15s;
	}
	html.motion .dataline__node.is-in .dataline__card {
		opacity: 1;
		transform: translateY(0);
	}

	@media (min-width: 1024px) {
		/* Cada segmento se dibuja desde su nodo hacia el siguiente (GSAP anima --seg) */
		html.motion .dataline__node::before {
			transform-origin: left center;
			transform: scaleX(var(--seg, 1));
		}
		html.motion .dataline__dot {
			transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
		}
	}

	@media (max-width: 1023px) {
		/* Stepper vertical: la línea avanza con el scroll (GSAP anima --line), los nodos entran desde la derecha */
		html.motion .dataline::before {
			transform-origin: top center;
			transform: scaleY(var(--line, 1));
		}
		html.motion .dataline__node {
			opacity: 0;
			transform: translateX(14px);
			transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
		}
		html.motion .dataline__node.is-in {
			opacity: 1;
			transform: translateX(0);
		}
		html.motion .dataline__node .dataline__dot {
			opacity: 0;
			transform: translateY(-50%) scale(0.6);
			transition: opacity 0.4s var(--ease) 0.1s, transform 0.45s var(--ease) 0.1s;
		}
		html.motion .dataline__node.is-in .dataline__dot {
			opacity: 1;
			transform: translateY(-50%) scale(1);
			--glow: 0.5;
		}
	}

	/* ----------------------------------------------------------------------
	   5. IA — anillos que orbitan, pulsos que recorren las conexiones, destellos, respiración
	   ---------------------------------------------------------------------- */
	html.motion .ai__img {
		transform-origin: center;
		animation: mbu-breathe 18s ease-in-out infinite;
	}
	html.motion .ai__core { animation: mbu-core 5s ease-in-out infinite; }
	html.motion .ai__ring--1 { animation: mbu-orbit 64s linear infinite; }
	html.motion .ai__ring--2 { animation: mbu-orbit 92s linear infinite reverse; }
	html.motion .ai__ring--3 { animation: mbu-orbit 120s linear infinite; }
	html.motion .ai__net-lines path {
		stroke-dasharray: 140 42;
		animation: mbu-dash 24s linear infinite;
	}
	html.motion .ai__net-halo circle {
		transform-box: fill-box;
		transform-origin: center;
		animation: mbu-halo 6s ease-in-out infinite;
	}
	html.motion .ai__net-halo circle:nth-child(2) { animation-delay: -1.5s; }
	html.motion .ai__net-halo circle:nth-child(3) { animation-delay: -3s; }
	html.motion .ai__net-halo circle:nth-child(4) { animation-delay: -4.5s; }
	html.motion .ai__pulse { animation: mbu-travel 5.5s linear infinite; }
	html.motion .ai__pulse--2 { animation-delay: -1.6s; animation-duration: 6.5s; }
	html.motion .ai__pulse--3 { animation-delay: -3.1s; animation-duration: 7s; }
	html.motion .ai__pulse--4 { animation-delay: -4.4s; animation-duration: 6s; }
	@supports not (offset-path: path("M0 0 L1 1")) {
		.ai__pulse { display: none; }
	}
	html.motion .ai__spark { animation: mbu-spark 7s ease-in-out infinite; }
	html.motion .ai__spark--2 { animation-delay: -1.4s; animation-duration: 8s; }
	html.motion .ai__spark--3 { animation-delay: -2.8s; animation-duration: 6.5s; }
	html.motion .ai__spark--4 { animation-delay: -4.2s; animation-duration: 9s; }
	html.motion .ai__spark--5 { animation-delay: -5.6s; animation-duration: 7.5s; }
	html.motion .ai:not(.is-visible) .ai__img,
	html.motion .ai:not(.is-visible) .ai__core,
	html.motion .ai:not(.is-visible) .ai__ring,
	html.motion .ai:not(.is-visible) .ai__spark,
	html.motion .ai:not(.is-visible) .ai__net * { animation-play-state: paused; }

	@media (min-width: 1024px) {
		.ai__orb,
		.ai__net,
		.ai__chips { will-change: transform; }
	}

	/* ----------------------------------------------------------------------
	   6. Modalidad — reveal de imagen con ligera escala
	   ---------------------------------------------------------------------- */
	html.motion .modes > .mode .mode__img {
		transform: scale(1.08);
		transition: transform 1.2s var(--ease);
		transition-delay: calc(var(--i, 0) * 70ms);
	}
	html.motion .modes.is-in > .mode .mode__img { transform: scale(1); }

	/* ----------------------------------------------------------------------
	   7. Campus — reveal de la fotografía; parallax suave en desktop (GSAP)
	   ---------------------------------------------------------------------- */
	html.motion .campus__photo .campus__img {
		transform: scale(1.06);
		transition: transform 1.4s var(--ease);
	}
	html.motion .campus__photo.is-in .campus__img { transform: scale(1); }
	@media (min-width: 1024px) {
		html.motion .campus__photo.is-in .campus__img {
			height: 114%;
			top: -7%;
			transform: none;
			transition: none;
			will-change: transform;
		}
	}

	/* ----------------------------------------------------------------------
	   8. Vídeos — el póster se acerca al pasar el cursor; el botón late suavemente
	   ---------------------------------------------------------------------- */
	.video__poster { transition: transform 0.8s var(--ease); }
	.video__play-icon { transition: transform 0.3s var(--ease); }
	@media (hover: hover) {
		.video:hover .video__poster { transform: scale(1.05); }
		.video:hover .video__play-icon { transform: scale(1.08); }
	}
	html.motion .video-grid.is-in .video__play-icon { animation: mbu-play-pulse 3.2s ease-in-out 1s infinite; }

	/* ----------------------------------------------------------------------
	   9. Precio — cada segmento se dibuja hacia el siguiente número (GSAP anima --seg);
	      los números se encienden al entrar cada fila en viewport
	   ---------------------------------------------------------------------- */
	html.motion .timeline__seg { transform: scaleY(var(--seg, 1)); }
	html.motion .timeline__item .timeline__dot {
		transform: scale(0.7);
		border-color: rgba(252, 193, 0, 0.35);
		transition: transform 0.45s var(--ease) 0.1s, border-color 0.45s var(--ease) 0.1s;
	}
	html.motion .timeline__item.is-in .timeline__dot {
		transform: scale(1);
		border-color: var(--c-gold-500);
	}

	/* ----------------------------------------------------------------------
	   10. Salidas — el flujo Datos → Analítica → Decisión aparece por pasos
	   ---------------------------------------------------------------------- */
	html.motion .flow > li { transition-delay: calc(var(--i, 0) * 180ms); }

	/* ----------------------------------------------------------------------
	   11. Details / FAQ — fundido corto del contenido (semántica nativa intacta)
	   ---------------------------------------------------------------------- */
	html.motion .disclosure[open] > .disclosure__body { animation: mbu-fade 0.4s var(--ease) both; }

	/* ----------------------------------------------------------------------
	   12. CTA final — cierre de THE DATA LINE (GSAP anima --on, --seg y --lit); la foto respira
	   ---------------------------------------------------------------------- */
	.storyline li::before {
		transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
	}
	html.motion .lead-form {
		box-shadow:
			var(--shadow-lg),
			0 0 0 2px rgba(252, 193, 0, calc(0.6 * var(--lit, 0))),
			0 0 48px rgba(252, 193, 0, calc(0.28 * var(--lit, 0)));
	}
	html.motion .cta-final.is-visible .cta-final__photo-img {
		transform-origin: 50% 40%;
		animation: mbu-breathe 40s ease-in-out infinite;
	}

	/* ----------------------------------------------------------------------
	   13. Header y menú móvil — microinteracciones
	   ---------------------------------------------------------------------- */
	/* Nota: sin backdrop-filter en el header — crearía un containing block para el panel
	   de navegación (position: fixed) y lo rompería en móvil. */
	.brand__logo { transition: opacity 0.3s var(--ease); }
	.brand:hover .brand__logo { opacity: 0.85; }
	html.motion .nav-open .site-nav__list li { animation: mbu-menu-item 0.45s var(--ease) both; }
	html.motion .nav-open .site-nav__list li:nth-child(2) { animation-delay: 0.04s; }
	html.motion .nav-open .site-nav__list li:nth-child(3) { animation-delay: 0.08s; }
	html.motion .nav-open .site-nav__list li:nth-child(4) { animation-delay: 0.12s; }
	html.motion .nav-open .site-nav__list li:nth-child(5) { animation-delay: 0.16s; }
	html.motion .nav-open .site-nav__list li:nth-child(6) { animation-delay: 0.2s; }
	html.motion .nav-open .site-nav__list li:nth-child(7) { animation-delay: 0.24s; }
	html.motion .nav-open .site-nav__list li:nth-child(8) { animation-delay: 0.28s; }
	html.motion .nav-open .site-nav__cta { animation: mbu-rise 0.5s var(--ease) 0.3s both; }

	/* ----------------------------------------------------------------------
	   14. Hover discreto (solo dispositivos con puntero)
	   ---------------------------------------------------------------------- */
	@media (hover: hover) {
		.person,
		.roster__item,
		.dataline__card,
		.mode,
		.key-fact { transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
		.person:hover {
			border-color: rgba(252, 193, 0, 0.45);
			background: rgba(255, 255, 255, 0.06);
		}
		.roster__item:hover { border-color: rgba(252, 193, 0, 0.35); }
		.dataline__card:hover {
			border-color: rgba(252, 193, 0, 0.4);
			background: rgba(255, 255, 255, 0.07);
		}
		.mode:hover {
			transform: translateY(-3px);
			box-shadow: var(--shadow-md);
		}
		.key-fact:hover { border-color: rgba(252, 193, 0, 0.4); }
		.roster__avatar { transition: background-color 0.3s var(--ease); }
		.roster__item:hover .roster__avatar { background: rgba(252, 193, 0, 0.22); }
		.roster__img { transition: filter 0.4s var(--ease); }
		.roster__item:hover .roster__img { filter: grayscale(0); }
		.why__icon,
		.role__icon,
		.mode__icon { transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
		.why__item:hover .why__icon,
		.mode:hover .mode__icon {
			background: var(--c-gold-100);
			color: var(--c-navy-700);
		}
		.role:hover .role__icon {
			background: rgba(252, 193, 0, 0.16);
			color: var(--c-gold-300);
		}
	}

	/* ----------------------------------------------------------------------
	   15. Móvil — menos recorrido, duraciones más cortas
	   ---------------------------------------------------------------------- */
	@media (max-width: 767px) {
		html.motion [data-reveal] {
			transform: translateY(12px);
			transition-duration: 0.5s;
		}
		html.motion [data-reveal-group] > * {
			transform: translateY(10px);
			transition-duration: 0.45s;
			transition-delay: calc(var(--i, 0) * 50ms);
		}
		.hero__picture { animation-duration: 1.2s; }
		.hero__pulse { animation-duration: 12s; }
		html.motion .ai__ring--1 { animation-duration: 80s; }
		html.motion .ai__ring--2 { animation-duration: 110s; }
	}
}

/* Reduced motion: estados finales inmediatos (main.css ya anula animaciones y transiciones) */
@media (prefers-reduced-motion: reduce) {
	.hero__pulse,
	.ai__pulse,
	.hero__scroll { display: none; }
	[data-reveal],
	[data-reveal-group] > *,
	.dataline__card,
	.thread {
		opacity: 1 !important;
		transform: none !important;
	}
	.ai__ring { animation: none !important; }
}

/* Impresión */
@media print {
	[data-reveal],
	[data-reveal-group] > *,
	.dataline__card {
		opacity: 1 !important;
		transform: none !important;
	}
}