/* Custom styles for Hair by Montana */

/* Smooth scroll offset for fixed nav */
section[id] {
    scroll-margin-top: 80px;
}

/* Scroll reveal base state (visible by default for progressive enhancement) */
.scroll-reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* Navbar scroll state */
nav.scrolled {
    background: rgba(253, 248, 240, 0.95) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.06);
}

nav.scrolled .nav-logo {
    color: #1c1917;
}

/* Mobile menu transitions */
#mobile-menu {
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Subtle hover effects on cards */
.group:hover .w-14 {
    transform: scale(1.05) rotate(-3deg);
    transition: transform 0.3s ease;
}

.group .w-14 {
    transition: transform 0.3s ease;
}

/* Image hover containers */
.rounded-2xl.overflow-hidden {
    position: relative;
}

.rounded-2xl.overflow-hidden::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.05), transparent);
    pointer-events: none;
    border-radius: inherit;
}

/* Form focus styles */
input:focus, select:focus, textarea:focus {
    outline: none;
}

/* Selection color */
::selection {
    background-color: #f8c4b0;
    color: #702619;
}