/* ============================================================================
   Worklane — Money-in-Motion strip (WLS-94 / Stage 11)

   A server-rendered ledger of recent anonymised escrow events, shown once on the
   home page between the hero (the escrow PROMISE) and the stats bar (the SCALE):
   the PROOF that the escrow rail is carrying real money.

   Rendering: SSR in inc/money-flow.php from FME's EscrowEventFeed. This file only
   styles + animates what is already in the DOM — so there is no skeleton/flash on
   load and nothing to hydrate.

   Motion: a pure-CSS marquee (translateX) that PAUSES on hover / focus-within and
   is fully DISABLED under prefers-reduced-motion (which then shows a static,
   fully-visible wrapped list). The scroll is a spatial ticker of PAST events — it
   never ticks time and never implies live seconds (honesty contract).

   Design-system native: every value flows from the --color-* / --spacing-* /
   --radius-* aliases bridged in global.css; the state palette (accent / success /
   error) mirrors the escrow-timeline + .wl-badge vocabulary so the two escrow
   components read as one family. No hard-coded hex.
   ============================================================================ */

/* ---- Band: full-bleed strip (like .home-section--alt); inner .home-wrap
        self-constrains the content to the 80rem container. ------------------- */
.wl-moneyflow {
  padding-block: var(--spacing-60);
  background: var(--color-neutral-bg);
  border-block: 1px solid var(--color-neutral);
}

/* ---- Head: eyebrow + framing line (same grammar as .home-eyebrow / .home-sub) */
.wl-moneyflow__head {
  margin-bottom: var(--spacing-40);
}
.wl-moneyflow__eyebrow {
  margin: 0 0 var(--spacing-20);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-1);
}
.wl-moneyflow__lede {
  margin: 0;
  max-width: 46rem;
  font-size: var(--font-size-md);
  line-height: var(--lh-relaxed);
  color: var(--color-contrast-muted);
}

/* ---- Viewport: clips the moving track (so it can never cause page h-overflow)
        and fades the two edges so pills slide in/out rather than pop. --------- */
.wl-moneyflow__viewport {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

/* ---- Track: flex row of both copies. width:max-content + a UNIFORM per-item
        margin (no flex gap) makes translateX(-50%) land copy B exactly where
        copy A began → a seamless loop for varying-width pills. ---------------- */
.wl-moneyflow__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  /* ≈4s per event keeps the pace constant no matter how many events exist. */
  animation: wl-moneyflow-scroll calc(var(--wl-moneyflow-count, 12) * 4s) linear infinite;
  will-change: transform;
}
@keyframes wl-moneyflow-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Pause on hover (mouse) and focus-within (keyboard lands on a descendant). */
.wl-moneyflow__viewport:hover .wl-moneyflow__track,
.wl-moneyflow__viewport:focus-within .wl-moneyflow__track {
  animation-play-state: paused;
}

/* ---- Item: capsule with a type-tinted icon chip + amount / verb / category
        + a divided time. ------------------------------------------------------ */
.wl-moneyflow__item {
  flex: none;
  margin-inline-end: var(--spacing-40); /* uniform gap; enables the seamless -50% */
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-30);
  padding: var(--spacing-20) var(--spacing-40);
  background: var(--color-surface-2);
  border: 1px solid var(--color-neutral);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.wl-moneyflow__icon {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-content: center;
  border-radius: var(--radius-full);
}
.wl-moneyflow__icon svg { display: block; }

.wl-moneyflow__text {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: var(--font-size-sm);
}
.wl-moneyflow__amount {
  font-weight: var(--fw-bold);
  color: var(--color-contrast);
  font-variant-numeric: tabular-nums;
}
.wl-moneyflow__verb { font-weight: var(--fw-semibold); }
.wl-moneyflow__sep  { color: var(--color-contrast-subtle); }
.wl-moneyflow__cat  { color: var(--color-contrast-muted); }
.wl-moneyflow__when {
  flex: none;
  padding-inline-start: var(--spacing-30);
  margin-inline-start: var(--spacing-10);
  border-inline-start: 1px solid var(--color-neutral-strong);
  font-size: 0.72rem;
  color: var(--color-contrast-subtle);
}

/* ---- Type semantics (mirror the escrow state palette) --------------------- */
/* funded — budget secured in escrow: accent (emerald). */
.wl-moneyflow__item--funded {
  border-color: var(--color-accent-border);
}
.wl-moneyflow__item--funded .wl-moneyflow__icon {
  background: var(--color-accent-weak);
  color: var(--color-accent-1);
}
.wl-moneyflow__item--funded .wl-moneyflow__verb { color: var(--color-accent-1); }

/* released — funds released to the freelancer: success (brighter green). */
.wl-moneyflow__item--released {
  border-color: color-mix(in srgb, var(--color-success-fg) 24%, var(--color-neutral));
}
.wl-moneyflow__item--released .wl-moneyflow__icon {
  background: var(--color-success-bg);
  color: var(--color-success-fg);
}
.wl-moneyflow__item--released .wl-moneyflow__verb { color: var(--color-success-fg); }

/* refunded — budget returned to the customer. Shown honestly, styled CALM (a soft
   coral edge, not a loud red alarm) — visible refund handling is a PSP feature. */
.wl-moneyflow__item--refunded {
  border-color: color-mix(in srgb, var(--color-error-fg) 22%, var(--color-neutral));
}
.wl-moneyflow__item--refunded .wl-moneyflow__icon {
  background: var(--color-error-bg);
  color: var(--color-error-fg);
}
.wl-moneyflow__item--refunded .wl-moneyflow__verb { color: var(--color-error-fg); }

/* ---- Reduced motion: no marquee. Show copy A as a static, fully-visible
        wrapped list; drop the aria-hidden duplicate and the edge mask. Pills wrap
        their own content and are capped at 100% width so a narrow viewport (375)
        never clips the time/category — and never spills into page h-overflow. -- */
@media (prefers-reduced-motion: reduce) {
  .wl-moneyflow__viewport {
    overflow: visible; /* no marquee to clip; wrapped pills stay within the row */
    -webkit-mask-image: none;
            mask-image: none;
  }
  .wl-moneyflow__track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    gap: var(--spacing-30);
    will-change: auto;
  }
  .wl-moneyflow__item {
    margin-inline-end: 0; /* wrap uses `gap` instead */
    max-width: 100%;      /* never exceed the row → no page h-overflow at 375 */
    white-space: normal;  /* let the label wrap instead of being clipped */
    flex-wrap: wrap;
  }
  .wl-moneyflow__text { flex-wrap: wrap; }
  .wl-moneyflow__item--dup { display: none; } /* each real event shown once */
}