/* Custom styles for Natural Health Chiropractic */

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

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #fbf5f9;
}
::-webkit-scrollbar-thumb {
    background: #d18aad;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #b86490;
}

/* Selection color */
::selection {
    background: #e4b3c8;
    color: #3d1e30;
}

/* Navbar transitions */
#navbar.scrolled {
    background: rgba(251, 245, 249, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(184, 100, 144, 0.08);
}

#navbar.scrolled .font-serif {
    color: #5d2c47;
}

/* Hero parallax feel */
#hero {
    background-attachment: fixed;
}

@media (max-width: 768px) {
    #hero {
        background-attachment: scroll;
    }
}

/* Fade-in animations */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children */
.fade-in-child {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-child.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Pulse animation for the hero dot */
@keyframes softPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.3); }
}

/* Mobile menu transitions */
#mobile-menu.open {
    opacity: 1;
    pointer-events: all;
}

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

/* Service card hover lift */
.group:hover .w-14 {
    transform: scale(1.05);
}

/* Subtle gradient border on cards */
.bg-white.rounded-3xl {
    background-image: linear-gradient(white, white), linear-gradient(135deg, #f0d4e1, #ffe9a8);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Testimonial card shimmer */
.bg-white\/5 {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}