/* ---------- one-page additions ---------- */
html{scroll-behavior:smooth}

.pg{scroll-margin-top:78px}
.pg > .page-head{border-top:2px dashed var(--line)}
#home{scroll-margin-top:0}

/* header: shrinks and gains a shadow once the page moves */
.site-header{transition:box-shadow .3s,background .3s}
.header-inner{transition:min-height .3s cubic-bezier(.4,0,.2,1)}
.site-header .brand-badge{transition:transform .3s cubic-bezier(.34,1.56,.64,1),width .3s,height .3s}
.site-header.stuck{box-shadow:0 6px 24px -12px rgba(42,47,74,.35)}
.site-header.stuck .header-inner{min-height:60px}
.site-header.stuck .brand-badge{width:36px;height:36px;border-radius:12px;font-size:.9rem}
.site-header.stuck .brand-text small{opacity:0;height:0;overflow:hidden}

/* reading progress */
.progress{position:absolute;left:0;bottom:-2px;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--coral),var(--butter-deep),var(--mint-deep),var(--sky-deep));}

/* sliding pill behind the active menu item */
.nav-desktop ul{position:relative}
.nav-pill{position:absolute;left:0;top:50%;height:38px;border-radius:999px;background:var(--highlight);
  transform:translate(0,-50%);width:1px;opacity:0;
  transition:transform .42s cubic-bezier(.34,1.3,.64,1),width .42s cubic-bezier(.34,1.3,.64,1),opacity .25s;
  pointer-events:none;z-index:0}
.nav-desktop li{position:relative;z-index:1}
.nav-desktop a.active{background:transparent}
.nav-desktop a.active,.nav-mobile a.active{color:var(--ink);font-weight:500}

/* sub items get a small marker instead of the pill */
.has-sub .sub a.active{background:var(--butter-soft)}

/* section reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* back to top */
.to-top{position:fixed;right:1.1rem;bottom:4.6rem;z-index:40;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:2px solid var(--ink);background:var(--card);color:var(--ink);
  box-shadow:0 4px 0 0 var(--ink);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s,transform .25s,visibility .25s}
.to-top.on{opacity:1;visibility:visible;transform:none}
.to-top:active{transform:translateY(2px);box-shadow:0 2px 0 0 var(--ink)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .nav-pill,.header-inner,.progress{transition:none}
}