/* Perfume Selection Animation */
@keyframes selectPerfume {
    0% { 
        transform: translateZ(40px) scale(1);
        box-shadow: 0 0 30px rgba(103, 0, 255, 0.4);
    }
    50% { 
        transform: translateZ(60px) scale(1.1);
        box-shadow: 
            0 0 60px rgba(103, 0, 255, 0.6),
            0 0 100px rgba(148, 0, 211, 0.5),
            0 0 140px rgba(103, 0, 255, 0.4);
    }
    100% { 
        transform: translateZ(40px) scale(1);
        box-shadow: 
            0 0 40px rgba(103, 0, 255, 0.6),
            0 0 80px rgba(148, 0, 211, 0.4),
            0 0 120px rgba(103, 0, 255, 0.3),
            inset 0 0 30px rgba(103, 0, 255, 0.4);
    }
}

.perfume-slot.selected {
    animation: selectPerfume 0.3s ease-in-out;
    box-shadow: 
        0 0 40px rgba(103, 0, 255, 0.6),
        0 0 80px rgba(148, 0, 211, 0.4),
        0 0 120px rgba(103, 0, 255, 0.3),
        inset 0 0 30px rgba(103, 0, 255, 0.4);
}

/* Payment Button Animation */
@keyframes buttonPress {
    0% { transform: translateZ(0); }
    50% { transform: translateZ(-10px); }
    100% { transform: translateZ(0); }
}

.payment-button:active {
    animation: buttonPress 0.2s ease-in-out;
}

/* Mist Spray Animation */
@keyframes mistSpray {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
        filter: blur(5px);
    }
    20% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.5);
        filter: blur(10px);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(4);
        filter: blur(15px);
    }
}

.mist-effect.spraying {
    animation: mistSpray 4s ease-out;
}

/* Coin Slot Animation */
@keyframes coinInsert {
    0% { 
        transform: translateY(0);
        opacity: 1;
        box-shadow: 0 0 20px rgba(103, 0, 255, 0.4);
    }
    100% { 
        transform: translateY(100%);
        opacity: 0;
        box-shadow: 0 0 40px rgba(103, 0, 255, 0.6);
    }
}

.coin-insert.active {
    animation: coinInsert 0.5s ease-in;
}

/* Ambient Light Effect */
@keyframes ambientGlow {
    0% { 
        box-shadow: 
            0 0 50px rgba(103, 0, 255, 0.3),
            0 0 100px rgba(148, 0, 211, 0.2),
            inset 0 0 50px rgba(255, 255, 255, 0.1);
    }
    50% { 
        box-shadow: 
            0 0 70px rgba(103, 0, 255, 0.4),
            0 0 120px rgba(148, 0, 211, 0.3),
            inset 0 0 70px rgba(255, 255, 255, 0.15);
    }
    100% { 
        box-shadow: 
            0 0 50px rgba(103, 0, 255, 0.3),
            0 0 100px rgba(148, 0, 211, 0.2),
            inset 0 0 50px rgba(255, 255, 255, 0.1);
    }
}

.vending-machine {
    animation: ambientGlow 4s infinite;
}

/* Spray Hole Glow Effect */
@keyframes sprayHoleGlow {
    0% { 
        box-shadow: 
            0 0 5px rgba(103, 0, 255, 0.3),
            inset 0 0 5px rgba(103, 0, 255, 0.3);
    }
    50% { 
        box-shadow: 
            0 0 15px rgba(103, 0, 255, 0.5),
            inset 0 0 15px rgba(103, 0, 255, 0.5);
    }
    100% { 
        box-shadow: 
            0 0 5px rgba(103, 0, 255, 0.3),
            inset 0 0 5px rgba(103, 0, 255, 0.3);
    }
}

.spray-hole.active {
    animation: sprayHoleGlow 1s infinite;
}

/* Indicator Dot Glow Effect */
@keyframes indicatorDotGlow {
    0% { 
        box-shadow: 
            0 0 5px rgba(255, 255, 255, 0.5),
            0 0 10px rgba(103, 0, 255, 0.5),
            inset 0 0 5px rgba(255, 255, 255, 0.5);
        background-color: rgba(255, 255, 255, 0.8);
    }
    50% { 
        box-shadow: 
            0 0 15px rgba(255, 255, 255, 0.7),
            0 0 30px rgba(103, 0, 255, 0.7),
            inset 0 0 15px rgba(255, 255, 255, 0.7);
        background-color: rgba(255, 255, 255, 1);
    }
    100% { 
        box-shadow: 
            0 0 5px rgba(255, 255, 255, 0.5),
            0 0 10px rgba(103, 0, 255, 0.5),
            inset 0 0 5px rgba(255, 255, 255, 0.5);
        background-color: rgba(255, 255, 255, 0.8);
    }
}

.indicator-dot.active {
    animation: indicatorDotGlow 1s infinite;
}

/* Payment Success Animation */
@keyframes paymentSuccess {
    0% { 
        transform: scale(1);
        box-shadow: 0 0 20px rgba(103, 0, 255, 0.3);
    }
    50% { 
        transform: scale(1.1);
        box-shadow: 0 0 40px rgba(103, 0, 255, 0.5);
    }
    100% { 
        transform: scale(1);
        box-shadow: 0 0 20px rgba(103, 0, 255, 0.3);
    }
}

.payment-success {
    animation: paymentSuccess 0.5s ease-out;
}

/* Neon Text Effect */
@keyframes neonPulse {
    0% { text-shadow: 0 0 10px rgba(103, 0, 255, 0.5); }
    50% { text-shadow: 0 0 20px rgba(103, 0, 255, 0.8); }
    100% { text-shadow: 0 0 10px rgba(103, 0, 255, 0.5); }
}

.slot-display {
    animation: neonPulse 2s infinite;
}

/* Shake Animation for Payment Button */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}

.insert-button.shake {
    animation: shake 0.5s ease-in-out;
}

/* Button Glow Animation when slot selected */
@keyframes buttonGlow {
    0% {
        border-color: rgba(255, 255, 255, 0.8);
        box-shadow: 
            0 0 20px rgba(247, 147, 26, 0.4),
            0 0 5px rgba(255, 255, 255, 0.2),
            inset 0 0 15px rgba(0, 0, 0, 0.5);
    }
    50% {
        border-color: rgba(255, 255, 255, 1);
        box-shadow: 
            0 0 20px rgba(247, 147, 26, 0.4),
            0 0 8px rgba(255, 255, 255, 0.4),
            inset 0 0 15px rgba(0, 0, 0, 0.5);
    }
    100% {
        border-color: rgba(255, 255, 255, 0.8);
        box-shadow: 
            0 0 20px rgba(247, 147, 26, 0.4),
            0 0 5px rgba(255, 255, 255, 0.2),
            inset 0 0 15px rgba(0, 0, 0, 0.5);
    }
}

.perfume-slot.selected ~ .payment-section .insert-button {
    animation: buttonGlow 2s ease-in-out infinite;
}

.insert-button.clicked {
    animation: none !important;
    border-color: transparent !important;
    box-shadow: 
        0 0 20px rgba(247, 147, 26, 0.4),
        inset 0 0 15px rgba(0, 0, 0, 0.5) !important;
}