/* Global Animated Background */
.global-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -100;
    overflow: hidden;
    pointer-events: none;
    background-color: #080808; /* Darker base background */
}

.global-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(20, 20, 20, 0.5), rgba(8, 8, 8, 0.98) 70%);
}

/* Lava overlay */
.global-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" viewBox="0 0 1200 1200"><filter id="filter"><feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="3" seed="0"/><feDisplacementMap in="SourceGraphic" scale="170"/></filter><rect width="100%" height="100%" filter="url(%23filter)"/></svg>');
    background-size: cover;
    opacity: 0.07;
    mix-blend-mode: color-dodge;
    animation: lavaShift 20s infinite alternate ease-in-out;
}

.global-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.global-particle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 59, 48, 0.2), rgba(198, 40, 40, 0.1));
    filter: blur(8px);
    opacity: 0;
    animation: particleFloat ease-in-out infinite alternate;
    box-shadow: 0 0 15px rgba(255, 59, 48, 0.3);
}

.global-accent {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 59, 48, 0.15), transparent 70%);
    filter: blur(80px);
    opacity: 0;
    animation: accentFloat ease-in-out infinite alternate;
}

@keyframes particleFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.1;
    }
    100% {
        transform: translate3d(calc(var(--x-move) * 30px), calc(var(--y-move) * 30px), 0) scale(1.2);
        opacity: 0.4;
    }
}

@keyframes accentFloat {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 0.08;
    }
    100% {
        transform: translate3d(calc(var(--x-move) * 40px), calc(var(--y-move) * 40px), 0);
        opacity: 0.25;
    }
}

@keyframes bgGradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes lavaShift {
    0% {
        transform: scale(1.1) rotate(0deg);
        opacity: 0.05;
    }
    50% {
        transform: scale(1.2) rotate(3deg);
        opacity: 0.08;
    }
    100% {
        transform: scale(1.1) rotate(0deg);
        opacity: 0.05;
    }
}

/* Lava bubbles animation */
@keyframes lavaBubble {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-30px) scale(1.2);
        opacity: 0.6;
    }
    100% {
        transform: translateY(-60px) scale(0.8);
        opacity: 0;
    }
}

/* Adjust existing section backgrounds to work with global background */
.hero-section, 
.showcase-section, 
.register-section, 
.instructors-section, 
.curriculum-section, 
.outcomes-section,
.testimonial-section {
    background-color: transparent !important;
    position: relative;
    z-index: 1;
}

/* Remove previous background elements that might conflict */
.lava-background {
    opacity: 0 !important; /* Hide original lava backgrounds as we have the global one now */
}

/* Add subtle section separators */
section:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 59, 48, 0.3), transparent);
    z-index: 2;
}