/**
 * HAFT Uganda — Webflow IX2 animation fallback
 *
 * Webflow exports elements with style="opacity:0" + data-w-id, then IX2 JS
 * animates them in on scroll.  When IX2 can't load its CDN data (offline dev,
 * network race, mismatched page-id) those elements stay invisible.
 *
 * Strategy
 * ─────────
 * 1. CSS: a delayed animation (@keyframes haft-appear) runs on every [data-w-id]
 *    element after HAFT_IX_DELAY seconds. If IX2 fires first it sets opacity via
 *    inline style, which at that point wins because the animation has not yet
 *    started; once the animation starts it simply confirms opacity 1.
 * 2. JS (haft-site.js): IntersectionObserver adds .haft-ix-revealed on elements
 *    still at opacity 0 when they enter the viewport (300ms grace for IX2).
 *    .haft-ix-revealed provides an immediate, smooth reveal.
 *
 * The combination means:
 *   • IX2 works  → runs its own tween, animation is harmless no-op
 *   • IX2 fails  → CSS timer reveals above-fold elements; IO reveals the rest
 */

/* ── Fallback animation ──────────────────────────────────────────────────── */
@keyframes haft-appear {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Trigger after 1.6 s — enough for IX2's network fetch + init cycle. */
[data-w-id] {
  animation: haft-appear 0.55s ease 1.6s both;
}

/*
 * Keep the inline style="opacity:0" visible to IX2 during its init window.
 * animation-fill-mode "both" means it holds the FROM state before the delay
 * — but an inline style always wins, so IX2 can set opacity freely before 1.6 s.
 */

/* ── IntersectionObserver-driven class (JS adds this) ───────────────────── */
.haft-ix-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 0.6s ease, transform 0.6s ease !important;
  animation: none !important;
}

/* Already-visible elements should never be animated again */
.haft-ix-done {
  animation: none !important;
}

/* ── Specific known-problematic sections (belt-and-braces) ──────────────── */
/*
 * These are visible above-the-fold or were commonly reported stuck.
 * Shorter delay so they paint quickly even on slow connections.
 */
.feature-card[data-w-id],
.feature-cta-card[data-w-id],
.home-about-bg-area[data-w-id],
.about-image-wrap[data-w-id],
.about-wrap[data-w-id] {
  animation-delay: 0.9s;
}

.service-title-wrap[data-w-id],
.cases-title-wrap[data-w-id],
.home-event-content-wrap[data-w-id],
.home-event-list-wrap[data-w-id],
.event-cta-image-wrap[data-w-id],
.video-area[data-w-id] {
  animation-delay: 1.2s;
}

/* Banner areas load synchronously — reveal fast */
.banner-title[data-w-id],
.banner-area .banner-content-wrap[data-w-id],
.banner-area[data-w-id] {
  animation-delay: 0.4s;
}

/* ── Reduce-motion preference ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-w-id] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .haft-ix-revealed {
    transition: none !important;
  }
}