/* 
    Custom Styles for The Tap
    Palette: Emerald (#0F3D3E) & Cream (#F9F7F2)
*/

html {
    scroll-behavior: smooth;
}

body {
    background-color: #F9F7F2;
    color: #0F3D3E;
}

/* Typography Overrides */
h1, h2, h3, h4, .font-serif {
    font-family: 'Playfair Display', serif;
}

p, li, a, .font-sans {
    font-family: 'Lato', sans-serif;
}

/* Subtle Grain Animation */
@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -5%); }
    20% { transform: translate(-10%, 5%); }
    30% { transform: translate(5%, -10%); }
    40% { transform: translate(-5%, 15%); }
    50% { transform: translate(-10%, 5%); }
    60% { transform: translate(15%, 0); }
    70% { transform: translate(0, 10%); }
    80% { transform: translate(-15%, 0); }
    90% { transform: translate(10%, 5%); }
}

.bg-grain {
    animation: grain 8s steps(10) infinite;
}

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

::-webkit-scrollbar-track {
    background: #F9F7F2;
}

::-webkit-scrollbar-thumb {
    background: #0F3D3E;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1A5254;
}

/* Form Focus States */
input:focus, textarea:focus {
    border-bottom-width: 2px;
}

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

/* Utility for reveal animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

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

/* Prevent FOUC on load */
body.no-scroll {
    overflow: hidden;
}