/* ============================================================
   PRAXIS MOTION - motion tokens + micro-interactions kit
   costandprofitability.com - FABLE, 05 Jul 2026
   Pure CSS + one tiny JS observer (praxis-motion.js).
   Enqueue AFTER cnp-praxis.css. No libs.
   Everything respects prefers-reduced-motion.
   ============================================================ */

:root{
  /* durations */
  --mt-fast: 160ms;
  --mt-base: 300ms;
  --mt-slow: 560ms;
  --mt-reveal: 700ms;
  /* easings */
  --me-out: cubic-bezier(.22,.61,.36,1);       /* standard out */
  --me-spring: cubic-bezier(.34,1.36,.44,1);   /* gentle overshoot, hovers only */
  --me-inout: cubic-bezier(.6,0,.3,1);         /* section transitions */
  /* distances */
  --mv-rise: 22px;
  --mv-lift: -3px;
}

/* ---------- 1. reveal-on-scroll (fade + subtle rise, staggered) ----------
   Markup: add .reveal to any block. Optional data-reveal-delay="1..6"
   for manual stagger, or put .reveal children inside a .reveal-group
   for automatic stagger. praxis-motion.js flips .is-in. */
.reveal{ opacity:0; transform:translateY(var(--mv-rise)); }
.reveal.is-in{
  opacity:1; transform:none;
  transition: opacity var(--mt-reveal) var(--me-out), transform var(--mt-reveal) var(--me-out);
}
.reveal[data-reveal-delay="1"].is-in{ transition-delay: 60ms; }
.reveal[data-reveal-delay="2"].is-in{ transition-delay: 120ms; }
.reveal[data-reveal-delay="3"].is-in{ transition-delay: 180ms; }
.reveal[data-reveal-delay="4"].is-in{ transition-delay: 240ms; }
.reveal[data-reveal-delay="5"].is-in{ transition-delay: 300ms; }
.reveal[data-reveal-delay="6"].is-in{ transition-delay: 360ms; }
.reveal-group > .reveal:nth-child(2).is-in{ transition-delay: 90ms; }
.reveal-group > .reveal:nth-child(3).is-in{ transition-delay: 180ms; }
.reveal-group > .reveal:nth-child(4).is-in{ transition-delay: 270ms; }
.reveal-group > .reveal:nth-child(5).is-in{ transition-delay: 360ms; }
.reveal-group > .reveal:nth-child(n+6).is-in{ transition-delay: 450ms; }

/* ---------- 2. editorial link underline (animated) ----------
   Apply .lk to inline text links in body copy and nav footers. */
.lk{ position:relative; text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size var(--mt-base) var(--me-out), color var(--mt-fast) ease;
}
.lk:hover{ background-size:100% 1px; }

/* ---------- 3. card lift ----------
   Apply .liftable to cards. Uses shadow tokens tuned to the paper palette. */
.liftable{ transition:transform var(--mt-base) var(--me-out), box-shadow var(--mt-base) var(--me-out), border-color var(--mt-base) ease; }
.liftable:hover{ transform:translateY(var(--mv-lift));
  box-shadow:0 24px 48px -28px rgba(26,23,20,.28); }

/* ---------- 4. CTA arrow slide ----------
   Markup: <a class="btn btn-primary arr">Label <span class="a">\2192</span></a> */
.arr .a{ display:inline-block; transition:transform var(--mt-base) var(--me-spring); }
.arr:hover .a{ transform:translateX(4px); }

/* ---------- 5. count-up numbers ----------
   Markup: <span class="countup" data-count-to="1335000" data-count-format="eur">0</span>
   formats: int | eur | pct. praxis-motion.js animates on first reveal
   (setTimeout scheduler, NOT rAF: rAF stalls in throttled tabs/iframes). */
.countup{ font-variant-numeric:tabular-nums; }

/* ---------- 6. section transitions ----------
   Sections get a soft settle as they enter; heros get a slower cadence. */
.sec-settle{ opacity:0; transform:translateY(14px); }
.sec-settle.is-in{ opacity:1; transform:none;
  transition:opacity var(--mt-slow) var(--me-inout), transform var(--mt-slow) var(--me-inout); }

/* ---------- 7. editorial highlight (heros + pull quotes) ----------
   .hl paints a soft orange wash behind key words once revealed. */
.hl{ background-image:linear-gradient(rgba(199,91,34,.16),rgba(199,91,34,.16));
  background-size:0% 42%; background-repeat:no-repeat; background-position:0 78%;
  transition:background-size 900ms var(--me-out) 300ms; }
.is-in .hl, .hl.is-in{ background-size:100% 42%; }

/* ---------- reduced motion: everything lands instantly ---------- */
@media (prefers-reduced-motion: reduce){
  .reveal, .sec-settle{ opacity:1 !important; transform:none !important; transition:none !important; }
  .lk, .liftable, .arr .a, .hl{ transition:none !important; }
  .hl{ background-size:100% 42%; }
}