/* ==========================================================================
   Dulcitos Gluten Free  ·  animations.css
   Sólo transform y opacity. Todo se apaga con prefers-reduced-motion.
   ========================================================================== */

@keyframes late {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

@keyframes brillo {
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@keyframes salta-al-carrito {
  0%   { transform: scale(1); }
  30%  { transform: scale(.965); }
  62%  { transform: scale(1.018); }
  100% { transform: scale(1); }
}

/* Un pulso de menta recorre el borde de la tarjeta al agregar al carrito */
@keyframes pulso-menta {
  0%   { box-shadow: inset 0 0 0 1px var(--borde), 0 0 0 0 rgba(174, 235, 229, .85); }
  100% { box-shadow: inset 0 0 0 1px var(--tiffany-300), 0 0 0 16px rgba(174, 235, 229, 0); }
}

/* ---------- Aparición al hacer scroll ----------
   El observador agrega .visible cuando el bloque entra en pantalla. */
@media (prefers-reduced-motion: no-preference) {
  .revelar {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--retraso, 0ms);
    will-change: opacity, transform;
  }
  .revelar.visible {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  /* El sello de la portada respira apenas. Comunica que la página está viva
     sin competir con el título ni con la foto. */
  .hero-sello { animation: flotar 8s ease-in-out infinite; }

  /* Confirmación visual al agregar al carrito: la tarjeta acusa recibo
     y un halo de menta se expande una sola vez. */
  .card-producto.agregado,
  .card-box.agregado { animation: salta-al-carrito .5s cubic-bezier(.34,1.4,.64,1); }
  .card-producto.agregado { animation-name: salta-al-carrito, pulso-menta; animation-duration: .5s, .7s; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .revelar { opacity: 1; transform: none; }
}

/* El encabezado compacto mide 64 px; el margen extra evita que un título
   quede pegado abajo del borde al saltar con un enlace ancla. */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }