/* ============================================================
 * MOTION LAYER — scroll reveals, count-ups, bar fills.
 * monday.com energy, BFD discipline: fast-out / smooth-in
 * (--ease-brand), no overshoot, no bounce.
 *
 * Safety model: the RESTING state is the VISIBLE state. The
 * hidden start state only applies under html.motion-ready,
 * which an inline head script adds ONLY when motion is enabled
 * and prefers-reduced-motion is not set. So no-JS, reduced
 * motion, and "motion off" all render fully visible content.
 * ============================================================ */

:root {
  /* tuned per intensity below */
  --rv-shift: 28px;
  --rv-scale: 0.985;
  --rv-blur: 6px;
  --rv-dur: 0.7s;
  --rv-stagger: 0.09s;
}

html[data-motion="subtle"] {
  --rv-shift: 12px;
  --rv-scale: 0.995;
  --rv-blur: 0px;
  --rv-dur: 0.55s;
  --rv-stagger: 0.06s;
}

html[data-motion="balanced"] {
  --rv-shift: 28px;
  --rv-scale: 0.985;
  --rv-blur: 5px;
  --rv-dur: 0.7s;
  --rv-stagger: 0.09s;
}

html[data-motion="energetic"] {
  --rv-shift: 44px;
  --rv-scale: 0.965;
  --rv-blur: 9px;
  --rv-dur: 0.8s;
  --rv-stagger: 0.12s;
}

/* ── scroll reveal ──────────────────────────────────────────── */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(var(--rv-shift)) scale(var(--rv-scale));
  filter: blur(var(--rv-blur));
  transition:
    opacity var(--rv-dur) var(--ease-brand),
    transform var(--rv-dur) var(--ease-brand),
    filter var(--rv-dur) var(--ease-brand);
  transition-delay: var(--rv-delay, 0s);
  will-change: opacity, transform;
}

.motion-ready [data-reveal].revealed {
  opacity: 1;
  transform: none;
  filter: none;
}

/* once settled, drop will-change so it doesn't pin layers */
.motion-ready [data-reveal].reveal-done {
  will-change: auto;
}

/* ── result-mock bar fill (static showcase in "Next steps") ── */
/* base width comes from --rm-fill so no-JS shows the bars filled */
.motion-ready .rm-track i {
  width: 0;
  transition: width var(--rv-dur) var(--ease-brand);
  transition-delay: var(--rv-delay, 0s);
}
.motion-ready .rm-bars.revealed .rm-track i {
  width: var(--rm-fill, 0);
}

/* ── live assessment result bars (rendered by app.js) ──────── */
.motion-ready .result-bar-track span {
  width: 0 !important;
  transition: width var(--rv-dur) var(--ease-brand);
}
.motion-ready .result-bars.bars-filled .result-bar-track span {
  width: var(--rb-fill, 0) !important;
}

/* ── live assessment: fade-swap between questions ──────────── */
.motion-ready .question-screen,
.motion-ready .intro-screen,
.motion-ready .result {
  animation: bf-q-in var(--rv-dur) var(--ease-brand) both;
}

@keyframes bf-q-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* numbers mid-count shouldn't reflow their container */
[data-countup] { font-variant-numeric: tabular-nums; }

/* Belt-and-suspenders: if the OS asks for reduced motion, kill
 * everything regardless of the motion-ready class. */
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal],
  .motion-ready .rm-track i,
  .motion-ready .result-bar-track span,
  .motion-ready .question-screen,
  .motion-ready .intro-screen,
  .motion-ready .result {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
}