/* ============================================
   BACKGROUND GRADIENT EFFECTS
   ============================================ */

/* Background container */
.bg-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

/* Gradient blur orbs */
.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: float-orb 20s ease-in-out infinite;
}

/* Light theme gradient orbs */
[data-theme="light"] .gradient-orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 217, 255, 0.4) 0%, rgba(0, 163, 204, 0.2) 50%, transparent 100%);
    top: -200px;
    right: -200px;
    animation-delay: 0s;
}

[data-theme="light"] .gradient-orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 217, 255, 0.3) 0%, rgba(100, 200, 255, 0.15) 50%, transparent 100%);
    bottom: -150px;
    left: -150px;
    animation-delay: 5s;
}

[data-theme="light"] .gradient-orb-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 255, 200, 0.25) 0%, rgba(0, 200, 150, 0.1) 50%, transparent 100%);
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 10s;
}

/* Dark theme gradient orbs - more vibrant */
[data-theme="dark"] .gradient-orb-1 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(0, 217, 255, 0.25) 0%, rgba(0, 163, 204, 0.15) 50%, transparent 100%);
    top: -250px;
    right: -250px;
    animation-delay: 0s;
}

[data-theme="dark"] .gradient-orb-2 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 150, 255, 0.2) 0%, rgba(0, 100, 200, 0.1) 50%, transparent 100%);
    bottom: -200px;
    left: -200px;
    animation-delay: 5s;
}

[data-theme="dark"] .gradient-orb-3 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 255, 200, 0.15) 0%, rgba(0, 200, 150, 0.08) 50%, transparent 100%);
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 10s;
}

[data-theme="dark"] .gradient-orb-4 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(100, 0, 255, 0.18) 0%, rgba(150, 0, 255, 0.09) 50%, transparent 100%);
    top: 60%;
    right: 10%;
    animation-delay: 15s;
}

/* Floating animation */
@keyframes float-orb {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(30px, -30px) scale(1.05);
    }

    50% {
        transform: translate(-20px, 20px) scale(0.95);
    }

    75% {
        transform: translate(20px, 30px) scale(1.02);
    }
}

/* Mesh gradient effect */
.mesh-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(at 20% 30%, rgba(0, 217, 255, 0.15) 0px, transparent 50%),
        radial-gradient(at 80% 70%, rgba(0, 163, 204, 0.12) 0px, transparent 50%),
        radial-gradient(at 50% 50%, rgba(0, 255, 200, 0.08) 0px, transparent 50%);
    opacity: 0.5;
    animation: mesh-shift 30s ease-in-out infinite;
}

[data-theme="light"] .mesh-gradient {
    opacity: 0.3;
}

@keyframes mesh-shift {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(50px, -50px);
    }
}

/* Animated lines */
.animated-line {
    position: absolute;
    height: 1px;
    width: 300px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    animation: line-slide 15s linear infinite;
    opacity: 0.2;
}

.animated-line-1 {
    top: 20%;
    left: -300px;
    animation-delay: 0s;
}

.animated-line-2 {
    top: 60%;
    left: -300px;
    animation-delay: 5s;
}

.animated-line-3 {
    top: 40%;
    right: -300px;
    animation-delay: 10s;
    animation-direction: reverse;
}

@keyframes line-slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(100vw + 300px));
    }
}

/* Glowing dots pattern */
.dots-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, var(--color-primary) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.03;
    animation: dots-drift 60s linear infinite;
}

[data-theme="dark"] .dots-pattern {
    opacity: 0.05;
}

@keyframes dots-drift {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(50px, 50px);
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {

    .gradient-orb,
    .mesh-gradient,
    .animated-line,
    .dots-pattern {
        animation: none !important;
    }

    .snowfall-container {
        display: none !important;
    }
}

/* === SNOWFALL EFFECT === */

.snowfall-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

/* Fade out while scrolling */
.snowfall-container.scrolling {
    opacity: 0;
}

.snowflake {
    position: absolute;
    top: -10%;
    color: #fff;
    user-select: none;
    animation: snowfall-sway linear infinite;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    will-change: transform;
}

/* Light theme snowflakes - slightly darker */
[data-theme="light"] .snowflake {
    color: rgba(0, 217, 255, 0.6);
    text-shadow: 0 0 5px rgba(0, 217, 255, 0.3);
}

/* Realistic snowfall with swaying zigzag motion */
@keyframes snowfall-sway {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }

    10% {
        transform: translateY(10vh) translateX(calc(var(--sway-amplitude, 50px) * 0.3 * var(--sway-frequency, 1))) rotate(calc(36deg * var(--rotation-speed, 1)));
    }

    20% {
        transform: translateY(20vh) translateX(calc(var(--sway-amplitude, 50px) * 0.8 * var(--sway-frequency, 1))) rotate(calc(72deg * var(--rotation-speed, 1)));
    }

    30% {
        transform: translateY(30vh) translateX(calc(var(--sway-amplitude, 50px) * var(--sway-frequency, 1))) rotate(calc(108deg * var(--rotation-speed, 1)));
    }

    40% {
        transform: translateY(40vh) translateX(calc(var(--sway-amplitude, 50px) * 0.5 * var(--sway-frequency, 1))) rotate(calc(144deg * var(--rotation-speed, 1)));
    }

    50% {
        transform: translateY(50vh) translateX(0) rotate(calc(180deg * var(--rotation-speed, 1)));
    }

    60% {
        transform: translateY(60vh) translateX(calc(var(--sway-amplitude, 50px) * -0.5 * var(--sway-frequency, 1))) rotate(calc(216deg * var(--rotation-speed, 1)));
    }

    70% {
        transform: translateY(70vh) translateX(calc(var(--sway-amplitude, 50px) * -1 * var(--sway-frequency, 1))) rotate(calc(252deg * var(--rotation-speed, 1)));
    }

    80% {
        transform: translateY(80vh) translateX(calc(var(--sway-amplitude, 50px) * -0.8 * var(--sway-frequency, 1))) rotate(calc(288deg * var(--rotation-speed, 1)));
    }

    90% {
        transform: translateY(90vh) translateX(calc(var(--sway-amplitude, 50px) * -0.3 * var(--sway-frequency, 1))) rotate(calc(324deg * var(--rotation-speed, 1)));
    }

    100% {
        transform: translateY(110vh) translateX(0) rotate(calc(360deg * var(--rotation-speed, 1)));
    }
}