/* Animaciones y utilidades simples para hacer la UI más dinámica */
:root { --anim-ease: cubic-bezier(.2,.9,.2,1); }

/* Pop-in para elementos al cargar o revelar */
@keyframes pop-in {
  from { opacity: 0; transform: translateY(18px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
.pop-in { animation: pop-in 760ms var(--anim-ease) both; }

/* Floating sutil (para iconos y elementos decorativos) */
@keyframes floaty { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.floaty { animation: floaty 3.6s ease-in-out infinite alternate; }

/* Imagen dentro de tarjetas: zoom suave on hover */
.product-card .card-img-top { transition: transform 520ms var(--anim-ease), filter 520ms var(--anim-ease); }
.product-card:hover .card-img-top { transform: scale(1.04); filter: saturate(1.06); }

/* Elevación de tarjeta al hover (complementa Index.css) */
.product-card { transition: transform 520ms var(--anim-ease), box-shadow 520ms var(--anim-ease); }
.product-card:hover { transform: translateY(-8px); box-shadow: 0 28px 64px rgba(50,0,90,0.12); }

/* Retrasos utilitarios para animaciones en cascada */
.delay-80 { transition-delay: 80ms; }
.delay-160 { transition-delay: 160ms; }
.delay-240 { transition-delay: 240ms; }
.delay-320 { transition-delay: 320ms; }

/* Reveal helper (cuando JS añade .animate-in) - más marcado para efectos alternativos */
.reveal-strong { opacity:0; transform: translateY(24px); transition: opacity 860ms var(--anim-ease), transform 860ms var(--anim-ease); }
.reveal-strong.animate-in { opacity:1; transform:none; }

/* CTA pulso sutil para llamar la atención (ej: botones de oferta) */
.keyframes pulse-soft { 0% { box-shadow: 0 8px 28px rgba(255,43,80,0.12); } 50% { box-shadow: 0 18px 48px rgba(255,43,80,0.18); } 100% { box-shadow: 0 8px 28px rgba(255,43,80,0.12); } }
.pulse-soft { animation: pulse-soft 2.8s infinite; }
.pulse-soft { animation: pulse-soft 2.8s infinite; }

/* Small helper para mostrar elementos con delay en carga (navbar brand, hero) */
[data-animate-onload] { opacity:0; transform: translateY(8px); transition: opacity 760ms var(--anim-ease), transform 760ms var(--anim-ease); }
[data-animate-onload].animate-in { opacity:1; transform:none; }

/* Mejorar legibilidad en móviles */
@media (max-width:576px){ .product-card .card-img-top { transition: none; } }