/* =========================================================================
   MAKE+ motion — the house motion layer.
   Source of truth: "MAKE+ Motion Gallery" (claude.ai/design) + the Bingo!
   design-system motion tokens. Served once from the bucket root; every
   portal app links it with  <link rel="stylesheet" href="/motion.css">.
   (Yarn Log inlines a copy instead — it also serves from the kiosk domain,
   where /motion.css does not exist.)

   Motion in MAKE+ is quick and confident. Nothing decorative, nothing slow.
   Feedback lands inside 150ms; only entrances get more than 200ms.
   ========================================================================= */

:root {
  /* ---- Durations --------------------------------------------------- */
  --dur-instant: 90ms;   /* feedback: hover, text color */
  --dur-fast:    140ms;  /* state changes: fill, border, selection */
  --dur-base:    200ms;  /* movement: sliding indicators, expanding rows */
  --dur-slow:    320ms;  /* entrances: menus, modals, sheets, toasts */

  /* ---- Easings ------------------------------------------------------
     --ease-out is the house curve: fast departure, long soft settle. */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-settle: cubic-bezier(0.34, 1.32, 0.64, 1); /* micro-overshoot, selection only */

  /* ---- Composed transitions ----------------------------------------- */
  --t-feedback: color var(--dur-instant) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  --t-move:     transform var(--dur-base) var(--ease-out),
                left var(--dur-base) var(--ease-out),
                width var(--dur-base) var(--ease-out);
  --t-lift:     transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);

  /* ---- Press: buttons, rows, chips — barely perceptible, always felt */
  --press-scale: 0.975;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast:    0ms;
    --dur-base:    0ms;
    --dur-slow:    0ms;
    --press-scale: 1;
  }
}

/* ---- Shared keyframes ------------------------------------------------ */
@keyframes fs-menu-in  { from { opacity: 0; transform: translateY(-4px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes fs-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.99); }  to { opacity: 1; transform: none; } }
@keyframes fs-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fs-row-in   { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes fs-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fs-shimmer  { 0% { background-position: -180px 0; } 100% { background-position: 240px 0; } }
@keyframes fs-flag-pulse { 0% { background-color: var(--amber-tint, rgba(217, 119, 6, 0.14)); } 100% { background-color: transparent; } }
@keyframes fs-spin { to { transform: rotate(360deg); } }
@keyframes fs-bar-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* =========================================================================
   Global feedback layer.
   Element-level, low specificity: any inline style or app rule that sets
   `transition` or `transform` itself still wins. This is what makes hover
   tints, fills and presses feel consistent portal-wide with zero per-app
   wiring.
   ========================================================================= */

button, [role="button"] {
  transition: color var(--dur-instant) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
button:active:not(:disabled), [role="button"]:active {
  transform: scale(var(--press-scale));
}

a { transition: color var(--dur-instant) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }

input, select, textarea {
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-instant) var(--ease-out);
}

/* =========================================================================
   Utility classes — per-app wiring hooks for the gallery's 12 interactions.
   ========================================================================= */

/* 08 Toast — enters low over --dur-slow, leaves quicker than it came. */
.fs-toast-in  { animation: fs-toast-in var(--dur-slow) var(--ease-out); }
.fs-toast     { transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.fs-toast.fs-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }

/* Entrances — menus, modals, scrims, list rows. */
.fs-menu-in  { animation: fs-menu-in var(--dur-base) var(--ease-out); }
.fs-modal-in { animation: fs-modal-in var(--dur-slow) var(--ease-out); }
.fs-scrim-in { animation: fs-scrim-in var(--dur-base) var(--ease-out); }
.fs-row-in   { animation: fs-row-in var(--dur-base) var(--ease-out) backwards; }

/* 12 Boot — skeleton shimmer that resolves into real rows in place. */
.fs-skeleton {
  background: linear-gradient(90deg, var(--muted, #EEF0F3) 0%, #E9EBEF 50%, var(--muted, #EEF0F3) 100%);
  background-size: 400px 100%;
  animation: fs-shimmer 1100ms linear infinite;
}

/* 03 Charts — bars grow from the baseline; stagger 40ms per bar via
   inline animation-delay or the nth-child ladder below (first 12 bars). */
.fs-bar-in { transform-origin: bottom; animation: fs-bar-in var(--dur-slow) var(--ease-out) backwards; }
.fs-bar-in:nth-child(1)  { animation-delay: 0ms; }
.fs-bar-in:nth-child(2)  { animation-delay: 40ms; }
.fs-bar-in:nth-child(3)  { animation-delay: 80ms; }
.fs-bar-in:nth-child(4)  { animation-delay: 120ms; }
.fs-bar-in:nth-child(5)  { animation-delay: 160ms; }
.fs-bar-in:nth-child(6)  { animation-delay: 200ms; }
.fs-bar-in:nth-child(7)  { animation-delay: 240ms; }
.fs-bar-in:nth-child(8)  { animation-delay: 280ms; }
.fs-bar-in:nth-child(9)  { animation-delay: 320ms; }
.fs-bar-in:nth-child(10) { animation-delay: 360ms; }
.fs-bar-in:nth-child(11) { animation-delay: 400ms; }
.fs-bar-in:nth-child(12) { animation-delay: 440ms; }

/* 10 Row flag — one amber wash, then a persistent marker. */
.fs-flag-pulse { animation: fs-flag-pulse 620ms var(--ease-out); }

/* Spinner (sign-in, in-flight work). */
.fs-spin { animation: fs-spin 700ms linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .fs-toast-in, .fs-menu-in, .fs-modal-in, .fs-scrim-in, .fs-row-in,
  .fs-bar-in, .fs-flag-pulse { animation: none; }
  .fs-skeleton { animation: none; }
}