/* ============================================================
   MOTION LAYER — sachinai.com
   Self-contained, additive, conflict-free with existing GSAP.
   Compositor-only (transform / opacity). Cobalt accent.
   ============================================================ */

:root{
  --motion-accent: var(--color-accent, #0b4fd8);
  --motion-ease: cubic-bezier(.16,1,.3,1);
}

/* ── Reading progress bar ─────────────────────────────────── */
.reading-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:9999;
  background:transparent; pointer-events:none;
}
.reading-progress > i{
  display:block; height:100%; width:100%;
  background:var(--motion-accent);
  transform:scaleX(0); transform-origin:0 50%;
  will-change:transform;
}

/* ── Opt-in scroll reveal (add class="reveal") ────────────── */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--motion-ease), transform .8s var(--motion-ease);
  will-change:transform,opacity;
}
.reveal.in{ opacity:1; transform:none; }
.reveal[data-reveal-delay="1"]{ transition-delay:.08s }
.reveal[data-reveal-delay="2"]{ transition-delay:.16s }
.reveal[data-reveal-delay="3"]{ transition-delay:.24s }

/* ── Opt-in underline-draw link (add class="ul-draw") ─────── */
.ul-draw{ position:relative; text-decoration:none; }
.ul-draw::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  background:var(--motion-accent);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s var(--motion-ease);
}
.ul-draw:hover::after{ transform:scaleX(1); }

/* ── Stat counter (uses [data-count]) — tabular so it won't jitter ── */
[data-count]{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .reading-progress > i{ transform:scaleX(0); }
  .ul-draw::after{ transition:none; }
}