/* ART DEVOPS — MOTION LAYER
   Без предварительного скрытия контента.
   Не меняет анимацию canvas и терминала.
*/

:root {
    --ad-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Панели остаются под управлением существующих переключателей. */
.ad-services .ad-service-panel.is-entering,
.ad-scenarios .ad-scenario-panel.is-entering,
.ad-process .ad-process-panel.is-entering {
    animation-duration: .48s;
    animation-timing-function: var(--ad-motion-ease);
}

/* Открытие меню. Закрытие остаётся штатным. */
header#adSiteHeader .ad-h-services[open] .ad-h-mega,
header#adSiteHeader .ad-h-settings[open] .ad-h-settings-panel {
    animation: adMotionMenuOpen .28s var(--ad-motion-ease) both;
    transform-origin: top center;
}

@keyframes adMotionMenuOpen {
    from {
        opacity: 0;
        translate: 0 -8px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* Мобильное окно навигации. */
dialog.ad-h-mobile[open] {
    animation: adMotionDialogOpen .32s var(--ad-motion-ease) both;
}

dialog.ad-h-mobile[open]::backdrop {
    animation: adMotionBackdropOpen .25s ease both;
}

@keyframes adMotionDialogOpen {
    from {
        opacity: 0;
        translate: 0 14px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes adMotionBackdropOpen {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Иконки: движение отдельно от трансформаций самих карточек. */
.ad-services .ad-service-node-icon i,
.ad-scenarios .ad-scenario-choice > i,
.ad-pricing .ad-price-icon i,
.ad-lab .ad-lab-button > i {
    display: inline-block;
    transition: translate .3s var(--ad-motion-ease);
}

header#adSiteHeader .ad-h-cta > i,
.ad-services .ad-service-cta > span:last-child,
.ad-scenarios .ad-scenario-cta > span:last-child,
.ad-process .ad-process-cta > span:last-child,
.ad-pricing .ad-price-cta > span:last-child {
    display: inline-block;
    transition: translate .3s var(--ad-motion-ease);
}

/* Клавиатурный фокус получает ту же реакцию. */
.ad-services .ad-service-node:focus-visible .ad-service-node-icon i,
.ad-scenarios .ad-scenario-choice:focus-visible > i,
.ad-pricing .ad-price-card:focus-within .ad-price-icon i,
.ad-lab .ad-lab-button:not(:disabled):focus-visible > i {
    translate: 0 -2px;
}

header#adSiteHeader .ad-h-cta:focus-visible > i,
.ad-services .ad-service-cta:focus-visible > span:last-child,
.ad-scenarios .ad-scenario-cta:focus-visible > span:last-child,
.ad-process .ad-process-cta:focus-visible > span:last-child,
.ad-pricing .ad-price-cta:focus-visible > span:last-child {
    translate: 2px -2px;
}

@media (hover: hover) and (pointer: fine) {
    .ad-services .ad-service-node:hover .ad-service-node-icon i,
    .ad-scenarios .ad-scenario-choice:hover > i,
    .ad-pricing .ad-price-card:hover .ad-price-icon i,
    .ad-lab .ad-lab-button:not(:disabled):hover > i {
        translate: 0 -2px;
    }

    header#adSiteHeader .ad-h-cta:hover > i,
    .ad-services .ad-service-cta:hover > span:last-child,
    .ad-scenarios .ad-scenario-cta:hover > span:last-child,
    .ad-process .ad-process-cta:hover > span:last-child,
    .ad-pricing .ad-price-cta:hover > span:last-child {
        translate: 2px -2px;
    }
}

/* Ограничение относится только к новому слою движения. */
@media (prefers-reduced-motion: reduce) {
    header#adSiteHeader .ad-h-services[open] .ad-h-mega,
    header#adSiteHeader .ad-h-settings[open] .ad-h-settings-panel,
    dialog.ad-h-mobile[open],
    dialog.ad-h-mobile[open]::backdrop {
        animation: none !important;
    }

    .ad-services .ad-service-panel.is-entering,
    .ad-scenarios .ad-scenario-panel.is-entering,
    .ad-process .ad-process-panel.is-entering {
        animation: none !important;
    }

    .ad-services .ad-service-node-icon i,
    .ad-scenarios .ad-scenario-choice > i,
    .ad-pricing .ad-price-icon i,
    .ad-lab .ad-lab-button > i,
    header#adSiteHeader .ad-h-cta > i,
    .ad-services .ad-service-cta > span:last-child,
    .ad-scenarios .ad-scenario-cta > span:last-child,
    .ad-process .ad-process-cta > span:last-child,
    .ad-pricing .ad-price-cta > span:last-child {
        transition: none !important;
        translate: none !important;
    }
}