/* ============================================================
   SHOAL MARKETPLACE — Scroll Animations
   GPU-accelerated fade/slide/scale via IntersectionObserver
   ============================================================ */

/* ─── Base: hidden state ─────────────────────────────────────── */
.fade-up,
.fade-in,
.slide-left,
.slide-right,
.scale-in {
  opacity: 0;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-property: opacity, transform;
  will-change: opacity, transform;
}

.fade-up    { transform: translateY(30px); }
.fade-in    { transform: none; }
.slide-left { transform: translateX(-30px); }
.slide-right{ transform: translateX(30px); }
.scale-in   { transform: scale(0.95); }

/* ─── Visible state (added by IntersectionObserver) ──────────── */
.fade-up.visible,
.fade-in.visible,
.slide-left.visible,
.slide-right.visible,
.scale-in.visible {
  opacity: 1;
  transform: none;
}

/* ─── Stagger delays ─────────────────────────────────────────── */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* ─── Hero load animations (CSS, no JS needed) ───────────────── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes heroSlideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-anim-title {
  animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.hero-anim-sub {
  animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

.hero-anim-search {
  animation: heroSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

.hero-anim-tags {
  animation: heroFadeIn 0.7s ease 0.55s both;
}

.hero-anim-stats {
  animation: heroFadeIn 0.8s ease 0.7s both;
}

/* ─── Reduced motion: disable all animations ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fade-in,
  .slide-left,
  .slide-right,
  .scale-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-anim-title,
  .hero-anim-sub,
  .hero-anim-search,
  .hero-anim-tags,
  .hero-anim-stats {
    animation: none;
  }
}