/* ==========================================================================
   Hero Text Entrance Animation
   ========================================================================== */
.fs-hero-content .fs-mini-heading,
.fs-hero-content .fs-hero-heading,
.fs-hero-content .fs-hero-subheading,
.fs-hero-content .fs-hero-search,
.fs-hero-content .fs-hero-buttons
{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.fs-hero-content .fs-mini-heading {
  transition-delay: 0.1s;
}
.fs-hero-content .fs-hero-heading {
  transition-delay: 0.25s;
}
.fs-hero-content .fs-hero-subheading {
  transition-delay: 0.4s;
}
.fs-hero-content .fs-hero-search {
  transition-delay: 0.55s;
}
.fs-hero-content .fs-hero-buttons {
  transition-delay: 0.7s;
}
/* Triggered state — added by JS on page load */
.fs-hero-content.is-visible .fs-mini-heading,
.fs-hero-content.is-visible .fs-hero-heading,
.fs-hero-content.is-visible .fs-hero-subheading,
.fs-hero-content.is-visible .fs-hero-search,
.fs-hero-content.is-visible .fs-hero-buttons {
  opacity: 1;
  transform: translateY(0);
}
/* ==========================================================================
   Product Images Entrance Animation
   ========================================================================== */
.fs-home-product-images {
  position: relative;
}
.fs-home-product-image-1,
.fs-home-product-image-2 {
  opacity: 0;
  will-change: transform, opacity;
}
/* Woman - slides in from the left with a slight scale-up */
.fs-home-product-image-1 {
  transform: translateX(-40px) scale(0.96);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Bus stop sign - rises up from below, slightly delayed */
.fs-home-product-image-2 {
  transform: translateY(30px) scale(0.96);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s,
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
/* Triggered state — added by JS once the text sequence finishes and
   the container scrolls into view */
.fs-home-product-images.is-visible .fs-home-product-image-1,
.fs-home-product-images.is-visible .fs-home-product-image-2 {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
}

document.addEventListener('DOMContentLoaded', function () {
  // Hero text — animate in on page load
  const heroContent = document.querySelector('.fs-hero-content');
  const imageContainer = document.querySelector('.fs-home-product-images');
  // Total time for the text sequence to finish:
  // last stagger delay (0.7s, now the buttons) + its transition duration (0.7s) = 1.4s
  // add a small buffer so it feels like a deliberate handoff, not a race
  const TEXT_SEQUENCE_DURATION = 1550; // ms
  if (heroContent) {
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        heroContent.classList.add('is-visible');
      });
    });
  }
  if (imageContainer) {
    // Don't even start observing until the text animation has finished.
    // This guarantees the images never animate early, even if they're
    // already in (or near) the viewport on page load.
    setTimeout(() => {
      const observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              imageContainer.classList.add('is-visible');
              observer.unobserve(entry.target);
            }
          });
        },
        {
          threshold: 0.3,
          rootMargin: '0px 0px -50px 0px'
        }
      );
      observer.observe(imageContainer);
    }, TEXT_SEQUENCE_DURATION);
  }
});