/* ==========================================================================
   Salam Africa — animations.css
   Reveal animations, transitions, Ken Burns, counters
   ========================================================================== *//* ─── REVEAL BASE ─────────────────────────────────────────────────────────── *//* Defined in style.css; here we add extra variants and stagger helpers */

.reveal-scale {
  opacity: 0;
  transform: scale(.97);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal-scale.visible { opacity: 1; transform: none; }

.reveal-fade {
  opacity: 0;
  transition: opacity 1s var(--ease-out);
}
.reveal-fade.visible { opacity: 1; }/* Delay utilities (beyond the 4 in style.css) *//* ─── KEN BURNS ───────────────────────────────────────────────────────────── */
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
.kb { animation: kenburns 10s ease-out forwards; }/* ─── FLOAT ───────────────────────────────────────────────────────────────── */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
.float { animation: float-y 5s ease-in-out infinite; }/* ─── SPIN ────────────────────────────────────────────────────────────────── */
@keyframes spin-slow { to { transform: rotate(360deg); } }/* ─── MARQUEE ─────────────────────────────────────────────────────────────── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 45s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }/* ─── HERO SLIDE TRANSITION ───────────────────────────────────────────────── */
@keyframes hero-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero-slide.active { animation: hero-fade-in .4s ease forwards; }/* ─── PROGRESS BAR ────────────────────────────────────────────────────────── */
@keyframes progress-grow {
  from { width: 0; }
  to   { width: 100%; }
}/* ─── BORDER PULSE ────────────────────────────────────────────────────────── */
@keyframes border-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198,164,108,.35); }
  50%       { box-shadow: 0 0 0 8px rgba(198,164,108,0); }
}/* ─── STICKY BAR ENTRY ────────────────────────────────────────────────────── */
@keyframes slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.sp-sticky-bar.visible { animation: slide-down .35s var(--ease-out) forwards; }