/* ===================================================================== * mawi-anim.css — Capa de movimiento del rediseño mawi.ai * --------------------------------------------------------------------- * Reconstruye (y amplifica) las interacciones que traía Webflow (IX2): * - Reveal on-scroll (fade + slide) con stagger. * - Entrada del hero y del header al cargar. * - Hovers/transiciones amplificados en botones, cards e imágenes. * * Anti-FOUC: el estado inicial oculto SOLO aplica con `html.js` (la clase * se agrega en antes de pintar). Sin JS, nada queda oculto. * Accesibilidad: con prefers-reduced-motion se muestra todo sin movimiento. * Es una hoja aparte del bundle SCSS (styles.css) a propósito: capa de * movimiento aislada, liviana e iterable. * ===================================================================== */ /* --------------------------------------------------------------------- * 1) Reveal on-scroll * ------------------------------------------------------------------- */ :root { --mawi-ease: cubic-bezier(0.16, 0.84, 0.44, 1); --mawi-anim-dur: 0.7s; --mawi-anim-shift: 28px; } html.js .mawi-reveal { opacity: 0; transform: translateY(var(--mawi-anim-shift)); transition: opacity var(--mawi-anim-dur) var(--mawi-ease), transform var(--mawi-anim-dur) var(--mawi-ease); transition-delay: var(--mawi-d, 0ms); will-change: opacity, transform; } html.js .mawi-reveal.mawi-reveal--left { transform: translateX(calc(-1 * var(--mawi-anim-shift))); } html.js .mawi-reveal.mawi-reveal--right { transform: translateX(var(--mawi-anim-shift)); } html.js .mawi-reveal.mawi-reveal--zoom { transform: scale(0.94); } html.js .mawi-reveal.mawi-reveal--fade { transform: none; } html.js .mawi-reveal.is-in { opacity: 1; transform: none; } /* --------------------------------------------------------------------- * 2) Entrada del header al cargar * ------------------------------------------------------------------- */ html.js .mawi-header { animation: mawiHeaderIn 0.6s var(--mawi-ease) both; } @keyframes mawiHeaderIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------------------- * 3) Hovers / transiciones amplificados (siempre activos) * ------------------------------------------------------------------- */ /* Botones: leve elevación + sombra */ .mh-btn, .mp-btn, .wp-element-button { transition: transform 0.2s var(--mawi-ease), box-shadow 0.2s var(--mawi-ease), background-color 0.2s var(--mawi-ease), color 0.2s var(--mawi-ease); } .mh-btn:hover, .mp-btn:hover, .wp-element-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(29, 6, 47, 0.35); } .mh-btn:active, .mp-btn:active, .wp-element-button:active { transform: translateY(0); } /* Cards: elevación al pasar el cursor */ .mh-scen__card, .mh-step, .mh-plan, .mh-stat, .mh-faq__item, .mp-faq__item, .msol-card, .mpar-step, .mp-testi__card, .msol-testi__card { transition: transform 0.3s var(--mawi-ease), box-shadow 0.3s var(--mawi-ease); } .mh-scen__card:hover, .mh-step:hover, .mh-plan:hover, .mh-stat:hover, .msol-card:hover, .mpar-step:hover, .mp-testi__card:hover, .msol-testi__card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -18px rgba(29, 6, 47, 0.4); } /* Imágenes con contenedor: zoom sutil al hover */ .mh-hero__shot, .mh-proof__logos img, .mp-logos img { transition: transform 0.4s var(--mawi-ease); } .mh-hero__shot img { transition: transform 0.6s var(--mawi-ease); will-change: transform; } .mh-hero__shot:hover img { transform: scale(1.03); } /* Logos monocromo -> color al hover (detalle "vivo") */ .mh-proof__logos img, .mp-logos img { opacity: 0.75; } .mh-proof__logos img:hover, .mp-logos img:hover { opacity: 1; transform: translateY(-2px); } /* Enlaces del nav: subrayado animado */ .mawi-nav a { position: relative; transition: color 0.2s var(--mawi-ease); } .mawi-nav a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 0.25s var(--mawi-ease); } .mawi-nav a:hover::after { transform: scaleX(1); } /* --------------------------------------------------------------------- * 4) Transición de paneles (tabs / filtros) al cambiar * ------------------------------------------------------------------- */ [data-panel]:not([hidden]), [data-filter-item]:not([hidden]) { animation: mawiPanelIn 0.45s var(--mawi-ease) both; } @keyframes mawiPanelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------------------- * 5) Accesibilidad — sin movimiento * ------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.js .mawi-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } html.js .mawi-header { animation: none !important; } [data-panel]:not([hidden]), [data-filter-item]:not([hidden]) { animation: none !important; } .mh-btn:hover, .mp-btn:hover, .wp-element-button:hover, .mh-scen__card:hover, .mh-step:hover, .mh-plan:hover, .mh-stat:hover, .msol-card:hover, .mpar-step:hover, .mp-testi__card:hover, .msol-testi__card:hover, .mh-hero__shot:hover img, .mh-proof__logos img:hover, .mp-logos img:hover { transform: none !important; } }