/* Custom Styles & Animations for Sudha's Beauty Care */

html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #fcfcfb;
}
::-webkit-scrollbar-thumb {
    background: #c3cbb1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a2b08d;
}

/* Animations */
:root {
    --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-slow: cubic-bezier(0.22, 1, 0.36, 1);
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fade-up {
    animation: fadeInUp 1.2s var(--ease-premium) forwards;
}

.animate-fade-in {
    animation: fadeIn 1.5s var(--ease-slow) forwards;
}

/* Scroll Reveal Classes */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity 1.2s var(--ease-premium), transform 1.2s var(--ease-premium);
    will-change: opacity, transform;
}

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

.delay-100 {
    transition-delay: 150ms;
}

.delay-200 {
    transition-delay: 300ms;
}

/* Premium Image Reveal */
.image-reveal {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transition: clip-path 1.5s var(--ease-slow);
    will-change: clip-path;
}

.scroll-reveal.revealed.image-reveal,
.scroll-reveal.revealed .image-reveal {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* --- HUMANIZED DESIGN & COLOUR ANIMATIONS --- */

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.bg-animated-gradient {
    background: linear-gradient(-45deg, #f8f6f0, #eef1eb, #fcfcfb, #d7ded1);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

@keyframes floatOrganic {
    0% { transform: translateY(0) rotate(0deg); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { transform: translateY(-10px) rotate(2deg); border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    100% { transform: translateY(0) rotate(0deg); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

.blob-shape {
    animation: floatOrganic 10s ease-in-out infinite;
}

/* Service Card Arch */
.arch-card {
    border-radius: 8px 8px 8px 8px; /* Fallback */
    border-top-left-radius: 120px;
    border-top-right-radius: 120px;
}
.arch-image {
    border-top-left-radius: 110px;
    border-top-right-radius: 110px;
}

/* Warm hover shifts */
.hover-warm-shift {
    transition: background-color 0.8s var(--ease-premium), transform 0.8s var(--ease-premium), box-shadow 0.8s var(--ease-premium);
}
.hover-warm-shift:hover {
    background-color: #f3f0e8; /* slightly warmer cream */
}

.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

/* Navbar shrinking */
.navbar-scrolled {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    background-color: rgba(252, 252, 251, 0.98) !important;
    box-shadow: 0 4px 20px -10px rgba(46, 53, 39, 0.1);
}

.navbar-scrolled #nav-logo {
    height: 3.5rem; /* h-14 */
}

/* Video Hero Overlay Overlay */
.video-overlay {
    background: linear-gradient(to right, rgba(46, 53, 39, 0.7), rgba(46, 53, 39, 0.4));
}

img::selection {
    background: transparent;
}