/* /case-studies/ scroll effects (#165). Pure CSS scroll-driven animation where the browser supports it;
   everywhere else, and for prefers-reduced-motion, the page is just the finished, static page. */
.prose .cs-stat { font-weight: 700; color: var(--text); margin: 0 0 1rem; }
.prose .cs-stat .cs-count { font-size: 2.4rem; line-height: 1; letter-spacing: -0.03em; margin-right: 0.25rem; color: var(--accent); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* the illustration drifts inside its frame as it crosses the screen */
    .prose img.art { animation: cs-drift linear both; animation-timeline: view(); animation-range: cover 10% cover 90%; }
    /* "before": the problem recedes as you read on; "after": what was built comes forward */
    .cs-before { animation: cs-before linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
    .cs-after { animation: cs-after linear both; animation-timeline: view(); animation-range: entry 5% entry 60%; }
  }
}
@keyframes cs-drift { from { object-position: 50% 0%; } to { object-position: 50% 100%; } }
@keyframes cs-before { from { opacity: 1; } to { opacity: 0.45; } }
@keyframes cs-after { from { opacity: 0.85; transform: translateY(14px); } to { opacity: 1; transform: none; } }