/* ════════════════════════════════════════════════════════════
   MOTION — smooth, quiet animations across the portal (user's request 2026-11-05,
   reference: a SaaS settings demo — popups scale in over a blurred page, screens
   glide in, cards appear one after another, numbers count up, bars grow).
   One easing everywhere. Everything is off for "reduce motion" users.
   Paired with js/motion.js (adds the .mo-* classes at the right moments).
   ════════════════════════════════════════════════════════════ */
:root {
  --mo-ease: cubic-bezier(.22, 1, .36, 1);        /* fast out, soft landing */
  --mo-spring: cubic-bezier(.34, 1.36, .64, 1);   /* tiny overshoot for pops */
}

/* ── screens glide in ── */
.screen.active.mo-enter { animation: moScreen .38s var(--mo-ease) both; }
@keyframes moScreen { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── cards / rows appear one after another (delay set per element by motion.js) ── */
.mo-in { animation: moRise .46s var(--mo-ease) both; animation-delay: var(--mo-d, 0ms); }
@keyframes moRise { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }

/* ── popups: page dims + blurs, card scales up from 96% ── */
.pm-overlay.open { animation: moFade .24s ease both; -webkit-backdrop-filter: blur(6px) saturate(1.05); backdrop-filter: blur(6px) saturate(1.05); }
.pm-overlay.open .pm-card { animation: moPop .34s var(--mo-ease) both; transform-origin: 50% 30%; }
@keyframes moFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes moPop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
/* closing: a copy of the popup fades out while the real one is already gone */
.mo-ghost-overlay { position: fixed; inset: 0; z-index: 1001; pointer-events: none; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; background: rgba(24,24,27,.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: moFadeOut .2s ease both; }
.mo-ghost-overlay .pm-card { animation: moPopOut .2s ease both; }
@keyframes moFadeOut { to { opacity: 0; } }
@keyframes moPopOut { to { opacity: 0; transform: translateY(8px) scale(.97); } }
@media (max-width: 768px) {
  .pm-overlay.open .pm-card { animation-name: moSheet; }
  @keyframes moSheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .mo-ghost-overlay { padding: 0; align-items: stretch; }
}

/* ── row "⋮" menus, notification panel, dropdowns pop ── */
.row-menu.open .row-menu-list, #notif-panel.open { animation: moMenu .2s var(--mo-ease) both; transform-origin: top right; }
@keyframes moMenu { from { opacity: 0; transform: translateY(-4px) scale(.96); } to { opacity: 1; transform: none; } }

/* ── buttons: soft hover, press-in ── */
.btn, .btn-soft, .btn-black, .pill-btn, .lg-btn, .seg button, .pill-tabs > *, .lm-tabs span, .lv-seg button, .bit-chip, .nav-item {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .2s ease, transform .16s var(--mo-ease), opacity .18s ease;
}
.btn:active, .btn-soft:active, .btn-black:active, .pill-btn:active, .lg-btn:active, .seg button:active, .lm-tabs span:active, .bit-chip:active { transform: scale(.97); }
.btn-primary:hover, .btn-black:hover, .pill-btn:not(.ghost):hover { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand, #1b2747) 60%, transparent); }

/* ── cards lift a little on hover where they are clickable ── */
.prog-card, .lot-row, .lv-lot, .metric-card, .tile, .ls-pick-row { transition: box-shadow .22s ease, transform .22s var(--mo-ease), border-color .2s ease; }
.prog-card:hover, .lot-row:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(24,24,27,.28); }

/* ── bars grow from zero ── */
.mo-bars .flow-bar i, .mo-bars .sb-track i, .mo-bars .lv-bar i, .mo-bars .lv-sum-bar i, .mo-bars .usage-bar i, .mo-bars .prog-bar i {
  animation: moGrow .9s var(--mo-ease) both; transform-origin: left center;
}
@keyframes moGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lv-st i { transition: height .6s var(--mo-ease); }

/* ── status chips / badges change smoothly (Available → Connected style) ── */
.badge, .tag, .lv-chip, .cut-chip { transition: background-color .25s ease, color .25s ease; }
.mo-flash { animation: moFlash 1.4s ease both; }
@keyframes moFlash { 0% { background-color: color-mix(in srgb, var(--brand, #1b2747) 14%, transparent); } 100% { background-color: transparent; } }

/* ── toast slides up with a little spring ── */
.toast { transition: opacity .25s ease, transform .38s var(--mo-spring) !important; }

/* ── nav: active item glides ── */
.nav-item.active { transition: background-color .25s ease, color .25s ease; }

/* ── tab content (lot page tabs, programme filters) ── */
.mo-swap { animation: moSwap .3s var(--mo-ease) both; }
@keyframes moSwap { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }

/* ── nobody gets motion who asked the system for less ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
  .pm-overlay.open, .mo-ghost-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
html.mo-off *, html.mo-off *::before, html.mo-off *::after { animation: none !important; transition: none !important; }