/* Saputri Beauty Salon Custom Styles */

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

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-in {
    animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: #FDFBF9;
}

::-webkit-scrollbar-thumb {
    background: #CE9E82;
    border-radius: 9999px;
    border: 2px solid #FDFBF9;
}

::-webkit-scrollbar-thumb:hover {
    background: #9E6144;
}

/* Filter Buttons active status */
.filter-btn.active {
    background: linear-gradient(135deg, #7E4C33 0%, #4A2E1F 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(126, 76, 51, 0.25);
    border-color: transparent !important;
}

/* Service Card transitions */
.service-card {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

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

/* Subtle image zoom container */
.overflow-hidden img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Accordion Smooth Display */
.faq-content {
    transition: all 0.3s ease-in-out;
}

/* Glassmorphism styling helpers */
.glass-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Hide scrollbar on horizontally scrolling filter tabs */
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

/* Mobile polish */
html { -webkit-text-size-adjust: 100%; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (hover: none) {
    .service-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}