/* ===== ANIMACIONES DE LA TIENDA =====
   Todo se mueve con transform y opacity, que son las dos cosas que el navegador
   dibuja sin esfuerzo (no traban ni en teléfonos viejos). Rápido a propósito:
   nada pasa de 260 ms, para que se sienta vivo y no lento.
   Al final del archivo, todo se apaga para quien pidió menos movimiento en la
   configuración de su teléfono o compu. */

:root {
  --ys-rapido: 140ms;
  --ys-medio: 220ms;
  --ys-suave: cubic-bezier(.2, .9, .3, 1);
  --ys-rebote: cubic-bezier(.2, 1.35, .3, 1);
}

/* El "to" va explícito a propósito: sin él, la animación termina en el estado
   propio del elemento (y las imágenes, que empiezan invisibles, se quedaban
   invisibles para siempre). */
@keyframes ysEntrar {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes ysSalir  { to   { opacity: 0; transform: translateY(4px) scale(.96); } }
@keyframes ysFondoEntra { from { opacity: 0; } }
@keyframes ysFondoSale  { to   { opacity: 0; } }

/* Aparecer "de chiquito a su tamaño", con un rebotito al final. */
@keyframes ysPop {
  0%   { opacity: 0; transform: scale(.82); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

/* Línea que va y viene mientras se espera algo. */
@keyframes ysBarra {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}

/* Brillo que recorre los bloques grises mientras cargan. */
@keyframes ysBrillo {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Latido del paso en el que va el pedido. */
@keyframes ysLatido {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 9px rgba(0, 0, 0, 0); opacity: .85; }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); opacity: 1; }
}

/* Parpadeo suave cuando algo cambió y quieres que se note. */
@keyframes ysDestacar {
  0%   { background-color: rgba(52, 211, 153, .22); }
  100% { background-color: transparent; }
}

.ys-entra { animation: ysEntrar var(--ys-medio) var(--ys-suave) both; }
.ys-sale  { animation: ysSalir var(--ys-rapido) ease-in both; }
.ys-fondo-entra { animation: ysFondoEntra var(--ys-rapido) ease both; }
.ys-fondo-sale  { animation: ysFondoSale var(--ys-rapido) ease both; }
.ys-pop   { animation: ysPop 260ms var(--ys-rebote) both; }

/* Lista que aparece en cascada: cada tarjeta entra un pelín después que la
   anterior. Después de la 14 ya entran juntas, para no hacer esperar. */
.ys-cascada > * { animation: ysEntrar var(--ys-medio) var(--ys-suave) both; }
.ys-cascada > *:nth-child(1)  { animation-delay: 0ms; }
.ys-cascada > *:nth-child(2)  { animation-delay: 30ms; }
.ys-cascada > *:nth-child(3)  { animation-delay: 60ms; }
.ys-cascada > *:nth-child(4)  { animation-delay: 90ms; }
.ys-cascada > *:nth-child(5)  { animation-delay: 115ms; }
.ys-cascada > *:nth-child(6)  { animation-delay: 140ms; }
.ys-cascada > *:nth-child(7)  { animation-delay: 165ms; }
.ys-cascada > *:nth-child(8)  { animation-delay: 185ms; }
.ys-cascada > *:nth-child(9)  { animation-delay: 205ms; }
.ys-cascada > *:nth-child(10) { animation-delay: 225ms; }
.ys-cascada > *:nth-child(11) { animation-delay: 240ms; }
.ys-cascada > *:nth-child(12) { animation-delay: 255ms; }
.ys-cascada > *:nth-child(13) { animation-delay: 270ms; }
.ys-cascada > *:nth-child(n+14) { animation-delay: 285ms; }

/* Imágenes: en vez de aparecer de golpe, entran cuando ya están listas.
   El "salvavidas" las hace visibles solas al segundo y pico, por si el
   JavaScript no llegó a marcarlas: una foto invisible sería peor que una
   foto sin efecto. */
@keyframes ysSalvavidas { to { opacity: 1; } }
.ys-img { opacity: 0; animation: ysSalvavidas 1ms 1.2s forwards; }
.ys-img.ys-lista { opacity: 1; animation: ysEntrar var(--ys-medio) var(--ys-suave) both; }

/* Línea de "trabajando…" */
.ys-barra {
  position: relative;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
.ys-barra::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 30%;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--ys-color, #34d399), transparent);
  animation: ysBarra 1.15s ease-in-out infinite;
}

/* Bloque gris que brilla mientras llegan los datos. */
.ys-esqueleto {
  border-radius: 10px;
  background: linear-gradient(90deg, #131313 25%, #1e1e1e 37%, #131313 63%);
  background-size: 300% 100%;
  animation: ysBrillo 1.3s ease infinite;
}

.ys-latido { animation: ysLatido 1.8s ease-out infinite; }
.ys-destacar { animation: ysDestacar 900ms ease-out; }

/* Aparecer al ir bajando: el bloque espera apagado y entra cuando ya se ve en
   pantalla. Se usa transición (no animación) a propósito: así el estado final
   es siempre "visible", aunque algo salga mal a medio camino.
   El escalonado sale de --i, que pone el JavaScript a cada hijo. */
.ys-revela { opacity: 0; transform: translateY(16px); }
.ys-revela.ys-anima {
  transition: opacity 420ms var(--ys-suave), transform 420ms var(--ys-suave);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.ys-revela.ys-visto { opacity: 1; transform: none; }

/* Botones y tarjetas: un empujoncito al tocarlos. */
.ys-toque { transition: transform var(--ys-rapido) var(--ys-suave); }
.ys-toque:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .ys-entra, .ys-sale, .ys-pop, .ys-cascada > *, .ys-img, .ys-img.ys-lista,
  .ys-barra::after, .ys-esqueleto, .ys-latido, .ys-destacar,
  .ys-fondo-entra, .ys-fondo-sale, .ys-revela {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .ys-revela { transition: none !important; }
  .ys-toque { transition: none !important; }
}