.coin-scene {
  padding: 2rem;
  perspective: 900px;
}

.coin {
  position: relative;
  width: min(50vw, 13rem);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.coin-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  backface-visibility: hidden;
  background: radial-gradient(circle at 35% 30%, #f6dc8f, #c99a2e 60%, #9a7014);
  box-shadow: inset 0 0 0 0.6rem rgb(255 255 255 / 0.2);
  color: #5a3f06;
  font: 800 5rem/1 var(--display);
}

.coin-tails {
  background: radial-gradient(circle at 35% 30%, #f1f4f9, #aeb6c6 60%, #7c859a);
  color: #2c3347;
  transform: rotateY(180deg);
}