/* ============================================================
   Scroll motion. One layer over the whole site.

   Switch: SITE.motion in content/site.mjs. Set it to false and this file,
   motion.js and the early class are not added to any page, so the site is
   exactly as it was before.

   Everything here only applies under html.motion-on, which is set before
   first paint, removed again if motion.js fails to start, and never set for
   visitors who ask their device for reduced motion.
   Transform, opacity, clip-path and a little blur only. Videos are never scaled.
   ============================================================ */

/* ---------- reading progress ---------- */
.m-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80;
  background: linear-gradient(90deg, var(--cyan), var(--purple), var(--pink));
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* ---------- blocks rise into place, one after another ---------- */
.motion-on .m-up {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  filter: blur(6px);
  transition:
    opacity .9s var(--ease-out),
    transform 1.1s var(--ease-out),
    filter .9s var(--ease-out);
  transition-delay: calc(var(--mi, 0) * 90ms);
}
.motion-on .m-up.m-in { opacity: 1; transform: none; filter: none; }

/* small labels come in with their letters drawing together */
.motion-on .m-label {
  opacity: 0; letter-spacing: calc(var(--ls, .16em) + .28em);
  transition: opacity .9s var(--ease-out), letter-spacing 1.2s var(--ease-out);
}
.motion-on .m-label.m-in { opacity: 1; letter-spacing: var(--ls, .16em); }

/* ---------- headings rise word by word from behind a mask ---------- */
.m-word {
  display: inline-block; vertical-align: top;
  overflow: hidden;
  padding: 0 .06em .14em; margin: 0 -.06em -.14em;   /* room for descenders and overhanging letters */
}
.m-word > .m-w { display: inline-block; }
.motion-on .m-split .m-w {
  transform: translate3d(0, 110%, 0);
  transition: transform 1s var(--ease-out);
  transition-delay: calc(var(--wi, 0) * 55ms);
}
.motion-on .m-split.m-in .m-w { transform: none; }

/* ---------- pictures open like a shutter ---------- */
.motion-on .m-clip {
  clip-path: inset(18% 0 0 0 round 14px);
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition:
    clip-path 1.3s var(--ease-out),
    opacity .8s var(--ease-out),
    transform 1.3s var(--ease-out);
  transition-delay: calc(var(--mi, 0) * 90ms);
}
.motion-on .m-clip.m-in { clip-path: inset(0 0 0 0 round 14px); opacity: 1; transform: none; }

/* ---------- lines draw across ---------- */
.motion-on .m-draw { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease-out) .25s; }
.motion-on .m-draw.m-in { transform: none; }
.motion-on .about__intro .m-draw { transform-origin: 50% 50%; }
@media (min-width: 821px) { .motion-on .about__intro .m-draw { transform-origin: 0 50%; } }

/* ---------- screenshots drift inside their frames while you scroll ---------- */
.motion-on .m-drift { transform: translate3d(0, var(--drift, 0px), 0) scale(1.08); will-change: transform; }
.motion-on .build:hover .m-drift { transform: translate3d(0, var(--drift, 0px), 0) scale(1.11); }

/* ---------- hero: content lifts away as you scroll past ---------- */
.motion-on .m-lift { will-change: transform, opacity; }