@keyframes plasmaPulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.85;
    }
    50% {
        transform: scale(1.05) rotate(2deg);
        opacity: 1;
    }
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes btnBreath {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.025);
        filter: brightness(1.08);
    }
}

/* Pointer leans into the spin direction and ticks as the pegs pass:
   a peg pushes it out, then it snaps back — not a symmetric jitter. */
@keyframes pointerTick {
    0% {
        transform: rotate(-4deg);
    }
    55% {
        transform: rotate(-12deg);
    }
    66% {
        transform: rotate(-2deg);
    }
    100% {
        transform: rotate(-4deg);
    }
}

@keyframes flashBurst {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(95);
        opacity: 0;
    }
}

@keyframes labelFade {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.82);
    }
}

@keyframes modalPop {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes winGlow {
    0%, 100% {
        filter: drop-shadow(0 18px 34px rgba(20, 0, 35, 0.55));
    }
    50% {
        filter: drop-shadow(0 0 26px rgba(255, 221, 120, 0.9)) drop-shadow(0 18px 34px rgba(20, 0, 35, 0.55));
    }
}

.wheel-rotor.win .wheel-disc {
    animation: winGlow 0.55s ease-in-out 3;
}

@keyframes confettiFall {
    0% {
        transform: translate3d(0, -20px, 0) rotate(0deg);
        opacity: 0;
    }
    12% {
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--dx, 0), 900px, 0) rotate(var(--rot, 720deg));
        opacity: 0;
    }
}

.confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 9;
}

.confetti-piece {
    position: absolute;
    top: -20px;
    width: 10px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
    will-change: transform, opacity;
    animation: confettiFall var(--dur, 2.6s) cubic-bezier(0.3, 0.2, 0.6, 1) var(--delay, 0s) forwards;
}

@media (prefers-reduced-motion: reduce) {
    .wheel-plasma,
    .logo,
    .btn--spin,
    .btn--claim {
        animation: none;
    }
}