:root {
    --motion-instant: 90ms;
    --motion-fast: 150ms;
    --motion-base: 220ms;
    --motion-slow: 360ms;
    --motion-emphasis: 650ms;
    --motion-ambient: 48s;
    --ease-out: cubic-bezier(0.22, 0.7, 0.2, 1);
    --ease-in: cubic-bezier(0.5, 0, 0.9, 0.4);
    --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);
    --ease-spring: cubic-bezier(0.3, 1.4, 0.55, 1);
    --motion-lift: -1px;
    --motion-press: 0.97;
    --focus-ring: var(--insp-accent, #00aad3);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-instant: 0.01ms;
        --motion-fast: 0.01ms;
        --motion-base: 0.01ms;
        --motion-slow: 0.01ms;
        --motion-emphasis: 0.01ms;
        --motion-ambient: 0.01ms;
        --motion-lift: 0px;
        --motion-press: 1;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}

.btn,
.btn-action {
    --tone: var(--insp-primary);
}

:is(.btn-secondary, .btn-outline-secondary, .btn-light, .btn-action.neutral) {
    --tone: #6c757d;
}

:is(.btn-success, .btn-outline-success, .btn-action.success, .btn-cta) {
    --tone: #198754;
}

:is(.btn-danger, .btn-outline-danger, .btn-action.danger) {
    --tone: #dc3545;
}

:is(.btn-warning, .btn-outline-warning) {
    --tone: #e0a800;
}

.btn-apply {
    --tone: var(--insp-yellow-dark, #ebd713);
}

:is(.btn, .btn-action, .band-action, .icon-action, .table-gear, .widget-remove, .widget-chip-add, .widget-chip-remove,
    .hint-x, .hint-wrench, .hint-bar-bulb, .showcase-tool, .showcase-add, .filter-tag, .chip-clear, .area-chip-remove,
    .theme-toggle, .lang-toggle, .lang-pick, .color-swatch, .relation-toggle, .section-toggle, .widget-title,
    .item-info, .searchable-select-arrow, .sort-link) {
    transition: transform var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out),
                background-color var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out),
                color var(--motion-fast) var(--ease-out),
                opacity var(--motion-fast) var(--ease-out),
                rotate var(--motion-base) var(--ease-spring);
}

.table-gear:not(:disabled):hover,
.page-head-gear.open .table-gear {
    rotate: 60deg;
}

:is(.widget-remove, .hint-x, .chip-clear, .area-chip-remove, .widget-chip-remove):not(:disabled):hover {
    rotate: 90deg;
}

.hint-wrench:not(:disabled):hover {
    rotate: -25deg;
}

.btn {
    --bs-btn-focus-box-shadow: none;
}

:is(.btn:not(.btn-link), .btn-action, .filter-tag, .widget-chip-add):not(:disabled, .disabled):hover {
    transform: translateY(var(--motion-lift));
    box-shadow: 0 3px 10px -4px color-mix(in srgb, var(--tone, var(--insp-primary)) 70%, transparent),
                0 0 0 3px color-mix(in srgb, var(--tone, var(--insp-primary)) 13%, transparent);
}

:is(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-action.primary, .btn-cta):not(:disabled, .disabled):hover {
    box-shadow: 0 5px 16px -4px color-mix(in srgb, var(--tone) 80%, transparent),
                0 0 0 3px color-mix(in srgb, var(--tone) 22%, transparent);
}

:is(.btn-group, .input-group) > .btn:not(:disabled, .disabled):hover {
    transform: none;
}

:is(.btn, .btn-action, .icon-action, .table-gear, .widget-remove, .widget-chip-add, .widget-chip-remove, .hint-x,
    .hint-wrench, .hint-bar-bulb, .showcase-tool, .showcase-add, .filter-tag, .chip-clear, .area-chip-remove, .theme-toggle,
    .lang-toggle, .lang-pick, .color-swatch, .relation-toggle):not(:disabled, .disabled):active {
    transform: scale(var(--motion-press));
    transition-duration: var(--motion-instant);
}

.band-action:not(:disabled, .disabled):active {
    background: color-mix(in srgb, var(--insp-primary) 20%, transparent);
    transition-duration: var(--motion-instant);
}

:is(.btn, .btn-action, .band-action, .icon-action, .table-gear, .widget-remove, .widget-chip-add, .widget-chip-remove,
    .hint-x, .hint-wrench, .hint-bar-bulb, .showcase-tool, .filter-tag, .chip-clear, .area-chip-remove, .theme-toggle,
    .lang-toggle, .lang-pick, .color-swatch, .relation-toggle, .section-toggle, .widget-title, .item-info, .sort-link,
    .page-tab):focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.band-action:focus-visible {
    outline-offset: -3px;
}

.band-action:is([aria-pressed="true"], [aria-expanded="true"], .active) {
    background: color-mix(in srgb, var(--insp-primary) 14%, transparent);
    color: var(--insp-primary-dark);
}

:is(.btn, .btn-action, .filter-tag):is([aria-pressed="true"], [aria-expanded="true"], .active),
.btn-check:checked + .btn {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone, var(--insp-primary)) 22%, transparent),
                0 0 14px -2px color-mix(in srgb, var(--tone, var(--insp-primary)) 60%, transparent);
    animation: motion-toggle-on var(--motion-emphasis) var(--ease-out);
}

@keyframes motion-toggle-on {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone, var(--insp-primary)) 60%, transparent),
                    0 0 0 0 transparent;
    }

    55% {
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--tone, var(--insp-primary)) 0%, transparent),
                    0 0 16px -2px color-mix(in srgb, var(--tone, var(--insp-primary)) 60%, transparent);
    }
}

.act-icon {
    display: inline-block;
    line-height: 1;
    transform-origin: 50% 55%;
    transition: transform var(--motion-base) var(--ease-spring), opacity var(--motion-fast) var(--ease-out);
}

:is(button, a, label, summary, [role="button"]):not(:disabled):is(:hover, :focus-visible) .act-icon.mono-emoji {
    opacity: 0.95;
}

:is(button, a, label, summary, [role="button"]):not(:disabled):is(:hover, :focus-visible) :is(.act-edit, .act-note) {
    transform: rotate(-16deg) translateY(-1px);
}

:is(button, a, label, summary, [role="button"]):not(:disabled):is(:hover, :focus-visible) :is(.act-add, .act-close) {
    transform: rotate(90deg);
}

:is(button, a, label, summary, [role="button"]):not(:disabled):is(:hover, :focus-visible) .act-settings {
    transform: rotate(120deg);
    transition-duration: var(--motion-slow);
}

:is(button, a, label, summary, [role="button"]):not(:disabled):is(:hover, :focus-visible) .act-cancel {
    transform: rotate(-90deg);
}

:is(button, a, label, summary, [role="button"]):not(:disabled):is(:hover, :focus-visible) .act-refresh {
    transform: rotate(180deg);
    transition-duration: var(--motion-slow);
}

:is(button, a, label, summary, [role="button"]):not(:disabled):is(:hover, :focus-visible) :is(.act-restore) {
    transform: rotate(-35deg);
}

:is(button, a, label, summary, [role="button"]):not(:disabled):is(:hover, :focus-visible) .act-publish {
    transform: translateY(-2px);
}

:is(button, a, label, summary, [role="button"]):not(:disabled):is(:hover, :focus-visible) .act-download {
    transform: translateY(2px);
}

:is(button, a, label, summary, [role="button"]):not(:disabled):is(:hover, :focus-visible) :is(.act-copy, .act-catalogue) {
    transform: translate(1px, -1px) scale(1.08);
}

:is(button, a, label, summary, [role="button"]):not(:disabled):is(:hover, :focus-visible) :is(.act-confirm, .act-favorite, .act-favorite-on) {
    transform: scale(1.22) rotate(-8deg);
}

:is(button, a, label, summary, [role="button"]):not(:disabled):is(:hover, :focus-visible) :is(.act-calendar, .act-document, .act-chart, .act-archive) {
    transform: translateY(-1px) rotate(-7deg);
}

:is(button, a, label, summary, [role="button"]):not(:disabled):is(:hover, :focus-visible) .act-leave {
    transform: translateX(2px);
}

:is(button, a, label, summary, [role="button"]):not(:disabled):is(:hover, :focus-visible) .act-more {
    transform: scaleX(1.25);
}

:is(button, a, label, summary, [role="button"]):not(:disabled):is(:hover, :focus-visible) .act-delete {
    animation: motion-trash var(--motion-slow) var(--ease-out);
}

:is(button, a, label, summary, [role="button"]):not(:disabled):is(:hover, :focus-visible) .act-flag {
    animation: motion-wave var(--motion-slow) var(--ease-out);
    transform-origin: 20% 90%;
}

@keyframes motion-trash {
    0%, 100% { transform: none; }
    25% { transform: translateY(-2px) rotate(-12deg); }
    50% { transform: translateY(-1px) rotate(9deg); }
    75% { transform: rotate(-4deg); }
}

@keyframes motion-wave {
    0%, 100% { transform: none; }
    35% { transform: rotate(-14deg); }
    70% { transform: rotate(8deg); }
}

.section-chevron,
.widget-chevron {
    display: inline-block;
    transition: transform var(--motion-base) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.section-toggle[aria-expanded="false"] .section-chevron,
.widget-title.collapsed .widget-chevron {
    transform: rotate(-90deg);
}

.section-toggle:hover .section-chevron,
.widget-title:hover .widget-chevron {
    color: var(--insp-primary);
}

@keyframes motion-pop-in {
    from {
        opacity: 0;
        translate: 0 -4px;
        scale: 0.98;
    }
}

@keyframes motion-slide-in {
    from {
        opacity: 0;
        translate: 8px -4px;
        scale: 0.96;
    }
}

@keyframes motion-rise-in {
    from {
        opacity: 0;
        translate: 0 12px;
    }
}

@keyframes motion-toast-in {
    from {
        opacity: 0;
        translate: 0 -8px;
        scale: 0.96;
    }
}

@keyframes motion-fade-in {
    from {
        opacity: 0;
    }
}

.action-button.is-busy .action-mark {
    animation: motion-pop-in var(--motion-fast) var(--ease-spring);
}

.action-button.is-busy .action-button-label {
    animation: motion-fade-in var(--motion-base) var(--ease-out);
}

.action-button.is-busy .action-mark-done {
    animation: motion-done-pop var(--motion-slow) var(--ease-spring);
}

@keyframes motion-done-pop {
    0% { scale: 0.7; }
    60% { scale: 1.15; }
    100% { scale: 1; }
}