/* ============================================================================
   motion.css — the page stops describing the product and runs it.

   Garett, twice: the site is dull, and then "do better" after I answered the
   first note with a tinted background. He is right. A brochure with atmosphere
   is still a brochure. The two things premium sites have that this did not:

     1. THEY DEMONSTRATE. The centerpiece here (#runs) pins for five viewport
        heights and plays one missed call all the way to paid — the exact story
        an owner-operator recognizes, told in their own timestamps. It is not a
        video and not a carousel; scroll position IS the transport, so the
        visitor drives it and can stop on any beat.
     2. THEY FEEL EXPENSIVE TO MOVE THROUGH. Inertial scrolling, depth that
        responds to the cursor, type that assembles, buttons that lean toward
        the pointer.

   STRUCTURE OF A PINNED SEQUENCE, because it is easy to get wrong: a tall outer
   NOTE: the pinned #runs rail this file used to describe is GONE. It was
   300vh (originally 520vh, 53% of the page) of scrolling with the viewport
   frozen, and an 8-second clip tells the same story better — see .rr-film in
   photo.css and theFilm() in motion.js.
   ========================================================================== */

/* --------------------------------------------- 0. unbreak position:sticky

   theme.css:285 sets `overflow-x:hidden` on body to stop sideways scroll. That
   single line silently disables position:sticky for the WHOLE DOCUMENT: when
   one axis is `hidden` the other computes to `auto`, which makes the element a
   scroll container, and a sticky descendant then sticks to that container --
   which scrolls with the page, so it never appears to stick at all. Measured
   before the fix: the pinned stage's top went 0 -> -1802 -> -3603 -> -5405 while
   scrolling the rail, instead of holding at 0.

   `clip` clips exactly the same way but does NOT create a scroll container, so
   sticky keeps working. Browsers too old to know `clip` drop this declaration
   and keep theme.css's `hidden`; motion.js feature-tests the real computed
   values and unpins the section for them rather than leaving five viewports of
   empty rail. */
html, body{ overflow-x:clip; }


/* -------------------------------------------------------- 1. kinetic type */

/* Words are wrapped by motion.js and lifted into place. The MASK is what makes
   it read as typesetting rather than a fade: each word rises out of its own
   line box with the overflow clipped, so it appears from behind the baseline. */
.kin{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:0.06em; }
.kin > span{
  display:inline-block;
  transform:translateY(105%);
  transition:transform 900ms cubic-bezier(0.16,1,0.3,1);
}
html.js-motion .kin.in > span{ transform:translateY(0); }
/* Gradient text (background-clip:text) animates as one atom — OPACITY ONLY.
   A transform on such an element risks breaking its own text clip, and the
   whole point of this branch is that the gold line must never disappear. */
html.js-motion .kin-atom{
  opacity:0;
  transition:opacity 760ms cubic-bezier(0.16,1,0.3,1);
}
html.js-motion .kin-atom.in{ opacity:1; }

/* No JS, no class, no transform — the headline is simply typeset. */
html:not(.js-motion) .kin > span{ transform:none; }
html:not(.js-motion) .kin-atom{ opacity:1; }

/* ------------------------------------------- 2. (removed: duplicate lamp)

   There was a .hero-lamp here, a light pool trailing the cursor across the
   hero. It is gone because app.js already writes --lamp-x/--lamp-y from the
   pointer, and those drive BOTH the worklamp and the diamond plate's mask --
   so the real light already follows the cursor and rakes the metal while it
   does. Mine was a second, dimmer light over one section, fighting the first. */

/* ------------------------------------------------------ 3. magnetic buttons */

.mag{ will-change:transform; }
html.js-motion .mag{ transition:transform 420ms cubic-bezier(0.16,1,0.3,1); }
html.js-motion .mag.pulling{ transition:transform 120ms linear; }

@media (prefers-reduced-motion:reduce){
  .kin > span{ transform:none !important; transition:none; }
  .kin-atom{ opacity:1 !important; transition:none; }
  .mag{ transform:none !important; }
}