/* ============================================================================ animations.css — Sistema de animaciones de entrada Cargar SIEMPRE el ultimo (despues de public.css) para poder sobrescribir. COMO FUNCIONA ------------- 1. Pones data-anim="up" en el HTML -> el elemento nace oculto y desplazado. 2. Al entrar en pantalla, el JS le anade la clase .is-visible. 3. El elemento vuelve a su posicion real (transform: none) con transicion. El JS NO decide nada mas. Todo lo de abajo lo controlas tu desde aqui. ========================================================================== */ /* ============================================================================ 1. TOKENS GLOBALES — valores por defecto de TODA la web Cambia aqui y cambia todo. Cada uno se puede pisar por seccion o por elemento (ver apartados 5 y 6). ========================================================================== */ :root { --anim-dur: 1.2s; --anim-ease: cubic-bezier(.22, 1, .36, 1); --anim-delay: 0ms; --anim-lag: 140ms; --anim-dist: 28px; --anim-scale: .94; --anim-rot: 0deg; /* rotacion inicial (ver data-anim-tilt) */ --anim-step: 140ms; } /* ============================================================================ 2. MOTOR — no toques esto salvo que sepas lo que haces El retraso final de cada elemento es la suma de tres cosas: --anim-lag : retraso global (todos los elementos de la web) + --anim-delay : retraso propio (lo pones tu en un elemento concreto) + --anim-stagger: retraso de escalonado (lo calcula el apartado 4) ========================================================================== */ html.js [data-anim] { opacity: 0; --_delay: calc(var(--anim-lag) + var(--anim-delay) + var(--anim-stagger, 0ms)); } html.js [data-anim].is-visible { animation: anim-in var(--anim-dur) var(--anim-ease) var(--_delay) both; } @keyframes anim-in { from { opacity: 0; transform: var(--anim-from, translateY(28px)); } to { opacity: 1; transform: none; } } /* ============================================================================ 3. VARIANTES — de donde viene el elemento Uso:
up sube desde abajo (valor por defecto) down baja desde arriba left entra desde la izquierda right entra desde la derecha zoom-in crece desde pequeno zoom-out encoge desde grande fade solo opacidad, sin movimiento up-left diagonal: desde abajo-izquierda up-right diagonal: desde abajo-derecha La DISTANCIA la controla --anim-dist. Acepta cualquier unidad: 28px -> desplazamiento corto (defecto) 8rem -> medio 45vw -> casi desde el borde de la pantalla 100vw -> desde fuera de la pantalla ========================================================================== */ html.js [data-anim=""], html.js [data-anim="up"] { --anim-from: translateY(var(--anim-dist)) rotate(var(--anim-rot)); } html.js [data-anim="down"] { --anim-from: translateY(calc(var(--anim-dist) * -1)) rotate(var(--anim-rot)); } html.js [data-anim="left"] { --anim-from: translateX(calc(var(--anim-dist) * -1)) rotate(var(--anim-rot)); } html.js [data-anim="right"] { --anim-from: translateX(var(--anim-dist)) rotate(var(--anim-rot)); } html.js [data-anim="zoom-in"] { --anim-from: scale(var(--anim-scale)) rotate(var(--anim-rot)); } html.js [data-anim="zoom-out"] { --anim-from: scale(calc(2 - var(--anim-scale))) rotate(var(--anim-rot)); } html.js [data-anim="fade"] { --anim-from: none; } html.js [data-anim="up-left"] { --anim-from: translate(calc(var(--anim-dist) * -1), var(--anim-dist)) rotate(var(--anim-rot)); } html.js [data-anim="up-right"] { --anim-from: translate(var(--anim-dist), var(--anim-dist)) rotate(var(--anim-rot)); } /* Modificador: anade giro a cualquier variante.
*/ html.js [data-anim][data-anim-tilt] { --anim-rot: -4deg; } /* ============================================================================ 4. ESCALONADO (stagger) — que los hermanos no entren a la vez Se pone en el CONTENEDOR, no en los hijos:
(secuencial: 1,2,3,4...)
(reinicia cada 3 = por fila) Modos: data-stagger -> secuencial. Para listas y secuencias (proceso). data-stagger="col-2" -> reinicia cada 2 elementos (grid de 2 columnas) data-stagger="col-3" -> reinicia cada 3 elementos (grid de 3 columnas) data-stagger="col-4" -> reinicia cada 4 elementos (grid de 4 columnas) El ritmo lo controla --anim-step en el propio contenedor:
========================================================================== */ /* -- Secuencial (hasta 12 hijos; anade mas si los necesitas) -- */ [data-stagger=""] > :nth-child(1) { --anim-stagger: 0ms; } [data-stagger=""] > :nth-child(2) { --anim-stagger: calc(var(--anim-step) * 1); } [data-stagger=""] > :nth-child(3) { --anim-stagger: calc(var(--anim-step) * 2); } [data-stagger=""] > :nth-child(4) { --anim-stagger: calc(var(--anim-step) * 3); } [data-stagger=""] > :nth-child(5) { --anim-stagger: calc(var(--anim-step) * 4); } [data-stagger=""] > :nth-child(6) { --anim-stagger: calc(var(--anim-step) * 5); } [data-stagger=""] > :nth-child(7) { --anim-stagger: calc(var(--anim-step) * 6); } [data-stagger=""] > :nth-child(8) { --anim-stagger: calc(var(--anim-step) * 7); } [data-stagger=""] > :nth-child(9) { --anim-stagger: calc(var(--anim-step) * 8); } [data-stagger=""] > :nth-child(10) { --anim-stagger: calc(var(--anim-step) * 9); } [data-stagger=""] > :nth-child(11) { --anim-stagger: calc(var(--anim-step) * 10); } [data-stagger=""] > :nth-child(12) { --anim-stagger: calc(var(--anim-step) * 11); } /* -- Por filas: cada fila arranca su propia cascada al entrar en pantalla -- */ [data-stagger="col-2"] > :nth-child(2n + 1) { --anim-stagger: 0ms; } [data-stagger="col-2"] > :nth-child(2n + 2) { --anim-stagger: calc(var(--anim-step) * 1); } [data-stagger="col-3"] > :nth-child(3n + 1) { --anim-stagger: 0ms; } [data-stagger="col-3"] > :nth-child(3n + 2) { --anim-stagger: calc(var(--anim-step) * 1); } [data-stagger="col-3"] > :nth-child(3n + 3) { --anim-stagger: calc(var(--anim-step) * 2); } [data-stagger="col-4"] > :nth-child(4n + 1) { --anim-stagger: 0ms; } [data-stagger="col-4"] > :nth-child(4n + 2) { --anim-stagger: calc(var(--anim-step) * 1); } [data-stagger="col-4"] > :nth-child(4n + 3) { --anim-stagger: calc(var(--anim-step) * 2); } [data-stagger="col-4"] > :nth-child(4n + 4) { --anim-stagger: calc(var(--anim-step) * 3); } /* Movil: 1 sola columna, cada tarjeta entra por su propio scroll. Mantener el escalonado aqui solo genera esperas absurdas. */ @media (max-width: 639px) { [data-stagger] > * { --anim-stagger: 0ms; } } /* ============================================================================ 5. AJUSTES POR SECCION — aqui es donde afinas al milimetro Pisa cualquier token dentro del ambito de una seccion. ========================================================================== */ /* -- Servicios: cascada por filas, entrada corta desde abajo -- */ .services { --anim-step: 160ms; } /* -- Proceso: entran casi desde el borde de la pantalla, lento y secuencial -- */ .process { --anim-dist: 40vw; --anim-dur: 1.4s; --anim-step: 180ms; } /* -- Trabajos: zoom sutil, ritmo rapido -- */ .works-grid { --anim-step: 120ms; --anim-scale: .96; } /* IMPORTANTE: con distancias grandes (vw) el elemento se sale del ancho y provoca scroll horizontal. `clip` lo corta sin crear contexto de scroll (a diferencia de `overflow: hidden`, que romperia position: sticky). */ .section, .process, .services, .works-grid { overflow-x: clip; } /* ============================================================================ 6. ACCESIBILIDAD — obligatorio, no lo quites Quien pide menos movimiento ve el contenido sin animacion. ========================================================================== */ @media (prefers-reduced-motion: reduce) { html.js [data-anim], html.js [data-anim].is-visible { opacity: 1; animation: none; } } .works-grid { --anim-step: 250ms }