:root{
    --badge-size: 250px;      /* diameter */
    --spin-duration: 8s;      /* 360° = 2s => each face shown for 1s */
  }

  .stage{
    perspective: 800px;
    display:inline-block;
  }

  .coin{
    width: var(--badge-size);
    height: var(--badge-size);
    position: relative;
    transform-style: preserve-3d;
    animation: spin var(--spin-duration) linear infinite;
    border-radius: 50%;
  }

  .face{
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;                 /* keeps it perfectly round */
    backface-visibility: hidden;      /* hides the back when turned */
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 2px #00000022, 0 6px 16px #0000002a;
  }

  .face.front{
    background-image: url("/assets/img/fade.png");
  }

  .face.back{
    transform: rotateY(180deg);
    background-image: url("/assets/img/myself.png");
  }

  @keyframes spin {
    0%   { transform: rotateY(0deg); }
    25%  { transform: rotateY(0deg); }      /* hold front 1s */
    50%  { transform: rotateY(180deg); }    /* flip (0.5s) */
    75%  { transform: rotateY(180deg); }    /* hold back 1s */
    100% { transform: rotateY(360deg); }    /* flip back (0.5s) */
  }