/* Custom CSS for Karthik's Portfolio */

html {
    scroll-behavior: smooth;
}

body {
    background-color: #050505; /* Fallback */
}

/* Typography elements */
.section-title {
    @apply text-3xl md:text-4xl font-bold text-white mb-12 relative pb-4 inline-block;
}

.section-title::after {
    content: '';
    @apply absolute bottom-0 left-0 w-1/2 h-1 bg-primary rounded-full;
}

/* Card glassmorphism effect */
.card {
    @apply bg-[#111111] border border-gray-800 transition-all duration-300;
}

.card:hover {
    @apply border-gray-700 shadow-xl shadow-black/50 -translate-y-1;
}

/* Badges for skills inside project cards */
.badge {
    @apply px-3 py-1 bg-gray-800 text-gray-300 text-xs font-medium rounded-full border border-gray-700;
}

/* Skill pills for the Skills section */
.skill-pill {
    @apply px-5 py-2 bg-[#1a1a1a] text-gray-300 border border-gray-800 rounded-full text-sm font-medium hover:text-white hover:border-primary hover:bg-[#222] transition-colors cursor-default shadow-sm;
}

/* Social Icon Button */
.social-icon {
    @apply w-10 h-10 flex items-center justify-center rounded-full bg-gray-800 text-gray-400 hover:text-white hover:bg-primary transition-all duration-300;
}

/* Glow animation for background blobs */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob {
    animation: blob 7s infinite alternate;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

/* Profile image styling */
.profile-img {
    filter: drop-shadow(0 0 20px rgba(196, 18, 48, 0.2));
    transition: transform 0.5s ease;
}

.profile-img:hover {
    transform: scale(1.02);
}

/* Navbar blur effect */
.navbar-scrolled {
    @apply bg-darker/90 backdrop-blur-md shadow-lg border-b border-gray-900;
}