/* ================================================================
   ANIMATIONS — Scroll-reveal, transitions, keyframes
   WP equivalent: Enqueued animation stylesheet
   ================================================================ */

/* ── Fade-up on scroll ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-delay-5 { transition-delay: .5s; }

/* ── Fade-in ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Slide up ── */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Slide in right ── */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Slide in left ── */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Gold pulse ── */
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,168,83,.4); }
  50%       { box-shadow: 0 0 0 12px rgba(212,168,83,0); }
}

/* ── Rotate slow ── */
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Hero entrance ── */
.hero__eyebrow  { animation: fadeIn .8s ease .2s both; }
.hero__headline { animation: slideUp .9s ease .35s both; }
.hero__sub      { animation: slideUp .9s ease .5s both; }
.hero__btn-row  { animation: slideUp .9s ease .65s both; }
.hero__social-proof { animation: fadeIn .8s ease .9s both; }
.hero__arch     { animation: slideInRight 1s ease .4s both; }

/* ── Kente stripe shimmer ── */
@keyframes kente-shimmer {
  from { background-position: 0 0; }
  to   { background-position: 96px 0; }
}
.kente-stripe { animation: kente-shimmer 3s linear infinite; }

/* ── Loading spinner ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(212,168,83,.2);
  border-top-color: var(--color-secondary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* ── Number count-up trigger class ── */
.count-up { display: inline-block; }