html { scroll-behavior: smooth; }
.bg-grid-pattern {
    background-image: radial-gradient(rgba(224, 90, 32, 0.15) 1px, transparent 1px);
    background-size: 24px 24px;
}
.product-card-shadow {
    box-shadow: 0 10px 25px -5px rgba(18, 34, 64, 0.08), 0 8px 10px -6px rgba(18, 34, 64, 0.04);
}

/* ---------- Animations (all switched off for people who prefer reduced motion) ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
#home .lg\:col-span-7 > *, #home .lg\:col-span-5 > * { animation: fadeUp .8s cubic-bezier(.16,1,.3,1) both; }
#home .lg\:col-span-7 > *:nth-child(2) { animation-delay: .08s; }
#home .lg\:col-span-7 > *:nth-child(3) { animation-delay: .16s; }
#home .lg\:col-span-7 > *:nth-child(4) { animation-delay: .24s; }
#home .lg\:col-span-7 > *:nth-child(5) { animation-delay: .32s; }
#home .lg\:col-span-5 > * { animation-delay: .25s; }

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
#home .lg\:col-span-5 > div { animation: fadeUp .8s .25s cubic-bezier(.16,1,.3,1) both, floaty 6s 1.2s ease-in-out infinite; }

/* hover lift on cards */
#products article, #stocklot-section .grid > div, #about .grid.grid-cols-2 > div { transition: transform .3s ease, box-shadow .3s ease; }
#products article:hover, #stocklot-section .grid > div:hover { transform: translateY(-6px); box-shadow: 0 18px 30px -12px rgba(18,34,64,.25); }
#products article img { transition: transform .5s ease; }
#products article:hover img { transform: scale(1.05); }
#products article > a { overflow: hidden; }

/* floating WhatsApp: soft pulse ring */
@keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
a[aria-label^="Chat with Wilayat"] > span:last-child { animation: waPulse 2.4s infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}