/* ============================================================================ SISTEMA DE MOVIMIENTO — LUMEN X STUDIO Calibrado en la portada el 05/Sep/2026. Es el lenguaje de animación de todo el sitio: cualquier página nueva parte de aquí, no se inventa curvas. Tres principios, y ninguno es decorativo: 1. NADA SE MUEVE A VELOCIDAD CONSTANTE. Todo entra lanzado y frena largo. Un objeto con inercia no arranca ni se detiene de golpe. 2. TODO REBASA Y VUELVE. El elemento se pasa unos pixeles de su destino, espera un instante casi inmóvil y regresa despacio. Eso es lo que le da peso; sin ello el movimiento se ve barato. 3. LA PAUSA VA A ESCALA DEL RECORRIDO. Una espera de 290ms funciona tras un viaje de 50px y se lee como un enganche tras cruzar la pantalla. La referencia buena es la velocidad de asentamiento: ~5.7 px/s al final. Si la subes, aparece el arrastre; si la bajas, se ve un frenazo. Se respeta prefers-reduced-motion en todos los casos. ========================================================================= */ :root { /* las tres curvas del sistema */ --lxs-lanza: cubic-bezier(.12, .68, .2, 1); /* salida fuerte, frenada larga */ --lxs-transito: cubic-bezier(.4, 0, .6, 1); /* simétrica, para entrar y salir de la espera */ --lxs-asienta: cubic-bezier(.24, .84, .3, 1); /* el regreso final, muy suave */ --lxs-aparece: cubic-bezier(.12, 1, .22, 1); /* fundidos sin desplazamiento */ --lxs-viaje: 1.35s; /* deslizamiento desde fuera del cuadro */ --lxs-fundido: .9s; /* aparición simple */ } /* --------------------------------------------------------------------------- LA CADENA. Los arranques se encadenan en 3 segundos: cada pieza responde en su turno y ninguna aparece a la vez que otra. Los números no son redondos a propósito — un escalonado regular se oye como un metrónomo. ------------------------------------------------------------------------ */ .d3 { animation-delay: 1.13s } /* el cuerpo de texto */ .d5 { animation-delay: 1.64s } /* el bloque de datos */ .d6 { animation-delay: 1.76s } /* la prueba social */ .d7 { animation-delay: 1.90s } /* el remate */ /* --------------------------------------------------------------------------- APARICIÓN SIMPLE. Para lo que no debe desplazarse. ------------------------------------------------------------------------ */ .e { opacity: 0; animation: entra var(--lxs-fundido) var(--lxs-aparece) forwards; } .e-x { transform: translateX(-14px); animation-name: entra-x; } .e-y { transform: translateY(26px); animation-name: entra-y; } @keyframes entra { to { opacity: 1; } } @keyframes entra-x { to { opacity: 1; transform: none; } } @keyframes entra-y { to { opacity: 1; transform: none; } } /* --------------------------------------------------------------------------- DESLIZAMIENTO CORTO. Para texto: viaja 42px y rebasa 5. La espera existe pero es invisible a esta escala, y así debe ser: el texto no debe llamar la atención sobre su propia entrada. ------------------------------------------------------------------------ */ .e-izq { transform: translateX(-42px); animation-name: desliza-izq; animation-timing-function: linear; animation-duration: 1.85s; } @keyframes desliza-izq { 0% { opacity: 0; transform: translateX(-42px); animation-timing-function: cubic-bezier(.15, .72, .26, 1); } 24% { opacity: 1; } 60% { transform: translateX(3.2px); animation-timing-function: cubic-bezier(.4, 0, .6, 1); } /* rebasa */ 66% { transform: translateX(2.8px); animation-timing-function: cubic-bezier(.24, .84, .3, 1); } /* espera */ 100% { opacity: 1; transform: none; } /* asienta */ } /* --------------------------------------------------------------------------- DESLIZAMIENTO LARGO. Para elementos gráficos: entran desde FUERA del cuadro. Sin fundido — aparecen opacos en el instante de su turno y todo el gesto es desplazamiento. Un fundido simultáneo se come el movimiento. Los cuatro tramos, con 2.9s de duración: 0 → 62% cruza la pantalla y frena (1.80s) 62% rebasa 6px 62 → 68% la espera: 0.8px en 174ms 68 → 100% vuelve 5.2px en 928ms → 5.6 px/s ------------------------------------------------------------------------ */ .e-largo { transform: translateX(-104vw); animation-name: desliza-pildoras; animation-timing-function: linear; animation-duration: var(--lxs-viaje); } @keyframes desliza-pildoras { /* Entran desde fuera del cuadro. Cuatro tramos, cada uno con su curva, como se haría con un gráfico de velocidad: lanzamiento y frenada larga, un rebasamiento corto, la espera casi inmóvil, y el regreso lento al sitio. */ 0% { opacity: 1; transform: translateX(-104vw); animation-timing-function: cubic-bezier(.12, .68, .2, 1); } 60% { opacity: 1; transform: translateX(2.9px); animation-timing-function: cubic-bezier(.4, 0, .6, 1); } 66% { opacity: 1; transform: translateX(2.5px); animation-timing-function: cubic-bezier(.24, .84, .3, 1); } 100% { opacity: 1; transform: none; } } /* --------------------------------------------------------------------------- EL GUIÑO. Un filo de luz cruza el llamado a la acción una sola vez, cuando ya está en su sitio. La pastilla no se mueve: solo la recorre un reflejo. Lleva el naranja de marca en el centro del degradado — es la marca guiñando, no un brillo genérico. OJO con la distancia: translateX en porcentaje se mide sobre el PROPIO elemento. Con la banda al 17% del ancho hacen falta 880% para cruzarla entera. Con menos se queda a medio camino y parece congelarse. ------------------------------------------------------------------------ */ .guino { position: relative; overflow: hidden; } .guino::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 17%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 42%, rgba(251,176,59,.55) 58%, rgba(255,255,255,0) 100%); transform: skewX(-19deg) translateX(0); opacity: 0; pointer-events: none; animation: guino 1.05s cubic-bezier(.32, .08, .28, 1) var(--lxs-guino, 5.42s) 1; } @keyframes guino { 0% { opacity: 0; transform: skewX(-19deg) translateX(0); } 9% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: skewX(-19deg) translateX(880%); } } /* --------------------------------------------------------------------------- RESPIRACIÓN. Lo que ya está en su sitio no se queda muerto: el borde late muy despacio, con ciclos largos y desfasados entre sí para que nunca se sincronicen. Es lo que hace que la página se sienta viva y no terminada. ------------------------------------------------------------------------ */ @keyframes aliento-borde { 0%, 100% { border-color: rgba(255,255,255,.18); } 50% { border-color: rgba(255,255,255,.42); } } /* ---------- el cambio de luces de la marca ---------- No es un barrido: el logo EMITE. Una luminaria real no se enciende de golpe —chispea, golpea, titila y deja rescoldo—, y esa irregularidad es lo que la hace creíble. Los tiempos son deliberadamente desiguales: un patrón regular se lee como un parpadeo de error, no como una entrada de luz. Todos los fotogramas llevan las mismas tres sombras y solo cambian su radio y su intensidad: si variara el número, el navegador no puede interpolar y el efecto salta en vez de crecer. */ .marca img { will-change: filter; animation: destello-marca 1.8s linear 3.37s 1; } @keyframes destello-marca { /* Dos cosas a la vez: el halo, ceñido al trazo, y la luminancia del propio logo, que BAJA entre golpe y golpe. En un cambio de luces real el objeto también se apaga, y sobre letras blancas la caída es lo que hace visible la subida. Los tiempos son desiguales a propósito: un patrón regular se lee como parpadeo de error, no como entrada de luz. Las TRES sombras están en todos los fotogramas aunque valgan cero: si cambia el número, el navegador no interpola y el efecto salta. */ 0%, 4% { opacity: 1; filter: drop-shadow(0 0 0px rgba(255,247,232,0)) drop-shadow(0 0 0px rgba(251,176,59,0)) drop-shadow(0 0 0px rgba(251,176,59,0)); } 7% { opacity: 1; filter: drop-shadow(0 0 3.5px rgba(255,247,232,0.8)) drop-shadow(0 0 8px rgba(251,176,59,0.58)) drop-shadow(0 0 13px rgba(251,176,59,0.26)); } 11% { opacity: .42; filter: drop-shadow(0 0 1px rgba(255,247,232,0.1)) drop-shadow(0 0 3px rgba(251,176,59,0.08)) drop-shadow(0 0 5px rgba(251,176,59,0.04)); } 19% { opacity: 1; filter: drop-shadow(0 0 4.6px rgba(255,247,232,1)) drop-shadow(0 0 12.7px rgba(251,176,59,1)) drop-shadow(0 0 21px rgba(251,176,59,0.4)); } 25% { opacity: .38; filter: drop-shadow(0 0 1.2px rgba(255,247,232,0.14)) drop-shadow(0 0 3.5px rgba(251,176,59,0.1)) drop-shadow(0 0 6px rgba(251,176,59,0.05)); } 32% { opacity: 1; filter: drop-shadow(0 0 5.8px rgba(255,247,232,1)) drop-shadow(0 0 17.3px rgba(251,176,59,1)) drop-shadow(0 0 26px rgba(251,176,59,0.5)); } 38% { opacity: .66; filter: drop-shadow(0 0 2.3px rgba(255,247,232,0.52)) drop-shadow(0 0 8px rgba(251,176,59,0.46)) drop-shadow(0 0 12px rgba(251,176,59,0.22)); } 58% { opacity: .92; filter: drop-shadow(0 0 2px rgba(255,247,232,0.28)) drop-shadow(0 0 7px rgba(251,176,59,0.24)) drop-shadow(0 0 10px rgba(251,176,59,0.1)); } 100% { opacity: 1; filter: drop-shadow(0 0 0px rgba(255,247,232,0)) drop-shadow(0 0 0px rgba(251,176,59,0)) drop-shadow(0 0 0px rgba(251,176,59,0)); } } @media (prefers-reduced-motion: reduce) { .marca img { animation: none; } } @media (prefers-reduced-motion: reduce) { .e, .e-x, .e-y, .e-izq, .e-largo { opacity: 1; transform: none; animation: none; } .guino::after { animation: none; } }