/* elara-motion.css — capa de coreografía on-scroll para el landing de Elara. Aditiva y reversible. PRINCIPIO DE ROBUSTEZ (importante): El compositor del preview puede CONGELAR las transiciones/animaciones CSS disparadas por cambio de clase, dejando el contenido atrapado en opacity:0. Por eso aquí NO usamos transiciones para revelar: el movimiento lo produce elara-motion.js escribiendo estilos inline cuadro a cuadro (basado en tiempo, como un contador), técnica que SÍ corre en el preview y nunca se atasca. Esta hoja sólo: 1) Pre-oculta los elementos antes de pintar (html.motion-armed) para evitar parpadeo — el JS los anima a visible y deja el estado final inline/.in. 2) Define un backstop (html.motion-done) que fuerza visibilidad SOLO si el JS nunca cargó. Si motion.js corre, jamás se activa y las animaciones de scroll se conservan en toda la página. El estado base (sin motion-armed) es SIEMPRE visible. */ @media (prefers-reduced-motion: no-preference) { /* Pre-ocultar (antes del primer pintado, vía script en ) */ html.motion-armed .reveal, html.motion-armed .tick-list li, html.motion-armed .compare tbody tr, html.motion-armed .faq details, html.motion-armed .hero-copy .word { opacity: 0; } html.motion-armed .reveal { transform: translateY(26px); } /* Los teléfonos revelan sólo con opacidad: su transform lo gobierna el parallax */ html.motion-armed .hero-phone.reveal, html.motion-armed .showcase-phone.reveal { transform: none; } html.motion-armed .tick-list li { transform: translateX(-12px); } html.motion-armed .compare tbody tr, html.motion-armed .faq details { transform: translateY(14px); } html.motion-armed .hero-copy .word { display: inline-block; transform: translateY(30px); } /* Estado final en reposo por clase propia .shown (independiente del .in que usa elara-site.js, para que no compitan ni "salten" los elementos). */ html.motion-armed .reveal.shown, html.motion-armed .tick-list li.shown, html.motion-armed .compare tbody tr.shown, html.motion-armed .faq details.shown, html.motion-armed .hero-copy .word.shown { opacity: 1; transform: none; } } /* Backstop: SOLO si motion.js no cargó (lo activa el script del ). Fuerza todo a visible; el contenido nunca depende de una animación. */ html.motion-done .reveal, html.motion-done .tick-list li, html.motion-done .compare tbody tr, html.motion-done .faq details, html.motion-done .hero-copy .word { opacity: 1 !important; transform: none !important; } /* ── Barra de progreso de scroll (decorativa) ── */ .scroll-prog { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: transparent; pointer-events: none; } .scroll-prog > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand), var(--accent)); box-shadow: 0 0 12px -2px color-mix(in oklab, var(--accent) 60%, transparent); } /* ── Armonía de grosor para los iconos Lucide en superficies de marketing ── */ .feature .ico svg { stroke-width: 1.75; } .tick svg { stroke-width: 2.4; } .compare svg { stroke-width: 2.2; } .faq summary .chev { stroke-width: 2; } /* will-change para parallax sin saltos */ [data-parallax] { will-change: transform; }