.js-grid-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.js-grid-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.js-load-more {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.js-load-more:hover {
    transform: translateY(-2px);
}

.js-load-more:active {
    transform: translateY(1px);
}

.js-load-more.hidden {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}