/* ==========================================================================
   Progressive scroll-driven effects. Only applied where the browser supports
   CSS scroll timelines; everything degrades to static or IntersectionObserver reveals.
   ========================================================================== */

/* Reading-progress bar at the very top */
.progress { position: fixed; inset-inline: 0; top: 0; z-index: 101; block-size: 2px; background: var(--gradient); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
[dir="rtl"] .progress { transform-origin: 100% 50%; }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress { animation: grow-x linear both; animation-timeline: scroll(root); }
    @keyframes grow-x { to { transform: scaleX(1); } }

    /* Section headings drift in slightly as they enter the viewport */
    .section-head h2 { animation: head-in linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    @keyframes head-in { from { opacity: 0.2; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }

    /* Screenshot images get a subtle inner parallax */
    .case-shot img, .about__frame img { animation: img-parallax linear both; animation-timeline: view(); }
    @keyframes img-parallax { from { translate: 0 -3%; scale: 1.08; } to { translate: 0 3%; scale: 1.08; } }

    /* Stat cards scale up as they enter */
    .stat { animation: pop linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
    @keyframes pop { from { opacity: 0; scale: 0.9; } to { opacity: 1; scale: 1; } }
  }
}
@supports not (animation-timeline: scroll()) {
  .progress { display: none; }
}