/*
 * The sound board. See sound-board.mjs for why it is built in JS and why every
 * button says what it plays.
 *
 * Set as a row of keys rather than as three call-to-action buttons: they are a
 * toy under a paragraph, and the paragraph is what the section is about.
 */
.sound-board {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.sound-board-label {
  width: 100%;
  /* 5.8:1 on this section's deep purple ground. The site's usual small-print
     grey measured 2.5:1 there -- it is set for the near-black grounds the rest
     of the shop uses, and this is the one section that is not one. */
  color: #d9d2de;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sound-board-key {
  min-height: 44px;
  padding: 10px 18px;
  color: var(--ink, #0c0b0e);
  background: var(--paper, #f2efe9);
  border: 3px solid var(--ink, #0c0b0e);
  /* Ink, not brand. The slab shadow is brand-coloured everywhere else on the
     site because everywhere else is a near-black ground; on this section's
     purple it was purple on purple and the keys had no weight at all. */
  box-shadow: 4px 4px 0 var(--ink, #0c0b0e);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 110ms ease, box-shadow 110ms ease;
}

.sound-board-key:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink, #0c0b0e);
}
.sound-board-key:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink, #0c0b0e);
}
.sound-board-key:focus-visible { outline: 3px solid var(--paper, #f2efe9); outline-offset: 3px; }

/*
 * Held down for as long as the sound runs. Pressed rather than greyed: the
 * button is doing the thing you asked for, and a control that looks broken
 * while it works reads as a failure.
 */
.sound-board-key.is-playing,
.sound-board-key[aria-disabled="true"] {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink, #0c0b0e);
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .sound-board-key { transition: none; }
}