/* Custom Styles for Rahul Gupta Portfolio */

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

/* Animations */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

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

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: #2563eb;
    transition: width 0.3s ease;
}

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

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

/* Buttons */
.btn {
    @apply px-6 py-3 rounded-lg font-semibold transition-all duration-300 
           transform hover:scale-105 active:scale-95 inline-flex items-center justify-center;
}

.btn-primary {
    @apply bg-primary hover:bg-secondary text-white shadow-lg hover:shadow-xl;
}

.btn-secondary {
    @apply bg-accent hover:bg-primary text-white shadow-lg hover:shadow-xl;
}

.btn-outline {
    @apply border-2 border-primary text-primary hover:bg-primary hover:text-white;
}

/* Badges */
.badge {
    @apply inline-flex items-center px-4 py-2 rounded-full text-sm font-medium 
           bg-primary/10 text-primary border border-primary/20;
}

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

.section-divider {
    @apply w-20 h-1 bg-gradient-to-r from-primary to-accent mx-auto mt-4;
}

/* Skill Cards */
.skill-card {
    @apply bg-white dark:bg-dark p-6 rounded-xl shadow-lg hover:shadow-2xl 
           transition-all duration-300 transform hover:-translate-y-2 border border-gray-200 
           dark:border-gray-700;
}

/* Project Cards */
.project-card {
    @apply bg-white dark:bg-dark-light rounded-xl shadow-lg overflow-hidden 
           transition-all duration-300 transform hover:-translate-y-2 hover:shadow-2xl 
           cursor-pointer border border-gray-200 dark:border-gray-700;
}

.project-card img {
    @apply w-full h-48 object-cover;
}

.project-badge {
    @apply inline-block px-3 py-1 text-xs font-semibold rounded-full 
           bg-primary/10 text-primary border border-primary/20;
}

/* Filter Buttons */
.filter-btn {
    @apply px-6 py-2 rounded-lg font-medium transition-all duration-300 
           border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 
           hover:border-primary hover:text-primary;
}

.filter-btn.active {
    @apply bg-primary text-white border-primary;
}

/* Process Steps */
.process-step {
    @apply relative flex items-center justify-center;
}

.process-left {
    @apply md:justify-end;
}

.process-right {
    @apply md:justify-start;
}

.process-content {
    @apply bg-white dark:bg-dark p-6 rounded-xl shadow-lg md:w-5/12 
           border border-gray-200 dark:border-gray-700 relative;
}

.process-left .process-content {
    @apply md:mr-8;
}

.process-right .process-content {
    @apply md:ml-8;
}

.process-icon {
    @apply text-4xl text-primary mb-4 w-16 h-16 flex items-center justify-center 
           bg-primary/10 rounded-full mx-auto;
}

/* Form Inputs */
.form-input {
    @apply w-full px-4 py-3 rounded-lg border-2 border-gray-300 dark:border-gray-600 
           bg-white dark:bg-dark text-gray-900 dark:text-gray-100 
           focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none 
           transition-colors;
}

/* Modal */
.modal {
    @apply hidden fixed inset-0 bg-black/70 z-50 overflow-y-auto;
}

.modal.active {
    @apply flex items-center justify-center p-4;
}

.modal-content {
    @apply bg-white dark:bg-dark-light rounded-xl max-w-6xl w-full max-h-[90vh] 
           overflow-y-auto relative shadow-2xl;
}

.modal-close {
    @apply absolute top-4 right-4 text-4xl font-bold text-gray-500 
           hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer z-10 
           w-12 h-12 flex items-center justify-center rounded-full 
           hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors;
}

/* 3D Viewer Container */
.viewer-3d {
    @apply w-full h-96 bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden;
}

/* Loading Spinner */
.spinner {
    @apply inline-block w-8 h-8 border-4 border-gray-300 border-t-primary 
           rounded-full animate-spin;
}

/* Feature List */
.feature-list {
    @apply space-y-2;
}

.feature-list li {
    @apply flex items-start space-x-2;
}

.feature-list li::before {
    content: '✓';
    @apply text-primary font-bold text-xl;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .process-content {
        @apply w-full;
    }
    
    .process-left .process-content,
    .process-right .process-content {
        @apply m-0;
    }
}

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

::-webkit-scrollbar-track {
    @apply bg-gray-200 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
    @apply bg-primary rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-secondary;
}

/* Smooth transitions for dark mode */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Image Gallery */
.image-gallery {
    @apply grid grid-cols-2 gap-4 mb-6;
}

.image-gallery img {
    @apply w-full h-48 object-cover rounded-lg cursor-pointer hover:opacity-75 transition-opacity;
}

/* Tool Tags */
.tool-tag {
    @apply inline-block px-3 py-1 text-sm font-medium rounded-full 
           bg-accent/10 text-accent border border-accent/20 mr-2 mb-2;
}

/* Before/After Slider */
.comparison-slider {
    @apply relative overflow-hidden rounded-lg;
}

.comparison-slider img {
    @apply w-full h-auto;
}

/* Testimonial Cards */
.testimonial-card {
    @apply bg-white dark:bg-dark-light p-6 rounded-xl shadow-lg 
           border border-gray-200 dark:border-gray-700;
}

/* Blog Card */
.blog-card {
    @apply bg-white dark:bg-dark-light rounded-xl shadow-lg overflow-hidden 
           hover:shadow-2xl transition-all duration-300;
}

.blog-card img {
    @apply w-full h-48 object-cover;
}

/* Alert Messages */
.alert {
    @apply p-4 rounded-lg mb-4;
}

.alert-success {
    @apply bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 
           border border-green-300 dark:border-green-700;
}

.alert-error {
    @apply bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200 
           border border-red-300 dark:border-red-700;
}

/* Hero 3D Background */
#hero-3d-bg {
    background: linear-gradient(45deg, #2563eb20, #3b82f620);
}

/* Download Button */
.download-btn {
    @apply inline-flex items-center px-4 py-2 bg-green-500 hover:bg-green-600 
           text-white rounded-lg transition-colors font-medium;
}

/* View Controls for 3D Viewer */
.viewer-controls {
    @apply flex space-x-2 mb-4;
}

.viewer-controls button {
    @apply px-4 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 
           dark:hover:bg-gray-600 rounded-lg transition-colors text-sm font-medium;
}

/* Stats Cards */
.stat-card {
    @apply text-center p-6 bg-gradient-to-br from-primary to-accent rounded-xl text-white;
}

.stat-number {
    @apply text-4xl font-bold mb-2;
}

.stat-label {
    @apply text-sm opacity-90;
}