/* effects.css
 *
 * Visual interactivity polish that is intentionally separate from main.css so
 * it can grow without bloating the core stylesheet. Today it ships only the
 * scroll-driven fade-in used on landing/listing cards. Add new effects here
 * rather than reaching back into main.css.
 *
 * Pairs with web/static/js/scroll_fade.js. The JS adds `scroll-fade-in` once
 * the element enters the viewport. Users with reduced-motion preferences see
 * the visible state immediately with no transition.
 */

.scroll-fade {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 380ms ease-out, transform 380ms ease-out;
    will-change: opacity, transform;
}

.scroll-fade.scroll-fade-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-fade {
        opacity: 1;
        transform: none;
        transition: none;
    }
}