/* The medallion rocks around its vertical axis, with separate depth planes. */
.hero-art {
  perspective: 1100px;
  perspective-origin: 50% 47%;
}

.coin-float {
  --coin-yaw: 30deg;
  --coin-drift: 14px;
  --coin-lift: 8px;
  --coin-pitch: 10deg;
  transform-origin: 50% 46.7%;
  transform-style: preserve-3d;
  transform: translate3d(calc(0px - var(--coin-drift)), 0, 0)
    rotateX(var(--coin-pitch)) rotateY(calc(0deg - var(--coin-yaw))) rotateZ(-9deg);
  animation: coinSway 6.8s cubic-bezier(.45, 0, .55, 1) infinite;
  will-change: transform;
  /* A filter on this parent would flatten its child depth planes. */
  filter: none;
}

.gold-coin {
  position: relative;
  transform: translateZ(7px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: drop-shadow(0 28px 30px rgba(0, 0, 0, .52));
}

.coin-edge, .coin-glint {
  position: absolute;
  left: 14.3%;
  top: 11.05%;
  width: 71.4%;
  height: 71.4%;
  border-radius: 50%;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.coin-edge {
  transform: translateZ(-11px);
  background: linear-gradient(115deg,
    #6d4c13 0%, #c49a48 18%, #f5d785 32%, #745117 46%,
    #a57829 62%, #edce78 80%, #694814 100%);
  box-shadow: inset 0 0 0 1px #b68f43, inset 0 0 0 3px #8f692b;
}

.coin-glint {
  transform: translateZ(8px);
  background: linear-gradient(115deg,
    transparent 24%, rgba(255, 250, 217, .15) 40%,
    rgba(255, 249, 211, .6) 47%, transparent 64%);
  mix-blend-mode: screen;
  opacity: .12;
  animation: coinReflection 6.8s cubic-bezier(.45, 0, .55, 1) infinite;
  animation-play-state: inherit;
}

@keyframes coinSway {
  0%, 100% {
    transform: translate3d(calc(0px - var(--coin-drift)), 0, 0)
      rotateX(var(--coin-pitch)) rotateY(calc(0deg - var(--coin-yaw))) rotateZ(-9deg);
  }
  50% {
    transform: translate3d(var(--coin-drift), calc(0px - var(--coin-lift)), 0)
      rotateX(calc(var(--coin-pitch) - 4deg)) rotateY(var(--coin-yaw)) rotateZ(3deg);
  }
}

@keyframes coinReflection {
  0%, 100% { opacity: .12; }
  50% { opacity: .42; }
}

@media (max-width: 760px) {
  .hero-art { perspective: 950px; }
  .coin-float {
    --coin-yaw: 24deg;
    --coin-drift: 10px;
    --coin-lift: 5px;
  }
  .gold-coin { filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .48)); }
}

@media (prefers-reduced-motion: reduce) {
  .coin-float {
    animation: none;
    will-change: auto;
    transform: rotateX(8deg) rotateY(-14deg) rotateZ(-8deg);
  }
  .coin-glint { animation: none; opacity: .18; }
}