/* ═══════════════════════════════════════════════════════
   ANIMATIONS.CSS — FlowrA Technology Africa Limited
═══════════════════════════════════════════════════════ */

/* ── Loader ─────────────────────────────────────────── */
@keyframes loaderFill {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes logoPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.65; transform: scale(1.04); }
}

/* ── Hero entrance ──────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.a1 { animation: fadeUp 0.85s 0.10s both ease; }
.a2 { animation: fadeUp 0.85s 0.28s both ease; }
.a3 { animation: fadeUp 0.85s 0.46s both ease; }
.a4 { animation: fadeUp 0.85s 0.64s both ease; }
.a5 { animation: fadeUp 0.85s 0.82s both ease; }

/* ── Floating hero words ────────────────────────────── */
@keyframes floatDrift {
  0%   { transform: translate(0px, 0px)   rotate(-1.5deg) scale(1);    }
  25%  { transform: translate(18px, -14px) rotate(0.4deg) scale(1.01); }
  50%  { transform: translate(28px, 6px)  rotate(-0.6deg) scale(0.99); }
  75%  { transform: translate(-6px, -20px) rotate(1.1deg) scale(1.01); }
  100% { transform: translate(32px, -24px) rotate(2deg)  scale(1.02); }
}

/* ── Scroll reveal — single element ────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.from-left  { transform: translateX(-32px); }
.reveal.from-right { transform: translateX(32px);  }
.reveal.scale-up   { transform: scale(0.94) translateY(16px); }
.reveal.visible    { opacity: 1; transform: none; }

/* ── Scroll reveal — staggered group ───────────────── */
.reveal-group > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-group.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:0.00s; }
.reveal-group.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.11s; }
.reveal-group.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.22s; }
.reveal-group.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.33s; }
.reveal-group.visible > *:nth-child(5) { opacity:1; transform:none; transition-delay:0.44s; }
.reveal-group.visible > *:nth-child(6) { opacity:1; transform:none; transition-delay:0.55s; }

/* ── WhatsApp message bubbles ───────────────────────── */
@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.wa-msg { opacity: 0; animation: msgIn 0.45s ease forwards; }
.wa-msg.msg-1 { animation-delay: 0.9s;  }
.wa-msg.msg-2 { animation-delay: 2.0s;  }
.wa-msg.msg-3 { animation-delay: 3.1s;  }
.wa-msg.msg-4 { animation-delay: 4.1s;  }
.wa-msg.msg-5 { animation-delay: 5.2s;  }

/* ── Typing indicator ───────────────────────────────── */
@keyframes typeDot {
  0%, 80%, 100% { transform: scale(0.5); opacity: 0.35; }
  40%           { transform: scale(1.0); opacity: 1.00; }
}

/* ── Hero floating badges ───────────────────────────── */
@keyframes badgePop {
  0%   { opacity: 0; transform: scale(0.6) translateY(10px); }
  70%  { transform: scale(1.06) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.hv-badge { animation: badgePop 0.55s ease both; }
.hv-b1 { animation-delay: 1.0s; }
.hv-b2 { animation-delay: 1.3s; }
.hv-b3 { animation-delay: 1.6s; }

/* ── Pulse (badge dot) ──────────────────────────────── */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,160,23,0.5); }
  60%       { box-shadow: 0 0 0 9px rgba(212,160,23,0); }
}

/* ── Phone glow ─────────────────────────────────────── */
@keyframes glowPulse {
  0%, 100% { opacity: 0.45; transform: translateX(-50%) scale(1);    }
  50%       { opacity: 0.75; transform: translateX(-50%) scale(1.08); }
}

/* ── WhatsApp float bounce ──────────────────────────── */
@keyframes waBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* ── Progress bar glow ──────────────────────────────── */
@keyframes progressGlow {
  0%, 100% { box-shadow: 0 0 6px rgba(212,160,23,0.6); }
  50%       { box-shadow: 0 0 14px rgba(232,184,48,0.9); }
}

/* ── About image float ──────────────────────────────── */
@keyframes imgFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* ── Cursor click ring ──────────────────────────────── */
@keyframes ringClick {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 1;  }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}