/* Motion complements the shared brand; state and focus never wait for animation. */
:root {
  --motion-press: 80ms;
  --motion-change: 180ms;
  --motion-enter: 280ms;
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-settle: cubic-bezier(0.4, 0, 0.2, 1);
}

/* A small direction cue; only the decorative SVG rotates, without reflow. */
.link-arrow {
  transform: none;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--motion-change) var(--motion-ease-out);
}

:is(a, button):is(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"]) .link-arrow {
  transform: none;
  transition: none;
}

:is(.button, .admin-button, .filter, .text-link, .panel-cta,
    .admin-detail-button, .admin-example, .admin-sidebar nav a,
    .professional-contact a) {
  transition-property: translate, scale;
  transition-duration: var(--motion-change), var(--motion-press);
  transition-timing-function: var(--motion-ease-out), var(--motion-ease-out);
}

/* Keep the existing high-contrast outline immediate, including during entrances. */
:is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid #745922;
  outline-offset: 5px;
}

:is(.button, .admin-button, .filter, .text-link, .panel-cta,
    .admin-detail-button, .admin-example, .admin-sidebar nav a,
    .professional-contact a):active:not(:disabled):not([aria-disabled="true"]) {
  scale: 0.98;
  translate: none;
}

/* Action links retain pointer handling so React can explain/block the action. */
a:is(.button, .admin-button, .text-link)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  animation: none;
  transition: none;
  translate: none;
  scale: none;
}

a:is(.button, .admin-button, .text-link)[aria-disabled="true"][data-ui="pending"][aria-busy="true"]::after {
  animation: none;
}

/* Neutralize only legacy hover fills that also match disabled anchor elements. */
a.admin-button[aria-disabled="true"]:hover { background: var(--ink); }
a.button.outline[aria-disabled="true"]:hover,
a.admin-button.secondary[aria-disabled="true"]:hover { background: transparent; }
a.text-link[aria-disabled="true"]:hover { text-decoration: none; }

/* Pending labels remain legible; the dot is decorative, never a success signal. */
:is(button, .button, .admin-button)[data-ui="pending"][aria-busy="true"] {
  position: relative;
}

:is(button, .button, .admin-button)[data-ui="pending"][aria-busy="true"]:not([aria-disabled="true"]) {
  cursor: progress;
}

:is(button, .button, .admin-button)[data-ui="pending"][aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset-inline-end: 5px;
  inset-block-start: calc(50% - 2px);
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: currentColor;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  :is(a, button):hover:not(:disabled):not([disabled]):not([aria-disabled="true"]):not([aria-busy="true"]) .link-arrow {
    transform: rotate(12deg);
  }

  :is(.button, .admin-button, .filter):hover:not(:active):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    translate: 0 -1px;
  }

  :is(.text-link, .panel-cta, .admin-detail-button, .admin-example,
      .professional-contact a):hover:not(:active):not(:disabled):not([aria-disabled="true"]) {
    translate: 2px 0;
  }
}

/* Non-replaced inline text needs its own box to participate in the stagger. */
[data-ui="feedback"] > strong[data-ui-item] { display: block; }

@media (prefers-reduced-motion: no-preference) {
  /* No opacity reveal: content is readable and actionable from its first frame. */
  :is([data-ui="stagger"], [data-ui="feedback"]) > [data-ui-item] {
    --ui-stagger-delay: 0ms;
    --ui-entry-distance: 6px;
    animation: ui-enter var(--motion-enter) var(--motion-ease-out) backwards;
    animation-delay: var(--ui-stagger-delay);
  }

  [data-ui="feedback"] > [data-ui-item] {
    --ui-entry-distance: 4px;
    animation-duration: var(--motion-change);
  }

  :is([data-ui="stagger"], [data-ui="feedback"]) > [data-ui-item]:nth-child(2) { --ui-stagger-delay: 24ms; }
  :is([data-ui="stagger"], [data-ui="feedback"]) > [data-ui-item]:nth-child(3) { --ui-stagger-delay: 48ms; }
  :is([data-ui="stagger"], [data-ui="feedback"]) > [data-ui-item]:nth-child(4) { --ui-stagger-delay: 72ms; }
  :is([data-ui="stagger"], [data-ui="feedback"]) > [data-ui-item]:nth-child(n + 5) { --ui-stagger-delay: 96ms; }

  :is(button, .button, .admin-button)[data-ui="pending"][aria-busy="true"]::after {
    animation: ui-working 1.1s var(--motion-ease-settle) infinite;
  }

  @keyframes ui-enter {
    from { translate: 0 var(--ui-entry-distance); }
    to { translate: 0 0; }
  }

  @keyframes ui-working {
    0%, 100% { opacity: 0.45; scale: 0.85; }
    50% { opacity: 1; scale: 1; }
  }
}

/* A focused control stays still even if its region has just mounted. */
:is([data-ui="stagger"], [data-ui="feedback"]):focus-within > [data-ui-item] {
  animation: none;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  :is(.button, .admin-button, .filter, .text-link, .panel-cta,
      .admin-detail-button, .admin-example, .admin-sidebar nav a,
      .professional-contact a),
  :is([data-ui="stagger"], [data-ui="feedback"]) > [data-ui-item] {
    translate: none !important;
    scale: none !important;
  }

  .panel-arrow, .link-arrow { transform: none !important; }
}

@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  :is([data-ui="stagger"], [data-ui="feedback"]) > [data-ui-item] { translate: none; }
  .confirmation :is(button, a.button, a.text-link) { display: none !important; }
  .link-arrow { transform: none !important; }
}