:root {
    --interaction-accent: #5146ed;
    --interaction-border: #aaa3f2;
    --interaction-duration: 180ms;
}

:is(.button, .billing-button) {
    transition: transform var(--interaction-duration) ease, box-shadow var(--interaction-duration) ease,
        background-color var(--interaction-duration) ease, background-position var(--interaction-duration) ease,
        border-color var(--interaction-duration) ease, color var(--interaction-duration) ease;
}

/* Alert and destructive actions retain their existing semantic colors. */
:is(.button--primary, .billing-button--primary):not(.button--danger, .button--alert, .billing-button--danger, .message-compose-modal__panel--alert *) {
    background: linear-gradient(110deg, #5146ed, #6450d8, #4539ce);
    background-size: 200% 100%;
    background-position: 0 50%;
    color: #fff;
    box-shadow: 0 4px 12px rgb(81 70 237 / 16%);
}

:is(.button, .billing-button):not(:disabled, [aria-disabled="true"], .button--disabled):focus-visible {
    outline: 3px solid var(--interaction-accent);
    outline-offset: 3px;
}

/* Only cards with an existing whole-card link receive movement. */
:is(a.club-settings-card[href], .event-card:has(.event-card__link[href]), .billing-metric--linked:has(.billing-metric__link[href])) {
    transition: transform var(--interaction-duration) ease, box-shadow var(--interaction-duration) ease,
        border-color var(--interaction-duration) ease;
}

.billing-metric__link::after {
    transition: box-shadow var(--interaction-duration) ease;
}

:is(.nav-item, .club-section-tabs > a, .billing-tabs > a, .workspace-account__link) {
    transition: background-color var(--interaction-duration) ease, color var(--interaction-duration) ease;
}

a.club-settings-card[href]:focus-visible,
.event-card:has(.event-card__link:focus-visible),
.billing-metric--linked:has(.billing-metric__link:focus-visible) {
    border-color: var(--interaction-border);
    box-shadow: 0 6px 20px rgb(81 70 237 / 12%);
}

@media (hover: hover) and (pointer: fine) {
    :is(.button--primary, .billing-button--primary):not(.button--danger, .button--alert, .billing-button--danger, .message-compose-modal__panel--alert *):not(:disabled, [aria-disabled="true"], .button--disabled, [aria-busy="true"], [aria-busy="true"] *):hover {
        background-position: 100% 50%;
        box-shadow: 0 6px 18px rgb(81 70 237 / 25%), 0 0 12px rgb(100 80 216 / 12%);
    }

    a.club-settings-card[href]:hover,
    .event-card:has(.event-card__link:hover),
    .billing-metric--linked:has(.billing-metric__link:hover) {
        border-color: var(--interaction-border);
        box-shadow: 0 8px 24px rgb(81 70 237 / 12%);
    }

    .billing-metric__link:hover::after {
        box-shadow: none;
    }
}

:is(.button--primary, .billing-button--primary):not(.button--danger, .button--alert, .billing-button--danger, .message-compose-modal__panel--alert *):not(:disabled, [aria-disabled="true"], .button--disabled, [aria-busy="true"], [aria-busy="true"] *):active {
    background-position: 100% 50%;
    box-shadow: 0 2px 6px rgb(81 70 237 / 18%);
}

a.club-settings-card[href]:active,
.event-card:has(.event-card__link:active),
.billing-metric--linked:has(.billing-metric__link:active) {
    border-color: var(--interaction-accent);
    box-shadow: 0 2px 8px rgb(81 70 237 / 14%);
}

@media (prefers-reduced-motion: no-preference) {
    @media (hover: hover) and (pointer: fine) {
        :is(.button--primary, .billing-button--primary):where(:not(.button--danger, .button--alert, .billing-button--danger, .message-compose-modal__panel--alert *)):not(:disabled, [aria-disabled="true"], .button--disabled, [aria-busy="true"], [aria-busy="true"] *):hover,
        a.club-settings-card[href]:hover,
        .event-card:has(.event-card__link:hover),
        .billing-metric--linked:has(.billing-metric__link:hover) {
            transform: translateY(-2px);
        }
    }

    :is(.button, .billing-button):not(:disabled, [aria-disabled="true"], .button--disabled, [aria-busy="true"], [aria-busy="true"] *):active {
        transform: translateY(0) scale(.98);
        transition-duration: 90ms;
    }

    a.club-settings-card[href]:active,
    .event-card:has(.event-card__link:active),
    .billing-metric--linked:has(.billing-metric__link:active) {
        transform: translateY(0) scale(.995);
        transition-duration: 90ms;
    }
}

:is(.button, .billing-button):is(:disabled, [aria-disabled="true"], .button--disabled, [aria-busy="true"], [aria-busy="true"] *) {
    transform: none;
    box-shadow: none;
    background-position: 0 50%;
}

@media (prefers-reduced-motion: reduce) {
    :is(.button, .billing-button, a.club-settings-card[href], .event-card, .billing-metric--linked,
        .nav-item, .club-section-tabs > a, .billing-tabs > a, .workspace-account__link),
    .billing-metric__link::after {
        transition: none;
    }
}