/* GRANUM PROGRAMS LITE V50 */

/*
Блок появляется одной композитной анимацией.
Отдельные reveal-анимации элементов отключены.
*/

#programs {
    contain:
        layout style !important;
}

#programs .granum-programs__container {
    opacity:
        1;

    transform:
        none;
}

/*
До срабатывания IntersectionObserver скрывается
только единый контейнер, а не каждый элемент.
*/

#programs.granum-programs-lite-ready:not(.granum-programs-lite-visible)
.granum-programs__container {
    opacity:
        0 !important;

    transform:
        translate3d(0, 18px, 0)
        !important;

    will-change:
        opacity, transform;
}

#programs.granum-programs-lite-ready.granum-programs-lite-visible
.granum-programs__container {
    opacity:
        1 !important;

    transform:
        translate3d(0, 0, 0)
        !important;

    transition:
        opacity 420ms ease,
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1)
        !important;
}

#programs.granum-programs-lite-complete
.granum-programs__container {
    will-change:
        auto !important;

    transition:
        none !important;
}

/*
Отключаем старые отдельные reveal-анимации.
*/

#programs .granum-programs__reveal {
    opacity:
        1 !important;

    visibility:
        visible !important;

    transform:
        none !important;

    translate:
        none !important;

    rotate:
        none !important;

    scale:
        none !important;

    filter:
        none !important;

    animation:
        none !important;

    transition:
        none !important;

    will-change:
        auto !important;
}

/*
Убираем дорогие blur и backdrop-filter.
*/

#programs,
#programs * {
    -webkit-backdrop-filter:
        none !important;

    backdrop-filter:
        none !important;
}

#programs .granum-program-card {
    transform:
        none !important;

    translate:
        none !important;

    rotate:
        none !important;

    scale:
        none !important;

    filter:
        none !important;

    -webkit-filter:
        none !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    box-shadow:
        0 1px 0 rgba(99, 79, 156, 0.07)
        !important;

    transition:
        border-color 160ms ease,
        background-color 160ms ease
        !important;

    will-change:
        auto !important;
}

/*
Glow полностью выключается.
*/

#programs .granum-program-card__glow {
    display:
        none !important;

    opacity:
        0 !important;

    filter:
        none !important;

    transform:
        none !important;

    transition:
        none !important;
}

/*
Сетку на школьной карточке также убираем,
она создаёт дополнительную растеризацию.
*/

#programs .granum-program-card--school::after {
    content:
        none !important;

    display:
        none !important;
}

/*
Убираем тяжёлые тени с иконок и кнопок.
*/

#programs .granum-program-card__icon {
    box-shadow:
        none !important;

    filter:
        none !important;

    transition:
        border-color 160ms ease,
        background-color 160ms ease
        !important;
}

#programs .granum-programs__eyebrow {
    box-shadow:
        none !important;
}

#programs .granum-programs__eyebrow::before {
    box-shadow:
        none !important;
}

#programs .granum-programs__action {
    transform:
        none !important;

    box-shadow:
        0 8px 18px rgba(99, 79, 156, 0.14)
        !important;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease
        !important;
}

#programs .granum-programs__action svg,
#programs .granum-program-card__link svg {
    transform:
        none !important;

    transition:
        none !important;
}

/*
Дешёвое наведение без перемещения карточки,
без масштабирования и без новой большой тени.
*/

@media (hover: hover) and (pointer: fine) {
    #programs .granum-program-card:hover,
    #programs .granum-program-card:focus-within {
        transform:
            none !important;

        translate:
            none !important;

        scale:
            none !important;

        border-color:
            rgba(99, 79, 156, 0.28)
            !important;

        box-shadow:
            0 1px 0 rgba(99, 79, 156, 0.1)
            !important;
    }

    #programs .granum-program-card--individual:hover,
    #programs .granum-program-card--individual:focus-within {
        border-color:
            rgba(255, 255, 255, 0.28)
            !important;

        box-shadow:
            none !important;
    }

    #programs .granum-programs__action:hover {
        transform:
            none !important;

        box-shadow:
            0 8px 18px rgba(99, 79, 156, 0.14)
            !important;
    }

    #programs .granum-program-card:hover
    .granum-program-card__glow {
        transform:
            none !important;
    }

    #programs .granum-program-card:hover
    .granum-program-card__link svg {
        transform:
            none !important;
    }
}

/*
На touch-устройствах убираем вообще все hover-переходы.
*/

@media (hover: none), (pointer: coarse) {
    #programs .granum-program-card,
    #programs .granum-program-card__icon,
    #programs .granum-program-card__link,
    #programs .granum-program-card__link svg,
    #programs .granum-programs__action,
    #programs .granum-programs__action svg {
        transition:
            none !important;
    }
}

/*
При системном запрете анимации блок показывается сразу.
*/

@media (prefers-reduced-motion: reduce) {
    #programs .granum-programs__container {
        opacity:
            1 !important;

        transform:
            none !important;

        transition:
            none !important;

        will-change:
            auto !important;
    }

    #programs *,
    #programs *::before,
    #programs *::after {
        animation:
            none !important;

        transition:
            none !important;

        scroll-behavior:
            auto !important;
    }
}