/* ============================================================
   38-counters-progress.css — scroll-driven number counters
   + top-of-viewport scroll progress bar

   PART 1 — Animated number counters in the hero trust strip.
   Each `<strong data-count-to="10">` element animates 0 → 10 as
   the hero scrolls into view. Uses the modern @property +
   counter() trick: a real `<integer>` custom property animated
   via scroll-timeline, rendered via CSS `counter()`. Smooth,
   accessible, no JS.

   The HTML doesn't actually need data-count-to — we read the
   number directly from each .hero-trust strong's text content
   on the JS-progressive-enhancement layer. The CSS fallback
   handles the visual.

   PART 2 — Top-of-viewport scroll progress bar.
   A 3px gold bar fixed to the top of the viewport that fills
   from 0 to 100% as the user scrolls the page. Driven entirely
   by `animation-timeline: scroll(root)` — zero JS, zero
   re-render cost. Disappears in reduce-motion.
   ============================================================ */

/* ---------- PART 1: animated number counters ---------- */
/* The counter animation lives in js/counter-wireup.js — IntersectionObserver
   + requestAnimationFrame writes the count directly to the element's text
   content. The earlier CSS-only approach (counter() + ::after with
   font-size: 0 on the host) was duplicating glyphs on the bento trust
   cards ("10+10+", "100%100%") because the inline-text and the pseudo
   were both rendering at full size in some cascade contexts. Direct
   text update is bulletproof.

   This block is intentionally empty — kept for clarity / future
   styling hooks on the .count-up class. */
.count-up {
  /* Ensures the animated text replaces in place without layout shift */
  font-variant-numeric: tabular-nums;
}

/* ---------- PART 2: top-of-viewport scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--c-yellow), var(--c-yellow-dark));
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
  /* Subtle glow so it reads as premium. Uses color-mix so the
     glow follows any future tweak to --c-yellow without a
     manual update. */
  box-shadow: 0 0 8px color-mix(in srgb, var(--c-yellow) 50%, transparent);
}

@supports (animation-timeline: scroll(root)) {
  .scroll-progress {
    animation: btb-progress-fill linear;
    animation-timeline: scroll(root);
  }
  @keyframes btb-progress-fill {
    to { transform: scaleX(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    display: none;
  }
}

/* ---------- PART 3: animated underline reveals on inline links ----
   Every <a> inside body copy (not buttons, not nav) gets a soft
   underline that draws in on hover. Uses a CSS gradient + bg-size
   transition — works in every browser, no JS. */
p a,
li a,
.tst-quote a,
.faq-a a,
.longform a {
  position: relative;
  text-decoration: none;
  color: var(--c-blue);
  font-weight: 600;
  background-image: linear-gradient(var(--c-yellow), var(--c-yellow));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.2s ease;
}

@media (hover: hover) {
  p a:hover,
  li a:hover,
  .tst-quote a:hover,
  .faq-a a:hover,
  .longform a:hover {
    background-size: 100% 2px;
    color: var(--c-blue-dark);
  }
}

@media (prefers-reduced-motion: reduce) {
  p a, li a {
    transition: none;
    background-size: 100% 2px;
  }
}