/* Initial State - Hidden and Shifted Down */
body .product {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: all 0.6s ease !important;
    will-change: opacity, transform;
}

/* Visible State - Triggered by JS IntersectionObserver */
body .product.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Staggered Delays for Grid Layouts (Optional polish) */
.product:nth-child(2) {
    transition-delay: 50ms;
}

.product:nth-child(3) {
    transition-delay: 100ms;
}

.product:nth-child(4) {
    transition-delay: 150ms;
}

/* Ensure hover effects from other files still work on top of this */
.product:hover {
    transform: translateY(-5px) !important;
    /* Override standard transform but keep transition */
}