/* Glassmorphism Navigation */
.glass-nav {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Animations Keyframes */
@keyframes blob {
    0% {
        transform: translate(0px, 0px) scale(1);
    }

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }

    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Quiz Options */
.quiz-option {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.quiz-option:hover {
    transform: translateX(4px);
    border-color: #0ea5e9;
    background-color: #f0f9ff;
}

/* GSAP Helper Classes (Initially Hidden) */
.gsap-fade-up,
.gsap-scale-up,
.gsap-stagger-card {
    opacity: 0;
}

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

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

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Comparison Slider */
.slider-range {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
    margin: 0;
}

.slider-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 2px;
    /* Thin touch area visually, but functional area handled by input height */
    height: 100%;
    background: transparent;
    cursor: ew-resize;
}

.compare-overlay {
    transition: width 0.1s ease-out;
}

/* Ensure the before image doesn't scale with the container width */
.compare-overlay img {
    /* Prevent image from squishing */
    /* width is inherited from parent's relative container width via JS or inline style if needed, 
       but here we set it to be equal to the container's full width. 
       Since it's absolute positioned, we need to ensure it matches the parent .result-card dimensions */
    width: 100%;
    height: 100%;
    max-width: none;
}