/* Free transitions.dev recipes, adapted to PoultryLog state hooks.
   Sources: transitions.dev and .agents/skills/transitions-dev. */
:root {
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --motion-cycle-1000: 1000ms;
  --motion-cycle-750: 750ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-loading-cycle: 1200ms;
}

:root {
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}


.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-modal { transition: none !important; }
}


:root {
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
}


.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-open-dur) var(--dropdown-ease),
    opacity   var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}
.t-dropdown[data-origin="top-right"]     { transform-origin: top right; }
.t-dropdown[data-origin="top-center"]    { transform-origin: top center; }
.t-dropdown[data-origin="bottom-left"]   { transform-origin: bottom left; }
.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
.t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }

.t-dropdown.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-close-dur) var(--dropdown-ease),
    opacity   var(--dropdown-close-dur) var(--dropdown-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-dropdown { transition: none !important; }
}


:root {
  --toast-open: 350ms;
  --toast-close: 250ms;
  --toast-distance: 16px;
  --toast-blur: 2px;
  --toast-scale: 0.97;
  --toast-ease: cubic-bezier(0.22, 1, 0.36, 1);
}


.t-toast {
  opacity: 0;
  transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
  filter: blur(var(--toast-blur));
  will-change: transform, opacity, filter;
  transition:
    opacity var(--toast-close) var(--toast-ease),
    transform var(--toast-close) var(--toast-ease),
    filter var(--toast-close) var(--toast-ease);
}
.t-toast.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity var(--toast-open) var(--toast-ease),
    transform var(--toast-open) var(--toast-ease),
    filter var(--toast-open) var(--toast-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-toast { transition: none !important; }
}

/* Only floating dialogs use the recipe; inline entry screens keep their layout. */
.modal-overlay.motion-managed .t-modal { animation: none; }
.modal-overlay.motion-managed.is-closing { pointer-events: none; }
@media (max-width: 767px) {
  .modal-overlay.motion-managed .t-modal { transform: translateX(-50%) scale(var(--modal-scale)); transform-origin: bottom center; }
  .modal-overlay.motion-managed .t-modal.is-open { transform: translateX(-50%) scale(1); }
  .modal-overlay.motion-managed .t-modal.is-closing { transform: translateX(-50%) scale(var(--modal-scale-close)); }
  .nav-dropdown-menu.t-dropdown { transform: none; opacity: 1; pointer-events: auto; }
  #navLinks.active { animation: motion-sheet-in var(--dropdown-open-dur) var(--dropdown-ease); }
  #navLinks.active.motion-nav-closing { animation: motion-sheet-out var(--dropdown-close-dur) var(--dropdown-ease) forwards; pointer-events: none; }
}
.nav-dropdown-right .t-dropdown { transform-origin: top right; }
/* Native dialogs retain their browser focus trap and top-layer behavior. */
dialog.processor-alert-dialog {
  opacity: 0;
  scale: var(--modal-scale-close);
  transition: opacity var(--modal-close-dur) var(--modal-ease), scale var(--modal-close-dur) var(--modal-ease), display var(--modal-close-dur) allow-discrete, overlay var(--modal-close-dur) allow-discrete;
}
dialog.processor-alert-dialog[open] {
  opacity: 1;
  scale: 1;
  transition-duration: var(--modal-open-dur);
  transition-timing-function: var(--modal-ease);
}
@starting-style { dialog.processor-alert-dialog[open] { opacity: 0; scale: var(--modal-scale); } }
.toast.t-toast { transform: translateY(var(--toast-distance)) scale(var(--toast-scale)); opacity: 0; }
.toast.t-toast.is-open { transform: translateY(0) scale(1); opacity: 1; }
@keyframes motion-sheet-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes motion-sheet-out { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 12px; } }

/* Badges stay in document flow; only the badge pops, never its trigger. */
.processor-badge.alert, .processor-badge.warning, .badge-danger, .badge-warning {
  animation: motion-badge-in var(--duration-very-slow, 500ms) cubic-bezier(0.34, 1.36, 0.64, 1);
}
@keyframes motion-badge-in { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }

/* Slow ambient loading motion independently of interaction durations. */
.skeleton-shimmer, .feed-metric-skeleton span, .feed-chart-skeleton,
.insights-skeleton span, .processor-skeleton { animation-duration: var(--motion-loading-cycle) !important; }
.compliance-button-spinner, .processor-alert-spinner,
.decision-workspace #decisionRefresh[aria-busy="true"] i,
.tasks-workspace .work-order-card-complete[aria-busy="true"] i { animation-duration: var(--motion-cycle-1000, 1000ms) !important; }

/* Hover clocks belong to the resting state so leaving is smooth as well. */
.btn, .btn:hover, .navbar-bug-button, .navbar-bug-button:hover,
.feed-workspace .btn-primary, .feed-workspace .btn-primary:hover,
.feed-stock-action, .feed-stock-action:hover, .insights-nav button, .insights-nav button:hover,
.insights-record-button, .insights-record-button:hover {
  transition: background-color var(--duration-quick) var(--ease-smooth-out), color var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out), box-shadow var(--duration-quick) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out);
}
.parts-stock-table td, .parts-stock-table tbody tr:hover td,
.processor-checklist-table tbody tr, .processor-checklist-table tbody tr:hover,
.table tbody tr, .table tbody tr:hover { transition: background-color var(--duration-quick) var(--ease-smooth-out); }
.main-content > :not(script):not(style) { animation: motion-page-in var(--duration-fast) var(--ease-smooth-out); }
details[open] > :not(summary), .feed-entry-screen.active, .feed-inventory-filters {
  animation: motion-page-in var(--duration-fast) var(--ease-smooth-out);
}
@keyframes motion-page-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}