/* ============================================================================
   Worklane — Motion layer
   Premium, restrained movement (Stripe/Linear register). Gated by
   :root[data-motion="lively"|"subtle"|"off"] and prefers-reduced-motion.
   Background + escrow loop are pure CSS. Scroll-reveal + counters use a tiny
   IntersectionObserver (maps to WP Interactivity API: data-wp-on-view / state).
   ========================================================================== */

/* ---- defaults: nothing moves unless a motion mode is on ----------------- */
:root { --motion-rise: 18px; --motion-dur: 0.6s; --motion-stagger: 70ms; }
:root[data-motion="subtle"] { --motion-rise: 10px; --motion-dur: 0.5s; --motion-stagger: 45ms; }

/* ===================== SCROLL REVEAL ===================== */
/*
 * WLS-98 — VISIBLE-BY-DEFAULT reveal (was: hidden-until-observed).
 *
 * Content rests at its natural opacity:1; `.is-in` only REPLAYS an entrance
 * animation (fade + rise). If the IntersectionObserver never adds `.is-in` to an
 * element — a JS error, a screenshot/capture tool, a slow device, or any single
 * missed callback — the element is ALREADY VISIBLE. The failure mode is "no
 * animation," never "blank gap."
 *
 * Was: `.motion-on .reveal { opacity: 0 }` as the RESTING state, revealed only
 * once `.is-in` landed — so one missed observer callback left load-bearing
 * content permanently invisible. That is exactly how the Trust & Safety page's
 * headline escrow figures (the platform's single strongest credibility signal)
 * could render as a blank band to a PSP reviewer (audit round 2, WL-UX2-02). The
 * `.motion-on` gate already covered the no-JS case; inverting the resting state
 * covers the JS-runs-but-`.is-in`-never-fires case too — page-wide, every reveal.
 *
 * The entrance is a keyframe (not a transition off an opacity:0 resting state)
 * precisely so the hidden frame exists ONLY for the animation's duration, on
 * elements the observer has confirmed are entering the viewport — never at rest.
 * `both` fill holds the `from` (hidden) state during the stagger delay so a
 * staggered group still appears in sequence with no pre-animation flash.
 */
.motion-on .reveal.is-in {
  animation: wl-reveal-in var(--motion-dur) cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: calc(var(--i, 0) * var(--motion-stagger));
  will-change: opacity, transform;
}
@keyframes wl-reveal-in {
  from { opacity: 0; transform: translateY(var(--motion-rise)); }
  to   { opacity: 1; transform: none; }
}

/* ===================== HERO BACKGROUND ===================== */
/* drifting aurora — re-tint of the existing radial glow */
[data-motion="lively"] .home-hero::before,
[data-motion="subtle"] .home-hero::before {
  animation: wl-aurora 18s ease-in-out infinite alternate;
}
@keyframes wl-aurora {
  0%   { transform: translate3d(0,0,0) scale(1);   opacity: .9; }
  50%  { transform: translate3d(-2.5%, 1.5%, 0) scale(1.06); opacity: 1; }
  100% { transform: translate3d(2%, -1%, 0) scale(1.03); opacity: .85; }
}

/* floating decorative vectors */
.home-hero__deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.home-hero__in, .home-hero > .home-wrap { position: relative; z-index: 1; }
.deco-shape { position: absolute; color: var(--color-accent-1); opacity: 0; }
[data-motion="lively"] .deco-shape { opacity: .14; animation: wl-float var(--d, 14s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
[data-motion="subtle"] .deco-shape { opacity: .07; animation: wl-float var(--d, 14s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.deco-shape--1 { top: 14%; left: 8%;  --d: 16s; }
.deco-shape--2 { top: 62%; left: 18%; --d: 19s; --delay: -4s; }
.deco-shape--3 { top: 30%; right: 12%; --d: 21s; --delay: -8s; opacity: .1; }
.deco-shape--4 { top: 74%; right: 26%; --d: 14s; --delay: -2s; }
@keyframes wl-float {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-22px) rotate(8deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* hero content entrance (on load) */
.motion-on .home-hero__content > * {
  opacity: 0; transform: translateY(14px);
  animation: wl-rise .7s cubic-bezier(.22,.61,.36,1) forwards;
}
.motion-on .home-hero__content > *:nth-child(1) { animation-delay: .05s; }
.motion-on .home-hero__content > *:nth-child(2) { animation-delay: .14s; }
.motion-on .home-hero__content > *:nth-child(3) { animation-delay: .23s; }
.motion-on .home-hero__content > *:nth-child(4) { animation-delay: .32s; }
.motion-on .home-hero__content > *:nth-child(5) { animation-delay: .41s; }
.motion-on .escrow-flow {
  opacity: 0; animation: wl-rise .8s cubic-bezier(.22,.61,.36,1) .5s forwards;
}
@keyframes wl-rise { to { opacity: 1; transform: none; } }

/* ===================== ESCROW FLOW LOOP (pure CSS) ===================== */
/* a glowing "coin" travels down each connector; lock pulses; check draws */
[data-motion="lively"] .escrow-flow__connector,
[data-motion="subtle"] .escrow-flow__connector { position: relative; overflow: visible; }
[data-motion="lively"] .escrow-flow__connector::after,
[data-motion="subtle"] .escrow-flow__connector::after {
  content: ""; position: absolute; left: 50%; top: -3px; width: 9px; height: 9px;
  margin-left: -4.5px; border-radius: 50%;
  background: var(--color-accent-1);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent-1) 28%, transparent),
              0 0 12px 2px color-mix(in srgb, var(--color-accent-1) 60%, transparent);
  animation: wl-coin 5.5s ease-in-out infinite;
}
.escrow-flow__connector:last-of-type::after { animation-delay: .5s; }
@keyframes wl-coin {
  0%, 8%    { transform: translateY(-6px); opacity: 0; }
  16%       { opacity: 1; }
  46%, 100% { transform: translateY(var(--spacing-30)); opacity: 0; }
}

[data-motion="lively"] .escrow-flow__lock,
[data-motion="subtle"] .escrow-flow__lock { animation: wl-lock 5.5s ease-in-out infinite; }
@keyframes wl-lock {
  0%, 30%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent-1) 0%, transparent); }
  48%       { box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-accent-1) 22%, transparent); }
  66%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent-1) 0%, transparent); }
}

[data-motion="lively"] .escrow-flow__card--mid .wl-badge,
[data-motion="subtle"] .escrow-flow__card--mid .wl-badge { animation: wl-secured 5.5s ease-in-out infinite; }
@keyframes wl-secured {
  0%, 44% { transform: scale(.9); opacity: .55; }
  56%     { transform: scale(1.06); opacity: 1; }
  70%, 100% { transform: scale(1); opacity: 1; }
}

[data-motion="lively"] .escrow-flow__check,
[data-motion="subtle"] .escrow-flow__check { animation: wl-pop 5.5s ease-in-out infinite; transform-origin: center; }
@keyframes wl-pop {
  0%, 64% { transform: scale(.4); opacity: 0; }
  74%     { transform: scale(1.18); opacity: 1; }
  84%, 100% { transform: scale(1); opacity: 1; }
}

/* ===================== STAT COUNTERS ===================== */
.home-stat__num { font-variant-numeric: tabular-nums; }

/* ===================== MICRO-INTERACTIONS ===================== */
/* sheen sweep on primary buttons (hover) */
[data-motion="lively"] .wl-btn--primary,
[data-motion="subtle"] .wl-btn--primary { position: relative; overflow: hidden; }
[data-motion="lively"] .wl-btn--primary::before,
[data-motion="subtle"] .wl-btn--primary::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, #fff 38%, transparent) 50%, transparent 70%);
  transform: translateX(-130%); transition: none; pointer-events: none;
}
[data-motion="lively"] .wl-btn--primary:hover::before,
[data-motion="subtle"] .wl-btn--primary:hover::before { animation: wl-sheen .8s ease; }
@keyframes wl-sheen { to { transform: translateX(130%); } }

/* category tile shine on hover */
[data-motion="lively"] .home-cat { position: relative; overflow: hidden; }
[data-motion="lively"] .home-cat::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 80% at 50% 0%, color-mix(in srgb, var(--color-accent-1) 14%, transparent), transparent 70%);
  transition: opacity var(--transition);
}
[data-motion="lively"] .home-cat:hover::after { opacity: 1; }

/* arrow nudge on "browse all" links */
[data-motion="lively"] .home-grid-head .wl-btn svg,
[data-motion="subtle"] .home-grid-head .wl-btn svg { transition: transform var(--transition); }
[data-motion="lively"] .home-grid-head .wl-btn:hover svg,
[data-motion="subtle"] .home-grid-head .wl-btn:hover svg { transform: translateX(4px); }

/* CTA band glow breathing */
[data-motion="lively"] .home-ctaband::before { animation: wl-breathe 6s ease-in-out infinite; }
@keyframes wl-breathe { 0%,100% { opacity: .7; } 50% { opacity: 1; } }

/* kicker pill soft pulse */
[data-motion="lively"] .home-hero__kicker .pill { animation: wl-pillpulse 3.2s ease-in-out infinite; }
@keyframes wl-pillpulse {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent-1) 0%, transparent); }
  50%     { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent-1) 30%, transparent); }
}

/* live availability dot ping (freelancer cards) */
[data-motion="lively"] .wl-vendor__avail::before,
[data-motion="subtle"] .wl-vendor__avail::before { animation: wl-ping 2.4s ease-out infinite; }
@keyframes wl-ping {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-status-open-fg) 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-status-open-fg) 0%, transparent); }
}

/* ===================== ACCESSIBILITY ===================== */
@media (prefers-reduced-motion: reduce) {
  /* WLS-98: also cancel the entrance animation so reduced-motion visitors get
     the figures instantly (visible-by-default already holds; this stops any
     replay if `.is-in` is ever added while the reduced-motion query is active). */
  [data-motion] .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
  [data-motion] .home-hero__content > *,
  [data-motion] .escrow-flow { opacity: 1 !important; transform: none !important; animation: none !important; }
  [data-motion] .home-hero::before,
  [data-motion] .deco-shape,
  [data-motion] .escrow-flow__connector::after,
  [data-motion] .escrow-flow__lock,
  [data-motion] .escrow-flow__card--mid .wl-badge,
  [data-motion] .escrow-flow__check,
  [data-motion] .home-ctaband::before,
  [data-motion] .home-hero__kicker .pill,
  [data-motion] .wl-vendor__avail::before { animation: none !important; }
}