/* AREPIN — animations.css
   Efectos añadidos sin tocar estilos existentes.
   Todas las clases usan prefijo fx- para no pisar nada.
   Respeta prefers-reduced-motion globalmente al final. */

/* ─────────────────────────────────────────────
   1. BRASAS flotantes (full-screen, fijas al viewport)
   ───────────────────────────────────────────── */
.fx-embers {
  position: fixed; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}
.fx-ember {
  position: absolute;
  bottom: -12px;
  width: var(--size, 4px);
  height: var(--size, 4px);
  background: var(--ember-color, #ff8a3d);
  border-radius: 50%;
  box-shadow: 0 0 8px #ff6b1a, 0 0 18px rgba(255,107,26,0.55);
  opacity: 0;
  animation: fxRise var(--dur, 10s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}
@keyframes fxRise {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  8%   { opacity: 0.95; }
  85%  { opacity: 0.7; }
  100% { transform: translate(var(--drift, 30px), -110vh) scale(0.3); opacity: 0; }
}

/* ─────────────────────────────────────────────
   2. DISCO giratorio decorativo (fondo hero)
   ───────────────────────────────────────────── */
.fx-grill-bg {
  position: absolute;
  top: -120px; right: -120px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(45deg,
      transparent 0 14px,
      rgba(224,89,14,0.08) 14px 18px);
  animation: fxSpin 90s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}
@keyframes fxSpin { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────
   3. TÍTULO con gradiente fuego animado
   ───────────────────────────────────────────── */
.fx-fire {
  background: linear-gradient(
    92deg,
    #E0590E 0%,
    #F0A800 25%,
    #ff6b1a 50%,
    #F0A800 75%,
    #E0590E 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fxFireShift 5.5s ease-in-out infinite;
}
@keyframes fxFireShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ─────────────────────────────────────────────
   4. PULSE "Abierto ahora" (puntito verde en chip horario)
   ───────────────────────────────────────────── */
.fx-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: #25D366;
  border-radius: 50%;
  margin-right: 6px;
  box-shadow: 0 0 0 0 rgba(37,211,102,0.55);
  animation: fxPulse 2s ease-out infinite;
  vertical-align: middle;
}
@keyframes fxPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.fx-dot.cerrado { background: #ff7070; animation-name: fxPulseRed; }
@keyframes fxPulseRed {
  0%   { box-shadow: 0 0 0 0 rgba(255,112,112,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(255,112,112,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,112,112,0); }
}

/* ─────────────────────────────────────────────
   5. REVEAL on scroll (IntersectionObserver)
   ───────────────────────────────────────────── */
.fx-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.55s cubic-bezier(.2,.8,.2,1),
    transform 0.55s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.fx-reveal.fx-in {
  opacity: 1;
  transform: translateY(0);
}
/* Cascada: cada hermano demora 60ms más */
.fx-reveal.fx-in:nth-child(1) { transition-delay: 0ms; }
.fx-reveal.fx-in:nth-child(2) { transition-delay: 60ms; }
.fx-reveal.fx-in:nth-child(3) { transition-delay: 120ms; }
.fx-reveal.fx-in:nth-child(4) { transition-delay: 180ms; }
.fx-reveal.fx-in:nth-child(5) { transition-delay: 240ms; }
.fx-reveal.fx-in:nth-child(6) { transition-delay: 300ms; }
.fx-reveal.fx-in:nth-child(7) { transition-delay: 360ms; }
.fx-reveal.fx-in:nth-child(8) { transition-delay: 420ms; }

/* ─────────────────────────────────────────────
   6. TILT 3D sutil en hover (cards)
   ───────────────────────────────────────────── */
.fx-tilt {
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s;
}
@media (hover: hover) {
  .fx-tilt:hover {
    transform: perspective(900px) rotateX(2deg) rotateY(-2deg) translateY(-3px);
    box-shadow: 0 14px 32px rgba(224,89,14,0.18), 0 4px 10px rgba(28,10,0,0.12);
  }
}

/* ─────────────────────────────────────────────
   7. SHIMMER del botón principal "Hacer pedido"
   ───────────────────────────────────────────── */
.fx-shimmer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.fx-shimmer::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.38) 50%,
    rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  animation: fxShimmer 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes fxShimmer {
  0%, 40% { left: -60%; }
  100%    { left: 130%; }
}

/* ─────────────────────────────────────────────
   8. CTA "breathing" cuando hay items en carrito
   ───────────────────────────────────────────── */
.fx-breathe {
  animation: fxBreathe 2.4s ease-in-out infinite;
}
@keyframes fxBreathe {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(224,89,14,0.3); }
  50%      { transform: scale(1.035); box-shadow: 0 8px 22px rgba(224,89,14,0.5); }
}

/* ─────────────────────────────────────────────
   9. BUMP al agregar item (feedback táctil)
   ───────────────────────────────────────────── */
@keyframes fxBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.fx-bump { animation: fxBump 0.32s ease; }

/* ─────────────────────────────────────────────
   10. CHIP del hero: rebote al cargar
   ───────────────────────────────────────────── */
@keyframes fxPopIn {
  0%   { opacity: 0; transform: translateY(10px) scale(0.9); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.03); }
  100% { transform: translateY(0) scale(1); }
}
.fx-pop {
  animation: fxPopIn 0.5s cubic-bezier(.2,.8,.2,1) both;
}
.fx-pop:nth-of-type(2) { animation-delay: 0.08s; }
.fx-pop:nth-of-type(3) { animation-delay: 0.16s; }
.fx-pop:nth-of-type(4) { animation-delay: 0.24s; }

/* ─────────────────────────────────────────────
   11. Imagen producto: zoom suave al hover
   ───────────────────────────────────────────── */
.fx-zoom { overflow: hidden; }
.fx-zoom img {
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
@media (hover: hover) {
  .fx-zoom:hover img { transform: scale(1.06); }
}

/* ─────────────────────────────────────────────
   ACCESIBILIDAD — respetar reduced motion
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Desactivar solo animaciones auto-reproducibles (se mueven sin que el usuario haga nada) */
  .fx-embers, .fx-grill-bg { display: none !important; }
  .fx-fire { animation: none; background-position: 50% 50%; }
  .fx-dot, .fx-dot.cerrado { animation: none; }
  .fx-reveal { opacity: 1; transform: none; transition: none; }
  .fx-shimmer::after { display: none; }
  .fx-breathe, .fx-pop { animation: none !important; }
  /* Mantener los hover 3D, zoom y bump al clic (son respuesta a interacción del usuario) */
}