/* ============================================
   Bar Backs — Custom Styles
   Bold editorial · Teal & Slate Grey
   ============================================ */

/* --- Base & Typography --- */
html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Scroll Reveal --- */
.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(30px);
    }

    .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Navbar --- */
#navbar {
    background: transparent;
}

#navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

#navbar.scrolled .navbar-text {
    color: #0f172a;
}

#navbar.scrolled a:not(.navbar-cta) {
    color: #475569;
}

#navbar.scrolled a:not(.navbar-cta):hover {
    color: #0d9488;
}

/* --- Hero --- */
#hero {
    position: relative;
}

/* --- Menu Tabs --- */
.menu-tab {
    color: #64748b;
    background: transparent;
}

.menu-tab.active {
    color: #ffffff;
    background: #0d9488;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3);
}

.menu-tab:not(.active):hover {
    color: #0d9488;
    background: #f0fdfa;
}

/* --- Menu Content --- */
.menu-content {
    animation: fadeSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* --- Mobile Menu --- */
.mobile-link {
    display: block;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.mobile-link:last-child {
    border-bottom: none;
}

/* --- Button hover lift --- */
a[href="#menu"],
a[href="#visit"],
button[type="submit"] {
    will-change: transform;
}

/* --- Selection --- */
::selection {
    background: #0d9488;
    color: #ffffff;
}

/* --- Focus visible --- */
:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
}

/* --- Responsive adjustments --- */
@media (max-width: 768px) {
    .reveal {
        opacity: 1;
        transform: translateY(0);
    }
}