/* ============================================================= TRANSITIONS — Challenge Mercado Libre Animación de ENTRADA de la nueva página. El atributo data-nav se setea en antes del primer paint. La animación de SALIDA la controla transitions.js vía inline style. ============================================================= */ /* Punto de inicio según dirección */ html[data-nav="forward"] { --page-from: 100%; } html[data-nav="back"] { --page-from: -25%; } /* Solo anima el contenido, nunca el topbar */ html[data-nav] .page-content { animation: page-enter 200ms cubic-bezier(0, 0, 0.2, 1) both; } @keyframes page-enter { from { transform: translateX(var(--page-from)); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { html[data-nav] .app { animation: none; } }