/* Motion system */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.4s; }

/* Hero stagger */
.hero-anim {
  opacity: 0;
  transform: translateY(28px);
}

.hero.is-ready .hero-anim {
  animation: heroIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero.is-ready .hero-anim--1 { animation-delay: 0.1s; }
.hero.is-ready .hero-anim--2 { animation-delay: 0.22s; }
.hero.is-ready .hero-anim--3 { animation-delay: 0.34s; }
.hero.is-ready .hero-anim--4 { animation-delay: 0.46s; }
.hero.is-ready .hero-anim--5 { animation-delay: 0.58s; }

.hero__bg {
  transform: scale(1.06);
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero.is-ready .hero__bg {
  transform: scale(1);
}

@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Product cards richer motion */
.product-card {
  transition:
    border-color var(--ease-fast),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    opacity 0.35s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(19, 19, 19, 0.08);
}

.product-card.is-fading {
  opacity: 0;
  transform: translateY(10px);
}

.products-grid.is-switching .product-card:not(.is-hidden) {
  animation: cardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* How-we-work steps */
.step {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.step.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.step__num {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}

.step.is-visible .step__num {
  transform: scale(1.08);
}

/* Why items stagger children */
.why-item {
  transition: padding-left var(--ease-fast), opacity 0.5s ease, transform 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .hero-anim,
  .reveal,
  .step,
  .product-card.is-fading {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .hero__bg {
    transform: none !important;
  }
}