/* Custom CSS for Portfolio Website */

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

/* Ensure hero section has clean scrolling */
#home {
    transform: none !important;
    will-change: auto;
}

/* Custom button styles */
.btn-primary {
    @apply bg-primary hover:bg-blue-700 text-white font-semibold py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl;
}

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

/* Playful button styles */
.btn-playful-primary {
    @apply bg-gradient-to-r from-primary to-purple-600 hover:from-purple-600 hover:to-primary text-white font-semibold py-3 px-6 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl flex items-center gap-2;
}

.btn-playful-secondary {
    @apply bg-white hover:bg-gray-50 text-primary font-semibold py-3 px-6 rounded-full border-2 border-primary transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl flex items-center gap-2;
}


/* Random dots container */
#random-dots-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.random-dot {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}



/* Floating shapes animation */
.floating-shape {
    @apply absolute rounded-full opacity-10;
    animation: float 6s ease-in-out infinite;
}

.shape-1 {
    @apply w-20 h-20 bg-primary;
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.shape-2 {
    @apply w-16 h-16 bg-purple-500;
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.shape-3 {
    @apply w-12 h-12 bg-pink-500;
    top: 30%;
    right: 30%;
    animation-delay: 4s;
}

.shape-4 {
    @apply w-24 h-24 bg-orange-400;
    bottom: 20%;
    left: 20%;
    animation-delay: 1s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

/* Stat cards */
.stat-card {
    @apply bg-white p-4 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1;
}

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

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

/* Construction cards */
.construction-card {
    @apply bg-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2 text-center border-2 border-dashed border-gray-300;
}

/* Wiggle animation */
@keyframes wiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}

.animate-wiggle {
    animation: wiggle 0.5s ease-in-out;
}

/* Bounce slow animation */
@keyframes bounce-slow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

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

/* Navigation links */
.nav-link {
    @apply text-gray-700 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: #3B82F6;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

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

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

/* Skill bars */
.skill-item {
    @apply flex flex-col space-y-2;
}

.skill-item span {
    @apply text-sm font-medium text-gray-700;
}

.skill-bar {
    @apply w-full bg-gray-200 rounded-full h-2;
}

.skill-fill {
    @apply bg-gradient-to-r from-primary to-purple-600 h-2 rounded-full transition-all duration-1000 ease-out;
}

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

.project-image {
    @apply bg-gradient-to-br from-blue-50 to-indigo-100 p-8 flex items-center justify-center;
}

.tech-tag {
    @apply bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm font-medium;
}

.project-link {
    @apply text-primary hover:text-blue-700 font-medium transition-colors duration-200;
}

/* Form inputs */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200;
}

/* Social links */
.social-link {
    @apply w-12 h-12 bg-gray-100 hover:bg-primary text-gray-600 hover:text-white rounded-full flex items-center justify-center transition-all duration-300 transform hover:scale-110;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* Animation classes */
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

.animate-fade-in-left {
    animation: fadeInLeft 0.8s ease-out;
}

.animate-fade-in-right {
    animation: fadeInRight 0.8s ease-out;
}

.animate-pulse-slow {
    animation: pulse 2s infinite;
}

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

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

::-webkit-scrollbar-thumb {
    background: #3B82F6;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2563eb;
}

/* Loading animation for skill bars */
.skill-fill {
    animation: fillBar 1.5s ease-out forwards;
}

@keyframes fillBar {
    from {
        width: 0%;
    }
}

/* Hover effects for project cards */
.project-card:hover .project-image {
    @apply bg-gradient-to-br from-blue-100 to-indigo-200;
}

/* Typography enhancements */
.text-gradient {
    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .btn-primary, .btn-secondary {
        @apply py-2 px-6 text-sm;
    }
    
    .project-card {
        @apply transform-none hover:-translate-y-1;
    }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    .dark-mode-toggle {
        @apply block;
    }
}

/* Print styles */
@media print {
    .btn-primary, .btn-secondary, .social-link {
        @apply shadow-none;
    }
    
    .project-card {
        @apply shadow-none transform-none;
    }
}

/* Accessibility improvements */
.nav-link:focus, .mobile-nav-link:focus, .btn-primary:focus, .btn-secondary:focus {
    @apply outline-none ring-2 ring-primary ring-offset-2;
}

.form-input:focus {
    @apply outline-none;
}

/* Custom selection color */
::selection {
    background-color: #3B82F6;
    color: white;
}

/* Smooth transitions for all interactive elements */
* {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}