/* The work filters (ported 3 Nov from filters/, round 1's F4 · Crafts dock). Calvin: "filters -- f4. categories: all,
   brand, web, video, testimonials. think on set can just show up within video. testimonials should only show up on
   testimonials (and all)". A dock floats at the foot of the window once the hero has scrolled away and the work fills it: outlined chips with
   their type's bullet (types.css), filled in the type's colour when picked; picks combine (Brand + Web shows both);
   All clears; no counts on the chips or at the end (Calvin, 3 Nov: "drop the piece count ... redundant", then "remove the counts altogether from filter bar"). Hovering a card leaves the dock alone (Calvin: "filter bar doesn't need to do anything when you hover on a piece of
   work"). Phones: the
   dock runs the width and scrolls sideways. filters.js re-flows the grid on one beat. */

/* the re-flow (filters.js plays it: every card on one 420 ms beat) */
.fx .work__grid { transition: height .42s cubic-bezier(.2, .8, .2, 1); }
.fx .work__grid.is-flipping > .card { transition: transform .42s cubic-bezier(.2, .8, .2, 1), opacity .42s cubic-bezier(.2, .8, .2, 1); }
.fx .card.is-leaving { opacity: 0; transform: scale(.97); pointer-events: none; }
.fx .card.is-entering { opacity: 0; transform: scale(.97); }
.fx .card.is-gone { display: none; }
@media (prefers-reduced-motion: reduce) { .fx .work__grid, .fx .work__grid.is-flipping > .card { transition: none; } }

.fx-dock { position: fixed; left: 50%; bottom: 20px; z-index: 30; display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 32px); box-sizing: border-box;
           padding: 6px; border-radius: 999px; background: rgba(23, 23, 23, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
           box-shadow: inset 0 0 0 1px #2E2E2E, 0 18px 40px rgba(0, 0, 0, .45);
           transform: translate(-50%, calc(100% + 40px)); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.fx-dock.is-up { transform: translate(-50%, 0); }
.fx-dock__row { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.fx-dock__row::-webkit-scrollbar { display: none; }
.fx-out { appearance: none; margin: 0; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px 0 10px; flex: none;
          border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px #3A3A3A; color: var(--pal-paper); font: 400 12px/1 var(--font-mono);
          letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; -webkit-tap-highlight-color: transparent;
          transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.fx-out::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tc); }
.fx-out[data-cat="all"]::before { display: none; }
.fx-out[data-cat="all"] { padding-left: 13px; }
.fx-out:hover { box-shadow: inset 0 0 0 1px var(--pal-rail); }
.fx-out[aria-pressed="true"] { background: var(--tc); color: var(--tc-on); box-shadow: none; }
.fx-out[aria-pressed="true"]::before { background: var(--tc-on); }
.fx-out:focus-visible { outline: 1px solid var(--pal-paper); outline-offset: 3px; }
@media (max-width: 600px) { .fx-dock { left: 16px; right: 16px; bottom: 14px; max-width: none; transform: translateY(calc(100% + 40px)); } .fx-dock.is-up { transform: none; } }

/* the industries (Calvin, 4 Nov: "add DTC and B2B selectors/filters/chips -- no frame colors for industry type"): no bullet,
   and picked they fill in paper like All; a hairline between them and the work types */
.fx-out[data-ind] { --tc: var(--paper, #F7F7F5); --tc-on: var(--black, #000); padding-left: 13px; }
.fx-out[data-ind]::before { display: none; }
.fx-sep { flex: none; align-self: center; width: 1px; height: 18px; margin: 0 5px; background: var(--edge, #3A3A3A); }
.fx-out[aria-disabled="true"] { opacity: .35; cursor: default; box-shadow: inset 0 0 0 1px var(--concrete, #2E2E2E); }
.fx-empty { margin: 48px auto 0; text-align: center; font: 400 17px/1.4 var(--font-body); color: var(--ink-2, #D2D4D6); }
.fx-empty[hidden] { display: none; }
.fx-empty__all { appearance: none; margin: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }