/* ============================================================
   ANIMATION HELPERS — Binsalim Geoservices
   Initial hidden states for GSAP ScrollTrigger (Phase 4).
   Elements with these classes start invisible; GSAP reveals them.
   ============================================================ */

.reveal-up,
.reveal-stagger,
.fade-in,
.scale-in,
.slide-left,
.slide-right {
  opacity: 0;
}

.reveal-up {
  transform: translateY(24px);
}

.slide-left {
  transform: translateX(-40px);
}

.slide-right {
  transform: translateX(40px);
}

.scale-in {
  transform: scale(0.95);
}

.is-revealed {
  opacity: 1;
  transform: none;
}

/* ── Client marquee (CSS-only infinite scroll) ── */
.marquee {
  overflow: hidden;
  white-space: nowrap;
}

.marquee__track {
  display: inline-flex;
  gap: var(--space-12);
  animation: marquee-scroll 30s linear infinite;
}

.marquee__track img {
  height: 40px;
  width: auto;
  opacity: 0.6;
  filter: grayscale(100%);
  transition: opacity var(--duration-base) var(--ease-default),
              filter var(--duration-base) var(--ease-default);
}

.marquee__track img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Scroll indicator bounce (hero) ── */
.scroll-indicator {
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* ── Reduced motion override (mandatory) ── */
@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .reveal-stagger,
  .fade-in,
  .scale-in,
  .slide-left,
  .slide-right {
    opacity: 1;
    transform: none;
  }

  .marquee__track {
    animation: none;
  }

  .scroll-indicator {
    animation: none;
  }
}