/* ============================================
   INTERACOES.CSS — micro-interações aditivas
   Sabor & Cia (template lanchonete)
   Não muda cores, fontes nem estrutura — só
   comportamento no hover e no scroll.
   ============================================ */

/* Transição suave em botões e nos blocos "comanda" */
a, button, .btn, .btn-whatsapp, input[type="submit"],
.comanda, .comanda-item-foto, .galeria-item img {
  transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease, background .3s ease;
}

/* Botões: sobe levemente e ganha sombra ao passar o mouse */
button:hover, .btn:hover, .btn-whatsapp:hover, input[type="submit"]:hover,
a.button:hover, a.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

/* Bloco "comanda" (categoria inteira do cardápio): sobe e ganha sombra */
.comanda:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(14, 71, 73, 0.18);
}

/* Foto de item do cardápio: leve zoom ao passar o mouse na linha */
.comanda-item:hover .comanda-item-foto {
  transform: scale(1.08);
}

/* Galeria: zoom suave (o CSS original já tem, isso só reforça a transição) */
.galeria-item:hover img {
  transform: scale(1.06);
}

/* Links de texto: sublinhado animado (classe opcional link-anim) */
a.link-anim {
  position: relative;
  text-decoration: none;
}
a.link-anim::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: currentColor;
  transition: width .3s ease;
}
a.link-anim:hover::after { width: 100%; }

/* Botão flutuante do WhatsApp: pulso leve */
[class*="whatsapp"], [class*="whats-float"], [id*="whatsapp"] {
  transition: transform .3s ease;
}
[class*="whatsapp"]:hover, [class*="whats-float"]:hover, [id*="whatsapp"]:hover {
  transform: scale(1.08);
}

/* Reveal suave ao rolar a página (o JS adiciona a classe "visible") */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-on-scroll.visible {
  opacity: 1;
  transform: none;
}

/* Respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}