/* ============================================================
   RAADIN SHABAKEH — Keyframes & Animation Utilities
   ============================================================ */

/* Floating device / hero image */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  50%       { transform: translateY(-18px) rotate(1deg); }
}

/* Gold shimmer on dividers */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Hero particle drift */
@keyframes drift-a {
  0%   { transform: translate(0, 0); opacity: 0.3; }
  33%  { opacity: 0.7; }
  100% { transform: translate(40px, -60px); opacity: 0.2; }
}

@keyframes drift-b {
  0%   { transform: translate(0, 0); opacity: 0.2; }
  50%  { opacity: 0.6; }
  100% { transform: translate(-50px, 40px); opacity: 0.3; }
}

@keyframes drift-c {
  0%   { transform: translate(0, 0); opacity: 0.4; }
  40%  { opacity: 0.8; }
  100% { transform: translate(30px, 50px); opacity: 0.2; }
}

/* WhatsApp pulse ring */
@keyframes wa-pulse {
  0%   { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Gold shimmer sweep */
@keyframes gold-sweep {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* Blink / glow pulse */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px var(--blue-glow); }
  50%       { box-shadow: 0 0 40px rgba(26, 108, 244, 0.35); }
}

/* Rotate — used for loading/decorative elements */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Scale in */
@keyframes scale-in {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Slide from bottom */
@keyframes slide-up {
  from { transform: translateY(32px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Particle dots in hero */
.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--blue);
}

.particle:nth-child(1)  { width: 3px; height: 3px; top: 15%; left: 10%; animation: drift-a 12s ease-in-out infinite alternate; }
.particle:nth-child(2)  { width: 2px; height: 2px; top: 70%; left: 80%; animation: drift-b 15s ease-in-out infinite alternate; }
.particle:nth-child(3)  { width: 4px; height: 4px; top: 40%; left: 90%; animation: drift-c 10s ease-in-out infinite alternate; opacity: 0.3; background: var(--gold); }
.particle:nth-child(4)  { width: 2px; height: 2px; top: 85%; left: 20%; animation: drift-a 18s ease-in-out infinite alternate; }
.particle:nth-child(5)  { width: 3px; height: 3px; top: 25%; left: 60%; animation: drift-b 14s ease-in-out infinite alternate; }
.particle:nth-child(6)  { width: 2px; height: 2px; top: 55%; left: 45%; animation: drift-c 16s ease-in-out infinite alternate; background: var(--gold); opacity: 0.4; }
.particle:nth-child(7)  { width: 3px; height: 3px; top: 10%; left: 75%; animation: drift-a 20s ease-in-out infinite alternate; }
.particle:nth-child(8)  { width: 2px; height: 2px; top: 90%; left: 55%; animation: drift-b 11s ease-in-out infinite alternate; }
.particle:nth-child(9)  { width: 4px; height: 4px; top: 60%; left: 5%;  animation: drift-c 13s ease-in-out infinite alternate; opacity: 0.25; }
.particle:nth-child(10) { width: 2px; height: 2px; top: 30%; left: 35%; animation: drift-a 17s ease-in-out infinite alternate; background: var(--gold); }
.particle:nth-child(11) { width: 3px; height: 3px; top: 75%; left: 65%; animation: drift-b 9s ease-in-out infinite alternate; }
.particle:nth-child(12) { width: 2px; height: 2px; top: 5%;  left: 50%; animation: drift-c 22s ease-in-out infinite alternate; }

/* Grid-line decorative background */
.grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(26, 108, 244, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 108, 244, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* Animated underline for links */
.link-gold {
  color: var(--gold);
  position: relative;
  transition: var(--transition);
}

.link-gold::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--gold);
  transition: var(--transition);
}

.link-gold:hover::after {
  width: 100%;
}