/* fortunaisk/static/css/clover.css */

/* --- Loader "Spin" overlay --- */
#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

#loader-overlay .spinner {
    font-size: 3rem;
    color: #2ecc71;
    animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* --- Simple clover explosion --- */

/* Full screen container */
#clover-explosion-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

@keyframes clover-burst {
  0% {
    transform: translate(0, 0) scale(0.5) rotate(0);
    opacity: 1;
  }

  100% {
    transform: translate(var(--dx), var(--dy)) scale(2) rotate(360deg);
    opacity: 0;
  }
}

.clover-particle {
  position: absolute;
  font-size: 2rem;
  color: #2ecc71;
  opacity: 0;
  animation: clover-burst 1.5s ease-out forwards;
  will-change: transform, opacity;
  z-index: 9999;
}
