/* =============================================================
   CONTACT US — page styles
   Scope : .page-contact-us
   Owner : Ahmed
   Depends on: variables.css, global.css, components.css, tailwind.css
   This page is styled with Tailwind utility classes in the markup.
   This file holds ONLY what utilities can't express (keyframes).
   Plain CSS — not imported into tailwind-input.css, no @apply.
   ============================================================= */

/* ── WhatsApp float button: bounce-in + periodic pulse ring ── */
.page-contact-us [data-az-whatsapp-float] {
  opacity: 0;
  transform: scale(0.6);
}

.page-contact-us [data-az-whatsapp-float].is-visible {
  opacity: 1;
  transform: scale(1);
  animation: cu-bounce-in var(--dur-slow) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.page-contact-us [data-az-whatsapp-float].is-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--az-amber-500);
  animation: cu-pulse 4s var(--ease-out) 1.5s infinite;
  pointer-events: none;
}

@keyframes cu-bounce-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes cu-pulse {
  0%   { opacity: 0.8; transform: scale(1); }
  40%  { opacity: 0;   transform: scale(1.6); }
  100% { opacity: 0;   transform: scale(1.6); }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact-us [data-az-whatsapp-float],
  .page-contact-us [data-az-whatsapp-float].is-visible {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .page-contact-us [data-az-whatsapp-float].is-visible::after { animation: none; opacity: 0; }
}