/* Show the work: tab's meeple slider (work-show/slider.js; tokens.css, --work-tab-slider). The six project meeples in a
   row in the bar's tray (its white, line, lift, corners and gap), held --work-slider-top under the top of the Work panel
   as it scrolls, over the projects. Each meeple fits a --work-slider-size square in a box --work-slider-pad bigger each
   side; the bar's pill grey (--selected) sits behind the one in view, and a hover takes the bar's hover grey. */

#work .work-slider {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 0;
}

html:not([data-work-slider="on"]) #work .work-slider {
  display: none;
}

#work .work-slider-row {
  position: absolute;
  top: var(--work-slider-top);
  left: 50%;
  display: flex;
  gap: var(--tabs-gap);
  padding: var(--tabs-pad);
  border: 1px solid var(--line);
  border-radius: var(--tabs-radius);
  background: var(--surface);
  box-shadow: 0 var(--tabs-lift) 0 var(--line);
  translate: -50% 0;
}

#work .work-slider-grey {
  position: absolute;
  top: var(--tabs-pad);
  left: var(--tabs-pad);
  width: calc(var(--work-slider-size) + 2 * var(--work-slider-pad));
  height: calc(var(--work-slider-size) + 2 * var(--work-slider-pad));
  border-radius: var(--tab-radius);
  background: var(--selected);
  pointer-events: none;
}

#work .work-slider-row button {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--work-slider-size) + 2 * var(--work-slider-pad));
  height: calc(var(--work-slider-size) + 2 * var(--work-slider-pad));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--tab-radius);
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

#work .work-slider-row img {
  position: relative;
  display: block;
  width: var(--work-slider-size);
  height: var(--work-slider-size);
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  filter: saturate(calc(var(--meeple-saturation, 1) * var(--own-saturation, 1)));
}

/* The cards' colour strength, meeple by meeple (projects.css, .badge .icon). */
#work .work-slider-row [data-meeple="ramp"] { --own-saturation: var(--meeple-saturation-ramp, 1); }
#work .work-slider-row [data-meeple="roblox"] { --own-saturation: var(--meeple-saturation-roblox, 1); }
#work .work-slider-row [data-meeple="dojo"] { --own-saturation: var(--meeple-saturation-dojo, 1); }
#work .work-slider-row [data-meeple="intact"] { --own-saturation: var(--meeple-saturation-intact, 1); }
#work .work-slider-row [data-meeple="bump"] { --own-saturation: var(--meeple-saturation-bump, 1); }

/* The bar's hover fill (Jotion's): fades in and grows a little on a box that is not the one in view; a press shrinks it. */
#work .work-slider-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--tab-hover);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--jot-hover-fade, 150ms) ease, scale var(--jot-hover-duration, 140ms) var(--motion-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  #work .work-slider-row button:not([aria-current]):hover .work-slider-fill {
    opacity: 1;
    scale: var(--jot-hover-scale, 1.04);
  }
}

#work .work-slider-row button:not([aria-current]):active .work-slider-fill {
  opacity: 1;
  scale: var(--jot-press-scale, 0.94);
}

#work .work-slider-row button:focus-visible {
  outline: 1px solid var(--mute);
  outline-offset: 2px;
}

/* A phone: the Work panel's words start 56px down (tab.css), under where the row sits, so the holder takes the row's
   room and they come down below it. */
@media (max-width: 899px) {
  #work .work-slider {
    height: calc(var(--work-slider-top) + var(--work-slider-size) + 2 * var(--work-slider-pad) + 2 * var(--tabs-pad) + 2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #work .work-slider-fill {
    scale: 1 !important;
    transition: opacity var(--jot-hover-fade, 150ms) ease;
  }
}