/* ========================================================================== Tokens de movimiento — Grupo Frisa ESG Set A "Nitido" (aprobado). Fuente unica de verdad para duraciones y curvas. Solo tiempo y curva: NO define color, tipografia, layout ni estructura. Posicion en la cascada: es indiferente. Un var() de custom property se resuelve contra el valor computado en :root, no contra el orden de las hojas, asi que tania.css (que se carga en el de base.html, antes de partials/styles.html) ya lee estos valores aunque este archivo venga despues. Es el mismo mecanismo por el que tania.css usa var(--frisa-navy) estando tokens.css cargado mas abajo. Antes de este archivo habia ~20 timings distintos repartidos entre las hojas de proyecto: `transition: .25s` sin propiedad ni curva, `0.2s linear`, `all 0.3s ease 0.2s`, `all 1s`, `.5s .875s`. Ahora un componente no elige milisegundos: elige a que categoria pertenece. ========================================================================== */ :root { /* --- Duraciones --- */ --t-micro: 140ms; /* color, borde, opacidad. Antes: 250ms */ --t-base: 260ms; /* movimiento de un control: relieve, escala, barra. Antes: 300ms */ --t-move: 620ms; /* desplazamientos largos: carrusel, paneles, volteo. Antes: 500ms */ --t-enter: 520ms; /* entradas de seccion al hacer scroll. Antes: 1000ms (default de animate.css) */ --t-stagger: 90ms; /* escalon entre hermanos de una entrada. Antes: no existia */ /* --- Curvas --- */ /* expo-out: cubre la mayor parte del camino en el primer cuarto del tiempo y planea hasta detenerse. Es la curva que se reconoce a simple vista frente al `ease` del navegador, que va casi recto. */ --e-glide: cubic-bezier(.16, 1, .3, 1); /* in-out expo: para intercambios. Sale despacio, cruza rapido, asienta. */ --e-swap: cubic-bezier(.83, 0, .17, 1); /* micro-feedback: casi recta, con freno corto al final. */ --e-crisp: cubic-bezier(.3, 0, .2, 1); } /* -------------------------------------------------------------------------- Entradas de seccion (wow.js + animate.css) Recuento verificado sobre las plantillas: - 89 elementos con class="wow" y una clase valida de animate.css (fadeInRight 44, fadeInUp 29, fadeInLeft 16). Ninguno trae data-wow-duration, asi que corrian con el default de animate.css: 1s. - 44 atributos data-wow-duration/data-wow-delay, de los cuales 42 estan en elementos SIN class="wow". wow.js selecciona por su boxClass ('wow'), asi que esos 42 son inertes: nunca se leyeron. Se dejan como estan porque quitarlos es ruido de diff sin efecto. Por tanto la linea base real era 1s con el `ease` del navegador, no 2s. Aqui se baja a --t-enter con curva de planeo. El !important es necesario de todos modos: para los 2 elementos que si combinan clase y atributos, wow.js escribe duracion y retardo como estilo INLINE al revelar (customStyle -> element.style.animationDuration), y no hay forma de ganarle a un inline desde una hoja sin !important. NO se usa `animation: none` en ningun caso porque animate.css depende de `animation-fill-mode: both` para dejar al elemento en su estado final. -------------------------------------------------------------------------- */ .wow.animated { animation-duration: var(--t-enter) !important; animation-delay: 0s !important; animation-timing-function: var(--e-glide) !important; } /* Escalon de lectura entre hermanos que entran juntos en una misma fila: el primero entra, los siguientes lo persiguen. Especificidad 0,3,0, gana sobre la regla de arriba (0,2,0) sin necesidad de mas !important que el que ya hace falta para el inline de wow.js. */ .row > .wow:nth-child(2) { animation-delay: calc(var(--t-stagger) * 1) !important; } .row > .wow:nth-child(3) { animation-delay: calc(var(--t-stagger) * 2) !important; } .row > .wow:nth-child(4) { animation-delay: calc(var(--t-stagger) * 3) !important; } /* ========================================================================== DEMO ACOTADA (item 3) — pendiente de tu ok, borrar este bloque para revertir. Diagnostico: el set A dejo las entradas en 520ms con curva de planeo, que es la mitad de lo que tardaban (1s). Medido con fotogramas congelados, a los 130ms el bloque ya esta casi colocado. Es correcto pero se percibe como "no hubo animacion", que es justo lo contrario de lo que se busca aqui. Propuesta: para las ENTRADAS invertir el criterio. En vez de acelerar el barrido lateral de animate.css (fadeInRight recorre el 100% del ancho del propio elemento, un movimiento grande y anticuado), cambiar la geometria a una subida corta y dar mas tiempo para que se vea. Se aplica SOLO a la seccion #agua de Temas ASG, para poder compararla contra #energia y #residuos, que siguen con el comportamiento actual, en el mismo scroll de la misma pagina. ========================================================================== */ @keyframes asgRise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } } #agua .wow.animated { animation-name: asgRise !important; animation-duration: 700ms !important; animation-timing-function: var(--e-glide) !important; } /* -------------------------------------------------------------------------- Respeto por la preferencia del sistema. No existia ninguna regla prefers-reduced-motion en el proyecto. Se usa 1ms en lugar de `none` a proposito: con `animation: none` los elementos .wow perderian el estado final que les da animation-fill-mode y podrian quedarse invisibles. Con 1ms la animacion corre, termina de inmediato y deja el elemento donde debe estar. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }