/* Add an additional CSS animation for highlighting active rows */
@keyframes rowHighlight {
    0% {
        background-color: rgba(79, 70, 229, 0.03);
    }
    50% {
        background-color: rgba(79, 70, 229, 0.08);
    }
    100% {
        background-color: rgba(79, 70, 229, 0.03);
    }
}

.highlight-row {
    animation: rowHighlight 2s infinite;
}

/* Enhance active elements with subtle shadow */
.demo-data-sheet.active,
.demo-query-input.active,
.demo-result-view.active,
.demo-chart-view.active {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.02), 0 0 0 3px rgba(79, 70, 229, 0.05);
    transition: transform 0.5s ease-out, box-shadow 0.5s ease-out;
}

/* Additional animation keyframes */
@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Add subtle gradient animation to icons */
.active .demo-step-icon {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #4f46e5 100%);
    background-size: 200% 200%;
    animation: gradientFlow 3s ease infinite, pulseIcon 2s infinite;
}

/* Add glow effect to active charts */
.demo-chart-view.active .demo-chart {
    position: relative;
}

.demo-chart-view.active .demo-chart::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(79, 70, 229, 0.05) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 8px;
    opacity: 0;
    animation: chartGlow 3s ease-in-out infinite alternate;
}

@keyframes chartGlow {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Additional mobile optimizations */
@media (max-width: 480px) {
    /* Simplify tables for better mobile readability */
    .demo-table th,
    .demo-results-table th {
        font-size: 0.7rem;
        padding: 6px;
    }
    
    .demo-table td,
    .demo-results-table td {
        font-size: 0.65rem;
        padding: 4px 6px;
    }
    
    /* Make query box more compact */
    .demo-query-box {
        padding: 10px;
        min-height: 40px;
        font-size: 0.85rem;
    }
    
    /* Optimize chart for small screens */
    .demo-chart-explanation {
        font-size: 0.75rem;
        margin-top: 8px;
    }
    
    /* Speed up animations slightly on mobile */
    .active .demo-step-icon {
        animation: gradientFlow 2.5s ease infinite, pulseIcon 1.8s infinite;
    }
}