/* Shared control surface: one pigment field, one particle texture, one motion.
   Persistent selection is static; hover/focus animates the same surface. */
:root{--button-pigment:radial-gradient(ellipse at 22% 26%,#edf1bf 0%,transparent 52%),radial-gradient(ellipse at 79% 74%,#7f9961 0%,transparent 62%),radial-gradient(ellipse at 63% 17%,#cbdb99 0%,#b4ca85 72%)}
.button-fill{isolation:isolate;overflow:hidden}
a.button-fill:not(.hub):not(.category-control),button.button-fill{position:relative}
body .button-fill,body .button-fill:hover,body .button-fill:focus-visible,
body[data-colorway].browsing .category-control.button-fill[aria-current],
.work-filters a.button-fill[aria-current],
body:not(.browsing) .category-control:is(:hover,:focus-visible,[data-hovered=true]) .category-visual,
body:not(.browsing) .hub:is(:hover,:focus-visible,:active){background:transparent;color:var(--ink)}
.button-fill::before,.button-fill::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .28s}
.button-fill::before{z-index:-2;background:var(--button-pigment);background-size:145% 145%;animation:button-pigment 5s ease-in-out infinite alternate;animation-play-state:paused}
.button-fill::after{z-index:-1;background:url('/assets/button-particles-v23.svg') repeat;background-size:128px;mix-blend-mode:soft-light}
.button-fill[aria-current]::before{opacity:1}
.button-fill[aria-current]::after{opacity:.7}
.button-fill:is(:hover,:focus-visible,:active)::before,
body:not(.browsing) .category-control:is(:hover,:focus-visible,[data-hovered=true],:active)>.category-visual::before{opacity:1;animation-play-state:running}
.button-fill:is(:hover,:focus-visible,:active)::after,
body:not(.browsing) .category-control:is(:hover,:focus-visible,[data-hovered=true],:active)>.category-visual::after{opacity:.7}
/* Landing fills belong to the circles; sidebar fills belong to whole sections. */
body:not(.browsing) .category-control.button-fill{overflow:visible}
body:not(.browsing) .category-control.button-fill::before,
body:not(.browsing) .category-control.button-fill::after,
.browsing .category-visual.button-fill::before,
.browsing .category-visual.button-fill::after{display:none}
.browsing .category-control[aria-current]{box-shadow:inset 0 0 0 1px #65794b70}
.browsing .category-control[aria-current] .category-title span,.work-filters a[aria-current]{font-weight:700}
.action-link{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:8px 12px;min-height:36px}
.brand-meta .all-work-link,.header-right .action-link{margin:-8px -12px}
.all-work-link[aria-current]{border-color:transparent}
.nextprev{gap:8px}
.nextprev .action-link{border:1px solid #8e997e66;min-width:70px}
.empty .action-link{border:1px solid #8e997e66}
body:not(.browsing) .dial>svg .wheel-sector-link:hover path,
body:not(.browsing) .dial>svg .wheel-sector-link:active path,
body:not(.browsing) .dial>svg path.hovered{fill:transparent}
@keyframes button-pigment{from{background-position:0% 25%,100% 70%,50% 50%}to{background-position:100% 75%,0% 30%,35% 65%}}
@media(prefers-reduced-motion:reduce){.button-fill::before{animation:none}}