:root {
  --motion-feedback: 140ms;
  --motion-selection: 240ms;
  --motion-page: 180ms;
  --ease-ui: cubic-bezier(.22, 1, .36, 1);
}

.has-selection-motion { position: relative; isolation: isolate; }
.has-selection-motion > :is(button, label) { position: relative; z-index: 1; }
.selection-indicator {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: 999px;
  transform-origin: 0 0;
  background: #171120;
}
.tabs > .selection-indicator { background: white; box-shadow: 0 2px 8px #00000014; }
.tabs.selection-motion-ready [aria-selected=true] { background: transparent; box-shadow: none; }
.filter-row.has-selection-motion, .portal-install-tabs.has-selection-motion {
  width: fit-content;
  max-width: 100%;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 4px;
  border-radius: 28px;
  background: var(--surface);
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-row.has-selection-motion > button, .portal-install-tabs.has-selection-motion > button { background: transparent; flex-shrink: 0; }
.filter-row.selection-motion-ready .filter-chip.is-selected,
.portal-install-tabs.selection-motion-ready .filter-chip.is-selected { background: transparent; color: white; }
.has-selection-motion > button { transition: color var(--motion-feedback) var(--ease-ui), opacity var(--motion-feedback) var(--ease-ui); }
.has-selection-motion > button:active { opacity: .72; }
.has-selection-motion > button:focus-visible { outline-offset: -3px; }
.inquiry__options.has-selection-motion { padding: 4px; gap: 4px; border-radius: 28px; background: white; }
.inquiry__options > .selection-indicator { padding: 0; min-height: 0; border: 0; background: #171120; }
.inquiry__options.selection-motion-ready span:not(.selection-indicator) { background: transparent; border-color: transparent; transition: color var(--motion-feedback) var(--ease-ui); }
.inquiry__options.selection-motion-ready input:checked + span { background: transparent; color: white; }

.ui-round, .ui-button, .header__messengers a, .account-link, .search-toggle, .menu-toggle {
  transition: color var(--motion-feedback) var(--ease-ui), background-color var(--motion-feedback) var(--ease-ui), border-color var(--motion-feedback) var(--ease-ui), transform 120ms var(--ease-ui);
}
.ui-round:active, .header__messengers a:active, .account-link:active, .search-toggle:active, .menu-toggle:active { transform: scale(.96); }

@media (prefers-reduced-motion: no-preference) {
  .header__glass { view-transition-name: site-header; }
  .portal-topbar { view-transition-name: app-topbar; }
  .portal-sidebar { view-transition-name: app-sidebar; }
  .portal-mobile-header { view-transition-name: app-mobile-header; }
  .portal-bottom-nav { view-transition-name: app-tabs; }
  .portal-sidebar nav > a.is-active { view-transition-name: app-sidebar-selection; }
  .portal-bottom-nav > a.is-active { view-transition-name: app-tab-selection; }
  .portal-main { view-transition-name: app-content; }
  ::view-transition-group(*) { animation-duration: var(--motion-page); animation-timing-function: var(--ease-ui); }
  ::view-transition-group(app-sidebar-selection), ::view-transition-group(app-tab-selection) { animation-duration: var(--motion-selection); }
  ::view-transition-old(root), ::view-transition-old(app-content) { animation: ui-fade-out 120ms ease both; }
  ::view-transition-new(root), ::view-transition-new(app-content) { animation: ui-fade-in var(--motion-page) var(--ease-ui) both; }
  ::view-transition-old(site-header), ::view-transition-old(app-topbar), ::view-transition-old(app-sidebar),
  ::view-transition-old(app-tabs), ::view-transition-old(app-mobile-header) { animation: none; opacity: 0; }
  ::view-transition-new(site-header), ::view-transition-new(app-topbar), ::view-transition-new(app-sidebar),
  ::view-transition-new(app-tabs), ::view-transition-new(app-mobile-header) { animation: none; }

  @supports (transition-behavior: allow-discrete) {
    dialog:is(#inquiry-dialog, #approval-dialog, #site-search, #concept-dialog) {
      opacity: 0;
      transform: translateY(8px) scale(.985);
      transition: opacity 180ms var(--ease-ui), transform 220ms var(--ease-ui), display 220ms allow-discrete, overlay 220ms allow-discrete;
    }
    dialog:is(#inquiry-dialog, #approval-dialog, #site-search, #concept-dialog)[open] { opacity: 1; transform: none; }
    dialog:is(#inquiry-dialog, #approval-dialog, #site-search, #concept-dialog)::backdrop {
      opacity: 0;
      transition: opacity 180ms ease, display 220ms allow-discrete, overlay 220ms allow-discrete;
    }
    dialog:is(#inquiry-dialog, #approval-dialog, #site-search, #concept-dialog)[open]::backdrop { opacity: 1; }
    @starting-style {
      dialog:is(#inquiry-dialog, #approval-dialog, #site-search, #concept-dialog)[open] { opacity: 0; transform: translateY(8px) scale(.985); }
      dialog:is(#inquiry-dialog, #approval-dialog, #site-search, #concept-dialog)[open]::backdrop { opacity: 0; }
    }
  }
}

@keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-fade-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .selection-indicator { transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}