/* ============================================================
   ANIMATIONS.CSS — Scroll-reveal, entrance & hover effects
   MOBILE FIRST: animations are lighter on mobile, richer on desktop
   Waterlight Africa Investments
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   SCROLL-REVEAL — data-animate attribute
   Usage: <div data-animate="fade-up"> ... </div>
═══════════════════════════════════════════════════════════ */

/* Mobile: simpler fade only (no translate) — saves battery,
   avoids jank on low-end phones */
[data-animate] {
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.50s ease;
}
[data-animate].is-visible {
  opacity: 1;
  transform: none !important;
}

/* Desktop: full translate + fade */
@media (min-width: 640px) {
  [data-animate] {
    will-change: opacity, transform;
    transition: opacity 0.60s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.60s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  [data-animate="fade-up"]    { transform: translateY(28px); }
  [data-animate="fade-down"]  { transform: translateY(-28px); }
  [data-animate="fade-left"]  { transform: translateX(-30px); }
  [data-animate="fade-right"] { transform: translateX(30px); }
  [data-animate="fade"]       { transform: none; }
  [data-animate="scale-up"]   { transform: scale(0.94); }
}

/* Delay helpers */
[data-delay="100"] { transition-delay: 0.10s; }
[data-delay="150"] { transition-delay: 0.15s; }
[data-delay="200"] { transition-delay: 0.20s; }
[data-delay="250"] { transition-delay: 0.25s; }
[data-delay="300"] { transition-delay: 0.30s; }
[data-delay="350"] { transition-delay: 0.35s; }
[data-delay="400"] { transition-delay: 0.40s; }
[data-delay="500"] { transition-delay: 0.50s; }


/* ═══════════════════════════════════════════════════════════
   STAGGER GRID — data-stagger attribute
   Usage: <div class="grid" data-stagger> <div>...</div> ... </div>
   Children animate in one by one automatically.
═══════════════════════════════════════════════════════════ */

/* Mobile: children just fade in */
[data-stagger] > * {
  opacity: 0;
  transition: opacity 0.45s ease;
}
[data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

/* Desktop: children fade + rise */
@media (min-width: 640px) {
  [data-stagger] > * {
    transform: translateY(22px);
    transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

/* Stagger delay per child (up to 12) */
[data-stagger].is-visible > *:nth-child(1)  { transition-delay: 0.00s; }
[data-stagger].is-visible > *:nth-child(2)  { transition-delay: 0.07s; }
[data-stagger].is-visible > *:nth-child(3)  { transition-delay: 0.14s; }
[data-stagger].is-visible > *:nth-child(4)  { transition-delay: 0.21s; }
[data-stagger].is-visible > *:nth-child(5)  { transition-delay: 0.28s; }
[data-stagger].is-visible > *:nth-child(6)  { transition-delay: 0.35s; }
[data-stagger].is-visible > *:nth-child(7)  { transition-delay: 0.42s; }
[data-stagger].is-visible > *:nth-child(8)  { transition-delay: 0.49s; }
[data-stagger].is-visible > *:nth-child(9)  { transition-delay: 0.56s; }
[data-stagger].is-visible > *:nth-child(10) { transition-delay: 0.63s; }
[data-stagger].is-visible > *:nth-child(11) { transition-delay: 0.70s; }
[data-stagger].is-visible > *:nth-child(12) { transition-delay: 0.77s; }

/* On mobile, stagger is tighter so the user doesn't wait too long */
@media (max-width: 639px) {
  [data-stagger].is-visible > *:nth-child(1)  { transition-delay: 0.00s; }
  [data-stagger].is-visible > *:nth-child(2)  { transition-delay: 0.04s; }
  [data-stagger].is-visible > *:nth-child(3)  { transition-delay: 0.08s; }
  [data-stagger].is-visible > *:nth-child(4)  { transition-delay: 0.12s; }
  [data-stagger].is-visible > *:nth-child(5)  { transition-delay: 0.16s; }
  [data-stagger].is-visible > *:nth-child(6)  { transition-delay: 0.20s; }
  [data-stagger].is-visible > *:nth-child(7)  { transition-delay: 0.24s; }
  [data-stagger].is-visible > *:nth-child(8)  { transition-delay: 0.28s; }
}


/* ═══════════════════════════════════════════════════════════
   HERO ENTRANCE — runs once when page loads
   Add class "hero-enter" to the hero section.
   JS adds "loaded" after a short delay.
═══════════════════════════════════════════════════════════ */
.hero-enter .hero__pill,
.hero-enter h1,
.hero-enter .hero__sub,
.hero-enter .hero__btns {
  opacity: 0;
}

.hero-enter.loaded .hero__pill {
  opacity: 1;
  transition: opacity 0.50s ease 0.15s;
}
.hero-enter.loaded h1 {
  opacity: 1;
  transition: opacity 0.55s ease 0.28s;
}
.hero-enter.loaded .hero__sub {
  opacity: 1;
  transition: opacity 0.50s ease 0.44s;
}
.hero-enter.loaded .hero__btns {
  opacity: 1;
  transition: opacity 0.48s ease 0.58s;
}

/* Desktop: add vertical movement to hero entrance */
@media (min-width: 640px) {
  .hero-enter .hero__pill { transform: translateY(12px); }
  .hero-enter h1          { transform: translateY(18px); }
  .hero-enter .hero__sub  { transform: translateY(14px); }
  .hero-enter .hero__btns { transform: translateY(12px); }

  .hero-enter.loaded .hero__pill {
    transform: none;
    transition: opacity 0.50s ease 0.15s, transform 0.50s ease 0.15s;
  }
  .hero-enter.loaded h1 {
    transform: none;
    transition: opacity 0.55s ease 0.28s, transform 0.55s ease 0.28s;
  }
  .hero-enter.loaded .hero__sub {
    transform: none;
    transition: opacity 0.50s ease 0.44s, transform 0.50s ease 0.44s;
  }
  .hero-enter.loaded .hero__btns {
    transform: none;
    transition: opacity 0.48s ease 0.58s, transform 0.48s ease 0.58s;
  }
}


/* ═══════════════════════════════════════════════════════════
   NAVBAR — underline indicator on active/hover link (desktop)
═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .navbar__links a {
    position: relative;
  }
  .navbar__links a::after {
    content: '';
    position: absolute;
    bottom: 1px; left: 10px; right: 10px;
    height: 2px;
    background: var(--color-gold);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s ease;
  }
  .navbar__links a:hover::after,
  .navbar__links a.active::after {
    transform: scaleX(1);
  }
}


/* ═══════════════════════════════════════════════════════════
   PARALLAX (desktop only — skip on mobile for performance)
═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .parallax-bg {
    will-change: transform;
    transition: transform 0.05s linear;
  }
}


/* ═══════════════════════════════════════════════════════════
   HERO LOGO — continuous slow spin (globe-style, on its Y axis)
═══════════════════════════════════════════════════════════ */
@keyframes hero-logo-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
.hero__logo--spin {
  animation: hero-logo-spin 6s linear infinite;
  transform-style: preserve-3d;
}


/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION — respect user's OS preference
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate="fade-up"],
  [data-animate="fade-down"],
  [data-animate="fade-left"],
  [data-animate="fade-right"],
  [data-animate="scale-up"],
  [data-stagger] > *,
  .hero-enter .hero__pill,
  .hero-enter h1,
  .hero-enter .hero__sub,
  .hero-enter .hero__btns {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero__logo--spin {
    animation: none !important;
  }
}