/* ============================================================
   BuildMetrx — motion layer
   Scroll and pointer effects layered on top of custom.css. Remove
   this file's <link> and js/motion.js's <script> to switch it all off;
   nothing here changes colors, type, copy, or layout.
   ============================================================ */

/* ---------- Tape-measure scroll progress ----------
   A fixed bar across the top of the viewport that fills with page
   progress. Tick marks every 12px, a taller one every 60px, like a
   tape blade. motion.js sets --progress (0 to 1). */

.tape-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 4px;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  background-color: #FE5D01;
  background-image:
    repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.55) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.3) 0 1px, transparent 1px 12px);
  background-size: 100% 100%, 100% 50%;
  background-repeat: no-repeat;
}

/* ---------- Headline wipe ----------
   Section headlines inside a reveal block uncover top to bottom while
   the block fades up, so headings arrive differently from body copy. */

.js-reveal .reveal h2 {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}

.js-reveal .reveal.is-visible h2 {
  clip-path: inset(-10% -2% -15% -2%);
}

/* ---------- Mockups set into place ----------
   The product mockups start tipped back and lay flat as they scroll
   into view, tied to scroll position rather than a timer. Browsers
   without scroll-driven animations keep the plain fade-up. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .app.set-in {
      transform-origin: 50% 100%;
      animation: mockup-set-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }

    .app.set-in-hero {
      transform-origin: 50% 0%;
      animation: mockup-set-in-hero linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 45%;
    }
  }
}

@keyframes mockup-set-in {
  from {
    transform: perspective(1800px) rotateX(9deg) translateY(28px) scale(0.97);
  }
  to {
    transform: none;
  }
}

@keyframes mockup-set-in-hero {
  from {
    transform: perspective(2200px) rotateX(16deg) scale(0.93);
  }
  to {
    transform: none;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal h2,
  .js-reveal .reveal.is-visible h2 {
    clip-path: none;
    transition: none;
  }
}