/* ========================================================================== ALTAWEB.IA · MOVIMIENTO — CSS puro -------------------------------------------------------------------------- Sustituye a GSAP + ScrollTrigger (116 KB) por keyframes nativos disparados con una clase. DESIGN.md §5 y §9: "sin librería de animación... tu web es tu demo de rendimiento". Un IntersectionObserver de ~1 KB añade .esta-visible al entrar en pantalla. Todo lo demás ocurre aquí, en el compositor: transform, opacity, clip-path y stroke-dashoffset. Ni una propiedad de layout. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · ENTRADA GENÉRICA — DESIGN.md §6: fade + translateY(16px), 400ms, una vez -------------------------------------------------------------------------- */ .aw-js .aw-reveal { opacity: 0; transform: translateY(16px); } .aw-js .aw-reveal.esta-visible { opacity: 1; transform: none; transition: opacity 400ms ease-out, transform 400ms ease-out; } /* Escalonado por posición dentro del grupo. */ .aw-js .aw-reveal.esta-visible:nth-child(2) { transition-delay: 70ms; } .aw-js .aw-reveal.esta-visible:nth-child(3) { transition-delay: 140ms; } .aw-js .aw-reveal.esta-visible:nth-child(4) { transition-delay: 210ms; } .aw-js .aw-reveal.esta-visible:nth-child(5) { transition-delay: 280ms; } .aw-js .aw-reveal.esta-visible:nth-child(6) { transition-delay: 350ms; } .aw-js .aw-reveal.esta-visible:nth-child(7) { transition-delay: 420ms; } /* Filas de servicio: deslizan desde la izquierda. Es una lista, no un grid. */ .aw-js .aw-fila-servicio.aw-reveal { transform: translateX(-24px); } .aw-js .aw-fila-servicio.aw-reveal.esta-visible { transform: none; } /* -------------------------------------------------------------------------- 2 · EL CONSTRUCTOR DEL HERO Una página se ensambla sola. Cada capa entra con su retardo. -------------------------------------------------------------------------- */ .aw-js .aw-constructor .c-marco { stroke-dasharray: 2400; stroke-dashoffset: 2400; } .aw-js .aw-constructor.esta-visible .c-marco { animation: aw-trazo 900ms ease-out forwards; } @keyframes aw-trazo { to { stroke-dashoffset: 0; } } .aw-js .aw-constructor .c-bloque { opacity: 0; transform: scaleY(0); transform-origin: top center; } .aw-js .aw-constructor.esta-visible .c-bloque { animation: aw-bloque 420ms cubic-bezier(.22, 1, .36, 1) forwards; } @keyframes aw-bloque { to { opacity: 1; transform: scaleY(1); } } .aw-js .aw-constructor .c-relleno { opacity: 0; transform: scaleX(0); transform-origin: left center; } .aw-js .aw-constructor.esta-visible .c-relleno { animation: aw-relleno 520ms cubic-bezier(.22, 1, .36, 1) forwards; } @keyframes aw-relleno { to { opacity: 1; transform: scaleX(1); } } .aw-js .aw-constructor .c-acento { opacity: 0; transform: scale(.6); transform-origin: center; } .aw-js .aw-constructor.esta-visible .c-acento { animation: aw-acento 420ms cubic-bezier(.16, 1, .3, 1) forwards; } @keyframes aw-acento { to { opacity: 1; transform: scale(1); } } .aw-js .aw-constructor .c-cursor { opacity: 0; } .aw-js .aw-constructor.esta-visible .c-cursor { animation: aw-cursor 1100ms ease-in-out 2350ms forwards; } @keyframes aw-cursor { 0% { opacity: 0; transform: translate(0, 0); } 25% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 1; transform: translate(42px, -26px); } } /* Retardos: el esqueleto primero, luego el color, luego los acentos. */ .aw-js .aw-constructor.esta-visible .c-bloque:nth-of-type(1) { animation-delay: 620ms; } .aw-js .aw-constructor.esta-visible .c-bloque:nth-of-type(2) { animation-delay: 680ms; } .aw-js .aw-constructor.esta-visible .c-bloque:nth-of-type(3) { animation-delay: 740ms; } .aw-js .aw-constructor.esta-visible .c-bloque:nth-of-type(4) { animation-delay: 800ms; } .aw-js .aw-constructor.esta-visible .c-bloque:nth-of-type(5) { animation-delay: 860ms; } .aw-js .aw-constructor.esta-visible .c-bloque:nth-of-type(6) { animation-delay: 920ms; } .aw-js .aw-constructor.esta-visible .c-bloque:nth-of-type(7) { animation-delay: 980ms; } .aw-js .aw-constructor.esta-visible .c-bloque:nth-of-type(8) { animation-delay: 1040ms; } .aw-js .aw-constructor.esta-visible .c-bloque:nth-of-type(n+9) { animation-delay: 1100ms; } .aw-js .aw-constructor.esta-visible .c-relleno:nth-of-type(1) { animation-delay: 1300ms; } .aw-js .aw-constructor.esta-visible .c-relleno:nth-of-type(2) { animation-delay: 1370ms; } .aw-js .aw-constructor.esta-visible .c-relleno:nth-of-type(3) { animation-delay: 1440ms; } .aw-js .aw-constructor.esta-visible .c-relleno:nth-of-type(4) { animation-delay: 1510ms; } .aw-js .aw-constructor.esta-visible .c-relleno:nth-of-type(n+5) { animation-delay: 1580ms; } .aw-js .aw-constructor.esta-visible .c-acento { animation-delay: 1750ms; } /* Indicador de fase */ .aw-constructor__pasos .c-paso { opacity: .25; } .aw-js .aw-constructor.esta-visible .c-paso[data-paso="1"] { animation: aw-fase 1400ms ease-out 400ms forwards; } .aw-js .aw-constructor.esta-visible .c-paso[data-paso="2"] { animation: aw-fase 1200ms ease-out 1250ms forwards; } .aw-js .aw-constructor.esta-visible .c-paso[data-paso="3"] { animation: aw-fase-fin 600ms ease-out 2300ms forwards; } @keyframes aw-fase { 0% { opacity: .25; } 25% { opacity: 1; } 100% { opacity: .25; } } @keyframes aw-fase-fin { to { opacity: 1; } } /* El bloque principal queda vivo, no congelado. */ .aw-js .aw-constructor.esta-visible .c-hero-fill { animation: aw-relleno 520ms cubic-bezier(.22, 1, .36, 1) 1300ms forwards, aw-latido 2600ms ease-in-out 3000ms infinite alternate; } @keyframes aw-latido { to { opacity: .82; } } /* -------------------------------------------------------------------------- 3 · EL BUSCADOR — la búsqueda se teclea y tu negocio no aparece -------------------------------------------------------------------------- */ .aw-js .aw-serp .aw-serp__query { clip-path: inset(0 100% 0 0); } .aw-js .aw-serp.esta-visible .aw-serp__query { animation: aw-teclear 1100ms steps(20, end) 200ms forwards; } @keyframes aw-teclear { to { clip-path: inset(0 0 0 0); } } .aw-js .aw-serp.esta-visible .aw-serp__caret { animation: aw-caret 1s step-end infinite, aw-ocultar 200ms ease-out 1400ms forwards; } @keyframes aw-ocultar { to { opacity: 0; } } .aw-js .aw-serp [data-serp-item], .aw-js .aw-serp [data-serp-tu] { opacity: 0; transform: translateY(14px); } .aw-js .aw-serp.esta-visible [data-serp-item] { animation: aw-fila 420ms cubic-bezier(.22, 1, .36, 1) forwards; } .aw-js .aw-serp.esta-visible [data-serp-item]:nth-of-type(1) { animation-delay: 1500ms; } .aw-js .aw-serp.esta-visible [data-serp-item]:nth-of-type(2) { animation-delay: 1640ms; } .aw-js .aw-serp.esta-visible [data-serp-item]:nth-of-type(3) { animation-delay: 1780ms; } @keyframes aw-fila { to { opacity: 1; transform: none; } } /* Tu negocio entra el último, y entra roto. */ .aw-js .aw-serp.esta-visible [data-serp-tu] { animation: aw-fila-rota 700ms cubic-bezier(.16, 1, .3, 1) 2150ms forwards; } @keyframes aw-fila-rota { 0% { opacity: 0; transform: translateY(14px) translateX(-6px); } 60% { opacity: 1; transform: translateY(0) translateX(4px); } 100% { opacity: 1; transform: none; } } /* El recorrido del cliente avanza hasta llamar a otro. */ .aw-js .aw-serp.esta-visible .aw-ruta__paso .aw-ruta__icono { animation: aw-paso-activo 400ms ease-out forwards; } .aw-js .aw-serp.esta-visible .aw-ruta__paso:nth-child(1) .aw-ruta__icono { animation-delay: 2400ms; } .aw-js .aw-serp.esta-visible .aw-ruta__paso:nth-child(2) .aw-ruta__icono { animation-delay: 2750ms; } .aw-js .aw-serp.esta-visible .aw-ruta__paso:nth-child(3) .aw-ruta__icono { animation-delay: 3100ms; } .aw-js .aw-serp.esta-visible .aw-ruta__paso:nth-child(4) .aw-ruta__icono { animation-delay: 3450ms; } @keyframes aw-paso-activo { to { color: var(--cyan); border-color: rgba(34, 211, 238, .55); } } .aw-js .aw-serp.esta-visible .aw-ruta__paso--final .aw-ruta__icono { animation-name: aw-paso-perdido; } @keyframes aw-paso-perdido { to { color: #FF8A8A; border-color: rgba(255, 120, 120, .8); } } /* -------------------------------------------------------------------------- 4 · MOVIMIENTO REDUCIDO — DESIGN.md §6: todo a 0ms. No es opcional. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .aw-js .aw-reveal, .aw-js .aw-constructor .c-marco, .aw-js .aw-constructor .c-bloque, .aw-js .aw-constructor .c-relleno, .aw-js .aw-constructor .c-acento, .aw-js .aw-constructor .c-cursor, .aw-js .aw-serp [data-serp-item], .aw-js .aw-serp [data-serp-tu] { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; animation: none !important; transition: none !important; } .aw-js .aw-serp .aw-serp__query { clip-path: none; } .aw-constructor__pasos .c-paso { opacity: 1; } }