/* @import url("https://fonts.googleapis.com/css?family=Raleway:900"); */
:root {
  --flips: 540deg;
  /* --flips: 900deg; */
  /* --flips: 720deg; */
}

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  /* background: #3e3b3b; */
  background: rgb(100,150,200);
  display: grid;
  place-items: center;
  min-height: 100vh;
  overflow: hidden;
}

.coin {
  height: 150px;
  width: 150px;
  transform-style: preserve-3d;
  transform-origin: 50%;
  cursor: grab;
}
.coin.anim {
  animation: flip 1s linear forwards;
}
.coin:before, .coin:after {
  display: grid;
  place-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background: #f7941e;
  border: 12px solid #f8a037;
  box-shadow: inset 0 0 0 3px #f38809;
  font-size: 60px;
  /* font-family: "Raleway", sans-serif; */
  color: #f38809;
  text-shadow: 1.5px 1.5px 0 #e48008, -1.5px -1.5px 0 #f8a745;
}
.coin:before {
  transform: translateZ(12.5px);
  content: "H";
}
.coin:after {
  transform: translateZ(-12.5px) rotateY(180deg) rotateZ(180deg);
  content: "Y";
}
.coin .edge {
  transform: translateX(62.5px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.coin .edge .segment {
  height: 150px;
  width: 25px;
  position: absolute;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.coin .edge .segment:before, .coin .edge .segment:after {
  content: "";
  display: block;
  height: 15px;
  width: 25px;
  position: absolute;
  transform: rotateX(84.375deg);
}
.coin .edge .segment:before {
  transform-origin: top center;
  background: repeating-linear-gradient(#f38809 0, #f38809 25%, #da7a08 25%, #da7a08 50%);
  /* background: repeating-linear-gradient(rgb(200,200,200) 0, rgb(200,200,200) 25%, rgb(200,200,200) 25%, rgb(200,200,200) 50%); */
}
.coin .edge .segment:after {
  bottom: 0;
  transform-origin: center bottom;
  background: repeating-linear-gradient(#da7a08 0, #da7a08 25%, #f38809 25%, #f38809 50%);
  /* background: repeating-linear-gradient(rgb(180,180,180) 0, rgb(180,180,180) 25%,rgb(180,180,180) 25%, rgb(180,180,180) 50%); */
}
.coin .edge .segment:nth-child(1) {
  transform: rotateY(90deg) rotateX(11.25deg);
}
.coin .edge .segment:nth-child(2) {
  transform: rotateY(90deg) rotateX(22.5deg);
}
.coin .edge .segment:nth-child(3) {
  transform: rotateY(90deg) rotateX(33.75deg);
}
.coin .edge .segment:nth-child(4) {
  transform: rotateY(90deg) rotateX(45deg);
}
.coin .edge .segment:nth-child(5) {
  transform: rotateY(90deg) rotateX(56.25deg);
}
.coin .edge .segment:nth-child(6) {
  transform: rotateY(90deg) rotateX(67.5deg);
}
.coin .edge .segment:nth-child(7) {
  transform: rotateY(90deg) rotateX(78.75deg);
}
.coin .edge .segment:nth-child(8) {
  transform: rotateY(90deg) rotateX(90deg);
}
.coin .edge .segment:nth-child(9) {
  transform: rotateY(90deg) rotateX(101.25deg);
}
.coin .edge .segment:nth-child(10) {
  transform: rotateY(90deg) rotateX(112.5deg);
}
.coin .edge .segment:nth-child(11) {
  transform: rotateY(90deg) rotateX(123.75deg);
}
.coin .edge .segment:nth-child(12) {
  transform: rotateY(90deg) rotateX(135deg);
}
.coin .edge .segment:nth-child(13) {
  transform: rotateY(90deg) rotateX(146.25deg);
}
.coin .edge .segment:nth-child(14) {
  transform: rotateY(90deg) rotateX(157.5deg);
}
.coin .edge .segment:nth-child(15) {
  transform: rotateY(90deg) rotateX(168.75deg);
}
.coin .edge .segment:nth-child(16) {
  transform: rotateY(90deg) rotateX(180deg);
}

.floor {
  position: absolute;
  width: 150px;
  height: 150px;
}
.floor .line {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -3.125px;
  width: 150px;
  height: 6.25px;
  transform-origin: center left;
  border-radius: 6.25px;
  background: linear-gradient(90deg, white 20%, transparent 20%);
  background-repeat: no-repeat;
  opacity: 0;
}
.floor .line.anim {
  animation: lines 0.6s ease-out forwards;
  animation-delay: 0.65s;
}
.floor .line:nth-child(1) {
  transform: rotate(30deg) scale(1.1);
}
.floor .line:nth-child(2) {
  transform: rotate(60deg);
}
.floor .line:nth-child(3) {
  transform: rotate(90deg) scale(1.1);
}
.floor .line:nth-child(4) {
  transform: rotate(120deg);
}
.floor .line:nth-child(5) {
  transform: rotate(150deg) scale(1.1);
}
.floor .line:nth-child(6) {
  transform: rotate(180deg);
}
.floor .line:nth-child(7) {
  transform: rotate(210deg) scale(1.1);
}
.floor .line:nth-child(8) {
  transform: rotate(240deg);
}
.floor .line:nth-child(9) {
  transform: rotate(270deg) scale(1.1);
}
.floor .line:nth-child(10) {
  transform: rotate(300deg);
}
.floor .line:nth-child(11) {
  transform: rotate(330deg) scale(1.1);
}
.floor .line:nth-child(12) {
  transform: rotate(360deg);
}

@keyframes flip {
  0% {
    transform: rotateY(0) rotateX(0deg) scale(1);
  }
  10% {
    transform: rotateY(45deg) rotateX(calc(var(--flips) / 3)) scale(1.6);
  }
  60% {
    transform: rotateY(-30deg) rotateX(calc(var(--flips) / 1.5)) scale(2);
  }
  100% {
    transform: rotateY(0) rotateX(var(--flips)) scale(1);
  }
}
@keyframes lines {
  40% {
    opacity: 1;
    background-position: -120px 0;
  }
  70% {
    opacity: 1;
    background-position: 75px 0;
  }
  100% {
    opacity: 1;
    background-position: 150px 0;
  }
}