/* ==========================================================
   SUAVIDAD
   ========================================================== */

/* Transición entre páginas: en vez del parpadeo blanco, un fundido.
   Los navegadores que no lo soportan simplemente lo ignoran. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation:eb-salir .18s ease both; }
  ::view-transition-new(root){ animation:eb-entrar .26s cubic-bezier(.22,.61,.36,1) both; }
}
@keyframes eb-salir { to { opacity:0; } }
@keyframes eb-entrar { from { opacity:0; transform:translateY(6px); } }

/* La aparición al bajar se controla con estilo en línea desde JavaScript
   (ver eb-suave.js): así, si el script fallara, no puede quedar nada oculto.
   Aquí solo queda el respeto a "reducir movimiento". */
@media (prefers-reduced-motion: reduce){
  [style*="opacity: 0"]{ opacity:1 !important; transform:none !important; }
}

/* La fila que aparece al instante en el carrito, mientras el servidor
   confirma: entra con un destello suave para que se note que es nueva. */
.eb-optimista{
  animation:eb-nueva .34s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes eb-nueva{
  from{ opacity:0; transform:translateX(-8px); }
  to{ opacity:1; transform:none; }
}
.eb-ocupado{ pointer-events:none; opacity:.55; }

/* El panel del carrito, con una curva más natural al abrir. */
.eb-drawer{ transition:transform .42s cubic-bezier(.22,.61,.36,1) !important; }
.eb-drawer-dim{ transition:opacity .42s ease !important; }