/* Released keys use their untouched authored PNGs. Their black rims stay fixed;
   only the duplicate interior cap is exposed and moved during a press. */
.key-source-ellipse {
  clip-path: ellipse(50% 50% at 50% 50%);
}
.key-source-contour {
  position: absolute;
  border-radius: 50%;
  overflow: clip;
  background: #000;
}
.color-key.key-has-fixed-ring:is(:active, .pressing) .key-face {
  translate: 0 0;
}
.color-key.key-has-fixed-ring:is(:active, .pressing) .key-face img {
  opacity: 1;
}
.color-key.key-has-fixed-ring .key-face > .key-rotation::after {
  display: none;
}
.key-cap-aperture {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  overflow: clip;
  pointer-events: none;
  background: #111;
  opacity: 0;
}
.key-cap-motion {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: clip;
  transform-origin: center;
  transition: transform 100ms ease-out, filter 100ms ease-out;
}
.color-key.key-has-fixed-ring:is(:active, .pressing) .key-cap-aperture {
  opacity: 1;
}
.color-key.key-has-fixed-ring:is(:active, .pressing) .key-cap-motion {
  transform: translateY(.55px) scale(.995, .985);
  filter: brightness(.98);
}
.color-key.key-has-fixed-ring:is(:active, .pressing) .key-label-box {
  translate: var(--cap-label-x) var(--cap-label-y);
}