/* FFM Theme v1.0 — Scroll Animations */

/* ============================================================
   BASE ANIMATION STATE
   ============================================================ */

.ffm-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.ffm-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   STAGGERED DELAYS FOR GRID CHILDREN
   ============================================================ */

.ffm-animate:nth-child(2) { transition-delay: 0.1s; }
.ffm-animate:nth-child(3) { transition-delay: 0.2s; }
.ffm-animate:nth-child(4) { transition-delay: 0.3s; }
.ffm-animate:nth-child(5) { transition-delay: 0.4s; }
.ffm-animate:nth-child(6) { transition-delay: 0.5s; }

/* ============================================================
   HERO — IMMEDIATE VISIBILITY (no scroll needed)
   ============================================================ */

.ffm-hero .ffm-animate {
  opacity: 0;
  transform: translateY(20px);
}

.ffm-hero .ffm-animate:nth-child(1) {
  animation: ffm-fade-up 0.7s ease 0.3s forwards;
}

.ffm-hero .ffm-animate:nth-child(2) {
  animation: ffm-fade-up 0.8s ease 0.5s forwards;
}

.ffm-hero .ffm-animate:nth-child(3) {
  animation: ffm-fade-up 0.7s ease 0.7s forwards;
}

.ffm-hero .ffm-animate:nth-child(4) {
  animation: ffm-fade-up 0.7s ease 0.9s forwards;
}

@keyframes ffm-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Override is-visible for hero items — already animated by keyframes */
.ffm-hero .ffm-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   SCALE IN (for cards, badges)
   ============================================================ */

.ffm-animate--scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.ffm-animate--scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ============================================================
   SLIDE FROM LEFT
   ============================================================ */

.ffm-animate--left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.ffm-animate--left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================================
   SLIDE FROM RIGHT
   ============================================================ */

.ffm-animate--right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.ffm-animate--right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================================
   RESPECT PREFERS-REDUCED-MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .ffm-animate,
  .ffm-animate--scale,
  .ffm-animate--left,
  .ffm-animate--right,
  .ffm-hero .ffm-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}