/* Custom Animations */
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.animate-fade-in {
    animation: fade-in 1s ease-out;
}

.animate-slide-up {
    animation: slide-up 0.8s ease-out;
    animation-fill-mode: both;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

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

/* Navigation Styles */
.nav-link {
    @apply text-gray-700 hover:text-primary font-medium transition-colors duration-300 relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    background: linear-gradient(to right, #8B5CF6, #EC4899);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover::after {
    width: 100%;
}

.mobile-nav-link {
    @apply block px-3 py-2 text-gray-700 hover:text-primary hover:bg-purple-50 rounded-md font-medium transition-all duration-300;
}

/* Button Styles */
.btn-primary {
    @apply px-8 py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-full font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300;
}

.btn-secondary {
    @apply px-8 py-3 bg-white text-primary border-2 border-primary rounded-full font-semibold shadow-lg hover:shadow-xl hover:bg-primary hover:text-white transform hover:-translate-y-1 transition-all duration-300;
}

/* Social Icons */
.social-icon {
    @apply w-12 h-12 rounded-full bg-white shadow-lg flex items-center justify-center text-primary hover:bg-gradient-to-r hover:from-primary hover:to-secondary hover:text-white transform hover:scale-110 transition-all duration-300;
}

/* Section Styles */
.section-title {
    @apply text-4xl md:text-5xl font-bold text-gray-800 mb-4;
}

.section-divider {
    @apply w-24 h-1 bg-gradient-to-r from-primary to-secondary mx-auto rounded-full;
}

/* Card Styles */
.stat-card {
    @apply bg-white p-6 rounded-2xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 text-center;
}

.skill-card {
    @apply bg-white p-6 rounded-2xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300;
}

.skill-tag {
    @apply inline-block bg-gradient-to-r from-purple-50 to-pink-50 text-gray-700 px-4 py-2 rounded-full text-sm font-medium border border-purple-200;
}

.soft-skill {
    @apply bg-white p-4 rounded-xl shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 text-center flex flex-col items-center justify-center;
}

.experience-card {
    @apply bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl border-l-4 border-primary transition-all duration-300;
}

.education-card {
    @apply bg-white p-6 rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300;
}

.education-icon {
    @apply w-16 h-16 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center text-white flex-shrink-0;
}

.project-card {
    @apply bg-white rounded-2xl shadow-xl overflow-hidden transform hover:-translate-y-2 transition-all duration-300;
}

.project-image {
    @apply w-full h-64 bg-gradient-to-br from-purple-400 to-pink-400 flex items-center justify-center relative overflow-hidden;
}

.project-overlay {
    @apply absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300;
}

.tech-badge {
    @apply px-3 py-1 bg-gradient-to-r from-purple-100 to-pink-100 text-purple-700 rounded-full text-xs font-semibold;
}

.cert-card {
    @apply bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-2 transition-all duration-300 text-center;
}

.contact-card {
    @apply bg-gradient-to-br from-purple-50 to-pink-50 p-6 rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-2 transition-all duration-300 text-center;
}

.contact-icon {
    @apply w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center text-white text-2xl;
}

/* Scroll to Top Button */
.scroll-top-btn {
    @apply fixed bottom-8 right-8 w-12 h-12 bg-gradient-to-r from-primary to-secondary text-white rounded-full shadow-lg flex items-center justify-center opacity-0 pointer-events-none transform scale-0 transition-all duration-300 z-50;
}

.scroll-top-btn.show {
    @apply opacity-100 pointer-events-auto scale-100;
}

.scroll-top-btn:hover {
    @apply shadow-xl transform scale-110;
}

/* Responsive Typography */
@media (max-width: 768px) {
    .section-title {
        @apply text-3xl;
    }
}

/* Loading States */
.loading {
    @apply animate-pulse;
}

/* Focus Styles for Accessibility */
*:focus {
    @apply outline-none ring-2 ring-primary ring-opacity-50;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #8B5CF6, #EC4899);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #7C3AED, #DB2777);
}