/** * MarketAtlas — Animaciones de entrada homepage. * * Scope INTENCIONADAMENTE narrow: solo news cards (.e-loop-item.category-noticias) * y el hero detectado (.ma-block / [data-ma-hero] / .ma-hero-animate / primer * contenedor Elementor top-level). NO auto-tag masivo — la iteración anterior * rompió estilos Elementor; esta no toca nada fuera del ámbito declarado. * * Pre-hide controlado por .ma-anim-ready (inyectada en por inline script * en functions.php): antes del primer paint el ya tiene la clase, así * que no hay flash visible→oculto. Si el main JS no arranca en 3s, el watchdog * del inline script la quita y el contenido se muestra sin animación. * * Solo anima opacity + transform (compositor-friendly, GPU-accelerated). * Respeta prefers-reduced-motion. */ /* ═══════════════════════════════════════════════════════════════════════════ 1) NEWS CARDS — entrada al scroll con stagger El delay real lo inyecta el JS como inline --ma-card-delay en cada card. Si el JS falla totalmente, todas arrancan con delay 0 (efecto simultáneo, no roto). ═══════════════════════════════════════════════════════════════════════════ */ /* Pre-hide UNCONDITIONAL: arranca todas las cards ocultas con slide-up de 60px desde el momento en que .ma-anim-ready esta en . La regla .is-visible (mas abajo) tiene mayor especificidad (4 clases vs 3) + !important, asi que cuando JS marca la card como visible la transicion ocurre. */ html.ma-anim-ready .e-loop-item.category-noticias { opacity: 0 !important; transform: translateY(60px) !important; transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1) var(--ma-card-delay, 0ms), transform 600ms cubic-bezier(0.16, 1, 0.3, 1) var(--ma-card-delay, 0ms) !important; will-change: opacity, transform; } /* Mantengo la regla con :not(.is-visible) (espec. 0,4,1) por defensividad: si algun otro CSS de Elementor inyecta opacity:1 con la misma especificidad que la regla "unconditional" (0,3,1), esta gana por la especificidad del :not(). Misma cinematica (60px). */ html.ma-anim-ready .e-loop-item.category-noticias:not(.is-visible) { opacity: 0 !important; transform: translateY(60px) !important; } html.ma-anim-ready .e-loop-item.category-noticias.is-visible { opacity: 1 !important; transform: translate3d(0, 0, 0) !important; } /* Al acabar, libera will-change para que el hover (translateY -2px) rinda sin conflictos con el will-change de la entrada. */ html.ma-anim-ready .e-loop-item.category-noticias.is-animation-done { will-change: auto; } /* ═══════════════════════════════════════════════════════════════════════════ 2.5) SECCIONES HOME v0.4 (.ma-reveal) — fade-in al scroll Bloque 6. Mismo patrón que las cards: pre-hide + observer (JS) + fallback. Slide-up de 24px, sin stagger inline (entran de una al cruzar viewport). KILL-SWITCH MÓVIL más abajo: en <=768px siempre visibles (lección del bug de v2.9.3 — el contenido NUNCA debe quedar oculto si el JS no dispara). ═══════════════════════════════════════════════════════════════════════════ */ html.ma-anim-ready .ma-reveal:not(.is-visible) { opacity: 0 !important; transform: translate3d(0, 24px, 0) !important; } html.ma-anim-ready .ma-reveal { transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1) !important; will-change: opacity, transform; } html.ma-anim-ready .ma-reveal.is-visible { opacity: 1 !important; transform: translate3d(0, 0, 0) !important; } html.ma-anim-ready .ma-reveal.is-animation-done { will-change: auto; } /* ═══════════════════════════════════════════════════════════════════════════ 3) HERO — entrada inmediata al cargar la página Soporta 4 formas de identificar el hero (primera que encuentre el JS gana): [data-ma-hero] ← data-attribute explícito .ma-hero-animate ← clase CSS para Elementor Advanced → CSS Classes .ma-block ← bloque HTML de MarketAtlas-Block.html (si existe) main .e-con.e-parent:first-of-type ← fallback: primer container Elementor El JS añade .ma-hero-animate al elemento detectado para que este CSS aplique sin depender de qué selector usó el usuario. ═══════════════════════════════════════════════════════════════════════════ */ html.ma-anim-ready [data-ma-hero]:not(.is-visible), html.ma-anim-ready .ma-hero-animate:not(.is-visible) { opacity: 0 !important; transform: translate3d(0, 16px, 0) !important; } html.ma-anim-ready [data-ma-hero], html.ma-anim-ready .ma-hero-animate { transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1) 60ms, transform 800ms cubic-bezier(0.16, 1, 0.3, 1) 60ms !important; will-change: opacity, transform; } html.ma-anim-ready [data-ma-hero].is-visible, html.ma-anim-ready .ma-hero-animate.is-visible { opacity: 1 !important; transform: translate3d(0, 0, 0) !important; } html.ma-anim-ready [data-ma-hero].is-animation-done, html.ma-anim-ready .ma-hero-animate.is-animation-done { will-change: auto; } /* ═══════════════════════════════════════════════════════════════════════════ Accesibilidad — prefers-reduced-motion cancela todo movimiento. ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { html.ma-anim-ready .e-loop-item.category-noticias, html.ma-anim-ready .e-loop-item.category-noticias:not(.is-visible), html.ma-anim-ready .ma-reveal, html.ma-anim-ready .ma-reveal:not(.is-visible), html.ma-anim-ready [data-ma-hero], html.ma-anim-ready [data-ma-hero]:not(.is-visible), html.ma-anim-ready .ma-hero-animate, html.ma-anim-ready .ma-hero-animate:not(.is-visible) { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto !important; } } /* ═══════════════════════════════════════════════════════════════════════════ Responsive — tablet y móvil ════════════════════════════════════════════════════════════════════════════ Decisión: en pantallas <=768px las CARDS de noticias NO animan. Sale más barato visualmente (cards apiladas en 1 columna, scroll lineal corto) y evita problemas en LiteSpeed cache hits / scroll restoration que dejaban cards invisibles. El HERO sí sigue animando — la entrada principal merece el efecto incluso en móvil. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Cards: kill switch — siempre visibles, sin transición ni transform. Cubre las 3 reglas base (unconditional, :not(.is-visible), .is-visible) de un plumazo con !important para batir el desktop. Si una card carga sin que JS marque .is-visible, sigue siendo visible (no flash). */ html.ma-anim-ready .e-loop-item.category-noticias, html.ma-anim-ready .e-loop-item.category-noticias:not(.is-visible), html.ma-anim-ready .e-loop-item.category-noticias.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto !important; } /* Secciones .ma-reveal: MISMO kill switch que las cards. CRÍTICO (lección bug v2.9.3): en móvil el contenido SIEMPRE visible, pase lo que pase con el JS. El fade-in solo aplica en desktop. */ html.ma-anim-ready .ma-reveal, html.ma-anim-ready .ma-reveal:not(.is-visible), html.ma-anim-ready .ma-reveal.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto !important; } /* Hero: mantenemos la animación, pero con slide más sutil para móvil. */ html.ma-anim-ready [data-ma-hero]:not(.is-visible), html.ma-anim-ready .ma-hero-animate:not(.is-visible) { transform: translate3d(0, 12px, 0) !important; } html.ma-anim-ready [data-ma-hero], html.ma-anim-ready .ma-hero-animate { transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1) 40ms, transform 700ms cubic-bezier(0.16, 1, 0.3, 1) 40ms !important; } }