/* ============================================================
   DTV AFRICA — animations.css
   All keyframes, scroll animations, entrance effects
   ============================================================ */

/* ── Keyframes ───────────────────────────────────────────────── */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0);     }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0);     }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0);    }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1);    }
}

/* Ticker scroll */
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Button pulse glow */
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); }
  50%       { box-shadow: 0 0 0 10px rgba(0, 230, 118, 0.18), 0 0 28px rgba(0,230,118,0.3); }
}

/* Gold pulse for upsell cards */
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0); border-color: rgba(245,166,35,0.2); }
  50%       { box-shadow: 0 0 0 8px rgba(245, 166, 35, 0.1), 0 0 24px rgba(245,166,35,0.25); border-color: rgba(245,166,35,0.5); }
}

/* Green number glow */
@keyframes numberGlow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50%       { text-shadow: 0 0 20px rgba(0,230,118,0.6); }
}

/* Blinking dot */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* Floating / breathing animation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* Hero grid shimmer */
@keyframes gridShimmer {
  0%   { opacity: 0.3; }
  50%  { opacity: 0.7; }
  100% { opacity: 0.3; }
}

/* Marquee (for ticker duplicate technique) */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Count up flash when value updates */
@keyframes countFlash {
  0%   { color: var(--text-primary); }
  30%  { color: var(--green-primary); }
  100% { color: inherit; }
}

/* Slide up subtle for stat chips */
@keyframes chipIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── Scroll-triggered animation base ────────────────────────── */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variants */
.anim-slide-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.anim-slide-left.is-visible { opacity: 1; transform: translateX(0); }

.anim-slide-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.anim-slide-right.is-visible { opacity: 1; transform: translateX(0); }

.anim-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.anim-scale.is-visible { opacity: 1; transform: scale(1); }

.anim-fade {
  opacity: 0;
  transition: opacity 0.7s ease;
}
.anim-fade.is-visible { opacity: 1; }

/* ── Stagger delays (apply to children inside a .stagger parent) */
.stagger > *:nth-child(1) { transition-delay: 0ms;   }
.stagger > *:nth-child(2) { transition-delay: 100ms; }
.stagger > *:nth-child(3) { transition-delay: 200ms; }
.stagger > *:nth-child(4) { transition-delay: 300ms; }
.stagger > *:nth-child(5) { transition-delay: 400ms; }
.stagger > *:nth-child(6) { transition-delay: 500ms; }

/* ── Hero entry animations (auto-play on load) ───────────────── */
.hero-animate-1 { animation: fadeInDown 0.7s ease 0.1s both; }
.hero-animate-2 { animation: fadeInUp 0.8s ease 0.3s both; }
.hero-animate-3 { animation: fadeInUp 0.8s ease 0.5s both; }
.hero-animate-4 { animation: fadeInUp 0.8s ease 0.65s both; }
.hero-animate-5 { animation: fadeInUp 0.8s ease 0.8s both; }

/* Chip stagger */
.chip-animate-1 { animation: chipIn 0.6s ease 0.9s  both; }
.chip-animate-2 { animation: chipIn 0.6s ease 1.05s both; }
.chip-animate-3 { animation: chipIn 0.6s ease 1.2s  both; }
.chip-animate-4 { animation: chipIn 0.6s ease 1.35s both; }

/* ── Active states & micro-interactions ─────────────────────── */
.hover-lift {
  transition: transform var(--transition), box-shadow var(--transition);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 230, 118, 0.12);
}

.hover-glow:hover { box-shadow: 0 0 24px rgba(0,230,118,0.25); }

/* ── Number glow on counter elements ────────────────────────── */
.counter-el { display: inline-block; }
.counter-el.counting { animation: numberGlow 0.4s ease; }

/* ── Profit result flash ─────────────────────────────────────── */
.result-flash { animation: countFlash 0.5s ease; }

/* ── CTA button persistent pulse ────────────────────────────── */
.btn-pulse-green { animation: btnPulse 2.8s ease-in-out infinite; }
.btn-pulse-gold  {
  animation: goldPulse 2.8s ease-in-out infinite;
  border: 1px solid var(--border-gold);
}

/* ── Progress bar (for scale visualizations) ─────────────────── */
.progress-bar-wrap {
  background: var(--bg-dark);
  border-radius: 100px;
  height: 6px;
  overflow: hidden;
  margin-top: 0.4rem;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--green-soft), var(--green-primary));
  width: 0;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-bar-fill.gold { background: linear-gradient(90deg, var(--gold-dark), var(--gold)); }
.progress-bar-fill.animated { /* set width via JS or inline style when visible */ }

/* ── Skeleton loader (optional, for calculator transitions) ─── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-2) 50%, var(--bg-card) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}