/* Custom styles for ClaireBeauty */

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Navbar transitions */
.nav-scrolled {
    background: rgba(2, 44, 34, 0.95) !important;
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
}

.nav-scrolled #nav-logo,
.nav-scrolled nav a {
    color: #fff !important;
}

/* Hero animations */
.hero-title {
    animation: heroTitle 1s ease-out forwards;
}

.hero-subtitle {
    animation: heroSubtitle 1s ease-out 0.2s forwards;
    opacity: 0;
}

.hero-desc {
    animation: heroDesc 1s ease-out 0.4s forwards;
    opacity: 0;
}

.hero-cta {
    animation: heroCta 1s ease-out 0.6s forwards;
    opacity: 0;
}

@keyframes heroTitle {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes heroSubtitle {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes heroDesc {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes heroCta {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Service card hover */
.service-card {
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.service-card:hover {
    transform: translateY(-8px);
}

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

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

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .hero-subtitle, .hero-desc, .hero-cta { animation: none; opacity: 1; }
    .service-card:hover { transform: none; }
}

/* Selection color */
::selection {
    background: #047857;
    color: #fefdf8;
}