/* Scroll motion in the style of the Known Media site:
   masked word-by-word headings, blur-up staggered reveals, eyebrow text scramble,
   scroll progress bar, magnetic buttons, cursor spotlight on cards, scroll-lit paragraph.
   Everything is gated behind html.km-mo, which km-motion.js only adds when motion is allowed. */

/* 1) headings: each word slides up out of a mask */
.km-mo .km-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.km-mo .km-w>span{display:inline-block;transform:translateY(108%);transition:transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*45ms + var(--d,0ms))}
.km-mo .km-in .km-w>span{transform:none}

/* 2) blocks: fade + rise + un-blur, staggered with --d */
.km-mo .km-rv{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),filter .9s;transition-delay:var(--d,0ms)}
.km-mo .km-rv.km-in{opacity:1;transform:none;filter:none}
/* once revealed, hover lifts react instantly again */
.km-mo .km-rv.km-done{transition-delay:0ms}
.km-mo .service-showcase.km-rv.km-done{transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .45s}
.km-mo .service-showcase.km-done:hover{transform:translateY(-6px)}
/* the old CSS scroll-timeline reveal would fight with this one */
.km-mo .about-fact,.km-mo .about-card{animation:none}

/* 3) eyebrow scramble: unresolved letters are dimmer */
.km-scr .x{color:#8a705a}

/* 4) scroll progress bar */
.km-prog{position:fixed;top:0;left:0;right:0;height:2.5px;background:var(--copper,#d77b43);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}

/* 5) magnetic buttons (uses `translate`, so existing hover transforms keep working) */
.km-mo .km-mag{transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.km-mo .km-mag>span[aria-hidden]{display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.km-mo .km-mag:hover>span[aria-hidden]{transform:translate(3px,-3px)}

/* 6) cursor spotlight on cards */
.km-spot{position:relative}
.km-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(215,123,67,.13),transparent 65%)}
.km-spot:hover::after{opacity:1}

/* 7) paragraph that lights up word by word as you scroll */
.km-lit .km-wd{transition:color .3s}
.km-lit .km-wd:not(.on){color:#5e5045}

@media (prefers-reduced-motion:reduce){.km-prog{display:none}}
/* split words keep their heading's own colour (fixes fully-copper headings) */
.km-mo .km-w,.km-mo .km-w>span{color:inherit}