/* ==========================================================================
   🎯 ULTIMATE DUAL-FADE SCROLL (WITH LAST ITEM CLEARANCE)
   ========================================================================== */

.roerich-scrollable {
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.25rem;

    /* 1. Дефолтная маска (только снизу, пока скролл в самом верху) */
    mask-image: linear-gradient(
        to bottom,
        black 0px,
        black calc(100% - 36px),
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0px,
        black calc(100% - 36px),
        transparent 100%
    );

    /* 2. Анимация проявления верхнего фейда при скролле */
    animation: roerich-scroll-fade linear both;
    animation-timeline: scroll(self);
    animation-range: 0px 40px;

    /* Скроллбар */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 80, 136, 0.15) transparent;
}

/* 🔥 ГЛАВНЫЙ ФИКС: Запас высоты внизу, чтобы последняя карточка не перекрывалась фейдом */
.roerich-scrollable {
    padding-bottom: 25px;
    padding-top: 5px;
   }

/* Ключевые кадры: плавно добавляем transparent 0px наверх при скролле */
@keyframes roerich-scroll-fade {
    to {
        mask-image: linear-gradient(
            to bottom,
            transparent 0px,
            black 36px,
            black calc(100% - 36px),
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0px,
            black 36px,
            black calc(100% - 36px),
            transparent 100%
        );
    }
}

/* Фолбэк стили скроллбара для Webkit */
.roerich-scrollable::-webkit-scrollbar {
    width: 4px;
}
.roerich-scrollable::-webkit-scrollbar-track {
    background: transparent;
}
.roerich-scrollable::-webkit-scrollbar-thumb {
    background: rgba(0, 80, 136, 0.15);
    border-radius: 10px;
}
.roerich-scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--color-mystic-violet);
}