/* ==========================================================================
   Lucidez · Transicion direccional entre vistas (FASE 2)
   Usa la View Transition API nativa del navegador. Sin soporte, el router
   cae a un render directo sin animacion (degradacion aceptable).
   ========================================================================== */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur-view);
  animation-timing-function: var(--ease-out);
}

html[data-nav-dir="fwd"]::view-transition-old(root)  { animation-name: lux-slide-out-left; }
html[data-nav-dir="fwd"]::view-transition-new(root)  { animation-name: lux-slide-in-right; }
html[data-nav-dir="back"]::view-transition-old(root) { animation-name: lux-slide-out-right; }
html[data-nav-dir="back"]::view-transition-new(root) { animation-name: lux-slide-in-left; }

@keyframes lux-slide-out-left  { to   { transform: translateX(-14px); opacity: 0; } }
@keyframes lux-slide-out-right { to   { transform: translateX(14px);  opacity: 0; } }
@keyframes lux-slide-in-right  { from { transform: translateX(14px);  opacity: 0; }
                                  to   { transform: translateX(0);     opacity: 1; } }
@keyframes lux-slide-in-left   { from { transform: translateX(-14px); opacity: 0; }
                                  to   { transform: translateX(0);     opacity: 1; } }