/* ============ split headings ============ */
.js [data-split] .word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.js [data-split] .word__in{
  display:inline-block;transform:translateY(110%);
  transition:transform .9s var(--ease-out);
  transition-delay:calc(var(--w,0)*.045s);
  will-change:transform;
}
.js .is-visible [data-split] .word__in{transform:none}
.hero h1 .word__in{animation:word-rise .95s var(--ease-out) both;animation-delay:calc(.15s + var(--w,0)*.07s)}
@keyframes word-rise{from{transform:translateY(110%)}to{transform:none}}

/* ============ hero: character-level name ============ */
.js [data-split="chars"] .word{padding-top:.12em;margin-top:-.12em}
.js [data-split="chars"] .word__in{transform:none;animation:none;will-change:auto}
.js [data-split="chars"] .char{
  display:inline-block;transform-origin:50% 100%;
  animation:char-rise .95s var(--ease-out) backwards;
  animation-delay:calc(.18s + var(--c,0)*.028s);
}
@keyframes char-rise{
  0%{transform:translateY(115%) rotate(3deg);filter:blur(5px);opacity:0;color:#2b5443}
  45%{opacity:1;color:#2b5443}
  100%{transform:none;filter:blur(0);opacity:1;color:#111413}
}

/* ============ hero: drafting field ============ */
.js .hero__field{animation:hero-field-in 1.3s ease .1s forwards}
.js .hero__wash{animation:hero-wash-in 1.8s ease .18s forwards}
@keyframes hero-field-in{to{opacity:1}}
@keyframes hero-wash-in{to{opacity:1}}

/* ============ scroll reveals ============ */
.js [data-animate]{opacity:0;transform:translateY(14px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
.js [data-animate].is-visible{opacity:1;transform:none}
.js [data-stagger]>*:not([data-static]){
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
  transition-delay:calc(var(--i,0)*.055s);
}
.js [data-stagger].is-visible>*:not([data-static]){opacity:1;transform:none}

/* ============ micro motion ============ */
@keyframes pulse{0%{transform:scale(.6);opacity:.85}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-split] .word__in{
    transform:none!important;transition:none!important;animation:none!important;
  }
  .js [data-split="chars"] .char{
    transform:none!important;filter:none!important;opacity:1!important;animation:none!important;
  }
  .js .hero__field,.js .hero__wash{opacity:1!important;animation:none!important}
  .hero__wash{will-change:auto}
  .js [data-animate]{opacity:1!important;transform:none!important;transition:none!important}
  .js [data-stagger]>*:not([data-static]){opacity:1!important;transform:none!important;transition:none!important}
  .timeline__fill{transform:scaleY(1)!important}
  .browser,.project-card,.featured__card,.btn,.to-top{transition:none!important}
}