/* NEBA — efectos de entrada, adaptados del Vault de Arlan (MIT): "Ghosty reveal" (hero desenfocado que se enfoca) y "Fade motion" (bloques que aparecen al scrollear). Todo está detrás de la clase .fx, que effects.js agrega a sólo con JS + IntersectionObserver y sin prefers-reduced-motion; sin .fx la página queda estática y completa. */ @media (prefers-reduced-motion: no-preference) { /* ── Ghosty reveal ───────────────────────────────────────────── .fx-ghosty: los hijos directos entran en cascada. .fx-ghosty-item: un solo elemento, con delay intermedio. backwards: oculto sólo durante el delay; al terminar, la animación deja de aplicar y el elemento queda con sus estilos naturales. */ .fx .fx-ghosty > *, .fx .fx-ghosty-item { animation: fx-ghosty 800ms var(--ease-out) backwards; } .fx .fx-ghosty > :nth-child(2) { animation-delay: 90ms; } .fx .fx-ghosty > :nth-child(3) { animation-delay: 180ms; } .fx .fx-ghosty > :nth-child(4) { animation-delay: 270ms; } .fx .fx-ghosty > :nth-child(n+5) { animation-delay: 360ms; } .fx .fx-ghosty-item { animation-delay: 200ms; } @keyframes fx-ghosty { from { opacity: 0; filter: blur(14px); transform: translateY(10px); } 65% { filter: blur(3px); } to { opacity: 1; filter: blur(0); transform: none; } } /* ── Fade motion ─────────────────────────────────────────────── [data-fx]: el bloque aparece cuando entra al viewport (effects.js le agrega .fx-in). */ .fx [data-fx] { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); } .fx [data-fx].fx-in { opacity: 1; transform: none; } /* [data-fx-stagger]: el bloque no se oculta; sus hijos directos entran en cascada (cards del catálogo). effects.js agrega .fx-done al terminar la entrada: sin eso, un hijo que pasa por display:none y vuelve (p. ej. el filtro de /granos) reiniciaría la animación con su delay. */ .fx [data-fx-stagger]:not(.fx-in) > * { opacity: 0; } .fx [data-fx-stagger].fx-in:not(.fx-done) > * { animation: fx-fade 600ms var(--ease-out) backwards; } .fx [data-fx-stagger].fx-in > :nth-child(2) { animation-delay: 60ms; } .fx [data-fx-stagger].fx-in > :nth-child(3) { animation-delay: 120ms; } .fx [data-fx-stagger].fx-in > :nth-child(4) { animation-delay: 180ms; } .fx [data-fx-stagger].fx-in > :nth-child(5) { animation-delay: 240ms; } .fx [data-fx-stagger].fx-in > :nth-child(n+6) { animation-delay: 300ms; } @keyframes fx-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } }