/* Custom styles for The Purpose Experience Beauty Parlor */

/* Base reset and typography */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

/* Custom selection color */
::selection {
    background: #3a633a;
    color: #faf9f6;
}

/* Navbar transition states */
.nav-scrolled .nav-logo-color {
    color: #faf9f6 !important;
}
.nav-scrolled .nav-logo-sub {
    color: #8fb88f !important;
}
.nav-scrolled .nav-link {
    color: rgba(250, 249, 246, 0.9) !important;
}
.nav-scrolled .nav-menu-btn .menu-line-1,
.nav-scrolled .nav-menu-btn .menu-line-2,
.nav-scrolled .nav-menu-btn .menu-line-3 {
    background: #faf9f6;
}

/* Hero entrance animations (progressive enhancement) */
@media (prefers-reduced-motion: no-preference) {
    .hero-eyebrow {
        opacity: 0;
        transform: translateY(20px);
        animation: heroFadeUp 0.8s ease forwards;
        animation-delay: 0.3s;
    }
    .hero-headline {
        opacity: 0;
        transform: translateY(30px);
        animation: heroFadeUp 0.8s ease forwards;
        animation-delay: 0.5s;
    }
    .hero-sub {
        opacity: 0;
        transform: translateY(20px);
        animation: heroFadeUp 0.8s ease forwards;
        animation-delay: 0.7s;
    }
    .hero-ctas {
        opacity: 0;
        transform: translateY(20px);
        animation: heroFadeUp 0.8s ease forwards;
        animation-delay: 0.9s;
    }
}

@keyframes heroFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile menu button animation */
.menu-line-1 {
    transform-origin: center;
}
.menu-line-2 {
    transform-origin: center;
}
.menu-line-3 {
    transform-origin: center;
}

body.menu-open .menu-line-1 {
    transform: translateY(6px) rotate(45deg);
}
body.menu-open .menu-line-2 {
    opacity: 0;
}
body.menu-open .menu-line-3 {
    transform: translateY(-6px) rotate(-45deg);
    width: 24px;
}

/* Image hover zoom container */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Focus visible styles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #8fb88f;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .fixed, .mobile-menu, #navbar {
        display: none !important;
    }
    body {
        color: #1e321e;
        background: white;
    }
}