/* ========================================================================== INNOVARH LATAM - capa de movimiento -------------------------------------------------------------------------- Archivo escrito a mano (no sale del build de Vite). Se carga al final del de cada pagina, junto con /motion.js, para que gane por cascada sobre las utilidades de Tailwind del bundle. Criterios: - Entradas suaves, cortas y con una sola direccion (de abajo hacia arriba). - Nada parpadea: lo que esta sobre el pliegue se anima por CSS con animation-fill-mode: both, asi el estado inicial ya aplica en el primer pintado. Lo que esta debajo del pliegue lo activa /motion.js cuando entra en pantalla, y solo si todavia no se vio. - Micro-interacciones de hover cortas (200-380ms) y de bajo recorrido. - Todo se apaga con prefers-reduced-motion: reduce y al imprimir. ========================================================================== */ :root { --ihr-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ihr-reveal-duration: 720ms; --ihr-reveal-shift: 22px; } /* -------------------------------------------------------------------------- 1. Keyframes -------------------------------------------------------------------------- */ @keyframes ihr-rise { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } } @keyframes ihr-hero-media { from { opacity: 0.35; transform: scale(1.055); } to { opacity: 1; transform: none; } } @keyframes ihr-dock { from { opacity: 0; transform: translate3d(0, 110%, 0); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 2. Entrada del primer bloque (hero / encabezado de pagina) Solo CSS: el estado inicial ya esta aplicado en el primer pintado, por eso no hay salto ni destello. Cubre las tres formas de encabezado del sitio: A. hero con imagen de fondo -> home y paginas de servicio B. encabezado navy sin imagen -> sobre nosotros, ubicacion, politicas C. hero de Insights (render por PHP) -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { /* A - la imagen de fondo se asienta desde un leve zoom */ main > section:first-of-type > img:first-child { animation-name: ihr-hero-media; animation-duration: 1500ms; animation-timing-function: var(--ihr-ease); animation-fill-mode: both; animation-delay: 0ms; /* gana por especificidad al escalonado de abajo */ } /* Se usan longhands a proposito: el shorthand "animation" resetearia animation-delay y anularia el escalonado por :nth-child(). */ main > section:first-of-type > img:first-child ~ div:last-child > div:first-child > *, main > section:first-of-type > img:first-child ~ div:last-child > aside, /* B */ main > section:first-of-type > div:only-child > *, /* C */ main.ins-main > section.ins-hero > .ins-shell > * { animation-name: ihr-rise; animation-duration: 780ms; animation-timing-function: var(--ihr-ease); animation-fill-mode: both; } /* Escalonado. Se aplica a cualquier descendiente por posicion: los que no tienen animation-name simplemente ignoran el animation-delay. */ main > section:first-of-type :nth-child(1), main.ins-main > section.ins-hero :nth-child(1) { animation-delay: 80ms; } main > section:first-of-type :nth-child(2), main.ins-main > section.ins-hero :nth-child(2) { animation-delay: 160ms; } main > section:first-of-type :nth-child(3), main.ins-main > section.ins-hero :nth-child(3) { animation-delay: 240ms; } main > section:first-of-type :nth-child(4), main.ins-main > section.ins-hero :nth-child(4) { animation-delay: 320ms; } main > section:first-of-type :nth-child(5), main.ins-main > section.ins-hero :nth-child(5) { animation-delay: 400ms; } main > section:first-of-type :nth-child(n + 6), main.ins-main > section.ins-hero :nth-child(n + 6) { animation-delay: 470ms; } /* La columna lateral entra despues del titulo. */ main > section:first-of-type > img:first-child ~ div:last-child > aside { animation-delay: 360ms; } /* Aviso de cookies: sube desde el borde inferior en vez de aparecer seco. */ section[aria-label="Aviso de cookies"] { animation: ihr-dock 520ms 420ms var(--ihr-ease) both; } } /* -------------------------------------------------------------------------- 3. Revelado al hacer scroll Los atributos los pone /motion.js, asi que sin JS nada queda oculto. [data-ihr-reveal=""] -> pendiente (se oculta de golpe, sin transicion, para que nunca se vea "desaparecer" algo) [data-ihr-reveal="in"] -> entrando Cuando termina la entrada, /motion.js borra el atributo y el elemento vuelve a sus estilos normales (asi el hover no hereda estas duraciones). El selector va repetido a proposito: sube la especificidad por encima de las micro-interacciones del bloque 5, que si no ganarian el transition. -------------------------------------------------------------------------- */ [data-ihr-reveal][data-ihr-reveal][data-ihr-reveal] { opacity: 0; transform: translate3d(0, var(--ihr-reveal-shift), 0); transition: none; } [data-ihr-reveal="in"][data-ihr-reveal][data-ihr-reveal] { opacity: 1; transform: none; transition: opacity var(--ihr-reveal-duration) var(--ihr-ease), transform var(--ihr-reveal-duration) var(--ihr-ease); } /* -------------------------------------------------------------------------- 4. Header fijo -------------------------------------------------------------------------- */ /* El envoltorio de la transicion entre paginas queda en reposo con "translate-y-0", es decir con un transform aplicado. Un transform crea bloque contenedor para los descendientes position: fixed, asi que el header dejaba de estar pegado al viewport y se iba con el scroll. En reposo se anula el transform (durante la salida la clase pasa a translate-y-4 y el selector deja de aplicar, con lo cual la transicion de pagina sigue igual). */ body div[class~="transition-all"][class~="ease-in-out"][class~="translate-y-0"][class~="opacity-100"] { transform: none; } /* Gana sombra al despegarse del inicio */ header[class~="fixed"] { transition: box-shadow 400ms ease, border-color 400ms ease; } html[data-ihr-scrolled] header[class~="fixed"] { box-shadow: 0 1px 2px hsl(var(--foreground) / 0.05), 0 10px 30px -24px hsl(var(--foreground) / 0.55); } @media (prefers-reduced-motion: no-preference) { header[class~="fixed"] img { transform-origin: left center; transition: transform 400ms var(--ihr-ease); } html[data-ihr-scrolled] header[class~="fixed"] img { transform: scale(0.95); } } /* -------------------------------------------------------------------------- 5. Micro-interacciones -------------------------------------------------------------------------- */ /* 5.1 Tarjetas de contenido */ main article[class], main .ins-card { transition: transform 380ms var(--ihr-ease), box-shadow 380ms var(--ihr-ease), border-color 260ms ease, background-color 260ms ease, color 260ms ease; } /* 5.2 Cajas de dato / contacto (bg-card + p-4) */ main section div[class~="bg-card"][class~="p-4"] { transition: border-color 260ms ease, box-shadow 300ms var(--ihr-ease); } /* 5.3 Figuras con imagen */ main figure[class] { transition: box-shadow 380ms var(--ihr-ease), border-color 260ms ease; } /* 5.4 Botones y CTAs del design system */ a[class~="whitespace-nowrap"][class~="justify-center"], button[class~="whitespace-nowrap"][class~="justify-center"] { transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, box-shadow 300ms var(--ihr-ease), transform 250ms var(--ihr-ease); } /* 5.5 Filas de servicios del panel lateral del hero */ main aside a[class~="group"] > span:first-child { transition: transform 320ms var(--ihr-ease); } /* 5.6 Enlaces de navegacion y footer: subrayado que crece */ header nav a[class], footer nav a[class], footer address a[class] { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size 320ms var(--ihr-ease), color 220ms ease; } /* 5.7 Campos de formulario */ main input[class], main textarea[class], main select[class] { transition: border-color 240ms ease, box-shadow 240ms ease, background-color 240ms ease; } @media (hover: hover) and (pointer: fine) { main article[class]:hover, main .ins-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -26px hsl(var(--foreground) / 0.55); } main section div[class~="bg-card"][class~="p-4"]:hover { border-color: hsl(var(--primary) / 0.4); box-shadow: 0 14px 28px -24px hsl(var(--foreground) / 0.5); } main figure[class]:hover { box-shadow: 0 22px 44px -34px hsl(var(--foreground) / 0.6); } a[class~="whitespace-nowrap"][class~="justify-center"]:hover, button[class~="whitespace-nowrap"][class~="justify-center"]:hover { transform: translateY(-1px); } a[class~="whitespace-nowrap"][class~="justify-center"][class*="bg-primary"]:hover, button[class~="whitespace-nowrap"][class~="justify-center"][class*="bg-primary"]:hover { box-shadow: 0 10px 22px -14px hsl(var(--primary) / 0.75); } main aside a[class~="group"]:hover > span:first-child { transform: translateX(4px); } header nav a[class]:hover, footer nav a[class]:hover, footer address a[class]:hover { background-size: 100% 1px; } } a[class~="whitespace-nowrap"][class~="justify-center"]:active, button[class~="whitespace-nowrap"][class~="justify-center"]:active { transform: translateY(0); transition-duration: 80ms; } /* -------------------------------------------------------------------------- 6. Anclas: el scroll suave del router no queda tapado por el header fijo -------------------------------------------------------------------------- */ main[id], section[id], article[id], h2[id], h3[id] { scroll-margin-top: 6rem; } /* -------------------------------------------------------------------------- 7. Accesibilidad: sin movimiento y al imprimir -------------------------------------------------------------------------- */ @media print { [data-ihr-reveal] { opacity: 1 !important; transform: none !important; } } @media (prefers-reduced-motion: reduce) { [data-ihr-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } main article[class]:hover, main .ins-card:hover, main aside a[class~="group"]:hover > span:first-child, a[class~="whitespace-nowrap"][class~="justify-center"]:hover, button[class~="whitespace-nowrap"][class~="justify-center"]:hover, html[data-ihr-scrolled] header[class~="fixed"] img { transform: none; } }