/* Short, restrained motion; content is readable before JavaScript initializes. */
:is(.front-body, .admin-body) {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}
:is(.front-body, .admin-body) :is(.btn, .studio-button, .reference-action, .reference-service, .studio-product, .story-card) {
  transition: transform 220ms var(--motion-ease), box-shadow 220ms var(--motion-ease), background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
:is(.front-body, .admin-body) :is(.btn, .studio-button):active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(1px) scale(.98);
}
:is(.front-body, .admin-body) :is(.form-control, .form-select) {
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  :is(.front-body, .admin-body) :is(.btn, .studio-button):hover:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px #09132d18;
  }
  :is(.front-body, .admin-body) :is(.studio-product, .story-card, .reference-action, .reference-service):hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px #09132d12;
  }
}
:is(.front-body, .admin-body) .motion-enter {
  animation: content-enter 520ms var(--motion-ease) both;
}
:is(.front-body, .admin-body) .motion-enter:focus-within { animation: none; }
@keyframes content-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
:is(.front-body, .admin-body) :is(button, .btn).is-loading,
:is(.front-body, .admin-body) #toy-estimate:disabled {
  cursor: progress;
}
:is(.front-body, .admin-body) :is(button, .btn).is-loading::before,
:is(.front-body, .admin-body) form[aria-busy="true"] #toy-estimate:disabled::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-inline-end: .6em;
  vertical-align: -.12em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: loading-turn 800ms linear infinite;
}
@keyframes loading-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  :is(.front-body, .admin-body) .motion-enter { animation: none; }
  :is(.front-body, .admin-body) :is(button, .btn).is-loading::before,
  :is(.front-body, .admin-body) form[aria-busy="true"] #toy-estimate:disabled::before { animation: none; }
  :is(.front-body, .admin-body) :is(.btn, .studio-button, .studio-product, .story-card, .reference-action, .reference-service):is(:hover, :active) { transform: none; }
}
/* Inner-page controls keep their layout, including selected option buttons. */
:is(.front-body, .admin-body) :is(.calculator-options button, .color-choice, .kc-chips button, .kc-wide, .kc-primary-link, .account-order-filters button, .admin-nav a, .customer-nav a, .content-tabs a) {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
:is(.front-body, .admin-body) :is(.front-job-card, .reference-metric, .quote-card) {
  transition: border-color 180ms ease, box-shadow 220ms var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) {
  :is(.front-body, .admin-body) :is(.front-job-card, .reference-metric, .quote-card):hover {
    box-shadow: 0 8px 22px #09132d14;
  }
}
@media print { :is(.front-body, .admin-body) .motion-enter { animation: none; } }