:root {
    --ease-premium: cubic-bezier(.22, 1, .36, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;
}

body.app-shell,
body.app-shell * {
    --ease: var(--ease-premium);
}

.reveal {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-slow) var(--ease-premium),
        transform var(--dur-slow) var(--ease-premium);
}

html.reveal-ready .reveal {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
}

html.reveal-ready .reveal--up {
    transform: translate3d(0, 18px, 0);
}

.reveal--delay-1 { transition-delay: 60ms; }
.reveal--delay-2 { transition-delay: 120ms; }
.reveal--delay-3 { transition-delay: 180ms; }

.reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

html.reveal-ready .item-id.reveal {
    opacity: 0;
}

html.reveal-ready .item-id.reveal.is-visible {
    opacity: 1;
}

body.app-shell .item-id,
body.app-shell .product-card,
body.app-shell .btn,
body.app-shell .product-buy,
body.app-shell .server-btn,
body.app-shell .catalog-category-switcher__button,
body.app-shell .app-nav a {
    transition-property: transform, opacity, border-color, background-color;
    transition-duration: var(--dur-base);
    transition-timing-function: var(--ease-premium);
}

body.app-shell .item-id::after,
body.app-shell .product-card::after {
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-premium);
}

body.app-shell .item-id:hover::after,
body.app-shell .product-card:hover::after {
    opacity: 1;
}

body.app-shell .item-id:hover,
body.app-shell .item-id:focus-visible,
body.app-shell .product-card:hover {
    transform: translate3d(0, -4px, 0);
}

body.app-shell .item-id .image,
body.app-shell .product-card img {
    transition: transform var(--dur-slow) var(--ease-premium),
        opacity var(--dur-base) var(--ease-premium);
}

body.app-shell .item-id:hover .image,
body.app-shell .item-id:focus-visible .image,
body.app-shell .product-card:hover img {
    transform: scale(1.06);
}

body.app-shell .btn:hover,
body.app-shell .product-buy:hover,
body.app-shell .btn:focus-visible,
body.app-shell .product-buy:focus-visible {
    transform: translate3d(0, -2px, 0);
}

body.app-shell .btn:focus-visible,
body.app-shell .product-buy:focus-visible,
body.app-shell .server-btn:focus-visible,
body.app-shell .catalog-category-switcher__button:focus-visible {
    outline: 2px solid rgba(85, 233, 255, .8);
    outline-offset: 3px;
}

.animation-paused,
.animation-paused::before,
.animation-paused::after {
    animation-play-state: paused !important;
}

body.app-shell .modal {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-premium);
}

body.app-shell .modal.active {
    opacity: 1;
    pointer-events: auto;
}

body.app-shell .modal .modal-content,
body.app-shell .modal .wrapper {
    transform: translate3d(0, 8px, 0) scale(.98);
    opacity: 0;
    transition: transform var(--dur-slow) var(--ease-premium),
        opacity var(--dur-base) var(--ease-premium);
}

body.app-shell .modal.active .modal-content,
body.app-shell .modal.active .wrapper {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
    }

    .reveal,
    .reveal.is-visible,
    body.app-shell .item-id:hover,
    body.app-shell .item-id:focus-visible,
    body.app-shell .item-id:hover .image,
    body.app-shell .item-id:focus-visible .image {
        opacity: 1 !important;
        transform: none !important;
    }
}