/* Custom Styles for Nailed It Nails Bar */
:root {
    --navy-900: #0a192f;
    --navy-800: #112240;
    --amber-400: #fbbf24;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

h1, h2, h3, h4, .font-serif {
    font-family: 'Cormorant Garamond', serif;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* Scroll Reveal Classes */
.reveal-up, .reveal-left, .reveal-right {
    opacity: 1; /* Visible by default for accessibility */
    transform: none;
    transition: all 1s ease;
}

/* Only apply transforms if JS is active (handled by script.js adding .revealed) */
.js-enabled .reveal-up { transform: translateY(30px); }
.js-enabled .reveal-left { transform: translateX(-30px); }
.js-enabled .reveal-right { transform: translateX(30px); }

.js-enabled .reveal-up.revealed,
.js-enabled .reveal-left.revealed,
.js-enabled .reveal-right.revealed {
    transform: none;
    opacity: 1;
}

/* Navbar Transition */
.nav-scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.nav-scrolled a {
    color: var(--navy-900) !important;
    mix-blend-mode: normal !important;
}

.nav-scrolled .text-white {
    color: var(--navy-900) !important;
}

/* Mobile Menu Transitions */
#mobile-menu {
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

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

::-webkit-scrollbar-track {
    background: var(--slate-100);
}

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

::-webkit-scrollbar-thumb:hover {
    background: var(--navy-900);
}