/* ─────────────────────────────────────────────
   ANIMATIONS — Scroll reveal, hero fadeUp,
                product card hover
───────────────────────────────────────────── */

/* ─── SCROLL REVEAL ─── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity   0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.d1 { transition-delay: 0.10s; }
.reveal.d2 { transition-delay: 0.22s; }
.reveal.d3 { transition-delay: 0.34s; }
.reveal.d4 { transition-delay: 0.46s; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ─── HERO FADE-UP ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-anim {
  opacity: 0;
  animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-anim.d1 { animation-delay: 0.2s; }
.hero-anim.d2 { animation-delay: 0.4s; }
.hero-anim.d3 { animation-delay: 0.6s; }
.hero-anim.d4 { animation-delay: 0.8s; }

/* ─── PRODUCT CARD HOVER ─── */
.prod-card {
  transition:
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform  0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.prod-card:hover {
  box-shadow: 0 24px 64px -18px rgba(0, 87, 168, 0.22);
  transform: translateY(-4px);
}