/* ============================================================
   32-scroll-driven.css — CSS scroll-driven reveals + parallax

   What this does in plain English:

   1. Scroll-triggered reveals via CSS animation-timeline: view().
      As any element with .fade-up, .slide-left, .slide-right, or
      .scroll-reveal scrolls into the viewport, it animates from
      faded/offset to fully-visible. NO JS, NO IntersectionObserver.
      The animation is keyed to scroll position so it plays
      forward as the section enters and (optionally) reverses
      as it leaves the top of the viewport.

   2. CSS scroll-driven parallax for hero backgrounds.
      The hero photo subtly drifts as the user scrolls, replacing
      the existing JS parallax with a pure CSS implementation
      that's GPU-accelerated and never janks.

   3. Section-progress hover lift on cards.
      Service blocks, project cards, and testimonial cards now
      animate scale + shadow on scroll-into-view, not just on
      hover. Makes the page feel alive at any scroll position.

   Progressive enhancement: browsers without scroll-timeline
   support fall back to the existing JS .fade-up system in
   16-animations.css. We override that for supporting browsers.
   ============================================================ */

@supports (animation-timeline: view()) {
  /* ---------- Reveals on scroll entry ---------- */
  /* Override the JS-driven .fade-up start state and replace with
     a scroll-keyed animation. Cover 0% → 35% of the element's
     view entry window — fully revealed by the time it's a third
     of the way up the screen. */
  .fade-up {
    opacity: 0;
    transform: translateY(28px);
    animation: btb-reveal-up both;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  /* If the JS layer already added .is-visible, the CSS animation
     still drives the look (final state matches) — both layers
     converge to opacity:1 transform:none. */
  .fade-up.is-visible {
    opacity: 1;
    transform: none;
  }

  @keyframes btb-reveal-up {
    from { opacity: 0; transform: translateY(28px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Lateral reveals — used in alternating service blocks */
  .slide-left,
  .slide-right {
    opacity: 0;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .slide-left  { transform: translateX(-32px); animation-name: btb-reveal-left; }
  .slide-right { transform: translateX(32px);  animation-name: btb-reveal-right; }

  @keyframes btb-reveal-left  {
    from { opacity: 0; transform: translateX(-32px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes btb-reveal-right {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  /* ---------- Premium card lift on scroll-in ---------- */
  /* Service blocks + value props + project cards get a subtle
     scale + soft shadow growth as they cross into view. Tiny
     amount (1.012x) — premium without feeling theatrical. */
  .svc-block,
  .value-prop,
  .project-card,
  .tst-card {
    animation: btb-card-lift linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
  @keyframes btb-card-lift {
    from { transform: translateY(18px); filter: brightness(0.95); }
    to   { transform: translateY(0);    filter: brightness(1); }
  }

  /* ---------- Hero photo parallax (pure CSS) ---------- */
  /* The hero ::before pseudo-element drifts vertically as the
     viewport scrolls, creating depth without JS. Replaces the
     existing js/parallax.js calculation. */
  #hero {
    overflow: hidden;
    animation: btb-hero-parallax linear;
    animation-timeline: scroll(root);
    animation-range: 0 100vh;
  }
  @keyframes btb-hero-parallax {
    from { background-position-y: 0%; }
    to   { background-position-y: 25%; }
  }
}

/* ---------- Accessibility guard ---------- */
@media (prefers-reduced-motion: reduce) {
  .fade-up, .slide-left, .slide-right,
  .svc-block, .value-prop, .project-card, .tst-card {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}