:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

.mobile-menu-collapse {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 250ms var(--ease-in-out), opacity 200ms var(--ease-out);
}
.mobile-menu-collapse > div {
  overflow: hidden;
  min-height: 0;
}
.mobile-menu-collapse.mobile-menu-open {
  grid-template-rows: 1fr;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu-collapse {
    transition: opacity 200ms ease;
  }
}

@keyframes card-enter {
  from { opacity: 0; transform: translateY(16px) scale(0.97); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
#productGrid > .equipment-card {
  animation: card-enter 600ms var(--ease-out) both;
}
#productGrid > .equipment-card:nth-child(1) { animation-delay: 0ms; }
#productGrid > .equipment-card:nth-child(2) { animation-delay: 60ms; }
#productGrid > .equipment-card:nth-child(3) { animation-delay: 120ms; }
#productGrid > .equipment-card:nth-child(4) { animation-delay: 180ms; }
#productGrid > .equipment-card:nth-child(5) { animation-delay: 240ms; }
#productGrid > .equipment-card:nth-child(6) { animation-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
  #productGrid > .equipment-card {
    animation: none;
  }
}

/* Scroll-triggered reveal for below-the-fold sections, cards, and images.
   JS (site.js) adds .reveal-init on mount and swaps to .reveal-visible via
   IntersectionObserver; the transition-delay stagger is set inline per
   element via style="transition-delay: Nms" where a group should cascade. */
.reveal-on-scroll {
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
}
.reveal-init {
  opacity: 0;
  transform: translateY(2.5rem) scale(0.98);
  filter: blur(8px);
}
.reveal-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    transition: opacity 0.3s ease;
  }
  .reveal-init {
    transform: none;
  }
}

/* Load-triggered entrance for above-the-fold hero content (already in view,
   so it animates on mount rather than on scroll). Stagger via inline
   style="animation-delay: Nms" per element within a hero. */
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(1.25rem) scale(0.98); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes hero-enter-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hero-enter {
  animation: hero-enter 800ms var(--ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
  .hero-enter {
    animation: hero-enter-fade 400ms ease both;
  }
}

/* Hero visual (bg image or <img>): a slow settle-in, independent of the
   text stagger above. Used once per hero, on the image/background layer. */
@keyframes hero-image-in {
  from { opacity: 0; transform: scale(1.12); filter: blur(14px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}
.hero-image-in {
  animation: hero-image-in 1400ms var(--ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
  .hero-image-in {
    animation: hero-enter-fade 400ms ease both;
  }
}