body {
  background: #050606;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  font-family: sans-serif;
}

#splash {
  width: 100vw; height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#coin {
  width: 100px;
  height: 126px;
  position: relative;
  transform-style: preserve-3d;
  animation: swing 2.5s ease-in-out infinite;
  margin-bottom: 10px;
}

.front, .slice {
  width: 75px;
  height: 100px;
  position: absolute;
  background-image: url("../../icons/logo.svg?v=1.0.60");
  background-size: cover;
}

.slice {
  --depth: 0px;
  transform: translateZ(var(--depth));
  filter: drop-shadow(0 0 0.8px #fffbea);
}

.progress-ring {
  position: absolute;
  width: 74px;
  height: 74px;
  display: flex;
  justify-content: center;
  align-items: center;
}



.progress-value {
  stroke: #ffcc00;
  filter: drop-shadow(0 0 2px #ffcc00);
  transition: stroke-dashoffset .2s linear;
}


@keyframes swing {
  0%   { transform: rotateY(35deg); }
  50%  { transform: rotateY(-35deg); }
  100% { transform: rotateY(35deg); }
}