/* ===== motion layer ===== */
:root{--fx-ease:cubic-bezier(.22,.61,.36,1)}
.fx-bar{position:fixed;left:0;top:0;height:2px;width:0;background:linear-gradient(90deg,#b5793a,#8a5522);z-index:200;transition:width .06s linear;pointer-events:none}

/* header condense */
header{transition:box-shadow .3s var(--fx-ease)}
header.fx-stuck{box-shadow:0 10px 30px -22px rgba(20,24,29,.55)}
header.fx-stuck .hd{height:54px}

/* reveal */
[data-fx]{opacity:0;transform:translateY(18px);transition:opacity .75s var(--fx-ease),transform .75s var(--fx-ease);will-change:opacity,transform}
[data-fx].fx-in{opacity:1;transform:none}

/* hero entrance */
.fx-hero{opacity:0;transform:translateY(22px)}
.fx-hero.fx-go{opacity:1;transform:none;transition:opacity .8s var(--fx-ease),transform .8s var(--fx-ease)}
.fx-hero.fx-clip{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path .95s var(--fx-ease)}
.fx-hero.fx-clip.fx-go{clip-path:inset(0 0 0 0)}
.hero .heroart{opacity:0;transform:translateY(26px) scale(.985)}
.hero .heroart.fx-go{opacity:1;transform:none;transition:opacity 1s var(--fx-ease),transform 1s var(--fx-ease)}
.hero .heroart svg{display:block}

/* ticker */
.fx-ticker{border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);background:var(--sand);overflow:hidden;position:relative}
.fx-ticker::before,.fx-ticker::after{content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none}
.fx-ticker::before{left:0;background:linear-gradient(90deg,var(--sand),rgba(247,245,241,0))}
.fx-ticker::after{right:0;background:linear-gradient(270deg,var(--sand),rgba(247,245,241,0))}
.fx-track{display:flex;width:max-content;animation:fxtick 34s linear infinite}
.fx-track span{display:inline-flex;align-items:center;font-size:13.5px;color:var(--ink2);letter-spacing:.01em;padding:13px 0;white-space:nowrap}
.fx-track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--wood);opacity:.5;margin:0 26px}
@keyframes fxtick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* card hover */
.card{transition:transform .45s var(--fx-ease),box-shadow .45s var(--fx-ease),border-color .45s var(--fx-ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -26px rgba(20,24,29,.5);border-color:#d8d2c7}

/* numbers */
.fx-num{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  [data-fx],.fx-hero,.hero .heroart{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .fx-track{animation:none}
  .card:hover{transform:none}
  .fx-bar{display:none}
}