/* Main Style Sheet */
@import 'css/variables.css';
@import 'css/reset.css';
@import 'css/layout.css';
@import 'css/animations.css';

/* Components */
@import 'css/components/header.css';
@import 'css/components/hero.css';
@import 'css/components/buttons.css';
@import 'css/components/cards.css';
@import 'css/components/footer.css';
@import 'css/components/gallery.css';
@import 'css/pages/home.css';

/* Global Styles needing access to variables */
body {
    padding-top: var(--header-height);
    opacity: 0;
    transition: opacity 0.8s ease;
}

body.page-loaded {
    opacity: 1;
}

/* Utilities */
.text-center {
    text-align: center;
}

.text-white {
    color: var(--white);
}

.mb-2 {
    margin-bottom: var(--spacing-sm);
}

.mb-4 {
    margin-bottom: var(--spacing-md);
}

.section-title {
    color: var(--primary-color);
    font-size: var(--h2-size);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--secondary-color);
    margin: var(--spacing-xs) auto 0;
    border-radius: var(--radius-full);
}

/* Animation Classes */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}