/* Ultra-Modern Realistic Progress Icons */
.ultra-modern-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.ultra-modern-icon svg {
    width: 90%;
    height: 90%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Holographic effect overlay */
.ultra-modern-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transition: left 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

/* Hover effects */
.achievement-badge:hover .ultra-modern-icon svg {
    transform: scale(1.15) rotateY(10deg);
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.6)) 
            drop-shadow(0 0 15px rgba(0, 255, 255, 0.3));
}

.achievement-badge:hover .ultra-modern-icon::before {
    left: 100%;
}

/* Unlocked state with advanced animations */
.achievement-badge.unlocked .ultra-modern-icon svg {
    animation: ultraPulse 3s infinite ease-in-out;
}

.achievement-badge.unlocked .ultra-modern-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(
        circle,
        rgba(0, 255, 255, 0.2) 0%,
        rgba(255, 215, 0, 0.1) 50%,
        transparent 70%
    );
    transform: translate(-50%, -50%);
    animation: energyField 4s infinite ease-in-out;
    z-index: -1;
}

@keyframes ultraPulse {
    0%, 100% { 
        transform: scale(1) rotateZ(0deg);
        filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4))
                drop-shadow(0 0 10px rgba(0, 255, 255, 0.2));
    }
    25% { 
        transform: scale(1.08) rotateZ(1deg);
        filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5))
                drop-shadow(0 0 20px rgba(255, 215, 0, 0.4));
    }
    50% { 
        transform: scale(1.12) rotateZ(0deg);
        filter: drop-shadow(0 8px 20px rgba(0,0,0,0.6))
                drop-shadow(0 0 25px rgba(0, 255, 255, 0.5));
    }
    75% { 
        transform: scale(1.08) rotateZ(-1deg);
        filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5))
                drop-shadow(0 0 20px rgba(255, 215, 0, 0.4));
    }
}

@keyframes energyField {
    0%, 100% { 
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    50% { 
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.2) rotate(180deg);
    }
}

/* Individual icon special effects */
.achievement-badge[data-step="1"] .ultra-modern-icon svg {
    animation: criticalAlert 2s infinite ease-in-out;
}

.achievement-badge[data-step="2"] .ultra-modern-icon svg {
    animation: aiScan 3s infinite linear;
}

.achievement-badge[data-step="3"] .ultra-modern-icon svg {
    animation: neuralSync 4s infinite ease-in-out;
}

.achievement-badge[data-step="4"] .ultra-modern-icon svg {
    animation: nanoFlow 2.5s infinite ease-in-out;
}

.achievement-badge[data-step="5"] .ultra-modern-icon svg {
    animation: cellRegeneration 3.5s infinite ease-in-out;
}

.achievement-badge[data-step="6"] .ultra-modern-icon svg {
    animation: holoSuccess 4s infinite ease-in-out;
}

@keyframes criticalAlert {
    0%, 100% { filter: drop-shadow(0 4px 12px rgba(255,0,0,0.4)); }
    50% { filter: drop-shadow(0 4px 12px rgba(255,0,0,0.8)) drop-shadow(0 0 20px rgba(255,0,0,0.6)); }
}

@keyframes aiScan {
    0%, 100% { filter: drop-shadow(0 4px 12px rgba(0,255,255,0.4)); }
    50% { filter: drop-shadow(0 4px 12px rgba(0,255,255,0.8)) drop-shadow(0 0 25px rgba(0,255,255,0.6)); }
}

@keyframes neuralSync {
    0%, 100% { filter: drop-shadow(0 4px 12px rgba(255,215,0,0.4)); }
    50% { filter: drop-shadow(0 4px 12px rgba(255,215,0,0.8)) drop-shadow(0 0 30px rgba(255,215,0,0.6)); }
}

@keyframes nanoFlow {
    0%, 100% { filter: drop-shadow(0 4px 12px rgba(0,255,255,0.4)); }
    50% { filter: drop-shadow(0 4px 12px rgba(0,255,255,0.8)) drop-shadow(0 0 20px rgba(0,255,255,0.5)); }
}

@keyframes cellRegeneration {
    0%, 100% { filter: drop-shadow(0 4px 12px rgba(50,205,50,0.4)); }
    50% { filter: drop-shadow(0 4px 12px rgba(50,205,50,0.8)) drop-shadow(0 0 25px rgba(50,205,50,0.6)); }
}

@keyframes holoSuccess {
    0%, 100% { filter: drop-shadow(0 4px 12px rgba(255,215,0,0.4)); }
    50% { filter: drop-shadow(0 4px 12px rgba(255,215,0,0.8)) drop-shadow(0 0 35px rgba(255,215,0,0.7)); }
}

/* Responsive ultra-modern design */
@media (max-width: 768px) {
    .ultra-modern-icon svg {
        width: 85%;
        height: 85%;
    }
    
    .achievement-badge:hover .ultra-modern-icon svg {
        transform: scale(1.1);
    }
}

@media (max-width: 480px) {
    .ultra-modern-icon svg {
        width: 80%;
        height: 80%;
    }
    
    .ultra-modern-icon::before {
        display: none; /* Disable holographic effect on very small screens */
    }
}

/* Dark mode enhancements */
@media (prefers-color-scheme: dark) {
    .ultra-modern-icon svg {
        filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6))
                drop-shadow(0 0 8px rgba(0, 255, 255, 0.2));
    }
    
    .achievement-badge:hover .ultra-modern-icon svg {
        filter: drop-shadow(0 8px 20px rgba(0,0,0,0.8)) 
                drop-shadow(0 0 20px rgba(0, 255, 255, 0.4));
    }
}