/* Custom styles for Hair Addictions */

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #0d7377; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #0a5c5f; }

/* Reveal animations - progressive enhancement */
.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

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

/* Service card stagger */
.service-card:nth-child(1) { transition-delay: 0ms; }
.service-card:nth-child(2) { transition-delay: 100ms; }
.service-card:nth-child(3) { transition-delay: 200ms; }
.service-card:nth-child(4) { transition-delay: 300ms; }
.service-card:nth-child(5) { transition-delay: 400ms; }
.service-card:nth-child(6) { transition-delay: 500ms; }

/* Mobile menu transitions */
#mobile-menu {
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
#mobile-menu.open {
    opacity: 1;
    pointer-events: all;
}

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

/* Selection color */
::selection {
    background-color: #0d7377;
    color: white;
}

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