/* ── workout.log shared motion primitives (WS0) ──────────────────────────
   One motion recipe used everywhere per design-handoff SPEC.md "Motion standard":
   expand/collapse (chevron rotate 180deg over .2s + wlOpen fade/rise), press states
   (cards scale(.975), buttons/chips scale(.88-.94), ~100ms), drag-lift (lifted item
   scale(1.02-1.03) + deep shadow, displaced rows slide .18s ease), and the wlFill
   bar-fill keyframes used on Session Complete's accomplishment bars.

   Not yet adopted by any screen (WS0 is file-split + primitives only) - screens wire
   these classes in when their own work package lands (WS1-WS11). Built entirely on
   tokens.css variables (see css/workout.css :root); zero hard-coded colors here. */

/* ── Expand / collapse ──────────────────────────────────────────────────── */
@keyframes wlOpen{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
.wl-open{animation:wlOpen .18s ease-out}

.wl-chevron{display:inline-block;transition:transform .2s ease;transform-origin:center}
.wl-chevron.wl-chevron-open{transform:rotate(180deg)}

/* ── Press states (every tappable element gets one of these) ────────────── */
.wl-press-card{transition:transform .1s ease}
.wl-press-card:active{transform:scale(.975)}

.wl-press-btn{transition:transform .1s ease}
.wl-press-btn:active{transform:scale(.9)} /* midpoint of the .88-.94 range */

.wl-press-chip{transition:transform .1s ease}
.wl-press-chip:active{transform:scale(.9)}

/* ── Drag reorder ─────────────────────────────────────────────────────────
   Apply .wl-drag-lift to the item being press-and-held/dragged; apply
   .wl-drag-slide to displaced siblings animating into their preview slots. */
/* The lift shadow is a variable so a package stylesheet can re-apply it at higher
   specificity without duplicating the value. Needed because any card that declares
   its own resting box-shadow (e.g. .wl-ex-card, R2 "Layered") ties .wl-drag-lift on
   specificity and wins on load order, which silently killed the lift shadow. Change
   the shadow HERE; the overrides reference it. (Batch B serial sweep, 2026-08-13.) */
:root{ --wl-drag-lift-shadow:0 12px 32px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25); }
.wl-drag-lift{
  transform:scale(1.025);
  box-shadow:var(--wl-drag-lift-shadow);
  z-index:50;
  transition:box-shadow .15s ease;
}
.wl-drag-slide{transition:transform .18s ease}

/* ── Session Complete: accomplishment bar fill ───────────────────────────
   Usage: give the bar track a fixed width representing 100%, and the fill
   element `transform:scaleX(0)` with `transform-origin:left`; add
   .wl-fill-bar (optionally with an inline `animation-delay` for the .15s
   per-exercise stagger the SPEC calls for) once the bar is in the DOM. */
@keyframes wlFill{
  from{transform:scaleX(0)}
  to{transform:scaleX(var(--wl-fill-to, 1))}
}
.wl-fill-bar{
  transform-origin:left;
  transform:scaleX(0);
  animation:wlFill .75s ease-out forwards;
}

/* ── Tab slide transitions (SPEC "Tab transitions") ──────────────────────
   Content slides in from the direction of the newly-selected tab, ~200ms
   ease-out. Screens toggle .wl-tab-from-left / .wl-tab-from-right on the
   incoming .page element right before showing it. */
@keyframes wlTabFromLeft{
  from{opacity:0;transform:translateX(-16px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes wlTabFromRight{
  from{opacity:0;transform:translateX(16px)}
  to{opacity:1;transform:translateX(0)}
}
.wl-tab-from-left{animation:wlTabFromLeft .2s ease-out}
.wl-tab-from-right{animation:wlTabFromRight .2s ease-out}

/* ── Resume chip live dot (SPEC "Resume chip live dot") ──────────────────── */
@keyframes wlPulseDot{
  0%,100%{opacity:1}
  50%{opacity:.35}
}
.wl-live-dot{animation:wlPulseDot 1.6s ease-in-out infinite}

/* ── Goal ring burst + glow pulse (Session Complete, >=100%) ─────────────── */
@keyframes wlRingBurst{
  0%{transform:scale(.85);opacity:.8}
  100%{transform:scale(1.55);opacity:0}
}
.wl-ring-burst{animation:wlRingBurst .6s ease-out forwards}

@keyframes wlGlowPulse{
  0%,100%{opacity:.35}
  50%{opacity:.85}
}
.wl-glow-pulse{animation:wlGlowPulse 2.4s ease-in-out infinite}
