:root{
    --sa-off-x: 40px; /* дефолт для fade-left/right */
    --sa-off-y: 40px; /* дефолт для fade-up/bottom */
    --sa-blur-amt: 0px; /* блюр по умолчанию = 0 */
}

/* Если у предка/элемента есть data-scroll-blur — дать дефолтный блюр 8px сразу на первом кадре */
[data-scroll-blur] [data-scroll-animate] { --sa-blur-amt: 8px; }
[data-scroll-animate][data-scroll-blur]  { --sa-blur-amt: 8px; }

/* База */
*[data-scroll-animate]{
    opacity:0;
    transform:none;
    filter: blur(var(--sa-blur-amt));          /* <— блюр до появления */
    transition: opacity .6s ease, transform .6s ease, filter .6s ease; /* <— плавно убираем блюр */
    /*will-change: opacity, transform, filter;*/
}

/* Показано */
*[data-scroll-animate].scroll-animate-visible{
    opacity:1;
    transform:none;
    filter: blur(0);                            /* <— блюр исчезает */
}

/* Показано */
*[data-scroll-animate].active{
    filter: unset;                            /* <— блюр исчезает */
}

/* Начальные состояния (читают оффсеты) */
[data-scroll-animate="fade-up"]     { transform: translateY(var(--sa-off-y)); }
[data-scroll-animate="fade-bottom"] { transform: translateY(calc(var(--sa-off-y) * -1)); }
[data-scroll-animate="fade-left"]   { transform: translateX(calc(var(--sa-off-x) * -1)); }
[data-scroll-animate="fade-right"]  { transform: translateX(var(--sa-off-x)); }
[data-scroll-animate="scale"]       { transform: scale(.9); }
[data-scroll-animate="rotate"]      { transform: rotate(-5deg) scale(.95); }

@media (prefers-reduced-motion:reduce){
    *[data-scroll-animate]{ transition:none }
}