/* Custom Styles for Luxe Nails */

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Base font settings */
body {
    font-family: 'Lato', sans-serif;
    color: #1A252F; /* Charcoal 900 */
    background-color: #FAFAFA; /* Stone 50 */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
}

/* Scroll Reveal Animation Classes */
/* Default state: visible (for accessibility/no-JS) */
.reveal-on-scroll {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* JS adds this class to trigger animation if desired, 
   but default state is already visible per rules. 
   This is for progressive enhancement if we wanted to hide first.
   Currently, we rely on the default visibility. */

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

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

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

::-webkit-scrollbar-thumb:hover {
    background: #D15A3A;
}

/* Form Focus States */
input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.2);
}

/* Mobile Menu Transition */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

#mobile-menu.open {
    max-height: 400px;
}

/* Image hover effects */
.group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
}