/* r99k-wheel-fx.css — melhorias APENAS visuais da roleta (/subscribe).
   Nenhuma lógica de sorteio/prêmio é alterada: só CSS por cima do canvas. */

@keyframes r99k-ring-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes r99k-wheel-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.012); }
}
@keyframes r99k-go-pulse {
  0%   { transform: translate(-50%, -50%) scale(.78); opacity: .85; }
  70%  { transform: translate(-50%, -50%) scale(1.18); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1.18); opacity: 0; }
}
@keyframes r99k-glow-shift {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(255, 200, 60, .45)) drop-shadow(0 0 46px rgba(168, 85, 247, .30)); }
  50%      { filter: drop-shadow(0 0 26px rgba(255, 200, 60, .65)) drop-shadow(0 0 60px rgba(168, 85, 247, .45)); }
}

/* Glow pulsante ao redor da roda inteira */
.lucky-wheel-container {
  position: relative;
  animation: r99k-glow-shift 3.2s ease-in-out infinite;
}

/* Anel de "luzes" girando por trás da roda (a roda .wheel tem z-index maior) */
.lucky-wheel-container::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 19.6rem;
  height: 19.6rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background:
    repeating-conic-gradient(
      rgba(255, 214, 90, .95) 0deg 6deg,
      rgba(255, 214, 90, 0) 6deg 22.5deg
    );
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 66%, #000 92%, transparent 96%);
          mask: radial-gradient(circle, transparent 62%, #000 66%, #000 92%, transparent 96%);
  animation: r99k-ring-spin 9s linear infinite;
  transform: translate(-50%, -50%);
}

/* Respiração sutil da roda (não interfere no giro do canvas) */
.lucky-wheel-container .wheel {
  animation: r99k-wheel-breathe 4s ease-in-out infinite;
  will-change: transform;
}

/* Pulso dourado no centro, chamando atenção para o botão GO (que é canvas) */
.lucky-wheel-container::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6.6rem;
  height: 6.6rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  border: 3px solid rgba(255, 220, 110, .85);
  box-shadow: 0 0 22px rgba(255, 200, 60, .55), inset 0 0 14px rgba(255, 200, 60, .35);
  animation: r99k-go-pulse 1.8s ease-out infinite;
  transform: translate(-50%, -50%);
}

/* Acessibilidade: desliga animações para quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .lucky-wheel-container,
  .lucky-wheel-container::before,
  .lucky-wheel-container::after,
  .lucky-wheel-container .wheel {
    animation: none !important;
  }
  .lucky-wheel-container {
    filter: drop-shadow(0 0 20px rgba(255, 200, 60, .45));
  }
}