/* DOSE OF SPIRIT: catalogue filter motion (chips, count, search). Driven by motion.js */

/* ---------- Chip rows ---------- */
@property --fl { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fr { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* single-line scroller: label fixed at the left, chips scroll in .chip-track (built by motion.js) */
.filters { grid-template-columns: minmax(0, 1fr); }
.filters .chip-row { position: relative; flex-wrap: nowrap; align-items: center; min-width: 0; }
.filters .chip-row .chip-label { flex: none; }
.chip-scroller { position: relative; flex: 1 1 0; min-width: 0; }
.chip-track {
  position: relative; display: flex; gap: 8px; flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden; padding: 6px; margin: -6px;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity; scroll-padding: 0 6px;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  --fl: 0px; --fr: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  transition: --fl .3s ease, --fr .3s ease;
}
.chip-track::-webkit-scrollbar { display: none; }
.chip-row.can-l .chip-track { --fl: 32px; }
.chip-row.can-r .chip-track { --fr: 32px; }
.filters .chip-row .chip { flex: none; white-space: nowrap; scroll-snap-align: start; }
.chip-track.dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; -webkit-user-select: none; }

/* arrow buttons: desktop pointers only, shown only on the side that can scroll */
.chip-arrow {
  display: none; position: absolute; top: 50%; z-index: 3;
  width: 28px; height: 28px; margin-top: -14px; padding: 0; border-radius: 50%;
  place-items: center; color: var(--ink); background: var(--glass-hover);
  box-shadow: inset 0 0 0 1px var(--line), 0 3px 10px rgb(0 0 0 / calc(.16 * var(--sh, 1)));
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.chip-arrow-l { left: 0; }
.chip-arrow-r { right: 0; }
@media (hover: hover) and (pointer: fine) {
  .chip-track { cursor: grab; }
  .chip-arrow { display: grid; }
  .chip-row.can-l .chip-arrow-l, .chip-row.can-r .chip-arrow-r { opacity: 1; pointer-events: auto; }
  .chip-arrow:hover { transform: scale(1.1); }
}

.filters .chip-row .chip {
  position: relative; z-index: 1; overflow: hidden;
  transform: translate(var(--mx, 0px), calc(var(--my, 0px) - var(--lift, 0px))) scale(var(--sc, 1));
  transition:
    background .25s, color .25s ease .12s, box-shadow .25s,
    transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.filters .chip-row .chip.is-down {
  --sc: .94;
  transition:
    background .25s, color .25s ease .12s, box-shadow .25s,
    transform .12s cubic-bezier(.2, .7, .3, 1);
}

/* sliding indicator */
.chip-pill {
  position: absolute; left: 0; top: 0; width: 0; height: 36px;
  border-radius: 999px; background: var(--ink);
  pointer-events: none; z-index: 0;
  transition: opacity .4s ease .15s;
}
.chip-pill.mo-css {
  transition:
    left .45s cubic-bezier(.34, 1.3, .64, 1), top .45s cubic-bezier(.34, 1.3, .64, 1),
    width .45s cubic-bezier(.34, 1.3, .64, 1), height .45s ease, opacity .4s ease .15s;
}

/* pressed chips hand their ink background to the pill (only once the pill is placed) */
.filters .chip-row.has-pill .chip[aria-pressed="true"] {
  background: transparent; color: var(--on-ink); box-shadow: none;
}

/* ripple from the pointer, clipped by the chip's pill shape */
.filters .chip-row .chip::after {
  content: ""; position: absolute; pointer-events: none;
  left: var(--rx, 50%); top: var(--ry, 50%);
  width: var(--rd, 120px); height: var(--rd, 120px);
  margin: calc(var(--rd, 120px) / -2) 0 0 calc(var(--rd, 120px) / -2);
  border-radius: 50%; background: currentColor;
  opacity: 0; transform: scale(0);
}
.filters .chip-row .chip.rip::after { animation: mo-rip .6s cubic-bezier(.2, .7, .3, 1); }
@keyframes mo-rip {
  from { opacity: .22; transform: scale(0); }
  to { opacity: 0; transform: scale(1); }
}

/* hover: lift and soft shadow (fine pointers only) */
@media (hover: hover) and (pointer: fine) {
  .filters .chip-row .chip:hover {
    --lift: 1.5px;
    box-shadow: inset 0 0 0 1px var(--line), 0 5px 12px -3px rgb(0 0 0 / calc(.18 * var(--sh, 1)));
  }
  .filters .chip-row.has-pill .chip[aria-pressed="true"]:hover { --lift: 0px; box-shadow: none; }
}

/* entrance (once per page load) */
.filters .chip-row.mo-pre .chip,
.filters .chip-row.mo-pre .chip-pill { opacity: 0; }
.filters .chip-row.mo-in .chip { animation: mo-chip-in .5s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--i, 0) * 25ms); }
@keyframes mo-chip-in {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}

/* ---------- Count ticker ---------- */
.count { font-variant-numeric: tabular-nums; }

/* ---------- Search field ---------- */
.search { position: relative; }
.search::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 1.5px solid var(--ink); opacity: 0; pointer-events: none;
}
.search:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); }
.search:focus-within::after { animation: mo-ring .75s cubic-bezier(.2, .7, .3, 1); }
@keyframes mo-ring {
  from { inset: 0; opacity: .4; }
  to { inset: -8px; opacity: 0; }
}
.search svg { transform-origin: 40% 40%; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.search:focus-within svg { transform: rotate(-16deg) scale(1.1); color: var(--ink); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .filters .chip-row .chip,
  .filters .chip-row .chip.is-down { transition: none; transform: none; }
  .filters .chip-row .chip::after,
  .search::after { display: none; }
  .filters .chip-row.mo-in .chip { animation: none; }
  .chip-pill, .chip-pill.mo-css { transition: none; }
  .search svg { transition: none; }
  .chip-track { transition: none; }
  .chip-arrow { transition: opacity .01s; }
  .chip-arrow:hover { transform: none; }
  .search:focus-within svg { transform: none; }
}