/* N motion. Only applies once motion.js adds `anim` to <html> (never with reduced motion), so nothing is hidden
   without it. One easing family throughout: a soft expo-out for arrivals, a springy overshoot for pops. */
:root{--mo-out:cubic-bezier(.16,1,.3,1);--mo-pop:cubic-bezier(.3,1.7,.5,1)}

/* ---------- intro ---------- */
.anim .top{animation:mo-drop .9s var(--mo-out) .15s both}
.anim .hx-light{animation:mo-bloom 2.4s var(--mo-out) both}
.anim .hx-art{animation:mo-fade 2.2s ease .4s both}
.anim .hx-h .ch{display:inline-block;animation:mo-rise 1.1s var(--mo-out) calc(.2s + var(--i) * 45ms) both}
.anim .hx-row{animation:mo-up 1s var(--mo-out) .9s both}
@keyframes mo-drop{from{opacity:0;transform:translateY(-18px)}}
@keyframes mo-bloom{from{opacity:0;transform:scale(.86)}}
@keyframes mo-fade{from{opacity:0}}
@keyframes mo-rise{from{opacity:0;transform:translateY(.45em) rotate(5deg);filter:blur(12px)}}
@keyframes mo-up{from{opacity:0;transform:translateY(20px)}}

/* the hero eases away as you scroll: the name lifts and dims, the river drifts (where scroll timelines exist) */
@supports (animation-timeline: scroll()){
  .anim .hx-bottom{animation:mo-hx-out linear both;animation-timeline:scroll(root);animation-range:0 90vh}
  .anim .hx-panel{animation:mo-hx-light linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  @keyframes mo-hx-out{to{transform:translateY(-10vh);opacity:.15}}
  @keyframes mo-hx-light{to{filter:brightness(.55) saturate(.8)}}
}

/* ---------- scroll reveals ---------- */
.anim .rv{opacity:0;transform:translateY(36px);transition:opacity .9s var(--mo-out) var(--d,0ms),transform 1.1s var(--mo-out) var(--d,0ms)}
.anim .rv.in{opacity:1;transform:none}
/* cards: the mockups rise into their window a beat after the card arrives */
.anim .ncw .nc-stage{opacity:0;transform:translateY(14%);transition:opacity .9s var(--mo-out) calc(var(--d,0ms) + .2s),transform 1.3s var(--mo-out) calc(var(--d,0ms) + .2s)}
.anim .ncw.in .nc-stage{opacity:1;transform:none}
.cnt{font-variant-numeric:tabular-nums}
/* section headings: the two dots pop in */
.anim .sec-row .dots i{scale:0;transition:scale .6s var(--mo-pop) .35s}
.anim .sec-row .dots i+i{transition-delay:.47s}
.anim .sec-row.in .dots i{scale:1}
/* About: the roles slide in one by one and the stickers pop */
.anim .ac .roles li{opacity:0;transform:translateX(-12px);transition:opacity .6s var(--mo-out) calc(.35s + var(--i,0) * 70ms),transform .7s var(--mo-out) calc(.35s + var(--i,0) * 70ms)}
.anim .ac.in .roles li{opacity:1;transform:none}
.anim .ac .stickers li{scale:0;transition:scale .7s var(--mo-pop) calc(.5s + var(--i,0) * 140ms)}
.anim .ac.in .stickers li{scale:1}
.anim .ac .ac-pic img{scale:1.08;transition:scale 1.6s var(--mo-out)}
.anim .ac.in .ac-pic img{scale:1}
/* Let's Yarn: the glow swells in behind the card */
.anim .contact-card .contact-art{opacity:0;transform:rotate(-8deg) scale(.92);transition:opacity 1.4s ease .2s,transform 1.8s var(--mo-out) .2s}
.anim .contact-card.in .contact-art{opacity:1;transform:none}
/* footer sign-off: word by word, then the full stop */
.fx-thanks .w{display:inline-block;color:inherit}
.fx-thanks .dot{display:inline-block;color:var(--accent)}
.anim .fx-thanks .w{opacity:0;transform:translateY(.45em);transition:opacity .7s var(--mo-out) calc(.1s + var(--i) * 90ms),transform .9s var(--mo-out) calc(.1s + var(--i) * 90ms)}
.anim .fx-top.in .fx-thanks .w{opacity:1;transform:none}
.anim .fx-thanks .dot{scale:0;transition:scale .7s var(--mo-pop) .65s}
.anim .fx-top.in .fx-thanks .dot{scale:1}
/* links: an underline that draws in on hover */
.fx-list a,.fx-base a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .35s var(--mo-out),color .2s ease}
.fx-list a:hover,.fx-base a:hover{background-size:100% 1.5px;text-decoration:none}
/* nav pills: a soft press */
.top-nav a{transition:background-color .2s ease,color .2s ease,transform .25s var(--mo-pop)}
.top-nav a:active{transform:scale(.95)}