/* Floating WhatsApp - brand brown disc, bottom-left, clear of the iOS/Android
   gesture area via safe-area insets. Tucked away (js: .is-tucked) while the
   contact form or the footer is on screen, so it never covers the form
   submit, the footer links or the credits bar. */
.floating-whatsapp {
  position: fixed;
  left: calc(16px + env(safe-area-inset-left));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 1000;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1.5px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: var(--fg-brown);
  box-shadow: 0 6px 18px rgba(54, 25, 11, .28);
  transition: transform .25s ease, background-color .2s ease, box-shadow .2s ease, opacity .25s ease, visibility 0s linear 0s;
}
.floating-whatsapp img { width: 26px; height: 26px; filter: brightness(0) invert(1); animation: fwa-nudge 6s ease-in-out 2s infinite; }

/* Always-on "here I am" cue: two soft caramel rings ripple out of the disc,
   and the icon gives a small nudge every few seconds. Only pseudo-elements
   and the icon move, so hover/tuck transforms on the button stay intact. */
.floating-whatsapp::before,
.floating-whatsapp::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid var(--fg-caramel);
  box-shadow: 0 0 12px rgba(140, 73, 33, .35);
  opacity: 0;
  pointer-events: none;
  animation: fwa-ripple 3s cubic-bezier(.2, .6, .35, 1) infinite;
}
.floating-whatsapp::after { animation-delay: 1.5s; }
@keyframes fwa-ripple {
  0%   { transform: scale(1);    opacity: .9; }
  80%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.7);  opacity: 0; }
}
@keyframes fwa-nudge {
  0%, 84%, 100% { transform: rotate(0) scale(1); }
  87% { transform: rotate(-12deg) scale(1.08); }
  90% { transform: rotate(10deg) scale(1.08); }
  93% { transform: rotate(-6deg) scale(1.04); }
  96% { transform: rotate(0) scale(1); }
}
.floating-whatsapp:hover::before,
.floating-whatsapp:hover::after,
.floating-whatsapp.is-tucked::before,
.floating-whatsapp.is-tucked::after { animation-play-state: paused; opacity: 0; }
.floating-whatsapp:hover { transform: translateY(-3px); background: var(--fg-caramel); box-shadow: 0 10px 24px rgba(54, 25, 11, .32); }
.floating-whatsapp:focus-visible { outline: 3px solid var(--fg-caramel); outline-offset: 3px; }
.floating-whatsapp.is-tucked {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(.9);
  transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s;
}
@media (min-width: 1024px) {
  .floating-whatsapp { left: calc(28px + env(safe-area-inset-left)); bottom: calc(28px + env(safe-area-inset-bottom)); width: 58px; height: 58px; }
  .floating-whatsapp img { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-whatsapp, .floating-whatsapp.is-tucked { transition: none; }
  .floating-whatsapp:hover { transform: none; }
  .floating-whatsapp img { animation: none; }
  /* static ring keeps the button noticeable without motion */
  .floating-whatsapp::before { animation: none; opacity: .5; transform: scale(1.18); }
  .floating-whatsapp::after { animation: none; }
}