/* Scroll-triggered polish for case study pages. Pure addition: no existing
   case-studies.css rule is touched, so pages without this file look identical
   to before. Everything here degrades to the final, correct state with no
   motion under prefers-reduced-motion. */

.cs-anim [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1), transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--cs-d, 0ms);
}
.cs-anim [data-reveal].is-in { opacity: 1; transform: none; }

/* Bars and vchart fills animate from zero to their real value (already set
   inline by the page markup) the moment they scroll into view. */
.cs-anim .cs-review-bars .fill,
.cs-anim .csl-snap-bars i,
.cs-anim .cs-bars .fill,
.cs-anim .cs-vchart .bw i,
.cs-anim .cs-range .fill {
  transition: width 1100ms cubic-bezier(0.16, 1, 0.3, 1), height 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cs-anim .cs-hero .big strong,
.cs-anim .cs-stat .num {
  display: inline-block;
}
.cs-anim [data-count] { font-variant-numeric: tabular-nums; }

/* A soft lift on hover for stat tiles and cards, reinforcing the page feels alive */
.cs-anim .cs-stat,
.cs-anim .cs-fact,
.cs-anim .card.cs-objective,
.cs-anim .csl-card {
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 350ms ease;
}
.cs-anim .cs-stat:hover,
.cs-anim .cs-fact:hover,
.cs-anim .card.cs-objective:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .cs-anim [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cs-anim .cs-stat:hover,
  .cs-anim .cs-fact:hover,
  .cs-anim .card.cs-objective:hover { transform: none; }
}