/* One quiet motion language across the public site and both workspaces. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-quick: 180ms;
  --motion-ui: 260ms;
}

:is(.public-home, .account-page, .owner-shell, .role-shell, dialog) :is(button, a, summary, input, select, textarea) {
  transition: color var(--motion-quick) ease,
    background-color var(--motion-ui) ease,
    border-color var(--motion-ui) ease,
    box-shadow var(--motion-ui) ease,
    opacity var(--motion-quick) ease,
    transform var(--motion-ui) var(--motion-ease),
    translate var(--motion-ui) var(--motion-ease),
    scale var(--motion-quick) var(--motion-ease);
}
:where(button, a[role=button], .hero-browse, .hero-dispatch, .nav-login-link):not(:disabled):not(.dh-panel-scrim):active {
  scale: .98;
}
:where(input, select, textarea):focus-visible {
  transition-duration: var(--motion-quick);
}

/* Cards settle into a soft lift; touch screens keep their normal position. */
:is(.pro-card, .companion-card, .public-service-item, .owner-task-card, .pc-card, .dh-start-guide > div) {
  transition: translate var(--motion-ui) var(--motion-ease),
    transform var(--motion-ui) var(--motion-ease),
    border-color var(--motion-ui) ease, box-shadow var(--motion-ui) ease;
}
@media (hover: hover) and (pointer: fine) {
  :is(.public-service-item, .owner-task-card, .dh-start-guide > div):hover {
    translate: 0 -2px;
    box-shadow: 0 10px 28px #294f8110, inset 0 1px 0 #ffffffb8;
  }
  :is(.hero-browse, .hero-dispatch, .nav-login-link, .public-admission-button, .dh-primary):not(:disabled):hover {
    translate: 0 -1px;
  }
}
:is(.hero-browse, .public-admission-button, .public-service-action button, .pro-directory-more) > svg:last-child {
  transition: translate var(--motion-ui) var(--motion-ease);
}
:is(.hero-browse, .public-admission-button, .public-service-action button, .pro-directory-more):hover > svg:last-child {
  translate: 3px 0;
}
.public-account-trigger > svg { transition: rotate var(--motion-ui) var(--motion-ease); }
.public-account-trigger[aria-expanded=true] > svg { rotate: 180deg; }

/* Intrinsic submenu height keeps the following navigation items in motion too. */
.owner-nav-submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 360ms var(--motion-ease);
}
.owner-nav-submenu.is-open { grid-template-rows: 1fr; }
.owner-submenu-content {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  translate: 0 -6px;
  visibility: hidden;
  transition: opacity 220ms ease, translate 360ms var(--motion-ease), visibility 0s 360ms;
}
.owner-nav-submenu.is-open > .owner-submenu-content {
  opacity: 1;
  translate: 0 0;
  visibility: visible;
  transition-delay: 0s;
}
.owner-nav-item[aria-expanded] > svg:last-child {
  transition: transform 360ms var(--motion-ease);
}

/* Native dialogs retain their focus, keyboard and modal behavior. */
dialog[open] { animation: soft-dialog-in 320ms var(--motion-ease); }
dialog[open]::backdrop { animation: soft-fade-in var(--motion-ui) ease; }
:is(.public-account-menu, .nc-panel, .nc-toast, .nc-error):not([hidden]) {
  animation: soft-popover-in var(--motion-ui) var(--motion-ease);
}
details[open] > :not(summary) { animation: soft-popover-in var(--motion-ui) var(--motion-ease); }
.business-table tbody tr, .owner-table tbody tr { transition: background-color var(--motion-ui) ease; }
.toast { transition: opacity var(--motion-ui) ease, transform 320ms var(--motion-ease); }

@keyframes soft-dialog-in {
  from { opacity: 0; translate: 0 10px; scale: .985; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes soft-popover-in {
  from { opacity: 0; translate: 0 -5px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes soft-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Browsers that support discrete transitions can also soften dismissal. */
@supports (transition-behavior: allow-discrete) {
  dialog {
    opacity: 0;
    translate: 0 8px;
    scale: .985;
    transition: opacity 220ms ease, translate 220ms var(--motion-ease),
      scale 220ms var(--motion-ease), display 220ms allow-discrete, overlay 220ms allow-discrete;
  }
  dialog[open] { opacity: 1; translate: 0 0; scale: 1; animation: none; }
  dialog::backdrop { opacity: 0; transition: opacity 220ms ease, display 220ms allow-discrete, overlay 220ms allow-discrete; }
  dialog[open]::backdrop { opacity: 1; animation: none; }
  :is(.public-account-menu, .nc-panel):not([hidden]) { animation: none; }
  :is(.public-account-menu, .nc-panel) {
    opacity: 0;
    translate: 0 -5px;
    transition: opacity 220ms ease, translate 220ms var(--motion-ease), display 220ms allow-discrete;
  }
  :is(.public-account-menu, .nc-panel):not([hidden]) { opacity: 1; translate: 0 0; }
  @starting-style {
    dialog[open] { opacity: 0; translate: 0 8px; scale: .985; }
    dialog[open]::backdrop { opacity: 0; }
    :is(.public-account-menu, .nc-panel):not([hidden]) { opacity: 0; translate: 0 -5px; }
  }
}

/* Drawers slide inside the hall, without moving its voice dock or header. */
@media (max-width: 1100px) {
  .dh-inspector { transition: transform 320ms var(--motion-ease), visibility 0s 320ms; }
  .dispatch-hall[data-panel=members] .dh-inspector { transition-delay: 0s; }
}
@media (max-width: 720px) {
  .dh-sidebar { transition: transform 320ms var(--motion-ease), visibility 0s 320ms; }
  .dispatch-hall[data-panel=channels] .dh-sidebar { transition-delay: 0s; }
}
.dh-panel-scrim:not([hidden]) { animation: soft-fade-in 220ms ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, dialog::backdrop {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  :is(button, a, .pro-card, .companion-card, .public-service-item, .owner-task-card, .dh-start-guide > div):hover,
  :is(button, a):active,
  :is(.hero-browse, .public-admission-button, .public-service-action button, .pro-directory-more):hover > svg:last-child {
    translate: none;
    scale: none;
  }
}