.credits-animation-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  perspective: 1100px;
  overflow: hidden;
}

.wallet-hit {
  animation: itbags-wallet-hit 680ms cubic-bezier(.18,.78,.18,1);
}

@keyframes itbags-wallet-hit {
  0% { transform: scale(1); }
  36% { transform: scale(1.18); color: #946919; }
  100% { transform: scale(1); }
}

.coin-wrap {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--coin-size);
  height: var(--coin-size);
  transform-style: preserve-3d;
  opacity: 0;
  will-change: transform, opacity, filter;
  filter: drop-shadow(0 15px 20px rgba(0,0,0,.38)) drop-shadow(0 0 12px rgba(216,179,98,.2));
}

.coin-glow {
  position: absolute;
  left: -30%;
  top: -30%;
  z-index: -1;
  width: 160%;
  height: 160%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,223,0,.5) 0%, rgba(255,223,0,0) 62%);
  opacity: .45;
  transform: scale(.9);
  animation: coin-glow-pulse 1900ms ease-in-out infinite;
  pointer-events: none;
}

.coin {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: coin-tumble var(--spin-speed, 2200ms) cubic-bezier(.25,.1,.25,1) infinite alternate;
}

.coin-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.coin-face svg {
  display: block;
  width: 100%;
  height: 100%;
}

.coin-face text {
  font-family: Georgia, "Times New Roman", serif;
}

.face-front {
  transform: translateZ(5px);
  filter: drop-shadow(0 1px 1px rgba(58,36,0,.28));
}

.face-back {
  transform: rotateY(180deg) translateZ(5px);
}

.face-edge-1 { transform: translateZ(4px) scale(.996); }
.face-edge-2 { transform: translateZ(2.5px) scale(.993); }
.face-edge-3 { transform: translateZ(1px) scale(.99); }
.face-edge-4 { transform: translateZ(-.5px) scale(.987); }
.face-edge-5 { transform: translateZ(-2px) scale(.984); }
.face-edge-6 { transform: translateZ(-3.5px) scale(.981); }
.face-edge-7 { transform: translateZ(-5px) scale(.978); }

@keyframes coin-tumble {
  0% {
    transform: rotateX(var(--rotX-start, 12deg)) rotateY(var(--rotY-start, -26deg)) rotateZ(var(--rotZ-start, 0deg));
  }
  48% {
    transform: rotateX(var(--rotX-mid, -22deg)) rotateY(var(--rotY-mid, -62deg)) rotateZ(var(--rotZ-mid, 210deg));
  }
  100% {
    transform: rotateX(var(--rotX-end, 18deg)) rotateY(var(--rotY-end, -48deg)) rotateZ(var(--rotZ-end, 430deg));
  }
}

@keyframes coin-glow-pulse {
  0%, 100% {
    opacity: .18;
    transform: scale(.8);
  }
  44% {
    opacity: .58;
    transform: scale(1.35);
  }
}

.wallet-spark {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff7b8;
  box-shadow: 0 0 16px 7px rgba(216,179,98,.7);
  animation: spark-out 520ms ease-out forwards;
}

.wallet-burst {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.wallet-burst-ring {
  position: absolute;
  left: -22px;
  top: -22px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,242,170,.9);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(216,179,98,.5), inset 0 0 18px rgba(216,179,98,.2);
  animation: wallet-burst-ring 760ms cubic-bezier(.12,.74,.21,1) forwards;
}

.wallet-burst-core {
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff5b8;
  box-shadow: 0 0 20px 9px rgba(216,179,98,.68);
  animation: wallet-burst-core 520ms ease-out forwards;
}

.wallet-burst-ray {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ray-width, 34px);
  height: 1px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(255,247,184,1), rgba(216,179,98,.16), transparent);
  animation: wallet-burst-ray 720ms cubic-bezier(.12,.74,.21,1) forwards;
}

@keyframes spark-out {
  to {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(.1);
  }
}

@keyframes wallet-burst-ring {
  0% {
    opacity: .95;
    transform: scale(.25);
  }
  100% {
    opacity: 0;
    transform: scale(2.8);
  }
}

@keyframes wallet-burst-core {
  to {
    opacity: 0;
    transform: scale(2.2);
  }
}

@keyframes wallet-burst-ray {
  0% {
    opacity: .95;
    transform: rotate(var(--angle)) translateX(0) scaleX(.15);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--angle)) translateX(18px) scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .coin {
    animation-duration: 1ms;
  }

  .wallet-hit {
    animation: none;
  }
}