/* ==========================================================================
   MSV Nutrition · Motion
   Solo se aplica con la clase .js-motion (la añade el <head> si la persona
   no pidió movimiento reducido). Sin JS o con movimiento reducido, todo se ve
   estático y completo.
   ========================================================================== */

/* Lenis (scroll suave en escritorio) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }

/* Ocultar lo que anima la intro antes de que cargue el JS (evita parpadeo) */
.js-motion .hero-home__copy > *,
.js-motion .hero-home__media,
.js-motion .page-hero__copy > *,
.js-motion .page-hero__media,
.js-motion .faq-hero .wrap > *,
.js-motion .site-header .brand,
.js-motion .main-nav li,
.js-motion .site-header__cta,
.js-motion .menu-toggle:not(.mobile-menu .menu-toggle) { opacity: 0; visibility: hidden; }

/* Máscaras de líneas para los titulares (holgura para tildes y descendentes) */
.split-line-mask, .line-mask { display: block; padding: 0.14em 0.06em; margin: -0.14em -0.06em; }
.line-mask { overflow: clip; }
.split-line { will-change: transform; }

/* Brillo del titular «Tu propio plan.» */
.js-motion .hero-home__title .is-soft {
	background-image: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.95) 50%, transparent 62%), linear-gradient(180deg, #e7e8ea 10%, #b8bbbf 95%);
	background-size: 260% 100%, 100% 100%;
	background-position: var(--shine, 140%) 0, 0 0;
	background-repeat: no-repeat;
}

/* Imágenes con parallax: propiedades independientes para no pisar :hover */
.js-motion .mx-img { scale: var(--img-s, 1.12); translate: 0 var(--py, 0%); }
.js-motion .hero-home__media img { scale: var(--img-s, 1); }

/* Encabezado inteligente: se oculta al bajar, aparece al subir */
.site-header { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, background-color 0.3s ease; }
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(22, 24, 25, 0.04), 0 10px 30px rgba(22, 24, 25, 0.06); }
.site-header.is-hidden { transform: translateY(calc(-100% - 2px)); }
.admin-bar .site-header.is-hidden { transform: translateY(calc(-100% - 34px)); }

/* Barra de progreso de lectura */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 80; height: 2px; background: #fff; mix-blend-mode: difference; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.admin-bar .scroll-progress { top: 32px; }

/* Conectores de «Cómo funciona» dibujados con scroll */
.step:not(:last-child)::after { transform-origin: left center; transform: scaleX(var(--draw, 1)); }
.step:not(:last-child)::before { opacity: var(--draw, 1); }

/* Botones magnéticos y flecha que «sale y vuelve» al pasar el cursor */
.is-magnetic { transition-property: background-color, color, border-color !important; will-change: transform; }
@media (hover: hover) and (pointer: fine) {
	.btn:hover .icon-arrow-up-right, .link-arrow:hover .icon-arrow-up-right, .story-card__cta:hover .icon-arrow-up-right { animation: mx-arrow 0.55s cubic-bezier(0.6, 0, 0.2, 1); }
	.btn:hover .icon-arrow-right { animation: mx-arrow-r 0.55s cubic-bezier(0.6, 0, 0.2, 1); }
	.goal-card__media img, .pillar-card img, .route-card__img img, .story-card > img { transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
	.pillar-card:hover img, .story-card:hover > img { transform: scale(1.04); }
}
@keyframes mx-arrow { 45% { transform: translate(110%, -110%); opacity: 0; } 46% { transform: translate(-110%, 110%); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes mx-arrow-r { 45% { transform: translateX(120%); opacity: 0; } 46% { transform: translateX(-120%); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* Acordeones: el JS anima la altura; el signo gira */
.faq__toggle { transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.faq__item[open] .faq__toggle { transform: rotate(180deg); }

/* Diálogo de historia */
@media (prefers-reduced-motion: no-preference) {
	.story-dialog[open] { animation: mx-dialog 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
	.story-dialog[open]::backdrop { animation: mx-fade 0.4s ease; }
	.mobile-menu:not([hidden]) { animation: mx-fade 0.3s ease; }
}
@keyframes mx-dialog { from { opacity: 0; transform: translateY(24px) scale(0.97); } }
@keyframes mx-fade { from { opacity: 0; } }

/* Diagramas de compuestos: movimiento continuo y discreto */
@media (prefers-reduced-motion: no-preference) {
	.dg-spin { transform-box: view-box; animation: dg-spin 46s linear infinite; }
	.dg-spin--rev { animation-direction: reverse; animation-duration: 70s; }
	.dg-pulse { transform-box: fill-box; transform-origin: center; animation: dg-pulse 4.8s ease-in-out infinite; }
	.dg-float { transform-box: fill-box; animation: dg-float 6s ease-in-out infinite; }
	.dg-float--rev { animation-delay: -3s; }
	.stack-card svg [stroke-dasharray], .research-strip svg [stroke-dasharray] { animation: dg-dash 2.8s linear infinite; }
}
@keyframes dg-spin { to { transform: rotate(360deg); } }
.stack-card svg { overflow: visible; }
@keyframes dg-pulse { 50% { transform: scale(1.06); } }
@keyframes dg-float { 50% { transform: translateY(-5px); } }
@keyframes dg-dash { to { stroke-dashoffset: -24; } }

/* Transición suave entre páginas (navegadores compatibles; sin JS ni retrasos) */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	.site-header { view-transition-name: msv-header; }
	::view-transition-old(root) { animation: mx-vt-out 0.28s cubic-bezier(0.4, 0, 1, 1) both; }
	::view-transition-new(root) { animation: mx-vt-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
}
@keyframes mx-vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes mx-vt-in { from { opacity: 0; transform: translateY(18px); } }

@media (prefers-reduced-motion: reduce) {
	.site-header { transition: none; }
	.scroll-progress { display: none; }
}