/* ============================================
   INTERACOES.CSS — micro-interações aditivas
   Template Pousada (tag de bagagem)
   Não muda cores, fontes nem estrutura — só
   comportamento no hover e no scroll.
   ============================================ */

/* Transição suave em botões e no card do quarto */
a, button, .btn, .btn-cta, .btn-whatsapp, .tag-btn, input[type="submit"],
.tag-quarto, .tag-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-cta:hover, .btn-whatsapp:hover, .tag-btn: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);
}

/* Card do quarto: sobe e ganha sombra */
.tag-quarto:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(30, 79, 92, 0.22);
}

/* Foto do quarto: zoom suave */
.tag-foto { overflow: hidden; }
.tag-quarto:hover .tag-foto { transform: scale(1.06); }

/* Galeria: zoom suave */
.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; }
}