.loading-card {
  --loading-card-width: 3.75rem;
  min-height: 9rem;
  display: grid;
  place-items: center;
  perspective: 700px;
}

.loading-card--compact {
  --loading-card-width: 3rem;
  min-height: 7rem;
}

.loading-surface {
  min-height: 220px;
  display: grid;
  place-items: center;
}

.loading-card__bounce {
  width: var(--loading-card-width);
  aspect-ratio: 5 / 7;
  display: block;
  animation: loadingCardBounce 1.55s cubic-bezier(.34, 1.35, .64, 1) infinite;
  transform-origin: 50% 100%;
}

.loading-card__flip {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  animation: loadingCardFlip 1.55s linear infinite;
  transform-style: preserve-3d;
  will-change: transform;
}

.loading-card__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 4px solid #727983;
  border-top-color: #9aa1aa;
  border-left-color: #89919a;
  border-right-color: #626a74;
  border-bottom-color: #555d67;
  border-radius: .65rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .3), transparent 34% 68%, rgba(50, 57, 66, .07)),
    #d2d6da;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .42),
    inset -2px -3px 5px rgba(50, 57, 66, .11),
    0 .55rem 1.15rem rgba(31, 37, 46, .2);
  backface-visibility: hidden;
}

.loading-card__face--back span {
  display: grid;
  width: 48%;
  aspect-ratio: 1;
  place-items: center;
  color: #606872;
  border: 1px solid rgba(79, 87, 98, .3);
  border-radius: 50%;
  background: rgba(255, 255, 255, .24);
  font-size: calc(var(--loading-card-width) * .31);
  line-height: 1;
  text-shadow: 0 1px rgba(255, 255, 255, .24);
}

.loading-card__face--front {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .32), transparent 34% 68%, rgba(50, 57, 66, .08)),
    #c6cbd0;
  transform: rotateY(180deg);
}

@keyframes loadingCardFlip {
  0% {
    transform: rotateY(0deg) scale(.98);
    animation-timing-function: cubic-bezier(.42, 0, .22, 1);
  }
  50% {
    transform: rotateY(180deg) scale(1.035);
    animation-timing-function: cubic-bezier(.42, 0, .22, 1);
  }
  100% { transform: rotateY(360deg) scale(.98); }
}

@keyframes loadingCardBounce {
  0%, 100% { transform: translateY(0) scaleY(1); }
  38% { transform: translateY(-.55rem) scaleY(1.015); }
  55% { transform: translateY(-.72rem) scaleY(1); }
  82% { transform: translateY(0) scaleY(.965); }
  90% { transform: translateY(-.12rem) scaleY(1.01); }
}

@media (prefers-reduced-motion: reduce) {
  .loading-card__bounce,
  .loading-card__flip {
    animation: none;
    transform: none;
  }
}