/* Grosse Figurenbilder ausserhalb der Partie. Nur translate und scale,
   damit ein Hover-Transform auf demselben Bild weiter gilt. Portraits nicht. */

@keyframes mp-fig-life {
  0%, 100% { translate: 0 0; scale: 1; }
  50% { translate: 0 -4px; scale: 1.028; }
}
@keyframes mp-fig-sheen {
  0%, 70% { translate: -130% 0; opacity: 0; }
  78% { opacity: .9; }
  92%, 100% { translate: 130% 0; opacity: 0; }
}

.mp-figure-frame { position: relative; }

.mp-figure-live {
  animation: mp-fig-life calc(5.6s + var(--mp-fig, 0) * .32s) ease-in-out calc(var(--mp-fig, 0) * -.74s) infinite;
}
.mp-figure-live.is-paused { animation-play-state: paused; }

.mp-figure-sheen {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  animation: mp-fig-life calc(5.6s + var(--mp-fig, 0) * .32s) ease-in-out calc(var(--mp-fig, 0) * -.74s) infinite;
  -webkit-mask-image: var(--mp-mask);
  mask-image: var(--mp-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.mp-figure-sheen.is-paused,
.mp-figure-sheen.is-paused::before { animation-play-state: paused; }
.mp-figure-sheen::before {
  content: "";
  position: absolute;
  inset: -12% 0;
  background: linear-gradient(102deg, transparent 40%, rgba(255, 244, 214, .5) 50%, transparent 60%);
  animation: mp-fig-sheen calc(9s + var(--mp-fig, 0) * .4s) ease-in-out calc(var(--mp-fig, 0) * -1.1s) infinite;
}

.mp-figure-live.mp-figure-deco,
.mp-figure-sheen.is-deco {
  animation-name: mp-fig-life-deco;
}
@keyframes mp-fig-life-deco {
  0%, 100% { translate: 0 0; scale: 1; }
  50% { translate: 0 -2px; scale: 1.035; }
}

.mp-figure-live.mp-figure-deco.is-tiny {
  animation-name: mp-fig-life-tiny;
}
@keyframes mp-fig-life-tiny {
  0%, 100% { translate: 0 0; scale: 1; }
  50% { translate: 0 -1px; scale: 1.06; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-figure-live,
  .mp-figure-sheen,
  .mp-figure-sheen::before { animation: none; }
  .mp-figure-sheen { display: none; }
}