/* BrandArchway premium motion layer.
   Opt-in per element via data attributes. Adds nothing until a page asks for it,
   so existing pages are untouched until they opt in.

   Principle: scroll POSITION drives the value continuously. Nothing "triggers".
   That difference is most of why one page feels expensive and another feels like
   a template with fade-ins. */

@media (prefers-reduced-motion: no-preference) {

  /* A line that rises as it enters, driven by its own distance to the fold.
     Low amplitude and a long tail: the eye should not be able to name the move. */
  [data-lift] {
    opacity: var(--lift-o, 0);
    transform: translate3d(0, calc((1 - var(--lift, 0)) * var(--lift-y, 22px)), 0);
    will-change: transform, opacity;
  }

  /* Media travels slower than the page. Anything above 0.18 reads as a gimmick. */
  [data-parallax] { will-change: transform; }
  [data-parallax] > img,
  [data-parallax] > picture > img,
  [data-parallax] > video {
    transform: translate3d(0, calc(var(--px, 0) * 1px), 0) scale(1.06);
    will-change: transform;
  }

  /* One slow specular pass across a heading, the first time it is fully read.
     Runs once. A loop turns luxury into a casino. */
  [data-sheen] {
    background-image: linear-gradient(
      100deg,
      transparent 38%,
      color-mix(in oklab, currentColor 26%, transparent) 50%,
      transparent 62%);
    background-size: 220% 100%;
    background-position: calc(220% - var(--sheen, 0) * 320%) 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text;
  }

  /* Inertial pull on the primary action. Small, or it feels broken. */
  [data-magnetic] {
    transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
  }
  [data-magnetic]:active { transition-duration: .08s; }
}

/* Reduced motion, and the no-JS case: everything sits at its finished state.
   The page must be complete without a single frame of animation. */
@media (prefers-reduced-motion: reduce) {
  [data-lift] { opacity: 1 !important; transform: none !important; }
  [data-parallax] > img, [data-parallax] > video { transform: none !important; }
  [data-sheen] { background-image: none; }
}
html:not(.premium-ready) [data-lift] { opacity: 1; transform: none; }

/* Real figures only. This class carries no styling opinion about the number,
   it only reserves the width so the layout does not jump while it counts. */
[data-count] { font-variant-numeric: tabular-nums; }