/* Custom animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* Custom styles */
section {
    opacity: 0;
}

/* Smooth transitions */
.card {
    transition: transform 0.3s ease-in-out;
}

.card:hover {
    transform: translateY(-5px);
}

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

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

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

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Pattern Background */
.pattern {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' opacity='0.05' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1021%26quot%3b)' fill='none'%3e%3cpath d='M905 408L904 38' stroke-width='6' stroke='url(%23SvgjsLinearGradient1022)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M607 269L606 125' stroke-width='10' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M68 213L67 365' stroke-width='8' stroke='url(%23SvgjsLinearGradient1022)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1397 326L1396 563' stroke-width='8' stroke='url(%23SvgjsLinearGradient1022)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M365 418L364 761' stroke-width='6' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M293 317L292 38' stroke-width='8' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1247 130L1246 508' stroke-width='6' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1339 5L1338 -305' stroke-width='10' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M831 7L830 -367' stroke-width='6' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M113 250L112 605' stroke-width='10' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M967 177L966 -236' stroke-width='6' stroke='url(%23SvgjsLinearGradient1022)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M922 538L921 160' stroke-width='6' stroke='url(%23SvgjsLinearGradient1022)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1109 316L1108 32' stroke-width='8' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1281 270L1280 50' stroke-width='10' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1280 403L1279 17' stroke-width='8' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M308 106L307 490' stroke-width='10' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M517 147L516 374' stroke-width='10' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M690 30L689 341' stroke-width='10' stroke='url(%23SvgjsLinearGradient1022)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M614 367L613 154' stroke-width='10' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M770 486L769 188' stroke-width='6' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1336 235L1335 573' stroke-width='10' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M303 441L302 96' stroke-width='10' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M970 211L969 384' stroke-width='10' stroke='url(%23SvgjsLinearGradient1022)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M151 243L150 26' stroke-width='6' stroke='url(%23SvgjsLinearGradient1022)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M184 391L183 201' stroke-width='10' stroke='url(%23SvgjsLinearGradient1022)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1299 123L1298 -228' stroke-width='10' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1024 466L1023 254' stroke-width='6' stroke='url(%23SvgjsLinearGradient1022)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1385 330L1384 546' stroke-width='10' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M991 172L990 552' stroke-width='8' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M600 461L599 254' stroke-width='10' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M146 544L145 145' stroke-width='8' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M539 421L538 723' stroke-width='10' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1408 130L1407 316' stroke-width='10' stroke='url(%23SvgjsLinearGradient1022)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1134 160L1133 572' stroke-width='8' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M810 190L809 39' stroke-width='8' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1069 388L1068 46' stroke-width='8' stroke='url(%23SvgjsLinearGradient1023)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1021'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='0%25' y1='100%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1022'%3e%3cstop stop-color='rgba(255%2c 255%2c 255%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(255%2c 255%2c 255%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='0%25' y1='0%25' x2='0%25' y2='100%25' id='SvgjsLinearGradient1023'%3e%3cstop stop-color='rgba(255%2c 255%2c 255%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(255%2c 255%2c 255%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
}

/* Main Content Styles */
.main-content {
    margin-left: 100px;
    transition: margin-left 0.3s ease;
}

/* Mobile Menu Toggle Button */
.menu-toggle {
    display: none;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 60;
    background-color: #f8f9fa;
    border: none;
    border-radius: 0.375rem;
    padding: 0.5rem;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #4a5568;
    margin: 5px 0;
    transition: all 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    
    .side-menu {
        transform: translateX(-100%);
    }
    
    .side-menu.active {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0;
    }
}

/* Custom styles for the CEO Portfolio */

/* Base styles */
:root {
    --primary-color: #9333ea; /* Purple-600 */
    --primary-dark: #7e22ce; /* Purple-700 */
    --text-color: #1f2937; /* Gray-800 */
    --text-color-light: #6b7280; /* Gray-500 */
    --bg-color: #ffffff;
    --bg-color-alt: #f3f4f6; /* Gray-100 */
    --border-color: #e5e7eb; /* Gray-200 */
    --border-color-dark: #d1d5db; /* Gray-300 */
    --timeline-color: #faf5ff; /* Purple-50 */
    --timeline-dot-border: rgba(147, 51, 234, 0.75); /* Purple-200/75 */
    --timeline-dot-bg: #ffffff;
    --section-header-border: #f3f4f6; /* Gray-100 */
    --form-input-bg: #ffffff;
    --form-input-border: #d1d5db; /* Gray-300 */
    --form-input-text: #1f2937; /* Gray-800 */
    --button-primary-bg: #9333ea; /* Purple-600 */
    --button-primary-text: #ffffff;
    --button-primary-hover: #7e22ce; /* Purple-700 */
    --footer-text: #6b7280; /* Gray-500 */
    --heart-color: #f43f5e; /* Rose-500 */
}

/* Dark mode styles */
.dark {
    --primary-color: #a855f7; /* Purple-500 */
    --primary-dark: #9333ea; /* Purple-600 */
    --text-color: #f3f4f6; /* Gray-100 */
    --text-color-light: #9ca3af; /* Gray-400 */
    --bg-color: #030712; /* Gray-950 */
    --bg-color-alt: #111827; /* Gray-900 */
    --border-color: #374151; /* Gray-700 */
    --border-color-dark: #4b5563; /* Gray-600 */
    --timeline-color: #1e1b4b; /* Purple-950 */
    --timeline-dot-border: rgba(147, 51, 234, 0.75); /* Purple-800/75 */
    --timeline-dot-bg: #030712; /* Gray-950 */
    --section-header-border: #111827; /* Gray-900 */
    --form-input-bg: #111827; /* Gray-900 */
    --form-input-border: #374151; /* Gray-700 */
    --form-input-text: #f3f4f6; /* Gray-100 */
    --button-primary-bg: #a855f7; /* Purple-500 */
    --button-primary-text: #ffffff;
    --button-primary-hover: #9333ea; /* Purple-600 */
    --footer-text: #9ca3af; /* Gray-400 */
    --heart-color: #f43f5e; /* Rose-500 */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Timeline styles */
.before\:bg-purple-50::before {
    background-color: var(--timeline-color);
}

.dark .before\:bg-purple-950::before {
    background-color: var(--timeline-color);
}

.before\:border-purple-200\/75::before {
    border-color: var(--timeline-dot-border);
}

.dark .before\:border-purple-800\/75::before {
    border-color: var(--timeline-dot-border);
}

.before\:bg-white::before {
    background-color: var(--timeline-dot-bg);
}

.dark .before\:bg-gray-950::before {
    background-color: var(--timeline-dot-bg);
}

/* Section headers */
.border-gray-100 {
    border-color: var(--section-header-border);
}

.dark .border-gray-900 {
    border-color: var(--section-header-border);
}

/* Text colors */
.text-gray-700 {
    color: var(--text-color-light);
}

.dark .text-gray-300 {
    color: var(--text-color-light);
}

.text-purple-600 {
    color: var(--primary-color);
}

.dark .text-purple-500 {
    color: var(--primary-color);
}

/* Form elements */
.input, .textarea {
    background-color: var(--form-input-bg);
    border-color: var(--form-input-border);
    color: var(--form-input-text);
}

/* Button styles */
.btn-primary {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
}

.btn-primary:hover {
    background-color: var(--button-primary-hover);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out forwards;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .grid {
        grid-template-columns: 1fr;
    }
}

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

::-webkit-scrollbar-track {
    background: var(--bg-color-alt);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-track {
    background: var(--bg-color-alt);
}

.dark ::-webkit-scrollbar-thumb {
    background: var(--border-color);
}

/* Image Comparison Section */
.image-comparison-section {
    padding: 1rem;
    background: #f8fafc;
    border-radius: 1rem;
    margin: 0.5rem 0;
}

.section-header {
    text-align: center;
    margin-bottom: 2rem;
}

.section-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.section-header .description {
    color: #64748b;
    font-size: 1rem;
}

/* Image Selection Slider */
.image-selection {
    margin-bottom: 2rem;
}

.slider-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 1rem;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    color: #64748b;
    font-size: 0.875rem;
}

.slider-counter {
    text-align: center;
    margin-top: 0.5rem;
    color: #64748b;
    font-size: 0.875rem;
}

/* Loading State */
.loading-state {
    text-align: center;
    padding: 2rem;
    color: #64748b;
}

.loading-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error State */
.error-state {
    text-align: center;
    padding: 2rem;
    color: #64748b;
}

/* No Images State */
.no-images-state {
    text-align: center;
    padding: 2rem;
    color: #64748b;
}

/* Image Comparison Component */
.diff {
    position: relative;
    max-width: 800px;
    width: 100%;
    aspect-ratio: 1;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.diff-item-1,
.diff-item-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.diff-item-1 img,
.diff-item-2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.diff-item-1 img {
    mix-blend-mode: screen;
    filter: brightness(1.2) contrast(1.2);
}

.diff-item-2 {
    clip-path: inset(0 calc(100% - var(--slider-position)) 0 0);
}

.diff-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--slider-position);
    width: 4px;
    background: #fff;
    cursor: ew-resize;
    transform: translateX(-50%);
    z-index: 10;
}

.diff-resizer::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Comparison Description */
.comparison-description {
    text-align: center;
    margin-top: 1rem;
    color: #64748b;
    font-size: 0.875rem;
}

/* Range Input Styling */
.range {
    @apply w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700;
}

.range::-webkit-slider-thumb {
    @apply appearance-none w-4 h-4 rounded-full bg-primary cursor-pointer;
}

.range::-moz-range-thumb {
    @apply appearance-none w-4 h-4 rounded-full bg-primary cursor-pointer border-0;
}

/* Dragging State */
body.dragging {
    @apply cursor-col-resize select-none;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .image-comparison-section {
        background: #1e293b;
    }

    .section-header h2 {
        color: #f1f5f9;
    }

    .section-header .description,
    .slider-labels,
    .slider-counter,
    .comparison-description,
    .loading-state,
    .error-state,
    .no-images-state {
        color: #94a3b8;
    }

    .diff-resizer {
        background: #f1f5f9;
    }

    .diff-resizer::before {
        background: #f1f5f9;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
}