/**
 * Scroll Animations CSS
 * Styles for scroll animation effects and transitions
 */

/* Base animation styles */
[data-scroll-animate],
.feature-card,
.pricing-card,
.metric-card,
.glass-card,
.debt-type-card,
.scenario-card,
.workflow-card,
.use-case-card,
.summary-card,
.comparison-item,
.detail-item,
.section-header h2,
.infographic-step,
.faq-item,
.hero-content > * {
    will-change: opacity, transform;
}

/* Animated element class */
.scroll-animated {
    animation: none !important;
}

/* Staggered animations for lists */
.features-grid .feature-card:nth-child(1) {
    transition-delay: 0.05s;
}

.features-grid .feature-card:nth-child(2) {
    transition-delay: 0.1s;
}

.features-grid .feature-card:nth-child(3) {
    transition-delay: 0.15s;
}

.pricing-grid .pricing-card:nth-child(1) {
    transition-delay: 0.05s;
}

.pricing-grid .pricing-card:nth-child(2) {
    transition-delay: 0.1s;
}

.pricing-grid .pricing-card:nth-child(3) {
    transition-delay: 0.15s;
}

.metrics-grid .metric-card:nth-child(1) {
    transition-delay: 0.05s;
}

.metrics-grid .metric-card:nth-child(2) {
    transition-delay: 0.1s;
}

.metrics-grid .metric-card:nth-child(3) {
    transition-delay: 0.15s;
}

/* Debt type cards stagger */
.debt-type-grid .debt-type-card:nth-child(1) {
    transition-delay: 0.05s;
}

.debt-type-grid .debt-type-card:nth-child(2) {
    transition-delay: 0.1s;
}

.debt-type-grid .debt-type-card:nth-child(3) {
    transition-delay: 0.15s;
}

.debt-type-grid .debt-type-card:nth-child(4) {
    transition-delay: 0.2s;
}

.debt-type-grid .debt-type-card:nth-child(5) {
    transition-delay: 0.25s;
}

.debt-type-grid .debt-type-card:nth-child(6) {
    transition-delay: 0.3s;
}

/* Scenario cards stagger */
.scenarios-grid .scenario-card:nth-child(1) {
    transition-delay: 0.05s;
}

.scenarios-grid .scenario-card:nth-child(2) {
    transition-delay: 0.1s;
}

.scenarios-grid .scenario-card:nth-child(3) {
    transition-delay: 0.15s;
}

/* Workflow cards stagger */
.workflow-grid .workflow-card:nth-child(1) {
    transition-delay: 0.05s;
}

.workflow-grid .workflow-card:nth-child(2) {
    transition-delay: 0.1s;
}

.workflow-grid .workflow-card:nth-child(3) {
    transition-delay: 0.15s;
}

.workflow-grid .workflow-card:nth-child(4) {
    transition-delay: 0.2s;
}

/* Use case cards stagger */
.use-cases-grid .use-case-card:nth-child(1) {
    transition-delay: 0.05s;
}

.use-cases-grid .use-case-card:nth-child(2) {
    transition-delay: 0.1s;
}

.use-cases-grid .use-case-card:nth-child(3) {
    transition-delay: 0.15s;
}

.use-cases-grid .use-case-card:nth-child(4) {
    transition-delay: 0.2s;
}

.use-cases-grid .use-case-card:nth-child(5) {
    transition-delay: 0.25s;
}

.use-cases-grid .use-case-card:nth-child(6) {
    transition-delay: 0.3s;
}

/* FAQ items stagger */
.faq-item:nth-child(1) {
    transition-delay: 0.05s;
}

.faq-item:nth-child(2) {
    transition-delay: 0.1s;
}

.faq-item:nth-child(3) {
    transition-delay: 0.15s;
}

.faq-item:nth-child(4) {
    transition-delay: 0.2s;
}

.faq-item:nth-child(5) {
    transition-delay: 0.25s;
}

.faq-item:nth-child(6) {
    transition-delay: 0.3s;
}

.faq-item:nth-child(7) {
    transition-delay: 0.35s;
}

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

/* Hero content stagger */
.hero-badge {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.hero-title {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
    transition-delay: 0.1s;
}

.hero-subtitle {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
    transition-delay: 0.2s;
}

.hero-stats {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
    transition-delay: 0.3s;
}

.hero-cta {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
    transition-delay: 0.4s;
}

.trust-indicators {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
    transition-delay: 0.5s;
}

/* Animate hero elements on page load */
body.page-loaded .hero-badge,
body.page-loaded .hero-title,
body.page-loaded .hero-subtitle,
body.page-loaded .hero-stats,
body.page-loaded .hero-cta,
body.page-loaded .trust-indicators {
    opacity: 1;
    transform: translateY(0);
}

/* Add page-loaded class to body on load */
body {
    /* Will be set by JavaScript */
}

/* Parallax effect for hero background */
[data-parallax] {
    will-change: transform;
}

/* Navbar scrolled effect */
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

/* Smooth transitions for all interactive elements */
button,
a,
input,
select,
textarea {
    transition: all 0.2s ease;
}

/* Enhanced focus states for accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgba(99, 102, 241, 0.5);
    outline-offset: 2px;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    /* Reduce animation complexity on mobile for better performance */
    [data-scroll-animate],
    .feature-card,
    .pricing-card,
    .metric-card,
    .glass-card,
    .debt-type-card,
    .scenario-card,
    .workflow-card,
    .use-case-card,
    .summary-card,
    .comparison-item,
    .detail-item,
    .section-header h2,
    .infographic-step,
    .faq-item,
    .hero-content > * {
        will-change: auto;
    }

    /* Reduce stagger delays on mobile */
    .features-grid .feature-card,
    .pricing-grid .pricing-card,
    .metrics-grid .metric-card,
    .debt-type-grid .debt-type-card,
    .scenarios-grid .scenario-card,
    .workflow-grid .workflow-card,
    .use-cases-grid .use-case-card,
    .faq-item {
        transition-delay: 0s !important;
    }
}

/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
    [data-scroll-animate],
    .feature-card,
    .pricing-card,
    .metric-card,
    .glass-card,
    .debt-type-card,
    .scenario-card,
    .workflow-card,
    .use-case-card,
    .summary-card,
    .comparison-item,
    .detail-item,
    .section-header h2,
    .infographic-step,
    .faq-item,
    .hero-content > * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}