/* Additional custom styles and animations */

/* Smoke effect animations for back-to-top button */
@keyframes smoke1 {
    0% { transform: translateY(0) translateX(0); opacity: 0.7; }
    100% { transform: translateY(-20px) translateX(-5px); opacity: 0; }
}

@keyframes smoke2 {
    0% { transform: translateY(0) translateX(0); opacity: 0.7; }
    100% { transform: translateY(-25px) translateX(5px); opacity: 0; }
}

@keyframes smoke3 {
    0% { transform: translateY(0) translateX(0); opacity: 0.7; }
    100% { transform: translateY(-15px) translateX(-7px); opacity: 0; }
}

@keyframes smoke4 {
    0% { transform: translateY(0) translateX(0); opacity: 0.7; }
    100% { transform: translateY(-22px) translateX(3px); opacity: 0; }
}

@keyframes smoke5 {
    0% { transform: translateY(0) translateX(0); opacity: 0.7; }
    100% { transform: translateY(-18px) translateX(-2px); opacity: 0; }
}

.animate-smoke1 { animation: smoke1 1s ease-out forwards; }
.animate-smoke2 { animation: smoke2 1.2s ease-out forwards; }
.animate-smoke3 { animation: smoke3 0.9s ease-out forwards; }
.animate-smoke4 { animation: smoke4 1.1s ease-out forwards; }
.animate-smoke5 { animation: smoke5 1s ease-out forwards; }

/* Enhanced hover effects */
.card:hover .card-icon {
    transform: scale(1.1);
}

.skill-item:hover .skill-icon {
    background: rgba(59, 130, 246, 0.3);
}

.tech-tag:hover {
    transform: translateY(-2px);
}

/* Additional responsive improvements */
@media (max-width: 640px) {
    .hero-badge {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .hero-badge span {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .card {
        padding: 1.5rem;
    }
    
    .skill-item {
        padding: 1.5rem;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus styles for accessibility */
a:focus,
button:focus {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

/* Loading animation */
.loading {
    opacity: 0;
    animation: fadeIn 0.5s ease-in forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}