genesis/static/animation.js

// Smooth fade-in for panels
document.addEventListener("DOMContentLoaded", () => {
    const blocks = document.querySelectorAll(".gr-block");
    blocks.forEach((block, index) => {
        block.style.opacity = 0;
        block.style.transform = "translateY(20px)";
        setTimeout(() => {
            block.style.transition = "all 0.6s ease";
            block.style.opacity = 1;
            block.style.transform = "translateY(0)";
        }, index * 100); // Staggered load
    });
});

// Button glow pulse
function pulseButtons() {
    const buttons = document.querySelectorAll("button, .gr-button");
    buttons.forEach(btn => {
        btn.addEventListener("mouseenter", () => {
            btn.style.boxShadow = "0 0 20px rgba(255, 145, 0, 0.8)";
        });
        btn.addEventListener("mouseleave", () => {
            btn.style.boxShadow = "0 0 10px rgba(0, 255, 157, 0.4)";
        });
    });
}
pulseButtons();

// Graph animation on load
function animateGraphs() {
    const graphs = document.querySelectorAll(".graph-container");
    graphs.forEach(graph => {
        graph.style.opacity = 0;
        graph.style.transform = "scale(0.95)";
        setTimeout(() => {
            graph.style.transition = "all 0.5s ease";
            graph.style.opacity = 1;
            graph.style.transform = "scale(1)";
        }, 300);
    });
}
animateGraphs();

// Auto-refresh glow for updated sections
function glowOnUpdate(selector) {
    const element = document.querySelector(selector);
    if (element) {
        element.style.boxShadow = "0 0 25px rgba(0, 255, 157, 0.8)";
        setTimeout(() => {
            element.style.boxShadow = "";
        }, 1000);
    }
}