/*
 * =============================================
 * Animations for dlep.ca
 * =============================================
 * This file contains the keyframe animations that bring the site to life,
 * giving it a high-tech and interactive feel.
 */

/*
 * ===== Hero Section Background Animation =====
 * This animation applies to the #hero-animation div.
 * It uses multiple radial gradients as light sources and animates their positions
 * over a long duration to create a subtle, ever-shifting nebula or aurora effect.
 * This is a lightweight way to create a dynamic background without using video or heavy images.
 */
#hero-animation {
    background-color: #111827; /* Match the body's bg-gray-900 */
    background-image:
        radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.2) 0%, transparent 40%), /* Soft blue glow */
        radial-gradient(circle at 75% 75%, rgba(96, 165, 250, 0.15) 0%, transparent 40%), /* Lighter blue glow */
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 25%), /* Faint white spark */
        radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 25%); /* Faint white spark */
    
    /* The animation 'move-glow' runs for 40 seconds, loops infinitely, and proceeds at a steady pace. */
    animation: move-glow 40s linear infinite;
}

/* * Keyframes for the background glow movement.
 * We define the background positions at different points in the animation timeline (0%, 50%, 100%).
 * The browser will smoothly transition between these states, making the light sources appear to drift.
 */
@keyframes move-glow {
    0% {
        background-position: 0% 50%, 50% 100%, 100% 0%, 0% 100%;
    }
    50% {
        background-position: 100% 50%, 0% 0%, 50% 50%, 25% 75%;
    }
    100% {
        background-position: 0% 50%, 50% 100%, 100% 0%, 0% 100%;
    }
}