/* Global Background Styles */
.global-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* Gradient Background - Enhanced with Yellow Theme */
.bg-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(255, 251, 231, 0.97) 0%, 
        rgba(255, 240, 180, 0.95) 40%, 
        rgba(255, 223, 128, 0.92) 60%,
        rgba(255, 251, 231, 0.90) 100%);
    animation: gradientShift 15s ease infinite;
}

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

/* Particle Pattern Background - Enhanced Yellow Theme */
.bg-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(255, 209, 0, 0.08) 2px, transparent 4px),
        radial-gradient(circle at 75% 75%, rgba(255, 166, 0, 0.07) 2px, transparent 4px),
        radial-gradient(circle at 60% 25%, rgba(255, 235, 59, 0.06) 2px, transparent 3px),
        radial-gradient(circle at 30% 80%, rgba(255, 138, 0, 0.05) 1px, transparent 3px);
    background-size: 30px 30px, 40px 40px, 35px 35px, 25px 25px;
    animation: particles 18s linear infinite;
    opacity: 0.7;
}

/* Wave Background */
.bg-wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    bottom: -70px;
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 50% auto;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0v46.29c47.79 22.2 103.59 32.17 158 28 70.36-5.37 136.33-33.31 206.8-37.5 73.84-4.36 147.54 16.88 218.2 35.26 69.27 18 138.3 24.88 209.4 13.08 36.15-6 69.85-17.84 104.45-29.34C989.49 25 1113-14.29 1200 52.47V0z' opacity='.1' fill='%2300BCD4'/%3E%3Cpath d='M0 0v15.81c13 21.11 27.64 41.05 47.69 56.24C99.41 111.27 165 111 224.58 91.58c31.15-10.15 60.09-26.07 89.67-39.8 40.92-19 84.73-46 130.83-49.67 36.26-2.85 70.9 9.42 98.6 31.56 31.77 25.39 62.32 62 103.63 73 40.44 10.79 81.35-6.69 119.13-24.28s75.16-39 116.92-43.05c59.73-5.85 113.28 22.88 168.9 38.84 30.2 8.66 59 6.17 87.09-7.5 22.43-10.89 48-26.93 60.65-49.24V0z' opacity='.1' fill='%23FFA000'/%3E%3C/svg%3E");
    animation: wave 20s linear infinite;
}

/* Floating Elements - Enhanced for Yellow Theme */
.floating-element {
    position: absolute;
    opacity: 0.2;
    pointer-events: none;
    animation: float-around 30s linear infinite;
}

.floating-element.circle {
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 209, 0, 0.3) 0%, rgba(255, 209, 0, 0) 70%);
}

/* New animated floating circles for yellow theme */
.floating-circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0.4;
}

.floating-circle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 209, 0, 0.15) 0%, rgba(255, 209, 0, 0) 70%);
    animation: float-animation 25s infinite ease-in-out;
}

.floating-circle:nth-child(1) {
    width: 600px;
    height: 600px;
    top: -200px;
    left: -100px;
    animation-delay: 0s;
    animation-duration: 35s;
}

.floating-circle:nth-child(2) {
    width: 500px;
    height: 500px;
    top: 70%;
    right: -100px;
    animation-delay: -5s;
    animation-duration: 45s;
}

.floating-circle:nth-child(3) {
    width: 300px;
    height: 300px;
    bottom: -50px;
    left: 40%;
    animation-delay: -15s;
    animation-duration: 30s;
}

.floating-circle:nth-child(4) {
    width: 400px;
    height: 400px;
    top: 30%;
    left: -100px;
    animation-delay: -10s;
    animation-duration: 40s;
}

.floating-element.triangle {
    width: 0 !important;
    height: 0 !important;
    border-left: calc(var(--size, 30px) / 2) solid transparent;
    border-right: calc(var(--size, 30px) / 2) solid transparent;
    border-bottom: var(--size, 30px) solid var(--color, rgba(255, 179, 0, 0.1));
    background-color: transparent !important;
}

.floating-element.square {
    border-radius: 4px;
    transform: rotate(45deg);
}

.floating-element.plus {
    background-color: transparent !important;
    position: relative;
}

.floating-element.plus:before,
.floating-element.plus:after {
    content: "";
    position: absolute;
    background-color: var(--color, rgba(0, 195, 255, 0.1));
}

.floating-element.plus:before {
    width: 100%;
    height: 30%;
    top: 35%;
}

.floating-element.plus:after {
    width: 30%;
    height: 100%;
    left: 35%;
}

/* Animations */
@keyframes particles {
    0% { background-position: 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 30px 30px, 40px -40px, -35px 35px, 25px -25px; }
}

@keyframes wave {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes float-around {
    0% {
        transform: translate(0, 0) rotate(0);
        opacity: 0;
    }
    10% {
        opacity: 0.2;
    }
    90% {
        opacity: 0.2;
    }
    100% {
        transform: translate(calc(-100vw - 100px), calc(-50vh + 200px)) rotate(360deg);
        opacity: 0;
    }
}

/* Animation for floating circles */
@keyframes float-animation {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(100px, 50px) rotate(90deg);
    }
    50% {
        transform: translate(50px, 100px) rotate(180deg);
    }
    75% {
        transform: translate(-50px, 50px) rotate(270deg);
    }
    100% {
        transform: translate(0, 0) rotate(360deg);
    }
}

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
    .bg-wave {
        bottom: -40px;
    }
    
    .floating-element {
        display: none;
    }
}