/* ==========================================================
   HOME DESIGN 92 — animations
   All motion here is opt-in via a class JS adds/removes, so the
   page is fully usable and legible with this file absent.
   ========================================================== */

/* ---------- Hero: slide crossfade + Ken Burns pan ---------- */
.hero-slide-img {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1200ms ease;
}

.hero-slide-img.is-active {
  opacity: 1;
  animation: hero-pan 9s ease-in-out forwards;
}

@keyframes hero-pan {
  from {
    transform: scale(1.05) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.12) translate3d(-1%, -1%, 0);
  }
}

.hero-content h1,
.hero-content p,
.hero-ctas {
  opacity: 0;
  transform: translateY(16px);
}

.hero-content.is-loaded h1 {
  animation: hero-rise 700ms ease forwards 150ms;
}

.hero-content.is-loaded p {
  animation: hero-rise 700ms ease forwards 320ms;
}

.hero-content.is-loaded .hero-ctas {
  animation: hero-rise 700ms ease forwards 460ms;
}

@keyframes hero-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Scroll reveal (driven by IntersectionObserver) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
}

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

/* ---------- Reduced motion: disable everything above ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-slide-img,
  .hero-slide-img.is-active {
    animation: none !important;
    transform: none !important;
    transition: opacity 300ms ease !important;
  }

  .hero-content h1,
  .hero-content p,
  .hero-ctas {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  * {
    scroll-behavior: auto !important;
  }
}


/* About page: respect reduced-motion preferences for card and button effects. */
@media (prefers-reduced-motion: reduce) {
  #about-stores .store-card,
  #about-stores .store-card .service-icon,
  #about-stores .store-link {
    transition: none !important;
    animation: none !important;
  }
  #about-stores .store-card:hover { transform: none !important; }
}