/* Shared, clearly visible card interactions. */

.services-grid article,
.advantages-grid article,
.news-grid article,
.partner-card,
.service-card,
.site-service-card,
.search-result,
.catalog-card,
.catalog-product-card,
.offer-card,
.popular-card,
.cart-item,
.contacts-card,
.about-service-card,
.about-advantage-card,
.about-workflow__grid article,
.one-c-service-card,
.faq-category-card,
.faq-article-card > a,
.its-plan-card,
.its-reason-grid article,
.its-work-grid article,
.its-material-grid article,
.updates-benefits article,
.updates-compare__card,
.marking-route__item,
.marking-benefits article,
.it-support-benefits article,
.it-support-service-card,
.integration-benefits article,
.bitrix24-benefits article,
.onec-fit article,
.updates-safety-grid article,
.marking-category-grid article,
.it-support-process__list article,
.onec-config-grid article {
    transition-property: transform, box-shadow, border-color, background-color, color, opacity;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

/* Keep newly added card components smooth even before they are listed above. */
:where([class$="-card"], [class*="-card "]) {
    transition-property: transform, box-shadow, border-color, background-color, color, opacity;
    transition-duration: .34s;
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

/* Text, icons and small controls must change together with the card surface. */
:where(
    [class$="-card"],
    [class*="-card "],
    .services-grid article,
    .advantages-grid article,
    .news-grid article,
    .about-workflow__grid article,
    .its-reason-grid article,
    .its-work-grid article,
    .its-material-grid article,
    .updates-benefits article,
    .marking-benefits article,
    .it-support-benefits article,
    .integration-benefits article,
    .bitrix24-benefits article,
    .accounting-benefits article,
    .onec-fit article,
    .updates-safety-grid article,
    .marking-category-grid article,
    .it-support-process__list article,
    .onec-config-grid article,
    .updates-compare__card,
    .marking-route__item
) :where(h2, h3, h4, p, small, strong, span, li, a, i, button, img, svg) {
    transition-property: color, background-color, border-color, opacity, transform, filter, fill, stroke;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

/* Gradient/image surfaces are cross-faded because CSS gradients cannot animate directly. */
.services-grid article,
.advantages-grid article:not(.is-featured),
.site-service-card:not(.is-featured),
:where(
    .accounting-benefits,
    .bitrix24-benefits,
    .integration-benefits,
    .marking-benefits,
    .updates-benefits,
    .it-support-benefits,
    .onec-fit
) article:not(.is-featured),
.it-support-service-card:not(.is-featured) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.services-grid article::after,
.advantages-grid article:not(.is-featured)::after,
.site-service-card:not(.is-featured)::after,
:where(
    .accounting-benefits,
    .bitrix24-benefits,
    .integration-benefits,
    .marking-benefits,
    .updates-benefits,
    .it-support-benefits,
    .onec-fit
) article:not(.is-featured)::before,
.it-support-service-card:not(.is-featured)::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity .38s cubic-bezier(.22, 1, .36, 1);
}

.services-grid article::after {
    background: linear-gradient(145deg, #fff 0%, #fcf8ff 58%, #fff3ec 100%);
}

.advantages-grid article:not(.is-featured)::after {
    background: #390894 url("../img/home/mask-group.png") center / cover no-repeat;
}

.site-service-card:not(.is-featured)::after {
    background: #390894 url("../img/services/background-service-card.png") center / 100% 100% no-repeat;
}

:where(
    .accounting-benefits,
    .bitrix24-benefits,
    .integration-benefits,
    .marking-benefits,
    .updates-benefits,
    .it-support-benefits,
    .onec-fit
) article:not(.is-featured)::before,
.it-support-service-card:not(.is-featured)::before {
    background:
        radial-gradient(circle at 76% 16%, rgba(253, 91, 3, .68), transparent 29%),
        var(--brand-gradient-action);
}

.services-grid article > *,
.advantages-grid article:not(.is-featured) > *,
.site-service-card:not(.is-featured) > *,
:where(
    .accounting-benefits,
    .bitrix24-benefits,
    .integration-benefits,
    .marking-benefits,
    .updates-benefits,
    .it-support-benefits,
    .onec-fit
) article:not(.is-featured) > *,
.it-support-service-card:not(.is-featured) > * {
    position: relative;
    z-index: 1;
}

.services-grid article > .service-card__overlay {
    position: absolute;
    z-index: 5;
}

.its-work-grid article {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.its-work-grid article::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background: linear-gradient(145deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .085));
    opacity: 0;
    pointer-events: none;
    transition: opacity .34s ease;
}

.its-work-grid article > * {
    position: relative;
    z-index: 1;
}

/* Secondary service cards used to lift without receiving a gradient. */
:where(
    .updates-safety-grid,
    .marking-category-grid,
    .it-support-process__list,
    .onec-config-grid
) article,
.marking-route__item:not(.is-active) {
    position: relative;
    isolation: isolate;
}

:where(
    .updates-safety-grid,
    .marking-category-grid,
    .it-support-process__list,
    .onec-config-grid
) article::before,
.marking-route__item:not(.is-active)::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background:
        radial-gradient(circle at 82% 14%, rgba(253, 91, 3, .58), transparent 30%),
        var(--brand-gradient-action);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity .38s cubic-bezier(.22, 1, .36, 1);
}

:where(
    .updates-safety-grid,
    .marking-category-grid,
    .it-support-process__list,
    .onec-config-grid
) article > *,
.marking-route__item:not(.is-active) > * {
    position: relative;
    z-index: 1;
}

/* The homepage service cards previously had no hover state at all. */
.services-grid article {
    isolation: isolate;
}

.services-grid article::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    height: 5px;
    content: "";
    background: var(--brand-gradient-line);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .34s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}

.services-grid article img {
    transition: transform .34s cubic-bezier(.22, 1, .36, 1), filter .3s ease;
}

.service-card img,
.catalog-product-card__image img,
.popular-card > img,
.partner-card img {
    transition: transform .32s cubic-bezier(.22, 1, .36, 1), filter .25s ease, opacity .25s ease;
}

.services-grid article h3,
.services-grid article small,
.services-grid article small::before {
    transition: color .25s ease, background-color .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
    .services-grid article:is(:hover, :focus-within)::after,
    .advantages-grid article:not(.is-featured):is(:hover, :focus-within)::after,
    .site-service-card:not(.is-featured):is(:hover, :focus-within)::after,
    :where(
        .accounting-benefits,
        .bitrix24-benefits,
        .integration-benefits,
        .marking-benefits,
        .updates-benefits,
        .it-support-benefits,
        .onec-fit
    ) article:not(.is-featured):is(:hover, :focus-within)::before,
    .it-support-service-card:not(.is-featured):is(:hover, :focus-within)::before {
        opacity: 1;
    }

    .its-work-grid article:is(:hover, :focus-within)::after {
        opacity: 1;
    }

    :where(
        .updates-safety-grid,
        .marking-category-grid,
        .it-support-process__list,
        .onec-config-grid
    ) article:is(:hover, :focus-within)::before,
    .marking-route__item:not(.is-active):is(:hover, :focus-within)::before {
        opacity: 1;
    }

    .services-grid article:is(:hover, :focus-within),
    .advantages-grid article:not(.is-featured):is(:hover, :focus-within),
    .site-service-card:not(.is-featured):is(:hover, :focus-within),
    :where(
        .accounting-benefits,
        .bitrix24-benefits,
        .integration-benefits,
        .marking-benefits,
        .updates-benefits,
        .it-support-benefits,
        .onec-fit
    ) article:not(.is-featured):is(:hover, :focus-within),
    .it-support-service-card:not(.is-featured):is(:hover, :focus-within) {
        background: #fff;
    }

    .its-work-grid article:is(:hover, :focus-within) {
        background: linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .065));
    }

    :where(
        .accounting-benefits,
        .bitrix24-benefits,
        .integration-benefits,
        .marking-benefits,
        .updates-benefits,
        .it-support-benefits,
        .onec-fit
    ) article:not(.is-featured):is(:hover, :focus-within) :where(h2, h3),
    .it-support-service-card:not(.is-featured):is(:hover, :focus-within) :where(h2, h3) {
        color: #fff;
    }

    :where(
        .accounting-benefits,
        .bitrix24-benefits,
        .integration-benefits,
        .marking-benefits,
        .updates-benefits,
        .it-support-benefits,
        .onec-fit
    ) article:not(.is-featured):is(:hover, :focus-within) :where(small, p, li),
    .it-support-service-card:not(.is-featured):is(:hover, :focus-within) :where(small, p, li) {
        color: rgba(255, 255, 255, .82);
    }

    :where(
        .updates-safety-grid,
        .marking-category-grid,
        .it-support-process__list,
        .onec-config-grid
    ) article:is(:hover, :focus-within) :where(h2, h3, h4),
    .marking-route__item:not(.is-active):is(:hover, :focus-within) :where(h2, h3, h4) {
        color: #fff;
    }

    :where(
        .updates-safety-grid,
        .marking-category-grid,
        .it-support-process__list,
        .onec-config-grid
    ) article:is(:hover, :focus-within) :where(small, p, li, strong, span),
    .marking-route__item:not(.is-active):is(:hover, :focus-within) :where(small, p, li, strong, span) {
        color: rgba(255, 255, 255, .82);
    }

    .services-grid article:hover,
    .services-grid article:focus-within {
        border-color: var(--card-hover-border);
        box-shadow: var(--card-hover-shadow-strong);
        transform: translateY(-9px);
    }

    .services-grid article:hover::before,
    .services-grid article:focus-within::before {
        transform: scaleX(1);
    }

    .services-grid article:hover img,
    .services-grid article:focus-within img {
        filter: saturate(1.08) contrast(1.03);
        transform: translateY(-4px) scale(1.055);
    }

    .services-grid article:hover h3,
    .services-grid article:focus-within h3 {
        color: var(--indigo);
        transform: translateY(-1px);
    }

    .services-grid article:hover small,
    .services-grid article:focus-within small {
        color: var(--purple);
    }

    .services-grid article:hover small::before,
    .services-grid article:focus-within small::before {
        background: var(--orange);
        transform: scale(1.45);
    }

    .advantages-grid article:hover,
    .advantages-grid article:focus-within,
    .news-grid article:hover,
    .news-grid article:focus-within,
    .site-service-card:hover,
    .site-service-card:focus-within,
    .its-plan-card:hover,
    .its-plan-card:focus-within {
        border-color: transparent;
        box-shadow: var(--card-hover-shadow-strong);
        transform: translateY(-8px);
    }

    .service-card:hover,
    .service-card:focus-within,
    .search-result:hover,
    .search-result:focus-within,
    .catalog-card:hover,
    .catalog-card:focus-within,
    .catalog-product-card:hover,
    .catalog-product-card:focus-within,
    .offer-card:hover,
    .offer-card:focus-within,
    .popular-card:hover,
    .popular-card:focus-within,
    .cart-item:hover,
    .cart-item:focus-within,
    .contacts-card:hover,
    .contacts-card:focus-within,
    .about-service-card:hover,
    .about-service-card:focus-within,
    .about-advantage-card:hover,
    .about-advantage-card:focus-within,
    .about-workflow__grid article:hover,
    .about-workflow__grid article:focus-within,
    .one-c-service-card:hover,
    .one-c-service-card:focus-within,
    .faq-category-card:hover,
    .faq-category-card:focus-visible,
    .faq-article-card > a:hover,
    .faq-article-card > a:focus-visible,
    .its-reason-grid article:hover,
    .its-work-grid article:hover,
    .its-material-grid article:hover {
        border-color: var(--card-hover-border);
        box-shadow: var(--card-hover-shadow);
        transform: translateY(-6px);
    }

    .service-card:hover img,
    .service-card:focus-within img,
    .catalog-product-card:hover .catalog-product-card__image img,
    .catalog-product-card:focus-within .catalog-product-card__image img,
    .popular-card:hover > img,
    .popular-card:focus-within > img,
    .partner-card:hover img,
    .partner-card:focus-visible img {
        transform: scale(1.055);
    }

    .updates-benefits article:hover,
    .updates-compare__card:hover,
    .marking-route__item:hover,
    .marking-benefits article:hover,
    .it-support-benefits article:hover,
    .it-support-service-card:hover,
    .integration-benefits article:hover,
    .bitrix24-benefits article:hover,
    .onec-fit article:hover,
    .updates-safety-grid article:hover,
    .marking-category-grid article:hover,
    .it-support-process__list article:hover,
    .onec-config-grid article:hover {
        border-color: transparent;
        box-shadow: var(--card-hover-shadow);
        transform: translateY(-7px);
    }
}

/* Keyboard users get the same clear feedback even without a mouse. */
.services-grid article:focus-within,
.partner-card:focus-visible,
.service-card:focus-within,
.site-service-card:focus-within,
.search-result:focus-within,
.catalog-card:focus-within,
.catalog-product-card:focus-within,
.offer-card:focus-within,
.popular-card:focus-within,
.cart-item:focus-within,
.contacts-card:focus-within,
.about-service-card:focus-within,
.about-advantage-card:focus-within,
.about-workflow__grid article:focus-within,
.one-c-service-card:focus-within,
.faq-category-card:focus-visible,
.faq-article-card > a:focus-visible,
.its-plan-card:focus-within {
    outline: 3px solid rgba(253, 91, 3, .3);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    :where([class$="-card"], [class*="-card "]) :where(h2, h3, h4, p, small, strong, span, li, a, i, button, img, svg),
    .services-grid article::after,
    .advantages-grid article:not(.is-featured)::after,
    .site-service-card:not(.is-featured)::after,
    :where(
        .accounting-benefits,
        .bitrix24-benefits,
        .integration-benefits,
        .marking-benefits,
        .updates-benefits,
        .it-support-benefits,
        .onec-fit
    ) article:not(.is-featured)::before,
    .it-support-service-card:not(.is-featured)::before,
    .its-work-grid article::after,
    :where(
        .updates-safety-grid,
        .marking-category-grid,
        .it-support-process__list,
        .onec-config-grid
    ) article::before,
    .marking-route__item:not(.is-active)::before {
        transition-duration: .01ms;
    }

    .services-grid article,
    .services-grid article::before,
    .services-grid article img,
    .advantages-grid article,
    .news-grid article,
    .partner-card,
    .service-card,
    .site-service-card,
    .search-result,
    .catalog-card,
    .catalog-product-card,
    .offer-card,
    .popular-card,
    .cart-item,
    .contacts-card,
    .about-service-card,
    .about-advantage-card,
    .about-workflow__grid article,
    .one-c-service-card,
    .faq-category-card,
    .faq-article-card > a,
    .its-plan-card,
    .its-reason-grid article,
    .its-work-grid article,
    .its-material-grid article,
    .updates-benefits article,
    .updates-compare__card,
    .marking-route__item,
    .marking-benefits article,
    .it-support-benefits article,
    .it-support-service-card,
    .integration-benefits article,
    .bitrix24-benefits article,
    .onec-fit article,
    .updates-safety-grid article,
    .marking-category-grid article,
    .it-support-process__list article,
    .onec-config-grid article,
    .service-card img,
    .catalog-product-card__image img,
    .popular-card > img,
    .partner-card img {
        transition-duration: .01ms;
    }

    .services-grid article:hover,
    .services-grid article:focus-within,
    .advantages-grid article:hover,
    .news-grid article:hover,
    .partner-card:hover,
    .service-card:hover,
    .site-service-card:hover,
    .search-result:hover,
    .catalog-card:hover,
    .catalog-product-card:hover,
    .offer-card:hover,
    .popular-card:hover,
    .cart-item:hover,
    .contacts-card:hover,
    .about-service-card:hover,
    .about-advantage-card:hover,
    .about-workflow__grid article:hover,
    .one-c-service-card:hover,
    .faq-category-card:hover,
    .faq-article-card > a:hover,
    .its-plan-card:hover,
    .its-reason-grid article:hover,
    .its-work-grid article:hover,
    .its-material-grid article:hover,
    .updates-benefits article:hover,
    .updates-compare__card:hover,
    .marking-route__item:hover,
    .marking-benefits article:hover,
    .it-support-benefits article:hover,
    .it-support-service-card:hover,
    .integration-benefits article:hover,
    .bitrix24-benefits article:hover,
    .onec-fit article:hover,
    .updates-safety-grid article:hover,
    .marking-category-grid article:hover,
    .it-support-process__list article:hover,
    .onec-config-grid article:hover,
    .services-grid article:hover img,
    .service-card:hover img,
    .catalog-product-card:hover .catalog-product-card__image img,
    .popular-card:hover > img,
    .partner-card:hover img {
        transform: none;
    }
}

/*
 * Keep the edge of dark and saturated gradient surfaces clean.
 * Paint from the outer edge and suppress the colored shadow that can become a
 * one-pixel seam on the right and bottom in Chromium. The transparent border
 * stays in the box model, so this cannot change layout.
 */
.one-c-hero__top,
.one-c-service-card__visual--placeholder,
.one-c-expert,
.one-c-detail__hero,
.about-hero,
.about-mission,
.faq-hero,
.its-hero,
.its-plan-hero,
.updates-side,
.updates-risk,
.updates-price-notice,
.marking-side,
.marking-price-notice,
.it-support-side,
.it-support-process,
.it-support-service-card.is-featured,
.integration-side,
.integration-price-notice,
.bitrix24-side,
.bitrix24-notice,
.accounting-side,
.accounting-notice,
.onec-side,
.onec-price-notice,
.contacts-hero__panel,
.about-intro__note,
.intro-card,
.contacts-route,
.rich-content blockquote,
.rich-content pre,
.faq-article__footer,
.faq-article-card__media--placeholder,
.its-value,
.its-work,
.its-material-grid article > span,
.catalog-billing-notice,
.bitrix24-annual-discount,
.it-support-price-section,
.ra-expertise,
.ra-hero__visual,
.stages-section,
.consent-document__title,
.partner-detail__hero-mark,
.partner-detail__registry,
.partner-detail__status-card,
.partner-detail__cta,
.accounting-benefits article.is-featured,
.accounting-detail-icon,
.updates-compare__card.is-good,
.marking-route__item.is-active,
.service-card-icon,
.callback-modal__panel,
.scroll-to-top,
.development-order-callout,
.development-detail .development-detail-hero__grid,
.development-detail .development-detail-summary > div,
.development-detail .development-detail-summary > div:last-child,
.development-detail .development-solution-card,
.development-detail .development-project-stages,
.development-detail .development-project-stages .development-stage-list article,
.development-detail .development-estimates article:first-child,
.development-detail .development-case {
    background-clip: border-box;
    background-origin: border-box;
    border-color: transparent;
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
    .development-service-card:hover,
    .development-detail .development-project-stages .development-stage-list article:is(:hover, :focus-within),
    .development-detail .development-result-grid article:is(:hover, :focus-within),
    .its-work-grid article:is(:hover, :focus-within),
    .ra-feature-card:hover,
    article:hover > .service-card-icon,
    .news-filters__items a:is(:hover, .is-active) {
        background-clip: border-box;
        background-origin: border-box;
        border-color: transparent;
    }

    .development-detail .development-project-stages .development-stage-list article:is(:hover, :focus-within),
    .development-detail .development-result-grid article:is(:hover, :focus-within),
    .its-work-grid article:is(:hover, :focus-within) {
        box-shadow: none;
    }

    .ra-feature-card:hover,
    article:hover > .service-card-icon {
        box-shadow: none;
    }
}

/*
 * Gradient controls are painted as a single surface. Their colored shadows used
 * to look like a second gradient layer protruding around the control on hover.
 */
.search-form button,
.search-filter input:checked + span,
.search-filters__actions button:hover,
.search-result__link b,
.search-pagination__pages .is-current,
.catalog-filters button:is(:hover, .is-active),
.catalog-product-card__bottom a,
.catalog-product-detail__button,
.faq-empty > a,
.faq-category-card__arrow,
.faq-article-card__more i,
.one-c-filter__buttons button.is-active,
.its-button--primary,
.its-plan-card > a,
.site-service-card a:is(:hover, :focus-visible),
.section-head > a:hover,
.contacts-card button:hover,
.order-options input:checked + span,
.cart-item__top button:hover,
.cart-qty button:hover,
.news-filters__items a:is(:hover, .is-active),
.accounting-service-nav a:is(:hover, :focus-visible, [aria-current="page"]),
.fp-form--popup-cta .fp-form__action button,
.partner-detail__primary-action,
.partner-detail__cta button,
.development-primary-action,
.development-detail .development-primary-action,
.ra-button--primary,
.scroll-to-top {
    background-clip: border-box;
    background-origin: border-box;
    border-color: transparent;
    box-shadow: none;
    isolation: isolate;
    overflow: hidden;
}

.search-form button:hover,
.faq-empty > a:hover,
.its-button--primary:hover,
.its-plan-card:is(:hover, :focus-within) > a,
.fp-form--popup-cta .fp-form__action button:hover,
.partner-detail__primary-action:hover,
.partner-detail__cta button:hover,
.development-primary-action:hover,
.development-detail .development-primary-action:hover,
.ra-button--primary:hover,
.scroll-to-top:hover {
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
    .development-service-card:hover {
        box-shadow:
            0 34px 72px -17px rgba(var(--development-accent), .28),
            inset 0 1px 0 rgba(255, 255, 255, .9);
    }
}