/* ============================================
   Reveal-on-scroll + infinite scroll (shared)
   Paired with: public/frontend/js/scroll-reveal.js
   Used by: RTO listings, Business listings
   ============================================ */

/* ---- Reveal on scroll ----
   Items are only pre-hidden when JS is running (html.js-reveal is set inline
   before the cards paint), so a no-JS visitor still sees every listing. */
.js-reveal .reveal-item {
    opacity: 0;
    transform: translate3d(0, 32px, 0) scale(.985);
    /* Long, decelerating ease — the motion settles rather than stops */
    transition:
        opacity .85s cubic-bezier(.22, .61, .36, 1),
        transform .85s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.js-reveal .reveal-item.is-visible {
    opacity: 1;
    transform: none;
}

/* Once the item has settled, drop the compositor hint */
.js-reveal .reveal-item.is-visible .card {
    will-change: auto;
}

/* ---- Infinite scroll sentinel ---- */
.scroll-sentinel {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem;
    margin-top: 1rem;
    opacity: 0;
    transition: opacity .3s ease;
}

.scroll-sentinel.is-loading {
    opacity: 1;
}

.scroll-sentinel.is-done {
    display: none;
}

.scroll-spinner {
    width: 1.85rem;
    height: 1.85rem;
    border: 3px solid rgba(var(--bs-primary-rgb), .18);
    border-top-color: var(--bs-primary);
    border-radius: 50%;
    animation: scroll-spin .7s linear infinite;
}

@keyframes scroll-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Respect the OS "reduce motion" setting: content still appears, just instantly */
@media (prefers-reduced-motion: reduce) {

    .js-reveal .reveal-item,
    .js-reveal .reveal-item.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .scroll-spinner {
        animation-duration: 2s;
    }
}