/* ================================================================
   ANIMATIONS.CSS — Keyframes y utilidades de movimiento
   ================================================================ */

/* ── Keyframes ───────────────────────────────────────────────── */

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Grain animado: se mueve sutilmente para dar sensación de película */
@keyframes grainShift {
  0%,  100% { transform: translate(0,  0); }
  10%        { transform: translate(-2%, -3%); }
  20%        { transform: translate(-4%,  2%); }
  30%        { transform: translate( 3%, -4%); }
  40%        { transform: translate(-2%,  5%); }
  50%        { transform: translate( 4%, -2%); }
  60%        { transform: translate(-3%,  3%); }
  70%        { transform: translate( 2%,  4%); }
  80%        { transform: translate(-4%, -2%); }
  90%        { transform: translate( 3%,  2%); }
}

/* Cart count bump cuando se agrega un ítem */
@keyframes cartBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* Grain estático — sin animación para evitar borde negro en los bordes */
.grain {
  /* sin animation */
}

/* ── Hero: animaciones de entrada ────────────────────────────── */

.hero-logo {
  opacity: 0;
  animation: fadeUp var(--dur-xslow) 200ms var(--ease-out) forwards;
}

.hero-cta {
  opacity: 0;
  animation: fadeUp var(--dur-slow) 500ms var(--ease-out) forwards;
}

.hero-scroll-hint {
  opacity: 0;
  animation: fadeIn 1s 1000ms var(--ease-out) forwards;
}

/* ── Scroll reveal (clase base) ──────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity   var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Delays de escalonado */
.reveal[data-delay="1"] { transition-delay: 100ms; }
.reveal[data-delay="2"] { transition-delay: 200ms; }
.reveal[data-delay="3"] { transition-delay: 320ms; }

/* ── Product cards ───────────────────────────────────────────── */

/* Estado inicial: invisible + desplazadas */
.product-card {
  opacity: 0;
  transform: translateY(28px);
}

/* Estado final: JS agrega .in-view con stagger */
.product-card.in-view {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity   var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

/* Cart count bounce */
.cart-count.bump {
  animation: cartBump 320ms var(--ease-out);
}

/* ── Hover de micro-interacciones globales ────────────────────── */

/* Evitar que el filtro de productos se vea brusco */
.products-grid {
  transition: opacity 200ms var(--ease-out);
}

.products-grid.filtering {
  opacity: 0;
  pointer-events: none;
}