/* ============================================================
   Corpshore Kenya — Animations
   ============================================================ */

/* ── Hero entrance stagger ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

.hero-badge    { animation: slideInLeft 0.6s ease 0.1s both; }
.hero h1       { animation: fadeInUp    0.7s ease 0.25s both; }
.hero-lead     { animation: fadeInUp    0.7s ease 0.4s  both; }
.hero-actions  { animation: fadeInUp    0.7s ease 0.55s both; }

@media (prefers-reduced-motion: reduce) {
  .hero-badge,
  .hero h1,
  .hero-lead,
  .hero-actions { animation: none; opacity: 1; transform: none; }
}

/* ── Flag stripe entrance ── */
@keyframes stripeExpand {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}
.flag-stripe .stripe-green { animation: stripeExpand 0.5s ease 0.8s  both; }
.flag-stripe .stripe-white { animation: stripeExpand 0.4s ease 0.95s both; }
.flag-stripe .stripe-red   { animation: stripeExpand 0.5s ease 1.05s both; }

@media (prefers-reduced-motion: reduce) {
  .flag-stripe .stripe-green,
  .flag-stripe .stripe-white,
  .flag-stripe .stripe-red { animation: none; }
}

/* ── Stat counter pulse ── */
@keyframes countPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.stat-num.counting { animation: countPulse 0.3s ease; }

/* ── Maasai pattern (CTA dark sections) ── */
@keyframes patternDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 60px 60px; }
}
.cta-banner::before {
  animation: patternDrift 8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cta-banner::before { animation: none; }
}

/* ── SVG map connection lines ── */
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}
.map-line {
  stroke-dasharray: var(--dash-len, 400);
  stroke-dashoffset: var(--dash-len, 400);
}
.map-line.animate {
  animation: drawLine 1.8s ease forwards;
}
.map-line:nth-child(2)  { animation-delay: 0.1s; }
.map-line:nth-child(3)  { animation-delay: 0.2s; }
.map-line:nth-child(4)  { animation-delay: 0.3s; }
.map-line:nth-child(5)  { animation-delay: 0.4s; }
.map-line:nth-child(6)  { animation-delay: 0.5s; }
.map-line:nth-child(7)  { animation-delay: 0.6s; }
.map-line:nth-child(8)  { animation-delay: 0.7s; }
.map-line:nth-child(9)  { animation-delay: 0.8s; }
.map-line:nth-child(10) { animation-delay: 0.9s; }
.map-line:nth-child(11) { animation-delay: 1.0s; }
.map-line:nth-child(12) { animation-delay: 1.1s; }
.map-line:nth-child(13) { animation-delay: 1.2s; }

@keyframes cityPulse {
  0%, 100% { opacity: 0.7; r: 4; }
  50%       { opacity: 1;   r: 6; }
}
.map-city-dot {
  animation: cityPulse 2s ease-in-out infinite;
}
.map-hub-dot {
  animation: cityPulse 1.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .map-line.animate { animation: none; stroke-dashoffset: 0; }
  .map-city-dot, .map-hub-dot { animation: none; }
}

/* ── Card hover lift ── */
@keyframes liftCard {
  to { transform: translateY(-4px); }
}

/* ── Nav drawer slide ── */
@keyframes drawerSlide {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Pillar stagger delays ── */
.pillar-card:nth-child(1) { transition-delay: 0s; }
.pillar-card:nth-child(2) { transition-delay: 0.08s; }
.pillar-card:nth-child(3) { transition-delay: 0.16s; }
.pillar-card:nth-child(4) { transition-delay: 0.24s; }
.pillar-card:nth-child(5) { transition-delay: 0.32s; }

/* ── Trust bar scroll (marquee-style for small screens) ── */
@keyframes trustScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 767px) {
  .trust-bar-inner {
    flex-wrap: nowrap;
    animation: trustScroll 18s linear infinite;
    width: max-content;
  }
  .trust-bar { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .trust-bar-inner { animation: none; flex-wrap: wrap; width: auto; }
}

/* ── WhatsApp float pulse ── */
@keyframes waPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
  50%       { box-shadow: 0 4px 30px rgba(37,211,102,0.7); }
}
.wa-float { animation: waPulse 2.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .wa-float { animation: none; }
}

/* ── Gold rule entrance ── */
@keyframes ruleGrow {
  from { width: 0; }
  to   { width: 56px; }
}
.section-rule.animate { animation: ruleGrow 0.5s ease forwards; }

/* ── Service card hover accent ── */
@keyframes accentSlide {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ── Language pill hover bounce ── */
@keyframes pillBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}
.lang-pill:hover { animation: pillBounce 0.3s ease; }
@media (prefers-reduced-motion: reduce) {
  .lang-pill:hover { animation: none; }
}

/* ── Timeline item reveal ── */
.timeline-item {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.timeline-item.revealed { opacity: 1; transform: translateX(0); }
.timeline-item:nth-child(2) { transition-delay: 0.1s; }
.timeline-item:nth-child(3) { transition-delay: 0.2s; }
.timeline-item:nth-child(4) { transition-delay: 0.3s; }
.timeline-item:nth-child(5) { transition-delay: 0.4s; }
.timeline-item:nth-child(6) { transition-delay: 0.5s; }
@media (prefers-reduced-motion: reduce) {
  .timeline-item { opacity: 1; transform: none; transition: none; }
}