/* VYON Luxury Animations */

/* Sparkle Effects */
.sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    animation: sparkleFloat 1.5s ease-out forwards;
}

@keyframes sparkleFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(0);
    }
    20% {
        transform: translateY(-10px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(0.5);
    }
}

/* Completion Sparkles */
.completion-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--gold);
    border-radius: 50%;
    pointer-events: none;
    animation: completionSparkle 4s ease-out forwards;
}

@keyframes completionSparkle {
    0% {
        opacity: 1;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: scale(0) rotate(360deg);
    }
}

/* Page Transitions */
.page {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.page.slide-out {
    opacity: 0;
    transform: translateX(-50px);
}

/* Selection Card Animations */
.selection-card.selecting {
    animation: cardSelect 0.3s ease-out;
}

@keyframes cardSelect {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Scent Particle Styles */
.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: particleFloat 3s ease-out forwards;
}

/* Fresh & Green Particles */
.particle-fresh {
    background: radial-gradient(circle at 30% 30%, #4ADE80, #22C55E);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
}

/* Soft Powder Particles */
.particle-powder {
    background: radial-gradient(circle at 30% 30%, #FFFFFF, #F8FAFC);
    box-shadow: 0 0 8px rgba(248, 250, 252, 0.8);
    filter: blur(0.5px);
}

/* Smoky Mystery Particles */
.particle-smoky {
    background: radial-gradient(circle at 30% 30%, #6B7280, #374151);
    box-shadow: 0 0 12px rgba(107, 114, 128, 0.7);
    filter: blur(1px);
}

@keyframes smokeRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(180deg); }
}

/* Citrus Sparkle Particles (Gold Default) */
.particle-citrus {
    background: radial-gradient(circle at 30% 30%, #FFD700, #F59E0B);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

/* Velvet Rose Particles */
.particle-rose {
    background: radial-gradient(circle at 30% 30%, #EF4444, #F472B6);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.7);
}

@keyframes roseRotate {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(90deg) scale(1.2); }
    100% { transform: rotate(180deg) scale(1); }
}

/* Woody Resin Particles */
.particle-woody {
    background: radial-gradient(circle at 30% 30%, #A16207, #92400E);
    box-shadow: 0 0 8px rgba(161, 98, 7, 0.6);
}

/* Aquatic Particles */
.particle-aquatic {
    background: radial-gradient(circle at 30% 30%, #3B82F6, #0EA5E9);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
}

@keyframes waveMotion {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}

/* Fruity Particles */
.particle-fruity-1 {
    background: radial-gradient(circle at 30% 30%, #EF4444, #DC2626); /* Red */
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.particle-fruity-2 {
    background: radial-gradient(circle at 30% 30%, #F97316, #EA580C); /* Orange */
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.6);
}

.particle-fruity-3 {
    background: radial-gradient(circle at 30% 30%, #22C55E, #16A34A); /* Green */
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

.particle-fruity-4 {
    background: radial-gradient(circle at 30% 30%, #A855F7, #9333EA); /* Purple */
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
}

@keyframes fruityRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Sweet Particles */
.particle-sweet-1 {
    background: radial-gradient(circle at 30% 30%, #F472B6, #EC4899); /* Pink */
    box-shadow: 0 0 8px rgba(244, 114, 182, 0.7);
}

.particle-sweet-2 {
    background: radial-gradient(circle at 30% 30%, #EF4444, #DC2626); /* Red */
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
}

.particle-sweet-3 {
    background: radial-gradient(circle at 30% 30%, #A855F7, #9333EA); /* Purple */
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.7);
}

@keyframes sweetPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* Base Particle Animation */
@keyframes particleFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(0);
    }
    20% {
        opacity: 1;
        transform: translateY(-10px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.3);
    }
}

/* Form Input Focus Animations */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    animation: inputGlow 0.3s ease-out;
}

@keyframes inputGlow {
    0% {
        box-shadow: 0 0 0 rgba(212, 175, 55, 0);
    }
    50% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
    }
    100% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    }
}

/* Button Hover Animations */
.next-btn, .prev-btn, .download-btn {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.next-btn:hover:not(:disabled),
.prev-btn:hover,
.download-btn:hover {
    animation: buttonLift 0.3s ease-out forwards;
}

@keyframes buttonLift {
    0% {
        transform: translateY(0);
        box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
    }
    100% {
        transform: translateY(-3px);
        box-shadow: 0 15px 40px rgba(212, 175, 55, 0.5);
    }
}

/* Selection Card Hover Effects */
.selection-card {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.selection-card:hover {
    animation: cardHover 0.4s ease-out forwards;
}

@keyframes cardHover {
    0% {
        transform: translateY(0);
        box-shadow: 0 5px 20px rgba(212, 175, 55, 0.2);
    }
    100% {
        transform: translateY(-8px);
        box-shadow: 0 15px 40px rgba(212, 175, 55, 0.4);
    }
}

/* Slider Interactions */
.scent-slider {
    transition: all 0.2s ease;
}

.scent-slider:active::-webkit-slider-thumb {
    animation: sliderPulse 0.2s ease-out;
}

@keyframes sliderPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1.2);
    }
}

/* Loading States */
.loading {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Page Load Animation */
.page.active {
    animation: pageLoad 0.6s ease-out;
}

@keyframes pageLoad {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .sparkle,
    .completion-sparkle,
    .particle {
        animation: none !important;
    }
}