/* style.css for custom animations and world-class UI */

/* Using CSS variables for a consistent color palette */
:root {
    --primary-indigo: #4F46E5;
    --primary-indigo-dark: #4338CA;
    --light-gray: #f8fafc;
    --subtle-gray: #f1f5f9;
}

/* --- Animations --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 50px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-50px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(50px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Animation utility classes */
.animate-on-load {
    opacity: 0; /* Start hidden */
}
.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}
.fade-in-left {
    animation: fadeInLeft 0.8s ease-out forwards;
}
.fade-in-right {
    animation: fadeInRight 0.8s ease-out forwards;
}

/* Staggered animation delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* --- FAQ Accordion Styles --- */
.faq-question {
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), padding 0.5s ease;
    padding: 0 1.5rem;
}

.faq-item.active .faq-answer {
    max-height: 1000px; /* Large enough to fit content */
    padding: 1rem 1.5rem 1.5rem;
    transition: max-height 1s cubic-bezier(1, 0, 1, 0), padding 0.5s ease;
}

.faq-toggle-icon {
    transition: transform 0.3s ease-in-out;
}

.faq-item.active .faq-toggle-icon {
    transform: rotate(180deg);
}

/* Gradient text effect */
.gradient-text {
    background: linear-gradient(to right, var(--primary-indigo), #9333ea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* style.css for custom animations and world-class UI */

:root {
    --primary-indigo: #4F46E5;
}

/* --- NEW: Hero Section Blob Animation --- */
.animate-blob {
    animation: blob 7s infinite;
}
.animation-delay-2000 {
    animation-delay: 2s;
}
.animation-delay-4000 {
    animation-delay: 4s;
}

@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);
	}
}

/* --- FAQ Accordion Styles --- */
.faq-question {
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), padding 0.5s ease;
    padding: 0 1.5rem;
}

.faq-item.active .faq-answer {
    max-height: 1000px; /* Large enough to fit content */
    padding: 1rem 1.5rem 1.5rem;
    transition: max-height 1s cubic-bezier(1, 0, 1, 0), padding 0.5s ease;
}

.faq-toggle-icon {
    transition: transform 0.3s ease-in-out;
}

.faq-item.active .faq-toggle-icon {
    transform: rotate(180deg);
}

/* Gradient text effect */
.gradient-text {
    background: linear-gradient(to right, var(--primary-indigo), #9333ea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}