/* ============================================================
   Buildtron Trip Tickets — animations.css
   A motion layer on top of the design system: entrance
   animations + smoother micro-interactions. Loaded globally
   after components.css. Fully disabled under reduced-motion.
   ============================================================ */

@keyframes bt-fade     { from { opacity: 0; }                                   to { opacity: 1; } }
@keyframes bt-rise     { from { opacity: 0; transform: translateY(12px); }      to { opacity: 1; transform: none; } }
@keyframes bt-rise-sm  { from { opacity: 0; transform: translateY(7px); }       to { opacity: 1; transform: none; } }
@keyframes bt-slide    { from { opacity: 0; transform: translateX(-10px); }     to { opacity: 1; transform: none; } }
@keyframes bt-pop      { from { opacity: 0; transform: scale(0.96); }           to { opacity: 1; transform: none; } }
@keyframes bt-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes bt-meter    { from { transform: scaleX(0); }                         to { transform: scaleX(1); } }
@keyframes bt-grow-y   { from { transform: scaleY(0); }                         to { transform: scaleY(1); } }
@keyframes bt-toast-in { from { opacity: 0; transform: translateX(12px); }      to { opacity: 1; transform: none; } }
@keyframes bt-stamp    { from { opacity: 0; transform: scale(0.55); }            to { opacity: 1; transform: none; } }
@keyframes bt-rail-expand { from { width: var(--rail-w-min, 68px); }             to { width: var(--rail-w-max, 248px); } }

/* Notification arrival trio: the bell swings, the badge stamps in with a
   spring, and a ring ripples out of it (js/core/notifications.js replays
   these classes on every realtime arrival). */
@keyframes bt-bell-ring {
  0% { transform: rotate(0); }   15% { transform: rotate(14deg); }
  30% { transform: rotate(-11deg); } 45% { transform: rotate(8deg); }
  60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); }
  100% { transform: rotate(0); }
}
@keyframes bt-badge-pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes bt-ping     { from { transform: scale(0.7); opacity: 0.65; } to { transform: scale(2.3); opacity: 0; } }
@keyframes bt-notif-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------
   Always-on micro-transitions (cheap, no layout thrash)
   ------------------------------------------------------------ */
.card { transition: box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.card:hover { box-shadow: var(--shadow-md); }

.kpi-card, .quick-tile, .pipeline__card, .stack-card, .tile, .config-list__item {
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.kpi-card:hover     { transform: translateY(-2px); }
.pipeline__card:hover { transform: translateY(-2px); }
.stack-card:hover   { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.inbox__list-item { transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }

.top-bar__icon-btn { transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.top-bar__icon-btn:hover { transform: translateY(-1px); }

.dtable__chev { transition: transform var(--dur-fast) var(--ease-out); }
.dtable tbody tr:hover .dtable__chev { transform: translateX(3px); }

.tabs__item, .segmented__item { transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }

a.nav-rail__item .nav-rail__icon { transition: transform var(--dur-fast) var(--ease-out); }
.nav-rail__item:hover .nav-rail__icon { transform: translateX(2px); }

/* Phone flyout — the rail strip grows over the content. Width rather
   than transform on purpose: the icons stay planted and the labels
   reveal, mirroring the desktop grid-track animation. */
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .nav-rail--expanded { animation: bt-rail-expand var(--dur-med) var(--ease-out); }
}

/* ------------------------------------------------------------
   Entrance animations (only when motion is welcome)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {

  .page, .login, .printable { animation: bt-fade var(--dur-med) var(--ease-out) both; }
  .page-header { animation: bt-rise-sm 260ms var(--ease-out) both; }

  /* Generic cards + the login card rise in */
  .card { animation: bt-rise 280ms var(--ease-out) both; }
  .login__card { animation: bt-rise 320ms var(--ease-out) both; }
  .login__brand-body { animation: bt-slide 360ms var(--ease-out) both; }

  /* KPI tiles — staggered */
  .kpi-card { animation: bt-rise 280ms var(--ease-out) both; }
  .kpi-grid > *:nth-child(1) { animation-delay: 30ms; }
  .kpi-grid > *:nth-child(2) { animation-delay: 70ms; }
  .kpi-grid > *:nth-child(3) { animation-delay: 110ms; }
  .kpi-grid > *:nth-child(4) { animation-delay: 150ms; }
  .kpi-grid > *:nth-child(5) { animation-delay: 190ms; }

  /* Quick action tiles — staggered */
  .dashboard__quick-grid > * { animation: bt-rise-sm 260ms var(--ease-out) both; }
  .dashboard__quick-grid > *:nth-child(1) { animation-delay: 40ms; }
  .dashboard__quick-grid > *:nth-child(2) { animation-delay: 80ms; }
  .dashboard__quick-grid > *:nth-child(3) { animation-delay: 120ms; }
  .dashboard__quick-grid > *:nth-child(4) { animation-delay: 160ms; }

  /* Data-table rows — staggered ripple */
  .dtable tbody tr { animation: bt-rise-sm 200ms var(--ease-out) both; }
  .dtable tbody tr:nth-child(1) { animation-delay: 20ms; }
  .dtable tbody tr:nth-child(2) { animation-delay: 50ms; }
  .dtable tbody tr:nth-child(3) { animation-delay: 80ms; }
  .dtable tbody tr:nth-child(4) { animation-delay: 110ms; }
  .dtable tbody tr:nth-child(5) { animation-delay: 140ms; }
  .dtable tbody tr:nth-child(6) { animation-delay: 170ms; }
  .dtable tbody tr:nth-child(7) { animation-delay: 200ms; }
  .dtable tbody tr:nth-child(8) { animation-delay: 230ms; }

  /* Kanban cards pop in */
  .pipeline__card { animation: bt-pop 240ms var(--ease-out) both; }
  .pipeline__column:nth-child(2) .pipeline__card { animation-delay: 40ms; }
  .pipeline__column:nth-child(3) .pipeline__card { animation-delay: 80ms; }
  .pipeline__column:nth-child(4) .pipeline__card { animation-delay: 120ms; }

  /* Pipeline tracker steps slide in */
  .pipe__step { animation: bt-slide 300ms var(--ease-out) both; }
  .pipe__step:nth-child(1) { animation-delay: 60ms; }
  .pipe__step:nth-child(2) { animation-delay: 130ms; }
  .pipe__step:nth-child(3) { animation-delay: 200ms; }
  .pipe__step:nth-child(4) { animation-delay: 270ms; }

  /* Inbox + config list items slide in — staggered */
  .inbox__list-item, .config-list__item { animation: bt-slide 220ms var(--ease-out) both; }
  .inbox__list-item:nth-child(1), .config-list__item:nth-child(1) { animation-delay: 30ms; }
  .inbox__list-item:nth-child(2), .config-list__item:nth-child(2) { animation-delay: 60ms; }
  .inbox__list-item:nth-child(3), .config-list__item:nth-child(3) { animation-delay: 90ms; }
  .inbox__list-item:nth-child(4), .config-list__item:nth-child(4) { animation-delay: 120ms; }
  .inbox__list-item:nth-child(5), .config-list__item:nth-child(5) { animation-delay: 150ms; }
  .inbox__list-item:nth-child(n+6), .config-list__item:nth-child(n+6) { animation-delay: 180ms; }

  /* Picker tiles + stack cards */
  .tile-grid > * { animation: bt-rise-sm 220ms var(--ease-out) both; }
  .stack-card { animation: bt-rise 260ms var(--ease-out) both; }

  /* Modal entrance */
  .modal-overlay:not([hidden]) { animation: bt-fade var(--dur-fast) ease both; }
  .modal-overlay:not([hidden]) .modal { animation: bt-modal-in var(--dur-med) var(--ease-out) both; }

  /* Confirm dialog — the action badge stamps in with a springy press,
     then the recipient slip rises a beat later */
  .modal-overlay:not([hidden]) .confirm__badge { animation: bt-stamp 300ms cubic-bezier(0.34, 1.56, 0.64, 1) 70ms both; }
  .modal-overlay:not([hidden]) .confirm__recipient { animation: bt-rise-sm 240ms var(--ease-out) 130ms both; }

  /* Meter fills grow from the left on first paint */
  .meter__fill { transform-origin: left center; animation: bt-meter 700ms var(--ease-out) both; }

  /* Fuel-chart bars grow up */
  .fuel-chart__bar { transform-origin: bottom; animation: bt-grow-y 600ms var(--ease-out) both; }

  /* Portaled context menu pops from its anchor corner */
  .ctx-menu:not([hidden]) { animation: bt-pop var(--dur-fast) var(--ease-out) both; }

  /* Toasts slide in from the right edge */
  .toast { animation: bt-toast-in var(--dur-med) var(--ease-out) both; }

  /* Notification arrival: bell swing + springy badge + radar ping (replayed
     per arrival by js/core/notifications.js) */
  .top-bar__bell.is-ringing { transform-origin: top center; animation: bt-bell-ring 650ms var(--ease-out); }
  .top-bar__dot.is-pop { animation: bt-badge-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1); }
  .top-bar__dot.is-ping::after {
    content: "";
    position: absolute; inset: -2px;
    border-radius: inherit;
    border: 2px solid var(--brand-red);
    animation: bt-ping 600ms var(--ease-out) both;
    pointer-events: none;
  }

  /* Dropdown rows cascade in each time the bell menu opens */
  .top-bar__notif-wrap--open .notif-item { animation: bt-rise-sm 200ms var(--ease-out) both; }
  .top-bar__notif-wrap--open .notif-item:nth-child(1) { animation-delay: 30ms; }
  .top-bar__notif-wrap--open .notif-item:nth-child(2) { animation-delay: 65ms; }
  .top-bar__notif-wrap--open .notif-item:nth-child(3) { animation-delay: 100ms; }
  .top-bar__notif-wrap--open .notif-item:nth-child(4) { animation-delay: 135ms; }

  /* A realtime arrival drops into any visible list from above */
  .notif-item.is-arriving { animation: bt-notif-in 280ms var(--ease-out) both; }
}

/* ------------------------------------------------------------
   Respect users who prefer reduced motion
   ------------------------------------------------------------ */
@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;
  }
}