/* FORTY motion: short, local feedback. No page scaling or layout animation. */
:root {
  --motion-enter: 220ms;
  --motion-touch: 140ms;
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
}

html[data-forty-motion] .screen {
  animation: none;
}

.button,
.icon-button,
.text-button,
.nav-item,
.campaign-row,
.choice,
.filter,
.mode-button,
.pagination button {
  transition: background-color var(--motion-touch) ease,
    color var(--motion-touch) ease,
    border-color var(--motion-touch) ease,
    transform 110ms var(--motion-ease);
}

.button:not(:disabled):active,
.icon-button:not(:disabled):active,
.choice:not(:disabled):active,
.pagination button:not(:disabled):active {
  transform: translateY(1px);
}

.button.primary > span:last-child {
  transition: transform 180ms var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .button.primary:not(:disabled):hover > span:last-child {
    transform: translate(2px, -2px);
  }

  .campaign-row:hover,
  .link-row:hover {
    background-color: #ffffff03;
  }
}

.field input,
.field select,
.field textarea,
.search-field {
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.search-field:focus-visible {
  border-color: var(--acid);
  box-shadow: 0 0 0 3px #eaff6210;
}

.toggle-row input {
  transition: background-color 180ms ease, border-color 180ms ease;
}

.toggle-row input::before {
  transition: transform 190ms var(--motion-ease), background-color 160ms ease;
}

.progress-track i {
  transition: background-color 180ms ease;
}

.ticket-motion-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, #ffffff40 50%, transparent 68%);
  opacity: 0;
}

dialog[open] {
  animation: forty-dialog-enter 170ms var(--motion-ease);
}

dialog[open]::backdrop {
  animation: forty-backdrop-enter 170ms ease-out;
}

@keyframes forty-dialog-enter {
  from { opacity: .65; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes forty-backdrop-enter {
  from { opacity: .35; }
  to { opacity: 1; }
}

@supports (transition-behavior: allow-discrete) {
  dialog {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 170ms ease-out,
      transform 170ms var(--motion-ease),
      display 170ms allow-discrete,
      overlay 170ms allow-discrete;
  }

  dialog[open] {
    animation: none;
    opacity: 1;
    transform: translateY(0);
  }

  dialog::backdrop {
    opacity: 0;
    transition: opacity 170ms ease-out,
      display 170ms allow-discrete,
      overlay 170ms allow-discrete;
  }

  dialog[open]::backdrop {
    animation: none;
    opacity: 1;
  }

  @starting-style {
    dialog[open] { opacity: 0; transform: translateY(6px); }
    dialog[open]::backdrop { opacity: 0; }
  }
}

.forty-toast-exit {
  pointer-events: none !important;
}

/* Keyboard and background changes stop decoration without changing layout. */
html[data-motion-paused] .button,
html[data-motion-paused] .button > span,
html[data-motion-paused] .icon-button,
html[data-motion-paused] .text-button,
html[data-motion-paused] .nav-item,
html[data-motion-paused] .campaign-row,
html[data-motion-paused] .choice,
html[data-motion-paused] .filter,
html[data-motion-paused] .mode-button,
html[data-motion-paused] .pagination button,
html[data-motion-paused] .field input,
html[data-motion-paused] .field select,
html[data-motion-paused] .field textarea,
html[data-motion-paused] .search-field,
html[data-motion-paused] .toggle-row input,
html[data-motion-paused] .toggle-row input::before,
html[data-motion-paused] .progress-track i,
html[data-motion-paused] dialog,
html[data-motion-paused] dialog::backdrop {
  animation: none !important;
  transition: none !important;
}

html[data-motion-paused] .button:active,
html[data-motion-paused] .button.primary:hover > span:last-child,
html[data-motion-paused] .icon-button:active,
html[data-motion-paused] .choice:active,
html[data-motion-paused] .pagination button:active {
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .screen,
  .button,
  .button > span,
  .icon-button,
  .text-button,
  .nav-item,
  .campaign-row,
  .choice,
  .filter,
  .mode-button,
  .pagination button,
  .field input,
  .field select,
  .field textarea,
  .search-field,
  .toggle-row input,
  .toggle-row input::before,
  .progress-track i,
  dialog,
  dialog::backdrop {
    animation: none !important;
    transition: none !important;
  }

  .button:active,
  .button.primary:hover > span:last-child,
  .icon-button:active,
  .choice:active,
  .pagination button:active {
    transform: none !important;
  }

  dialog[open] { opacity: 1; transform: none; }
  .ticket-motion-sheen,
  .forty-toast-exit { display: none !important; }
}