المعايير المعتمدة والمحفوظة لدينا لبناء صفحات الهبوط وتطبيقات الويب

/* تنسيق زر الواتساب النبضي بـ Vanilla CSS */
.whatsapp-magnetic-wrap {
  position: fixed;
  bottom: calc(1.75rem + env(safe-area-inset-bottom));
  left: 1.75rem; /* في الواجهات العربية RTL */
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.whatsapp-btn-core {
  position: relative;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4), 0 0 20px rgba(37, 211, 102, 0.2);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.whatsapp-pulse-ring {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.35);
  pointer-events: none;
  animation: sonarWave 2.8s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.whatsapp-pulse-ring.ring-2 {
  animation-delay: 1.4s;
}

@keyframes sonarWave {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.1); opacity: 0; }
}

// حركة الجاذبية المغناطيسية بـ GSAP
const wrap = document.getElementById('whatsappWrap');
const btn = document.getElementById('whatsappBtn');

if (wrap && btn && window.innerWidth > 1024) {
  const xTo = gsap.quickTo(btn, "x", { duration: 0.35, ease: "power3.out" });
  const yTo = gsap.quickTo(btn, "y", { duration: 0.35, ease: "power3.out" });

  window.addEventListener('mousemove', (e) => {
    const rect = wrap.getBoundingClientRect();
    const cx = rect.left + rect.width / 2;
    const cy = rect.top + rect.height / 2;
    const dx = e.clientX - cx;
    const dy = e.clientY - cy;
    const dist = Math.hypot(dx, dy);

    if (dist < 80) {
      xTo(dx * 0.35);
      yTo(dy * 0.35);
    } else {
      xTo(0);
      yTo(0);
    }
  });
}