/**
 * MRSTORE motion.css — hard-safe product motion (v1708)
 * Rule: content is ALWAYS visible by default. Motion only enhances.
 * Never opacity:0 / never blur traps. Critical home chrome never animates out.
 */
:root {
  --mr-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mr-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --mr-dur-page: 320ms;
  --mr-dur-card: 420ms;
  --mr-dur-img: 360ms;
  --mr-stagger: 36ms;
  --mr-lift: -2px;
  --mr-brand-a: #10b981;
  --mr-brand-b: #0ea5e9;
  --mr-brand-c: #6366f1;
}

/* ── 1. Page enter (soft, never white-trap) ── */
html.mr-motion-ready body {
  animation: mr-page-enter var(--mr-dur-page) var(--mr-ease-soft) both;
}
@keyframes mr-page-enter {
  from { opacity: 0.96; }
  to { opacity: 1; }
}

/* ── 2. Boot / reload progress bar ── */
#mr-boot-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--mr-brand-a), var(--mr-brand-b), var(--mr-brand-c));
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
}
#mr-boot-bar.is-on {
  opacity: 1;
  animation: mr-boot-run 720ms var(--mr-ease-out) forwards;
}
#mr-boot-bar.is-done {
  opacity: 0;
  transition: opacity 280ms var(--mr-ease-soft);
}
@keyframes mr-boot-run {
  0% { transform: scaleX(0.08); opacity: 1; }
  70% { transform: scaleX(0.78); opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}

/* ── 3. Card / tile enter — DEFAULT VISIBLE ── */
.card-enter,
.mr-card-enter,
.txn-card,
.txn-row,
.emp-do-tile,
.sell-act,
.sr-hub-btn,
.sr-log-btn,
.quick-btn[data-type]:not(#section-quick-add .quick-btn),
.fb-item,
.sr-desk-card,
.sr-new-card {
  --i: 0;
  /* hard default — never depend on JS for visibility */
  opacity: 1;
  transform: none;
  filter: none;
}

/*
 * ONLY when JS arms .mr-will-enter AND not yet .is-in:
 * soft dim + small lift — NEVER opacity 0, NEVER blur
 */
.card-enter.mr-will-enter:not(.is-in),
.mr-card-enter.mr-will-enter:not(.is-in),
.txn-card.mr-will-enter:not(.is-in),
.txn-row.mr-will-enter:not(.is-in),
.emp-do-tile.mr-will-enter:not(.is-in),
.sell-act.mr-will-enter:not(.is-in),
.sr-hub-btn.mr-will-enter:not(.is-in),
.sr-log-btn.mr-will-enter:not(.is-in),
.quick-btn.mr-will-enter:not(.is-in),
.fb-item.mr-will-enter:not(.is-in),
.sr-desk-card.mr-will-enter:not(.is-in),
.sr-new-card.mr-will-enter:not(.is-in) {
  opacity: 0.88;
  transform: translateY(10px) scale(0.992);
  filter: none;
  will-change: opacity, transform;
}

.card-enter.is-in,
.mr-card-enter.is-in,
.txn-card.is-in,
.txn-row.is-in,
.emp-do-tile.is-in,
.sell-act.is-in,
.sr-hub-btn.is-in,
.sr-log-btn.is-in,
.quick-btn.is-in,
.fb-item.is-in,
.sr-desk-card.is-in,
.sr-new-card.is-in {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity var(--mr-dur-card) var(--mr-ease-out),
    transform var(--mr-dur-card) var(--mr-ease-out),
    box-shadow 200ms var(--mr-ease-soft);
  transition-delay: calc(min(var(--i, 0), 12) * var(--mr-stagger));
  will-change: auto;
}

/* Desktop hover lift — fine pointer only; requires is-in or plain card */
@media (hover: hover) and (pointer: fine) {
  .txn-card.is-in:hover,
  .emp-do-tile.is-in:hover,
  .sell-act.is-in:hover,
  .fb-item.is-in:hover,
  .sr-desk-card.is-in:hover,
  .sr-new-card.is-in:hover,
  #mr-home-surface > .card:hover {
    transform: translateY(var(--mr-lift));
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  }
  .sr-hub-btn.is-in:hover,
  .sr-log-btn.is-in:hover,
  .quick-btn.is-in:hover {
    transform: translateY(-2px);
  }
}

/* ── CRITICAL HOME CHROME — never animate hide ── */
#owner-os-rail,
#mr-hs-open,
#home-dashboard-status,
#home-store-pulse,
#mr-hs-score,
#home-stock-road,
#section-quick-add,
#home-stock-road.sr-fast-daily,
#home-stock-road.sr-home-card,
#home-store-pulse.qi-live-card,
#home-store-pulse.card,
#home-store-pulse.mr-will-enter,
#home-stock-road.mr-will-enter,
#mr-hs-score.mr-will-enter {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ── 4. Soft image load (never permanently invisible) ── */
img.img-soft,
.img-soft img {
  opacity: 1;
  transition: opacity var(--mr-dur-img) var(--mr-ease-soft);
}
img.img-soft.img-pending {
  opacity: 0.55; /* still clearly visible */
  background: linear-gradient(110deg, #f4f4f5 25%, #e4e4e7 37%, #f4f4f5 63%);
  background-size: 200% 100%;
}
img.img-soft.is-ready,
.img-soft img.is-ready {
  opacity: 1;
  background: none;
}

/* ── 5. Skeleton shimmer ── */
.mr-skel,
.img-soft.img-pending {
  animation: mr-skel-shimmer 1.25s ease-in-out infinite;
}
@keyframes mr-skel-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.mr-skel {
  background: linear-gradient(110deg, #f4f4f5 25%, #e4e4e7 37%, #f4f4f5 63%);
  background-size: 200% 100%;
  border-radius: 0.75rem;
}

/* Long lists only — not home suite */
.mr-list-cv > .card,
.mr-list-cv > .txn-card,
.mr-list-cv > .txn-row,
#ledger-txn-cards,
#ledger-tbody {
  content-visibility: auto;
  contain-intrinsic-size: auto 72px;
}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  html.mr-motion-ready body,
  .card-enter,
  .mr-card-enter,
  .txn-card,
  .txn-row,
  .emp-do-tile,
  .sell-act,
  .sr-hub-btn,
  .sr-log-btn,
  .quick-btn,
  .fb-item,
  .sr-desk-card,
  .sr-new-card,
  img.img-soft {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  #mr-boot-bar { display: none !important; }
  .mr-skel,
  img.img-soft.img-pending {
    animation: none !important;
  }
}

/* v1870: Books Log Z / Purchase tiles — NEVER translate (mis-tap) */
#section-quick-add,
#section-quick-add.page-enter,
#section-quick-add .quick-btn,
#section-quick-add .quick-btn[data-type],
#section-quick-add .quick-btn.mr-will-enter,
#section-quick-add .quick-btn.is-in,
#section-quick-add .quick-btn:hover,
#section-quick-add .quick-btn:active {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}


/* ═══════════════════════════════════════════════════════════
   MRSTORE global shimmer + open ease (v1750)
   Anything that opens in the SaaS loads with ease + shimmer.
   ═══════════════════════════════════════════════════════════ */

:root {
  --mr-shimmer-base: #e8eef5;
  --mr-shimmer-hi: rgba(255, 255, 255, 0.72);
  --mr-shimmer-base-dark: #1a222c;
  --mr-shimmer-hi-dark: rgba(255, 255, 255, 0.08);
  --mr-open-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mr-open-dur: 320ms;
}

@keyframes mr-shimmer-slide {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes mr-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mr-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mr-scale-in {
  from { opacity: 0; transform: scale(0.98) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Skeleton block */
.mr-shimmer,
.pd-shimmer,
.cs-shimmer,
.emp-shimmer {
  position: relative !important;
  overflow: hidden !important;
  pointer-events: none !important;
  color: transparent !important;
  border-color: transparent !important;
  background: var(--mr-shimmer-base) !important;
  background-image: linear-gradient(
    90deg,
    var(--mr-shimmer-base) 0%,
    var(--mr-shimmer-hi) 45%,
    var(--mr-shimmer-base) 90%
  ) !important;
  background-size: 200% 100% !important;
  animation: mr-shimmer-slide 1.2s ease-in-out infinite !important;
  border-radius: 12px;
}
.mr-shimmer *,
.pd-shimmer *,
.cs-shimmer *,
.emp-shimmer * {
  visibility: hidden !important;
}

body.pd-dark .mr-shimmer,
body.floor-theme-dark .mr-shimmer,
body.emp-theme-dark .mr-shimmer,
#mr-owner-home.pd-dark .pd-shimmer,
body.floor-theme-dark .cs-shimmer {
  background: var(--mr-shimmer-base-dark) !important;
  background-image: linear-gradient(
    90deg,
    var(--mr-shimmer-base-dark) 0%,
    var(--mr-shimmer-hi-dark) 45%,
    var(--mr-shimmer-base-dark) 90%
  ) !important;
  background-size: 200% 100% !important;
}

/* Skeleton rows helper */
.mr-skel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}
.mr-skel-line {
  height: 12px;
  border-radius: 8px;
  background: var(--mr-shimmer-base);
  background-image: linear-gradient(90deg, #e8eef5, rgba(255,255,255,.7), #e8eef5);
  background-size: 200% 100%;
  animation: mr-shimmer-slide 1.15s ease-in-out infinite;
}
.mr-skel-line.lg { height: 18px; width: 70%; }
.mr-skel-line.md { height: 12px; width: 88%; }
.mr-skel-line.sm { height: 10px; width: 55%; }
.mr-skel-card {
  height: 72px;
  border-radius: 14px;
  background: var(--mr-shimmer-base);
  background-image: linear-gradient(90deg, #e8eef5, rgba(255,255,255,.7), #e8eef5);
  background-size: 200% 100%;
  animation: mr-shimmer-slide 1.15s ease-in-out infinite;
}

/* Panel / sheet open ease */
.mr-open-ease,
#chat-sheet.open,
#pd-wo-sheet.open,
#emp-wo-sheet.open,
.pd-modal.open,
.pd-drawer.open {
  animation: mr-scale-in var(--mr-open-dur) var(--mr-open-ease) both;
}
#pd-wo-backdrop.open,
#chat-sheet-bd.open,
#emp-wo-backdrop.open {
  animation: mr-fade-in 220ms var(--mr-open-ease) both;
}

/* Content enter — NOT chat bubbles (re-paint would shake) */
.mr-enter {
  animation: mr-fade-up 340ms var(--mr-open-ease) both;
}
#pd-stage > .pd-card,
#pd-stage > .pd-pnl {
  animation: pdFadeUp .35s ease both;
}
#chat-sheet .cs-body > *,
#cs-body > *,
.cs-msg, .cs-bubble, .cs-row {
  animation: none !important;
  transform: none !important;
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mr-shimmer, .pd-shimmer, .cs-shimmer, .emp-shimmer,
  .mr-skel-line, .mr-skel-card {
    animation: none !important;
  }
  .mr-open-ease, #chat-sheet.open, #pd-wo-sheet.open,
  .mr-enter, .cs-body > * {
    animation: none !important;
  }
}