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

/* Animations that mimic Framer Motion */

/* 1. Blur Reveal (Hero Text) */
.hero-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px) scale(1.1);
    filter: blur(10px);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Spring-like easing */
}

.hero-word.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* 2. Standard Fade Up */
.reveal-fade {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out;
}

.reveal-fade.active {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Scale Up */
.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.8s ease-out;
}

.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

/* 4. Slide from Left */
.reveal-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease-out;
}

.reveal-slide-left.active {
    opacity: 1;
    transform: translateX(0);
}

/* 5. Slide from Right */
.reveal-slide-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s ease-out;
}

.reveal-slide-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* 6. Staggered List Items (General) */
.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* 7. SVG Path Drawing */
.reveal-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-path.active {
    stroke-dashoffset: 0;
}

/* CSS Animation for Background Lines */
@keyframes drawLine {
    0% { stroke-dashoffset: 1000; opacity: 0; }
    50% { opacity: 0.5; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

.hero-line-1 {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawLine 6s linear infinite;
}

.hero-line-2 {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawLine 8s linear infinite reverse;
    animation-delay: 1s;
}

/* Progress Bar Animation */
.bar-animate {
    width: 0 !important; /* Start at 0 via CSS, JS will set inline style to actual width */
    transition: width 1.5s ease-out;
}

.bar-animate.active {
    /* JS will set the width inline, transition handles the rest */
}

/* Accordion Specific Styles */
.accordion-content {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
}
.accordion-item.active .accordion-content {
    opacity: 1;
}
.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

/* Slider Styling */
.range-slider {
    -webkit-appearance: none;
    background: transparent;
}
.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #1e40af; /* brand-blue */
    cursor: pointer;
    margin-top: -10px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
    box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.2);
    transition: all 0.2s;
}
.range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 6px rgba(30, 64, 175, 0.3);
}
.range-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #e2e8f0;
    border-radius: 3px;
}