/* Micro-interaction layer. Motion-bearing rules are gated on html.fx, which fx.js
   adds only when reduced motion is off, so no-JS and reduced-motion stay static. */

/* 1. nav scrolled state */
nav .pill{transition:padding .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease),background .45s var(--ease)}
nav.scrolled .pill{padding:5px 6px 5px 14px;border-color:rgba(251,191,36,.2);background:rgba(20,19,24,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 22px 44px -16px rgba(0,0,0,.85),0 0 0 1px rgba(251,191,36,.04)}

/* 2. scrollspy indicator */
.pill ul{position:relative}
.pill ul a{position:relative;z-index:1}
.pill ul a.on{color:var(--tx)}
.pill ul a.on:hover{background:transparent}
.fx-ind{position:absolute;left:0;top:0;height:100%;width:0;border-radius:999px;background:rgba(251,191,36,.12);box-shadow:inset 0 0 0 1px rgba(251,191,36,.28);opacity:0;pointer-events:none;transform:translateX(0);transition:transform .5s var(--ease),width .5s var(--ease),opacity .3s}
.fx-ind.show{opacity:1}
.fx-ind.snap{transition:opacity .3s}

/* 3. scroll progress */
.fx-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:60;background:linear-gradient(90deg,rgba(251,191,36,.55),var(--amber));transform:scaleX(var(--p,0));transform-origin:0 50%;pointer-events:none;will-change:transform}

/* 5. magnetic buttons: individual `translate` so the existing transform hover keeps working */
.btn{position:relative;overflow:hidden;transition:transform .4s var(--ease),background .3s,translate .6s var(--ease),scale .3s var(--ease)}
.btn-p.mag{translate:var(--bx,0px) var(--by,0px)}
.btn-p.mag.live{transition:transform .4s var(--ease),background .3s,translate .16s ease-out,scale .3s var(--ease)}

/* 7. marker draw-in; fallback is the existing static band */
.fx .mk-demo .b{background-repeat:no-repeat;background-position:0 0;background-size:0% 100%;transition:background-size .7s var(--ease);transition-delay:calc(var(--i,0)*.14s + .15s)}
.fx .mk-demo.go .b{background-size:100% 100%}

/* 8. press feedback + ripple (`scale` is independent of transform) */
.btn:active,.opt:active,summary:active,.pill ul a:active{scale:.97}
.opt{transition:background .25s,transform .3s var(--ease),scale .25s var(--ease)}
summary{transition:scale .25s var(--ease)}
.pill ul a{transition:color .2s,background .2s,scale .25s var(--ease)}
.fx-rip{position:absolute;border-radius:50%;width:12px;height:12px;margin:-6px 0 0 -6px;background:currentColor;opacity:.22;pointer-events:none;transform:scale(0);animation:fx-rip .6s var(--ease) forwards}
@keyframes fx-rip{to{transform:scale(var(--s,14));opacity:0}}

/* 9. inline link underline that grows from the left */
.lead a,footer a:not(.btn):not(.brand){text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0% 1px no-repeat;padding-bottom:1px;transition:background-size .45s var(--ease),color .2s}
.lead a:hover,footer a:not(.btn):not(.brand):hover{background-size:100% 1px}
.lead a:focus-visible,footer a:not(.btn):not(.brand):focus-visible{background-size:100% 1px}

@media (prefers-reduced-motion:reduce){
  .btn:active,.opt:active,summary:active,.pill ul a:active{scale:1}
  .fx-ind{transition:opacity .3s}
}