/*
 * Motion layer
 *
 * Keep feedback brief and functional. This file intentionally animates only
 * opacity, transform, and colors; it does not alter layout, visibility, or
 * pointer-event semantics.
 */

:root {
  --motion-fast: 100ms;
  --motion-standard: 150ms;
  --motion-emphasis: 180ms;
  --motion-ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* Controls */
button,
.button-link,
.import-picker,
nav button,
.segmented button,
.store-tabs button,
.checks label {
  transition-property: background-color, border-color, color, opacity, transform;
  transition-duration: var(--motion-standard);
  transition-timing-function: var(--motion-ease-out);
}

button:not(:disabled):active,
.button-link:active,
.import-picker:active {
  transform: scale(.985);
}

button:disabled,
input:disabled,
select:disabled {
  transition-property: background-color, border-color, color, opacity;
  transition-duration: var(--motion-fast);
  transition-timing-function: ease-out;
}

input,
select {
  transition-property: background-color, border-color, color;
  transition-duration: var(--motion-standard);
  transition-timing-function: ease-out;
}

/* Page changes use entry feedback only, so routing and loading stay immediate. */
.page.active {
  animation: motion-page-in var(--motion-standard) var(--motion-ease-out);
}

@keyframes motion-page-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dialog visibility remains controlled exclusively by the existing .hidden. */
.modal:not(.hidden) {
  animation: motion-modal-backdrop-in var(--motion-standard) ease-out;
}

.modal:not(.hidden) .modal-card {
  animation: motion-modal-card-in var(--motion-emphasis) var(--motion-ease-out);
}

@keyframes motion-modal-backdrop-in {
  from { background-color: rgba(15, 31, 28, 0); }
  to { background-color: var(--color-overlay, rgba(15, 31, 28, .42)); }
}

@keyframes motion-modal-card-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Drawer backdrop and panel enter independently without delaying close logic. */
.drawer-backdrop:not(.hidden) {
  animation: motion-drawer-backdrop-in var(--motion-standard) ease-out;
}

.drawer-backdrop:not(.hidden) .drawer-panel {
  animation: motion-drawer-panel-in var(--motion-emphasis) var(--motion-ease-out);
}

@keyframes motion-drawer-backdrop-in {
  from { background-color: rgba(14, 31, 27, 0); }
  to { background-color: rgba(14, 31, 27, .38); }
}

@keyframes motion-drawer-panel-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Override the legacy transition shorthand with an explicit, bounded set. */
#toast {
  transition-property: opacity, transform, background-color, color;
  transition-duration: var(--motion-emphasis);
  transition-timing-function: var(--motion-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}