<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* Falling Coins Effect */
.falling-coin {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.coin {
  position: absolute;
  top: -100px; /* Start above the viewport */
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8;
  animation: fall linear infinite;
}

/* Different coin images */
.coin-1 { background-image: url('../images/effect/token-1.png'); }
.coin-2 { background-image: url('../images/effect/token-2.png'); }
.coin-3 { background-image: url('../images/effect/token-3.png'); }
.coin-4 { background-image: url('../images/effect/token-4.png'); }
.coin-5 { background-image: url('../images/effect/token-5.png'); }
.coin-6 { background-image: url('../images/effect/token-6.png'); }

/* Animation for falling */
@keyframes fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  85% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

/* Add some rotation and sway to make it more natural */
.coin:nth-child(odd) {
  animation-name: fall-left;
}

.coin:nth-child(even) {
  animation-name: fall-right;
}

@keyframes fall-left {
  0% {
    transform: translateY(0) rotate(0deg) translateX(0);
    opacity: 0.8;
  }
  50% {
    transform: translateY(50vh) rotate(180deg) translateX(-20px);
  }
  85% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(100vh) rotate(360deg) translateX(0);
    opacity: 0;
  }
}

@keyframes fall-right {
  0% {
    transform: translateY(0) rotate(0deg) translateX(0);
    opacity: 0.8;
  }
  50% {
    transform: translateY(50vh) rotate(180deg) translateX(20px);
  }
  85% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(100vh) rotate(360deg) translateX(0);
    opacity: 0;
  }
}
</pre></body></html>