/* Show the work: friends (work-show/friends.js; tokens.css, --work-show). The six project meeples stand on the ground in
   the scene: on a desktop in a line from the red bush, under the raccoon, up to the sign's Work board; on a phone in two
   rows right of the red bush. Each stands over a soft oval, its name under it. Over one it lifts --work-friend-lift
   (--work-friend-rise, back on --work-friend-settle) and its date shows; a click glides to its project (--work-glide).
   friends.js places each (whole device pixels) and sizes its meeple (--mw by --mh, the art at --work-friend-size of the
   scene's art pixel, --m). */
html[data-work-show="friends"] .hero {
  --scene-y: -38px;
}

html[data-work-show="friends"] .ws-friends {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

html[data-work-show="friends"] .ws-friend {
  position: absolute;
  display: grid;
  justify-items: center;
  width: calc(var(--mw) + 16px);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

html[data-work-show="friends"] .ws-friend:focus-visible {
  outline: none;
}

html[data-work-show="friends"] .ws-friend-lift {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--mw);
  height: var(--mh);
}

html[data-work-show="friends"] .ws-friend-art {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
  -webkit-user-drag: none;
}

html[data-work-show="friends"].print-art .ws-friend-art {
  filter: url(#print-badge);
}

/* The oval, as the cards' meeples have, a little back and to the right of the foot, away from the light at the top left.
   It shrinks and fades as the meeple lifts. */
html[data-work-show="friends"] .ws-friend-shadow {
  position: relative;
  display: block;
  width: calc(var(--mw) * 0.7);
  height: calc(9px * var(--m));
  margin-top: calc(-4.5px * var(--m));
  border-radius: 50%;
  background: rgb(74 74 74 / 0.16);
  translate: calc(3px * var(--m)) calc(-1px * var(--m));
  pointer-events: none;
}

/* Its name, at caption size, under the oval; the date comes in under the name while it is in hand. */
html[data-work-show="friends"] .ws-friend-name {
  position: relative;
  display: grid;
  justify-items: center;
  margin-top: 6px;
  color: #979393;
  font-size: 12.5px;
  line-height: 1.3;
  letter-spacing: -0.06px;
  white-space: nowrap;
  transition: color var(--jot-hover-fade, 150ms) ease;
}

html[data-work-show="friends"] .ws-friend-date {
  position: absolute;
  top: 100%;
  color: #a19898;
  opacity: 0;
  translate: 0 -2px;
  transition: opacity 150ms var(--motion-ease-exit), translate 150ms var(--motion-ease-exit);
}

html[data-work-show="friends"] .ws-friend.on .ws-friend-name {
  color: var(--ink-nav);
}

html[data-work-show="friends"] .ws-friend.on .ws-friend-date {
  opacity: 1;
  translate: 0 0;
  transition: opacity 200ms var(--motion-ease-out), translate 200ms var(--motion-ease-out);
}

html[data-work-show="friends"] .ws-friend:focus-visible .ws-friend-name > span:first-child {
  border-radius: 6px;
  box-shadow: 0 0 0 1.5px var(--card), 0 0 0 3px var(--ink-nav);
}

@media (max-width: 560px) {
  html[data-work-show="friends"] .hero {
    --scene-y: -90px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-work-show="friends"] :is(.ws-friend-name, .ws-friend-date, .ws-friend.on .ws-friend-date) {
    transition: none;
  }
}