/* Shared interaction rhythm. Content and business state remain in their owners. */
:root {
 --ease-out: cubic-bezier(.23, 1, .32, 1);
 --ease-in-out: cubic-bezier(.77, 0, .175, 1);
 --ease-drawer: cubic-bezier(.32, .72, 0, 1);
 --motion-press: 120ms;
 --motion-state: 160ms;
 --motion-menu: 180ms;
 --motion-exit: 140ms;
 --motion-dialog: 220ms;
}

html[data-ui-motion] :where(button, .button, .public-auth-button, .pricing-card-cta, .sidebar a[data-nav], .credit-card, .quick-start > a) {
 transition: color var(--motion-state) var(--ease-out),
  background-color var(--motion-state) var(--ease-out),
  border-color var(--motion-state) var(--ease-out),
  box-shadow var(--motion-state) var(--ease-out),
  opacity var(--motion-state) var(--ease-out),
  transform var(--motion-press) var(--ease-out),
  scale var(--motion-press) var(--ease-out) !important;
 transform-origin: center;
}

/* Scale is independent of existing icon rotations and 3D packaging geometry. */
html:not([data-input-mode="keyboard"]) :where(button:enabled, .button, .public-auth-button, .pricing-card-cta):not([aria-disabled="true"]):active {
 scale: .975;
 transition-duration: 80ms !important;
}
html:not([data-input-mode="keyboard"]) :where(.icon-button, .account-close, .sidebar-collapse):enabled:active { scale: .92; }
html:not([data-input-mode="keyboard"]) .sidebar a[data-nav]:active { scale: .985; }
:where(button, a)[aria-disabled="true"] { scale: 1; }

/* Specificity intentionally replaces scattered legacy transitions. */
.primary, .secondary, .icon-button, .text-button, .sidebar-collapse, .auth-primary,
.button, .public-auth-button, .pricing-card-cta,
.sidebar a[data-nav], .credit-card, .account-sidebar-trigger, .workspace-language-trigger,
.model-gender-trigger, .model-source-tabs button, .model-pick-card,
.cf-product-choice, .pa-directions button, .cf-output-grid button,
.template-card, .prompt-card, .quick-start > button, .quick-start > a, .lai-concept, .logo-concept, .billing-pack, .account-credit-link,
.category-tabs button, .mode-tabs button, .account-tabs button,
.auth-submit, .auth-secondary-action, .account-close {
 transition: color var(--motion-state) var(--ease-out), background-color var(--motion-state) var(--ease-out),
  border-color var(--motion-state) var(--ease-out), box-shadow var(--motion-state) var(--ease-out),
  opacity var(--motion-state) var(--ease-out), transform var(--motion-press) var(--ease-out), scale var(--motion-press) var(--ease-out);
}
.sidebar a[data-nav]::before,
.cf-product-choice::after, .model-pick-check {
 transition: opacity var(--motion-state) var(--ease-out), transform var(--motion-state) var(--ease-out), background-color var(--motion-state) var(--ease-out);
}
.workspace-language-chevron, .model-gender-trigger svg {
 transition: transform var(--motion-menu) var(--ease-out);
}
html[data-ui-motion] .workspace-language-popover,
html[data-ui-motion] .model-gender-menu,
html[data-ui-motion] body:not(.auth-locked) #main > section,
html[data-ui-motion] #main > .heading-row,
html[data-ui-motion] #main > .home-title { animation: none; }

@media (hover: hover) and (pointer: fine) {
 html:not([data-input-mode="keyboard"]) :where(.primary, .auth-primary, .auth-submit, .button-dark):not(:disabled):not([aria-disabled="true"]):hover {
  box-shadow: 0 4px 12px rgb(0 118 112 / .14);
 }
 html:not([data-input-mode="keyboard"]) :where(.secondary, .icon-button, .model-gender-trigger):enabled:hover {
  box-shadow: 0 2px 7px rgb(22 67 71 / .07);
 }
 html:not([data-input-mode="keyboard"]) .credit-card:hover b { transform: translate(2px, -2px); }
 .credit-card b { transition: transform var(--motion-state) var(--ease-out); }
}

/* No sticky hover displacement on touch screens. */
@media (hover: none), (pointer: coarse) {
 :where(.sidebar a[data-nav], .credit-card, .account-sidebar-trigger, .workspace-language-trigger,
 .pa-directions button, .cf-output-grid button, .template-card, .prompt-card,
 .quick-start > button, .quick-start > a, .lai-concept, .logo-concept, .billing-pack, .billing-pack .auth-primary,
 .account-credit-link, .account-close):hover { transform: none !important; }
 .credit-card:hover::after { transform: none !important; }
 .template-card:hover .art img, .recent-card:hover img { transform: none !important; }
}

/* Native discrete transitions preserve immediate focus, Escape and close(). */
html[data-ui-motion] dialog:not(#editor) {
 opacity: 0;
 scale: .98;
 transition: opacity var(--motion-dialog) var(--ease-out), scale var(--motion-dialog) var(--ease-out),
  display var(--motion-dialog) allow-discrete, overlay var(--motion-dialog) allow-discrete;
}
html[data-ui-motion] dialog:not(#editor)[open] { opacity: 1; scale: 1; animation: none; }
html[data-ui-motion] dialog.account-dialog:not(#editor) {
 scale: 1;
 translate: 24px 0;
 transition: opacity var(--motion-dialog) var(--ease-drawer), translate var(--motion-dialog) var(--ease-drawer),
  display var(--motion-dialog) allow-discrete, overlay var(--motion-dialog) allow-discrete;
}
html[data-ui-motion] dialog.account-dialog:not(#editor)[open] { scale: 1; translate: 0; }
html[data-ui-motion] dialog:not(#editor)::backdrop {
 opacity: 0;
 animation: none;
 transition: opacity var(--motion-dialog) var(--ease-out), display var(--motion-dialog) allow-discrete, overlay var(--motion-dialog) allow-discrete;
}
html[data-ui-motion] dialog:not(#editor)[open]::backdrop { opacity: 1; }
@starting-style {
 html[data-ui-motion] dialog:not(#editor)[open] { opacity: 0; scale: .98; }
 html[data-ui-motion] dialog.account-dialog:not(#editor)[open] { scale: 1; translate: 24px 0; }
 html[data-ui-motion] dialog:not(#editor)[open]::backdrop { opacity: 0; }
}

/* The existing toast owns its translateX(-50%) and placement. */
.toast { transition: opacity var(--motion-menu) var(--ease-out), transform var(--motion-menu) var(--ease-out); }

/* Only explicit, real busy states get a progress indicator; disabled is not busy. */
:where(.primary, .secondary, .auth-submit)[aria-busy="true"]::before,
form[aria-busy="true"] .auth-submit::before {
 content: "";
 display: inline-block;
 flex: 0 0 14px;
 width: 14px;
 height: 14px;
 border: 1.5px solid currentColor;
 border-right-color: transparent;
 border-radius: 50%;
 animation: ui-busy-turn 800ms linear infinite;
}
@keyframes ui-busy-turn { to { transform: rotate(360deg); } }

/* Frequent keyboard operations are instant while focus remains visible. */
html[data-input-mode="keyboard"] :where(button, .button, .public-auth-button, .pricing-card-cta,
.sidebar a[data-nav], .credit-card, .workspace-language-chevron, .model-gender-trigger svg,
.sidebar a[data-nav]::before, .model-pick-check, dialog:not(#editor), dialog:not(#editor)::backdrop) {
 transition: none !important;
 scale: 1;
}
html[data-input-mode="keyboard"] :where(.sidebar a[data-nav], .credit-card, .account-sidebar-trigger,
.workspace-language-trigger, .pa-directions button, .cf-output-grid button, .template-card,
.prompt-card, .quick-start > button, .quick-start > a, .lai-concept, .logo-concept, .billing-pack,
.billing-pack .auth-primary, .account-credit-link, .account-close):hover { transform: none !important; }
html[data-input-mode="keyboard"] .credit-card:hover::after { transform: none !important; }
html[data-input-mode="keyboard"] .template-card:hover .art img,
html[data-input-mode="keyboard"] .recent-card:hover img { transform: none !important; }
html[data-input-mode="keyboard"] button:active:enabled { transform: none; }
:where(button, .button, .public-auth-button, .pricing-card-cta):focus-visible {
 scale: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after,
 html[data-ui-motion] *, html[data-ui-motion] *::before, html[data-ui-motion] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
 }
 :where(button, .button, .public-auth-button, .pricing-card-cta, .sidebar a[data-nav], .credit-card) { scale: 1 !important; }
 :where(.sidebar a[data-nav], .credit-card, .account-sidebar-trigger, .workspace-language-trigger,
 .pa-directions button, .cf-output-grid button, .template-card, .prompt-card, .quick-start > button, .quick-start > a,
 .lai-concept, .logo-concept, .billing-pack, .billing-pack .auth-primary,
 .account-credit-link, .account-close):hover { transform: none !important; }
 .credit-card:hover::after { transform: none !important; }
 button:active:enabled { transform: none !important; }
 .template-card:hover .art img, .recent-card:hover img { transform: none !important; }
}