/* Scroll moves only individual transform properties; the original layout stays intact. */
.variant-b .b-hero.b-pill-motion-active .b-skills{z-index:5}
.variant-b .b-hero.b-pill-motion-active .b-skills .b-pill{
  animation:none;
  translate:var(--pill-motion-x,0px) var(--pill-motion-y,0px);
  rotate:var(--pill-motion-angle,0deg);
  transform-origin:center;
  background:rgba(247,247,242,.76);
  color:#25251f;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.68),0 2px 10px rgba(20,20,16,.06);
  -webkit-backdrop-filter:blur(12px) saturate(115%);
  backdrop-filter:blur(12px) saturate(115%);
  will-change:translate,rotate;
}
.variant-b .b-hero.b-pill-motion-active .b-signature{
  translate:0 var(--pill-signature-shift,0px);
}

.variant-b .b-work{padding-top:24px}
@media(max-width:640px){
  .variant-b .b-work{padding-top:20px}
}
@media(prefers-reduced-motion:reduce){
  .variant-b .b-hero.b-pill-motion-active .b-skills .b-pill{translate:none;rotate:none;will-change:auto}
  .variant-b .b-hero.b-pill-motion-active .b-signature{translate:none}
}