/* Shared interaction timing. Route changes are coordinated by page-motion.mjs.
   These rules leave visibility, focus, dimensions, and provider styling in place. */
:root {
  --interface-ease: cubic-bezier(.22, .68, .2, 1);
  --interface-control-time: 240ms;
  --interface-panel-time: 280ms;
  --interface-enter-y: 6px;
}

/* Management pages use the same finish with less movement and shorter timing.
   The body rule also reaches native dialogs mounted outside the layout. */
.admin-layout,
body:has(.admin-layout) {
  --interface-control-time: 150ms;
  --interface-panel-time: 180ms;
  --interface-enter-y: 0px;
}

.layout :is(
  .button, .nav-button, .icon-button, .brand-button,
  .ui-account-trigger, .ui-account-item,
  .cc-button, .cc-nav-link, .cc-mobile-menu, .cc-analysis-tab, .cc-trend-option,
  .ui-usage-tab, .filter,
  .wb-button, .wb-suggestion, .wb-history-row, .wb-history-delete,
  .cl-sidebar-nav button, .cl-suggestions button, .cl-task-switch button,
  .la-button, .la-mode, .backend-button,
  .home-action, .home-text-link, .home-model-node,
  .customer-auth-submit, .customer-auth-code, .customer-auth-links button,
  .admin-action, .admin-nav-link, .admin-menu-toggle
) {
  transition:
    background-color var(--interface-control-time) var(--interface-ease),
    color var(--interface-control-time) var(--interface-ease),
    border-color var(--interface-control-time) var(--interface-ease),
    box-shadow var(--interface-control-time) var(--interface-ease),
    opacity 160ms ease,
    transform var(--interface-control-time) var(--interface-ease);
}

.layout :is(input, select, textarea),
:is(.backend-dialog, .rq-dialog, .la-panel, .la-confirm, .wb-export-dialog, .cl-utility, .legal-dialog, .relay-dialog, .key-dialog) :is(input, select, textarea) {
  transition:
    border-color var(--interface-control-time) var(--interface-ease),
    background-color var(--interface-control-time) var(--interface-ease),
    box-shadow var(--interface-control-time) var(--interface-ease);
}

.layout :is(.catalog-card, .model-card, .lp-card, .lp-custom, .rq-option, .wb-composer) {
  transition:
    border-color var(--interface-control-time) var(--interface-ease),
    background-color var(--interface-control-time) var(--interface-ease),
    box-shadow var(--interface-control-time) var(--interface-ease);
}

/* Only consumer actions gain a small press response; disabled controls stay still. */
.layout:not(.admin-layout) :is(.button.primary, .cc-button.cc-primary, .home-action-primary, .wb-button-send):enabled:active {
  transform: scale(.985);
}
.layout:not(.admin-layout) a.home-action-primary:active { transform: scale(.985); }
.layout:not(.admin-layout) .home-action:hover { transform: translateY(-1px); }
.layout:not(.admin-layout) .home-action:active { transform: translateY(0); }

/* The menu's native details visibility remains the source of truth. */
.layout .ui-account-trigger > svg {
  transition: transform var(--interface-control-time) var(--interface-ease);
}
.layout .ui-account-menu[open] > .ui-account-panel {
  transform-origin: top right;
  animation: interface-panel-enter var(--interface-panel-time) var(--interface-ease);
}
.layout .la-menu:not([hidden]) {
  animation: interface-panel-enter var(--interface-panel-time) var(--interface-ease);
}

/* Native dialogs retain their closed display state and native focus behavior.
   No animation holds an already-closed or removed dialog on screen. */
:is(.backend-dialog, .rq-dialog, .la-panel, .la-confirm, .wb-export-dialog, .cl-utility, .legal-dialog, .relay-dialog, .key-dialog)[open] {
  animation: interface-panel-enter var(--interface-panel-time) var(--interface-ease);
}
:is(.backend-dialog, .rq-dialog, .la-panel, .la-confirm, .wb-export-dialog, .cl-utility, .legal-dialog, .relay-dialog, .key-dialog)[open]::backdrop {
  animation: interface-backdrop-enter var(--interface-panel-time) ease-out;
}
:is(.backend-dialog, .rq-dialog, .la-panel, .la-confirm, .wb-export-dialog, .cl-utility, .legal-dialog, .relay-dialog, .key-dialog) :is(button, a) {
  transition:
    background-color var(--interface-control-time) var(--interface-ease),
    color var(--interface-control-time) var(--interface-ease),
    border-color var(--interface-control-time) var(--interface-ease),
    opacity 160ms ease;
}

.layout :is(.disclosure, .lp-details, .fold)[open] > :is(.disclosure-body, .lp-scroll, .fold-content) {
  animation: interface-content-enter var(--interface-panel-time) var(--interface-ease);
}

/* Selection indicators ease in without moving the tab label or its hit target. */
.layout:not(.admin-layout) :is(.nav-button.active, .cc-analysis-tab[aria-selected="true"], .ui-usage-tab[aria-current="page"])::after {
  transform-origin: center;
  animation: interface-indicator-enter var(--interface-control-time) var(--interface-ease);
}

#toast {
  transition:
    opacity var(--interface-panel-time) ease,
    transform var(--interface-panel-time) var(--interface-ease);
}

@keyframes interface-panel-enter {
  from { opacity: 0; transform: translateY(var(--interface-enter-y)); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes interface-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes interface-content-enter {
  from { opacity: .45; }
  to { opacity: 1; }
}
@keyframes interface-indicator-enter {
  from { opacity: .25; transform: scaleX(.8); }
  to { opacity: 1; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  :root, .admin-layout, body:has(.admin-layout) {
    --interface-control-time: 0ms;
    --interface-panel-time: 0ms;
    --interface-enter-y: 0px;
  }
  .layout *, .layout *::before, .layout *::after,
  :is(.backend-dialog, .rq-dialog, .la-panel, .la-confirm, .wb-export-dialog, .cl-utility, .legal-dialog, .relay-dialog, .key-dialog),
  :is(.backend-dialog, .rq-dialog, .la-panel, .la-confirm, .wb-export-dialog, .cl-utility, .legal-dialog, .relay-dialog, .key-dialog)::backdrop,
  :is(.backend-dialog, .rq-dialog, .la-panel, .la-confirm, .wb-export-dialog, .cl-utility, .legal-dialog, .relay-dialog, .key-dialog) *,
  #toast {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .layout:not(.admin-layout) .home-action,
  .layout:not(.admin-layout) :is(.button.primary, .cc-button.cc-primary, .wb-button-send):active {
    transform: none !important;
  }
}