/* Motion enhances existing state changes; content is visible without JavaScript. */
body.skin-designkit-page {
    --ds-motion-fast: 150ms;
    --ds-motion-normal: 220ms;
    --ds-motion-ease: cubic-bezier(.2, .7, .2, 1);
}
#imai-studio .ds-shell { transition: grid-template-columns var(--ds-motion-normal) var(--ds-motion-ease); }
#imai-studio .ds-side { transition: padding var(--ds-motion-normal) var(--ds-motion-ease); }
#imai-studio :where(.ds-nav, .ds-subnav, .ds-context-group > summary, .ds-command-item, .ds-tab, .ds-page-number, .ds-button, .ds-iconbtn, .ds-search-command, .ds-workspace, .btn, .button) {
    transition: background-color var(--ds-motion-fast) ease, border-color var(--ds-motion-fast) ease, color var(--ds-motion-fast) ease, box-shadow var(--ds-motion-fast) ease, transform var(--ds-motion-fast) var(--ds-motion-ease);
}
#imai-studio :where(.ds-input, .ds-select, .ds-textarea, .ds-search-field, input, select, textarea) {
    transition: border-color var(--ds-motion-fast) ease, box-shadow var(--ds-motion-fast) ease, background-color var(--ds-motion-fast) ease;
}
#imai-studio :where(.ds-button, .ds-iconbtn, .ds-search-command, .btn, .button):not(:disabled):not([aria-disabled="true"]):active { transform: translateY(1px) scale(.98); }
#imai-studio .ds-context-group > summary .ds-icon { transition: transform var(--ds-motion-normal) var(--ds-motion-ease); }
#imai-studio .ds-context-group[data-motion-open="false"] > summary .ds-icon { transform: rotate(0); }
#imai-studio .ds-tab[aria-selected="true"]::after { transform-origin: left; animation: ds-motion-underline var(--ds-motion-normal) var(--ds-motion-ease); }
#imai-studio :where(.ds-table, table.list) tbody tr { transition: background-color var(--ds-motion-fast) ease; }
#imai-studio :where(a.ds-shortcut, a.ds-client-app-entry, .ds-platform-card, .ds-app-card) { transition: border-color var(--ds-motion-fast) ease, box-shadow var(--ds-motion-normal) ease; }
@media (hover: hover) and (pointer: fine) {
    #imai-studio :where(a.ds-shortcut, a.ds-client-app-entry, .ds-platform-card, .ds-app-card):hover { border-color: var(--ds-color-20); box-shadow: 0 3px 12px var(--ds-color-113); }
    #imai-studio .ds-iconbtn:hover { background: var(--ds-fill); }
}
#imai-studio #ds-view > :where(.ds-page-head, .ds-grid2, .ds-grid3, .ds-grid4, .ds-panel, .ds-stack, .ds-split, .ds-legacy-content, .ui-page-header, .ui-list-page, .ui-settings-page, .ui-stack),
#imai-studio :where(.ds-notice, .flash, .ds-client-empty, .ds-empty) { animation: ds-motion-fade var(--ds-motion-normal) var(--ds-motion-ease); }
#imai-studio[data-sidebar="expanded"] .ds-brand > span:last-child { animation: ds-motion-fade var(--ds-motion-normal) ease; }
/* Standardized dialogs are animated once by IMAIUI. These selectors remain
   only for a page that intentionally omits the shared modal runtime. */
#imai-studio dialog.ds-dialog[open]:not([data-ui-overlay]) { animation: ds-motion-enter var(--ds-motion-normal) var(--ds-motion-ease); }
#imai-studio dialog.ds-dialog[open]:not([data-ui-overlay])::backdrop { animation: ds-motion-fade var(--ds-motion-normal) ease; }
#imai-studio dialog.ds-dialog[data-motion-closing]:not([data-ui-overlay])::backdrop { animation: ds-motion-fade-out var(--ds-motion-fast) ease forwards; }
body.skin-designkit-page .imai-center-modal-root .modal-content { animation: ds-motion-enter var(--ds-motion-normal) var(--ds-motion-ease); }
body.skin-designkit-page .imai-center-modal-root[data-motion-closing] { pointer-events: none; }
body.skin-designkit-page .imai-center-modal-root[data-motion-closing] * { pointer-events: none; }
/* Preserve button dimensions and its accessible name while a request is pending. */
body.skin-designkit-page .ds-is-busy { position: relative; cursor: progress; }
body.skin-designkit-page .ds-is-busy:not(input) { color: transparent !important; }
body.skin-designkit-page .ds-is-busy > * { opacity: 0; }
body.skin-designkit-page .ds-is-busy:not(input)::after {
    content: ""; position: absolute; inset: 50% auto auto 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border: 1.5px solid var(--ds-soft); border-right-color: transparent; border-radius: 50%; animation: ds-motion-spin 700ms linear infinite;
}
body.skin-designkit-page :where(.ds-primary, .btn:not(.ghost):not(.danger), .button:not(.ghost)).ds-is-busy::after { border-color: var(--ds-paper); border-right-color: transparent; }
#imai-studio :where([data-analysis-chart], [data-analysis-rows], [data-studio-notification-list]) { transition: opacity var(--ds-motion-fast) ease; }
#imai-studio :where([data-analysis-chart], [data-analysis-rows], [data-studio-notification-list])[aria-busy="true"] { opacity: .5; }
#imai-studio [data-studio-notification-state][aria-busy="true"]::before {
    content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 8px; vertical-align: -1px;
    border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ds-motion-spin 700ms linear infinite;
}
@container (max-width: 570px) {
    #imai-studio[data-sidebar] .ds-side {
        display: flex; position: fixed; inset: 0 auto 0 0; z-index: 21;
        width: min(260px, calc(100vw - 48px)); height: 100dvh; padding: 24px 15px max(18px, env(safe-area-inset-bottom));
        visibility: hidden; transform: translateX(-100%);
        transition: transform var(--ds-motion-normal) var(--ds-motion-ease), visibility 0s var(--ds-motion-normal);
    }
    #imai-studio[data-mobile-menu="open"] .ds-side { visibility: visible; transform: translateX(0); transition-delay: 0s; }
}
@keyframes ds-motion-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-motion-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ds-motion-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ds-motion-underline { from { transform: scaleX(.3); } to { transform: scaleX(1); } }
@keyframes ds-motion-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    body.skin-designkit-page *, body.skin-designkit-page *::before, body.skin-designkit-page *::after, body.skin-designkit-page dialog::backdrop {
        animation: none !important; transition: none !important; scroll-behavior: auto !important;
    }
}