/* ============================================================
   motion.css — the four signature moves
   18 Sep 2026

   1 · masked line reveal on H1 / H2 (words rise inside clipped
       boxes; every word on a line shares one delay, so the line
       moves as one)
   2 · hairline draw (1px rules scale in from the left)
   3 · image arrival (scale .97 + soft blur → sharp)
   4 · header hides on scroll-down, returns on scroll-up

   One easing everywhere. Everything off under reduced motion.
   Loaded last, after compose.css. Delete the <link> to revert.
   ============================================================ */
:root{ --mv-ease: cubic-bezier(.16,.84,.28,1); }

/* 1 · line reveal ------------------------------------------- */
.ml{ opacity:1 !important; transform:none !important; transition:none !important; }
.ml .w{ display:inline-block; overflow:hidden; vertical-align:top;
        padding:.12em .08em .22em 0; margin:-.12em -.08em -.22em 0; }
.ml .w > .wi{ display:inline-block; transform:translateY(112%);
              transition:transform .95s var(--mv-ease); will-change:transform; }
.ml.mv-in .w > .wi{ transform:none; }
.ml .w.s1 > .wi{ transition-delay:.07s } .ml .w.s2 > .wi{ transition-delay:.14s }
.ml .w.s3 > .wi{ transition-delay:.21s } .ml .w.s4 > .wi{ transition-delay:.28s }
.ml .w.s5 > .wi{ transition-delay:.35s } .ml .w.s6 > .wi{ transition-delay:.42s }
.ml .w.s7 > .wi{ transition-delay:.49s }
/* the hero waits for the page to settle, then leads */
.arrive h1.ml .w > .wi, .phead h1.ml .w > .wi{ transition-duration:1.15s; }

/* 2 · hairline draw ----------------------------------------- */
/* .hl is inline emphasis (italic serif), never a ruled block, so it draws no hairline.
   The old hairline-draw rule here put a stray 1px line above every emphasised phrase. */

/* 3 · image arrival ----------------------------------------- */
.ia{ opacity:0; transform:scale(.97);
     transition:opacity 1.2s var(--mv-ease), transform 1.4s var(--mv-ease), filter 1.2s var(--mv-ease); }
.ia.soft{ filter:blur(8px); }
.ia.mv-in{ opacity:1; transform:none; }
.ia.soft.mv-in{ filter:blur(0); }
/* the hero portrait unmasks top to bottom after the headline lands */
.arrive .pic.clip{ clip-path:inset(0 0 100% 0); transition:clip-path 1.15s var(--mv-ease) .35s; }
.arrive .pic.clip.mv-in{ clip-path:inset(0 0 0 0); }

/* 4 · header ------------------------------------------------ */
header, .nav{ transition:transform .45s var(--mv-ease), box-shadow .45s ease; }
.hdr-hide{ transform:translateY(-100%) !important; }
.hdr-raised{ box-shadow:0 1px 0 rgba(18,18,18,.06), 0 10px 30px -18px rgba(18,18,18,.25); }

/* off ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .ml .w > .wi{ transform:none !important; transition:none !important; }
  .ia, .ia.soft{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .arrive .pic.clip{ clip-path:none !important; transition:none !important; }
  header, .nav{ transition:none !important; }
  .hdr-hide{ transform:none !important; }
}