/* Custom Styles for Exodus Dental Clinic */

/* -------------------------------------------------------------------------- */
/* 1. Reset & Global Styles                                                   */
/* -------------------------------------------------------------------------- */
:root {
    --brand-cyan: #06b6d4;
    --brand-royal: #0284c7;
    --brand-gold: #eab308;
    --brand-amber: #f59e0b;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* -------------------------------------------------------------------------- */
/* 2. Hero Image Custom Shape Mask                                            */
/* -------------------------------------------------------------------------- */
/* Replicating the professional curved design from the inspiration image */
.hero-image-mask {
    border-radius: 42% 58% 44% 56% / 40% 30% 70% 60%;
    box-shadow: 0 25px 50px -12px rgba(2, 132, 199, 0.25);
    border: 4px solid #ffffff;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    position: relative;
    animation: wave-morph 12s ease-in-out infinite alternate;
}

/* Morphing wave animation to make the hero look incredibly fluid and high-end */
@keyframes wave-morph {
    0% {
        border-radius: 42% 58% 44% 56% / 40% 30% 70% 60%;
    }
    33% {
        border-radius: 60% 40% 50% 50% / 30% 50% 50% 70%;
    }
    66% {
        border-radius: 45% 55% 65% 35% / 55% 45% 55% 45%;
    }
    100% {
        border-radius: 55% 45% 40% 60% / 45% 60% 40% 55%;
    }
}

/* -------------------------------------------------------------------------- */
/* 3. Interactive Before/After Split Image Slider                              */
/* -------------------------------------------------------------------------- */
#image-comparison-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Before & After Image tags */
#image-comparison-slider img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Slider Dragging Interface Handle Line */
#slider-handle {
    transition: background 0.2s ease-in-out;
}

#slider-handle:hover {
    background: #06b6d4;
}

#slider-handle .w-10 {
    user-select: none;
    -webkit-user-drag: none;
}

/* -------------------------------------------------------------------------- */
/* 4. Glassmorphism & Header Scrolling States                                 */
/* -------------------------------------------------------------------------- */
.header-scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
    height: 4.5rem !important; /* Shorter header when scrolled */
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.header-scrolled .h-12 {
    height: 2.75rem !important; /* Slightly shrink logo */
}

/* -------------------------------------------------------------------------- */
/* 5. Custom Utility Animations                                               */
/* -------------------------------------------------------------------------- */
.animate-bounce-slow {
    animation: bounce-slow 3s infinite;
}

@keyframes bounce-slow {
    0%, 100% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(-8px);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

/* Glowing Pulse effect for golden accent indicators */
.gold-glow {
    box-shadow: 0 0 15px rgba(234, 179, 8, 0.4);
}