/*
============================================================
ANDERSON DAVID S.A.C. — Capa de animación
Ag.6 UI/UX · Altive Solutions · 07/06/2026
Weighting: Jakub Krehel (primary) · Jhey Tompkins (secondary)
Emil Kowalski (nav, high-freq interactions)
Importar en DESPUÉS de main.css:
ÍNDICE:
0. Tokens de motion
1. Hero — entrada orquestada
2. Navbar — blur al scroll
3. Metric bar — spring enter + counter
4. Service cards — borde perimetral animado
5. Diferenciadores — stagger pronunciado
6. CTA banner — tratamiento estático mejorado (ver nota)
7. Flota — galería reveal escalonado
8. Nosotros — timeline reveal
9. Cobertura — mapa puntos secuenciales
10. Accessibility — prefers-reduced-motion (GLOBAL, obligatorio)
============================================================
*/
/* ─── 0. TOKENS DE MOTION ────────────────────────────────── */
:root {
/* Curvas — nunca usar bare ease/ease-in-out en animaciones */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--spring-snappy: cubic-bezier(0.34, 1.56, 0.64, 1); /* leve overshoot — industrial, no playful */
--spring-snappy-polished: cubic-bezier(0.32, 1.64, 0.62, 1); /* overshoot algo más perceptible (metric bar) */
--spring-smooth: cubic-bezier(0.22, 1, 0.36, 1); /* sin overshoot — para elementos grandes */
/* Duraciones base */
--dur-xs: 120ms;
--dur-sm: 200ms;
--dur-md: 340ms;
--dur-lg: 480ms;
--dur-hero: 620ms;
/* Stagger increments */
--stagger-hero: 100ms;
--stagger-diff: 100ms;
--stagger-gal: 60ms;
--stagger-map: 300ms;
}
/* ─── 1. HERO — ENTRADA ORQUESTADA ──────────────────────── */
/*
Archivo: css/home.css (o el CSS de index.html)
Selector padre: .hero-content (contenedor del texto del hero)
Qué hace: cada hijo entra con opacity + translateY + blur en secuencia.
Jakub: blur como señal de materialización, no solo fade.
Los delays se asignan via data-attr para que JS no tenga que tocarlos.
HTML esperado:
GPS 24/7
Carga Pesada...
21 unidades...
...
*/
[data-hero-item] {
opacity: 0;
transform: translateY(14px);
filter: blur(4px);
animation: hero-reveal var(--dur-hero) var(--ease-out-expo) forwards;
animation-fill-mode: both; /* retiene estado inicial ANTES de que empiece */
}
[data-hero-item="0"] { animation-delay: calc(var(--stagger-hero) * 0); }
[data-hero-item="1"] { animation-delay: calc(var(--stagger-hero) * 1); }
[data-hero-item="2"] { animation-delay: calc(var(--stagger-hero) * 2); }
[data-hero-item="3"] { animation-delay: calc(var(--stagger-hero) * 3); }
@keyframes hero-reveal {
from {
opacity: 0;
transform: translateY(14px);
filter: blur(4px);
}
to {
opacity: 1;
transform: translateY(0);
filter: blur(0px);
}
}
/* ─── 2. NAVBAR — BLUR AL SCROLL ────────────────────────── */
/*
Archivo: css/main.css o css/navbar.css
JS necesario: añadir clase .is-scrolled al