:root {
    --cg-motion-fast: 160ms;
    --cg-motion-normal: 240ms;
    --cg-motion-slow: 520ms;
    --cg-motion-ease: cubic-bezier(.2, .8, .2, 1);
}

body.cg-body .btn,
body.cg-body button,
body.cg-body .cg-primary-button,
body.cg-body .cg-secondary-button,
body.cg-body .cg-renew-button,
body.cg-body .cg-service-card,
body.cg-body #order-standard_cart .product,
body.cg-body #v2raysocks a {
    transition-duration: var(--cg-motion-fast);
    transition-timing-function: var(--cg-motion-ease);
}

body.cg-body .btn:active,
body.cg-body button:active,
body.cg-body .cg-primary-button:active,
body.cg-body .cg-secondary-button:active,
body.cg-body #v2raysocks a:active {
    transform: scale(.98);
}

body.cg-body #v2raysocks .progress-bar {
    transition: width var(--cg-motion-slow) var(--cg-motion-ease);
}

@keyframes cg-enter {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (hover: hover) and (pointer: fine) {
    body.cg-body #v2raysocks .cg-v2-daily-actions > a:hover,
    body.cg-body #v2raysocks .cg-v2-section-links > a:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 25px rgba(48, 68, 120, .11);
    }

    body.cg-body #v2raysocks .cg-v2-daily-actions > a:hover b,
    body.cg-body #v2raysocks .cg-v2-section-links > a:hover b {
        transform: translateX(2px);
    }
}

@media (prefers-reduced-motion: no-preference) {
    body.cg-body .cg-page-head,
    body.cg-body .cg-plan-page-head,
    body.cg-body .cg-login-shell,
    body.cg-body .cg-service-controls,
    body.cg-body .cg-service-grid,
    body.cg-body .cg-billing-list,
    body.cg-body #v2raysocks > .cg-v2-hero,
    body.cg-body #v2raysocks > .cg-v2-dashboard,
    body.cg-body #v2raysocks > .cg-v2-daily,
    body.cg-body #v2raysocks > .cg-v2-section-links,
    body.cg-body #v2raysocks > .cg-v2-manage {
        animation: cg-enter var(--cg-motion-normal) var(--cg-motion-ease) both;
    }

    body.cg-body #v2raysocks > .cg-v2-dashboard { animation-delay: 45ms; }
    body.cg-body #v2raysocks > .cg-v2-daily { animation-delay: 80ms; }
    body.cg-body #v2raysocks > .cg-v2-section-links { animation-delay: 115ms; }
    body.cg-body #v2raysocks > .cg-v2-manage { animation-delay: 145ms; }
}

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