/**
 * Hero Section Animated Elements
 * Large, high-quality animations integrated into hero sections
 */

.hero-banner {
  position: relative;
  overflow: hidden;
}

/* Animated Background Elements */
.hero-bg-element {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

/* Slot Machine Symbols - Larger and more prominent */
@keyframes float-spin {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.12; }
  50% { transform: translateY(-30px) rotate(180deg); opacity: 0.18; }
  100% { transform: translateY(0) rotate(360deg); opacity: 0.12; }
}

.slot-symbol {
  position: absolute;
  font-size: 5rem;
  animation: float-spin 8s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

.slot-symbol:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; }
.slot-symbol:nth-child(2) { top: 60%; left: 10%; animation-delay: 2s; font-size: 5rem; }
.slot-symbol:nth-child(3) { top: 20%; right: 8%; animation-delay: 4s; }
.slot-symbol:nth-child(4) { bottom: 15%; right: 15%; animation-delay: 6s; font-size: 5.5rem; }
.slot-symbol:nth-child(5) { top: 50%; right: 5%; animation-delay: 1s; font-size: 4.5rem; }
.slot-symbol:nth-child(6) { bottom: 25%; left: 12%; animation-delay: 3s; }
.slot-symbol:nth-child(7) { top: 35%; left: 15%; animation-delay: 5s; font-size: 5rem; }
.slot-symbol:nth-child(8) { top: 70%; right: 20%; animation-delay: 7s; }

/* Jackpot Stars - Pulsing effect */
@keyframes star-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.12; }
  50% { transform: scale(1.5) rotate(90deg); opacity: 0.2; }
}

.jackpot-star {
  position: absolute;
  font-size: 3rem;
  animation: star-pulse 3s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.3));
}

.jackpot-star:nth-child(1) { top: 15%; left: 20%; animation-delay: 0s; }
.jackpot-star:nth-child(2) { top: 25%; right: 15%; animation-delay: 1s; }
.jackpot-star:nth-child(3) { bottom: 20%; left: 25%; animation-delay: 2s; }
.jackpot-star:nth-child(4) { bottom: 30%; right: 18%; animation-delay: 1.5s; }

/* Coin Rain - More prominent */
@keyframes coin-fall {
  0% { transform: translateY(-150px) rotate(0deg) scale(0); opacity: 0; }
  10% { opacity: 1; transform: translateY(-100px) rotate(90deg) scale(1); }
  90% { opacity: 1; }
  100% { transform: translateY(600px) rotate(720deg) scale(0.8); opacity: 0; }
}

.coin {
  position: absolute;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at 30% 30%, #f9d71c, #e6b800, #d4a500);
  border-radius: 50%;
  border: 2px solid #ffd700;
  animation: coin-fall 5s linear infinite;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(255, 255, 255, 0.4);
  top: -100px;
  opacity: 0.6;
}

.coin::before {
  content: '€';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #8b7500;
  font-weight: var(--font-bold);
  font-size: 1.5rem;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.coin:nth-child(1) { left: 10%; animation-delay: 0s; }
.coin:nth-child(2) { left: 25%; animation-delay: 1.2s; width: 45px; height: 45px; }
.coin:nth-child(3) { left: 40%; animation-delay: 2.4s; }
.coin:nth-child(4) { left: 55%; animation-delay: 0.8s; width: 55px; height: 55px; }
.coin:nth-child(5) { left: 70%; animation-delay: 3.6s; }
.coin:nth-child(6) { left: 85%; animation-delay: 1.6s; width: 48px; height: 48px; }
.coin:nth-child(7) { left: 18%; animation-delay: 4s; }
.coin:nth-child(8) { left: 62%; animation-delay: 2s; }

/* Playing Cards - Floating */
@keyframes card-float {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-40px) rotate(5deg); }
}

.card-icon {
  position: absolute;
  width: 70px;
  height: 95px;
  background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
  border-radius: var(--radius);
  animation: card-float 4s ease-in-out infinite;
  opacity: 0.15;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  border: 2px solid rgba(0, 0, 0, 0.08);
}

.card-icon::before {
  content: '♠';
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 2rem;
  color: #000;
}

.card-icon::after {
  content: 'A';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  font-weight: var(--font-bold);
  color: #000;
}

.card-icon:nth-child(1) { top: 20%; left: 8%; animation-delay: 0s; }
.card-icon:nth-child(2) { top: 60%; right: 10%; animation-delay: 2s; }
.card-icon:nth-child(3) { bottom: 25%; left: 18%; animation-delay: 1s; }

.card-icon:nth-child(2)::before,
.card-icon:nth-child(2)::after { color: #d32f2f; }
.card-icon:nth-child(2)::before { content: '♥'; }

.card-icon:nth-child(3)::before { content: '♦'; color: #d32f2f; }
.card-icon:nth-child(3)::after { color: #d32f2f; }

/* Sparkle Effects - More prominent */
@keyframes sparkle-shine {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 0.5; transform: scale(1.5) rotate(180deg); }
}

.sparkle {
  position: absolute;
  width: 15px;
  height: 15px;
  background: radial-gradient(circle, #ffffff, #ffd700);
  border-radius: 50%;
  animation: sparkle-shine 2s ease-in-out infinite;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

.sparkle:nth-child(1) { top: 12%; left: 22%; animation-delay: 0s; }
.sparkle:nth-child(2) { top: 28%; right: 12%; animation-delay: 0.6s; }
.sparkle:nth-child(3) { bottom: 18%; left: 32%; animation-delay: 1.2s; }
.sparkle:nth-child(4) { bottom: 35%; right: 28%; animation-delay: 1.8s; }
.sparkle:nth-child(5) { top: 45%; left: 8%; animation-delay: 0.3s; }
.sparkle:nth-child(6) { top: 55%; right: 5%; animation-delay: 0.9s; }
.sparkle:nth-child(7) { bottom: 42%; left: 15%; animation-delay: 1.5s; }
.sparkle:nth-child(8) { top: 38%; right: 22%; animation-delay: 0.4s; }

/* Trophy/Jackpot Icons */
@keyframes trophy-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.1); }
}

.trophy-icon {
  position: absolute;
  font-size: 4rem;
  animation: trophy-bounce 3s ease-in-out infinite;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
  opacity: 0.18;
}

.trophy-icon:nth-child(1) { top: 18%; right: 25%; animation-delay: 0s; }
.trophy-icon:nth-child(2) { bottom: 22%; left: 20%; animation-delay: 1.5s; }

/* Light Rays Effect */
@keyframes light-rays {
  0% { transform: rotate(0deg); opacity: 0.02; }
  100% { transform: rotate(360deg); opacity: 0.08; }
}

.light-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(255, 255, 255, 0.1) 2deg,
    transparent 4deg
  );
  animation: light-rays 20s linear infinite;
  transform-origin: center;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 1024px) {
  .slot-symbol {
    font-size: 4rem;
  }

  .slot-symbol:nth-child(n+6) {
    display: none;
  }

  .jackpot-star {
    font-size: 3rem;
  }

  .trophy-icon {
    font-size: 4rem;
  }
}

@media (max-width: 768px) {
  .slot-symbol {
    font-size: 3rem;
  }

  .slot-symbol:nth-child(n+5) {
    display: none;
  }

  .jackpot-star:nth-child(n+3) {
    display: none;
  }

  .coin {
    width: 35px;
    height: 35px;
  }

  .coin:nth-child(n+5) {
    display: none;
  }

  .coin::before {
    font-size: 1rem;
  }

  .card-icon {
    width: 60px;
    height: 85px;
  }

  .card-icon:nth-child(3) {
    display: none;
  }

  .sparkle:nth-child(n+5) {
    display: none;
  }

  .trophy-icon {
    font-size: 3rem;
  }

  .trophy-icon:nth-child(2) {
    display: none;
  }
}