/* ──────────────────────────────────────────────────────────────────────────
   Landing page: subtle parallax (3 background-level touches only).
   - Pure CSS scroll-driven animation: no JavaScript, runs on the compositor.
   - Uses the individual `translate` property, so it never fights the hero
     video's existing scale/fade intro or the Pay cards' scale-on-stack.
   - Only active where supported AND the visitor hasn't asked for reduced motion;
     everywhere else the page renders exactly as before. Delete this file to undo.
   ────────────────────────────────────────────────────────────────────────── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    @keyframes pzx-hero   { from { translate: 0 0; } to { translate: 0 6%; } }
    @keyframes pzx-slab   { from { translate: 0 -3%; } to { translate: 0 3%; } }
    @keyframes pzx-mark   { from { translate: 0 24%; } to { translate: 0 0; } }

    /* 1 · Hero photo/video drifts slower than the page.
       Extended a touch upward so the drift never exposes an edge. */
    section.hero .hero-bg-video {
      inset: -7% 0 0 0;
      height: 107%;
      animation: pzx-hero linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 800px;
    }

    /* 2 · Glass-slab backgrounds on the Pay cards shift a few pixels. */
    #propzora-pay { view-timeline: --pzx-pay block; }
    #propzora-pay .lp-pcard__bg img {
      position: absolute;
      left: 0;
      top: -4%;
      height: 108%;
      animation: pzx-slab linear both;
      animation-timeline: --pzx-pay;
      animation-range: cover 0% cover 100%;
    }

    /* 3 · Footer wordmark rises gently into place as the page ends.
       Tied to the page's own scroll position near the bottom (the footer clips its
       overflow, so a view timeline on it would not track the page). Finishes at 0,
       i.e. exactly its normal position, when the page reaches the end. */
    .pz-f-mark span {
      animation: pzx-mark linear both;
      animation-timeline: scroll(root block);
      animation-range: calc(100% - 300px) 100%;
    }

    /* Keep it tinier on phones */
    @media (max-width: 768px) {
      @keyframes pzx-hero-s { from { translate: 0 0; } to { translate: 0 3%; } }
      section.hero .hero-bg-video { inset: -4% 0 0 0; height: 104%; animation-name: pzx-hero-s; }
    }
  }
}