/* Main CSS - Aaron Francis Cinematography Portfolio */

/* Base Styles */
@import url('./Base/config.css');
@import url('./Base/variables.css');
@import url('./Base/reset.css');
@import url('./Base/typography.css');

/* Layout Styles */
@import url('./Layouts/grid.css');

/* Component Styles */
@import url('./Components/header.css');
@import url('./Components/hero.css');
@import url('./Components/buttons.css');
@import url('./Components/portfolio.css');
@import url('./Components/ai-video-showcase.css');
@import url('./Components/ai-creation-section.css');
@import url('./Components/cinematography-section.css');
@import url('./Components/video-loading.css');
@import url('./Components/scroll-progress.css');
@import url('./Components/carousel.css');
@import url('./Components/cinematic-frame.css');
@import url('./Components/forms.css');
@import url('./Components/video-player.css');
@import url('./Components/film-grain.css');
@import url('./Components/floating-particles.css');
@import url('./Components/scroll-animations.css');
@import url('./Components/scroll-indicator.css');
@import url('./Components/about-page.css');

/* Utility Styles */
@import url('./Utilities/accessibility.css');

/* Global Styles */
html {
    scroll-behavior: smooth;
}


/* Smooth scrolling for anchor links */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Global link styles */
a {
    transition: all var(--duration-normal) var(--ease-out);
}

/* Image optimization */
img {
    height: auto;
    max-width: 100%;
}

/* Video optimization */
video {
    width: 100%;
    height: auto;
}

/* Global selection styling */
::selection {
    background-color: var(--color-gray-700);
    color: var(--color-text-primary);
}

/* Scrollbar styling for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-gray-900);
}

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

::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-500);
}

/* Loading state */
.loading {
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-out);
}

.loaded {
    opacity: 1;
}

/* Animation utilities */
.fade-in {
    animation: fadeIn var(--duration-slow) var(--ease-out);
}

.slide-up {
    animation: slideUp var(--duration-slow) var(--ease-out);
}

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

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

/* Performance optimizations */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

/* Remove will-change after animation */
.animation-complete {
    will-change: auto;
}