/* Ebb Tide — Custom Styles */

/* Base */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
    background-color: #FDF8F0;
    color: #292524;
}

/* Navbar scroll state */
#navbar.scrolled {
    background: rgba(253, 248, 240, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
#navbar.scrolled .font-serif { color: #292524; }

/* Mobile menu animations */
#mobileMenu.open { opacity: 1; pointer-events: all; }
#mobileMenu.closed { opacity: 0; pointer-events: none; }
#bar1.open { transform: rotate(45deg) translate(5px, 5px); }
#bar2.open { opacity: 0; }
#bar3.open { transform: rotate(-45deg) translate(5px, -5px); }

/* Smooth section transitions */
section { position: relative; }

/* Image hover zoom */
img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }

/* Selection color */
::selection { background: #f9c8b0; color: #7c2d12; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #FDF8F0; }
::-webkit-scrollbar-thumb { background: #dfc9a8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #d4ad7a; }

/* Form styles */
input, textarea {
    font-family: 'Outfit', sans-serif;
}

/* Subtle gradient text utility */
.gradient-text {
    background: linear-gradient(135deg, #e05520, #d4ad7a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Focus styles */
a:focus-visible, button:focus-visible {
    outline: 2px solid #e05520;
    outline-offset: 2px;
    border-radius: 4px;
}