/* Short feedback for real control and status changes. Layout and focus stay immediate. */
@layer qo7-motion {
  @media screen and (prefers-reduced-motion: no-preference) {
    html[data-portal-shell]:not([data-motion="reduced"]) :is(
      .btn,
      .icon-button,
      .avatar-button,
      .portal-search,
      .context-switch,
      .customer-reference,
      .main-nav a,
      .page-tabs a,
      .view-switch button,
      .period-group button
    ) {
      transition-property: color, background-color, border-color;
      transition-duration: 140ms;
      transition-timing-function: ease-out;
    }

    html[data-portal-shell]:not([data-motion="reduced"]) :is(
      .field input:not([type="checkbox"]):not([type="radio"]),
      .field select,
      .field textarea,
      .row-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]),
      .row-form select,
      .row-form textarea,
      .inp,
      .confirm-input,
      .filter-search input,
      .search-field input,
      .filter-select,
      .command-input-wrap input,
      .pwmodal-input
    ) {
      transition-property: color, background-color, border-color;
      transition-duration: 140ms;
      transition-timing-function: ease-out;
    }

    html[data-portal-shell]:not([data-motion="reduced"]) :is(
      .switch,
      .state-label,
      .portal-status-label,
      .portal-status-service-label
    ) {
      transition-property: color, background-color, border-color;
      transition-duration: 140ms;
      transition-timing-function: ease-out;
    }

    /* Only the existing switch thumb moves, when its checked state changes. */
    html[data-portal-shell]:not([data-motion="reduced"]) .switch::after,
    html[data-portal-shell]:not([data-motion="reduced"]) .install-modeswitch-thumb {
      transition-property: transform, background-color;
      transition-duration: 140ms;
      transition-timing-function: ease-out;
    }

    html[data-portal-shell]:not([data-motion="reduced"]) :is(
      dialog.modal,
      dialog.sheet,
      dialog#command-dialog
    )[open]::backdrop {
      animation: qo7-backdrop-enter 180ms ease-out;
    }

    html[data-portal-shell]:not([data-motion="reduced"]) :is(
      dialog.modal,
      dialog.sheet,
      dialog#command-dialog
    )[open][data-closing="true"]::backdrop {
      animation: qo7-backdrop-exit 130ms ease-out forwards;
    }

    @media (max-width: 1023px) {
      html[data-portal-shell]:not([data-motion="reduced"]) .portal-navigation[open] > .portal-navigation-body {
        animation: qo7-navigation-enter 160ms ease-out;
      }
    }
  }

  @keyframes qo7-backdrop-enter {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes qo7-backdrop-exit {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  @keyframes qo7-navigation-enter {
    from { opacity: .75; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
  }
}