/* Custom Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Montserrat:wght@300;400;500;600&display=swap');

:root {
    --color-bg: #0f1115;
    --color-bg-light: #13151a;
    --color-card: #1c1f26;
    --color-coral: #ff6757;
    --color-coral-hover: #ff8073;
    --color-text: #f3f4f6;
    --color-text-muted: #9ca3af;
    --font-heading: 'Cinzel', serif;
    --font-body: 'Montserrat', sans-serif;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

/* Scroll Reveal Animations */
.reveal-up, .reveal-left, .reveal-right {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-up {
    transform: translateY(30px);
}

.reveal-left {
    transform: translateX(-30px);
}

.reveal-right {
    transform: translateX(30px);
}

.reveal-up.active, .reveal-left.active, .reveal-right.active {
    opacity: 1;
    transform: translate(0, 0);
}

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

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

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

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

/* Mobile Menu Transitions */
#mobile-menu {
    transition: transform 0.3s ease-in-out;
}

#mobile-menu.open {
    transform: translateX(0);
}

/* Navbar Glass Effect */
.nav-scrolled {
    background: rgba(15, 17, 21, 0.95);
    backdrop-filter: blur(10px);
    padding-top: 1rem;
    padding-bottom: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Button Hover Effects */
button, a {
    transition: all 0.3s ease;
}