/* ============================================================ Edolab Markets — Efectos "wow" de la home (WEB MASTER 23) Scope: body.home (no afecta al resto de páginas). Tres bloques: 1) Hero cinematográfico 2) Cards vivas 3) Líneas que se dibujan + barras de stats Todo se neutraliza con prefers-reduced-motion (al final). Paleta y variables tomadas del style.css (--brand-accent, etc.). ============================================================ */ /* ============ 1. HERO CINEMATOGRÁFICO ============ */ /* Aurora/mesh animado detrás del hero (pseudo-elemento, sin tocar el HTML) */ body.home #hero { position: relative; overflow: hidden; } body.home #hero::before { content: ""; position: absolute; inset: -12% -6% 0 -6%; z-index: 0; pointer-events: none; background: radial-gradient(620px 440px at 22% 16%, rgba(91, 159, 173, 0.30), transparent 70%), radial-gradient(560px 420px at 82% 78%, rgba(230, 184, 0, 0.16), transparent 70%), radial-gradient(520px 380px at 56% 118%, rgba(91, 159, 173, 0.18), transparent 70%); animation: heroAurora 16s ease-in-out infinite alternate; will-change: transform, opacity; } body.dark-mode.home #hero::before { background: radial-gradient(620px 440px at 22% 16%, rgba(91, 159, 173, 0.22), transparent 70%), radial-gradient(560px 420px at 82% 78%, rgba(230, 184, 0, 0.10), transparent 70%), radial-gradient(520px 380px at 56% 118%, rgba(123, 196, 212, 0.16), transparent 70%); } @keyframes heroAurora { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: .85; } 100% { transform: translate3d(0, -20px, 0) scale(1.07); opacity: 1; } } /* El contenido del hero por encima de la aurora */ body.home #hero .container { position: relative; z-index: 1; } /* TITULAR DEL HERO — sale ENTERO (Edu 22/07/26: "quita la animacion por palabras, que salga el titulo entero"). Ya NO se parte en .hero-word. El block-reveal del h1 se neutraliza; lo unico que queda es el gate anti-parpadeo: `html.hw-js` lo pone el inline del ANTES del primer pintado y el titular permanece oculto hasta que el texto i18n esta aplicado y la tipografia cargada (.hw-ready) -> nada de flash con la fuente de sistema ni recolocacion (FOUT). Sin JS nunca se añade .hw-js -> el titular se ve siempre. */ body.home #hero h1.reveal { opacity: 1; transform: none; } html.hw-js #hero h1:not(.hw-ready), body.hw-js #hero h1:not(.hw-ready) { visibility: hidden; } /* Aparicion de una pieza: un fundido corto, sin desplazamiento ni escalado (cualquier transform/blur aqui recolocaba las lineas o rompia el gradiente del .hero-accent). */ html.hw-js #hero h1.hw-ready { animation: heroTitleIn .45s ease both; } @keyframes heroTitleIn { from { opacity: 0; } to { opacity: 1; } } /* ============ 2. CARDS VIVAS ============ */ /* Reveal con micro-escala (solo en la home) */ body.home .reveal { transform: translateY(24px) scale(.985); } body.home .reveal.is-visible { transform: translateY(0) scale(1); } /* Elevación con muelle + glow teal */ body.home .home-ind-card, body.home .home-chart-card, body.home .approach-card { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; } body.home .home-ind-card:hover, body.home .home-chart-card:hover { transform: translateY(-7px) scale(1); border-color: var(--brand-accent); box-shadow: 0 22px 48px -20px var(--shadow-color), 0 0 0 1px rgba(91, 159, 173, .35); } body.home .approach-card:hover { transform: translateY(-6px) scale(1); box-shadow: 0 22px 48px -22px var(--shadow-color), 0 0 0 1px rgba(91, 159, 173, .28); } /* Zoom sutil de la imagen al pasar el ratón */ body.home .home-ind-card-img img, body.home .home-chart-card-img img { transition: transform .6s cubic-bezier(.2,.8,.2,1); will-change: transform; } body.home .home-ind-card:hover .home-ind-card-img img, body.home .home-chart-card:hover .home-chart-card-img img { transform: scale(1.06); } /* ============ 3. LÍNEAS QUE SE DIBUJAN + BARRAS STATS ============ */ /* Acento teal que se traza bajo cada cabecera de sección al entrar */ body.home .section-label { position: relative; padding-bottom: .55rem; } body.home .section-label::after { content: ""; display: block; height: 2px; width: 46px; margin: .55rem auto 0; background: var(--brand-accent); transform: scaleX(0); transform-origin: center; transition: transform .7s cubic-bezier(.2,.7,.2,1) .15s; } body.home .section-label.is-visible::after { transform: scaleX(1); } /* Barra que se llena bajo cada número de stats cuando la sección entra */ body.home #stats .stat-big, body.home #stats .stat-small { position: relative; overflow: hidden; } body.home #stats .stat-big::after, body.home #stats .stat-small::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--brand-accent), rgba(91, 159, 173, 0)); transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.2,.7,.2,1) .1s; } body.home #stats .stats-primary.is-visible .stat-big::after, body.home #stats .stats-secondary.is-visible .stat-small::after { transform: scaleX(1); } /* ============ ACCESIBILIDAD — desactivar todo con reduced-motion ============ */ @media (prefers-reduced-motion: reduce) { body.home #hero::before { animation: none; } html.hw-js #hero h1:not(.hw-ready), body.hw-js #hero h1:not(.hw-ready) { visibility: visible; } html.hw-js #hero h1.hw-ready { animation: none; } body.home .reveal { transform: none; } body.home .home-ind-card-img img, body.home .home-chart-card-img img { transition: none; } body.home .section-label::after, body.home #stats .stat-big::after, body.home #stats .stat-small::after { transition: none; transform: scaleX(1); } } /* ============================================================ FABLE HERO FX - hero de particulas (Del Campo a la Estructura) ============================================================ */ #hero.hero-fx{ padding:0 !important; overflow:visible !important; } #hero.hero-fx::before{ display:none; } /* Hero unificado (Edu 04/07/26): animacion AUTOMATICA (autoplay al entrar en viewport, hero-fx.js) en PC y movil, SIN scroll-scrub. El stage es estatico y de altura normal, asi que nada se recorta ni hace falta scrollear para ver la curva. */ .hero-fx-wrap{ position:relative; } /* Alto reducido 28/07/26: con 86vh + 4rem, y los 6rem que ya pone #hero, quedaban ~180 px de vacio sobre el kicker y la seccion siguiente no asomaba nunca. A 74vh el hero sigue llenando la pantalla pero deja ver que hay algo debajo, que es lo que invita a bajar. */ .hero-fx-stage{ position:static; min-height:74vh; display:flex; align-items:center; overflow:hidden; padding:2rem 0; } #hero-fx-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; } .hero-fx-stage > .container{ position:relative; z-index:1; width:100%; } #hero.hero-fx .hero-accent{ display:inline-block; will-change:transform,filter; } /* CTAs/enlaces del hero siempre visibles (no dependen de scroll-reveal) */ #hero.hero-fx .hero-links, #hero.hero-fx .hero-actions{ opacity:1 !important; transform:none !important; } @media (prefers-reduced-motion: reduce){ .hero-fx-stage{ min-height:72vh; padding:2.5rem 0; } } @media (max-width:640px){ .hero-fx-stage{ min-height:auto; overflow:visible; display:block; padding:2.25rem 0 3rem; } /* Franja de aire para la curva (30/07/26). En movil el texto llena el hero de arriba abajo: con los 30 px que habia aqui, la animacion no tenia donde resolverse y la linea terminaba cruzando los botones. Con 4.5rem queda un hueco de ~72 px entre el subtitulo y los CTAs, que es donde hero-fx.js cuaja la curva (la franja la MIDE en vivo, no esta escrita en el JS: si este margen cambia, la curva lo sigue). */ #hero.hero-fx .hero-subheadline{ margin-bottom:4.5rem; } }