/* Animated Backgrounds for Foid.page */

/* Homepage Dots - Same as homepage animated dot pattern */
.animated-halftone-dots {
    background: var(--background-color, #FFE9EF) !important;
    background-color: var(--background-color, #FFE9EF) !important;
    background-image: radial-gradient(var(--pattern-color, #fff) 6px, transparent 6px) !important;
    background-size: 40px 40px !important;
    background-repeat: repeat !important;
    background-attachment: fixed !important;
    background-position: 0 0;
    animation: bgMove var(--animation-duration, 60s) linear infinite !important;
    /* Force hardware acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Floating Bubbles - Soft bubbles floating upward */
.animated-floating-bubbles {
    background-color: var(--background-color, #FFE9EF) !important;
    background-image: 
        radial-gradient(circle at 20% 80%, var(--pattern-color, rgba(255, 255, 255, 0.8)) 3%, transparent 3%),
        radial-gradient(circle at 80% 80%, var(--pattern-color, rgba(255, 255, 255, 0.6)) 4%, transparent 4%),
        radial-gradient(circle at 40% 60%, var(--pattern-color, rgba(255, 255, 255, 0.7)) 2%, transparent 2%),
        radial-gradient(circle at 60% 40%, var(--pattern-color, rgba(255, 255, 255, 0.5)) 5%, transparent 5%),
        radial-gradient(circle at 70% 70%, var(--pattern-color, rgba(255, 255, 255, 0.9)) 2.5%, transparent 2.5%);
    background-size: 100px 100px, 120px 120px, 80px 80px, 140px 140px, 90px 90px;
    background-position: 0 0, 40px 60px, 20px 40px, 60px 20px, 30px 30px;
    animation: floatUp var(--animation-duration, 40s) ease-in-out infinite !important;
}

/* Wave Pattern - Flowing wave animation */
.animated-wave-pattern {
    background-color: var(--background-color, #FFE9EF) !important;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 35px, var(--pattern-color, rgba(255, 255, 255, 0.5)) 35px, var(--pattern-color, rgba(255, 255, 255, 0.5)) 70px) !important;
    animation: waveMove var(--animation-duration, 30s) linear infinite !important;
}

/* Grid Pulse - Pulsing grid pattern */
.animated-grid-pulse {
    background-color: var(--background-color, #FFE9EF) !important;
    background-image: 
        linear-gradient(var(--pattern-color, rgba(255, 255, 255, 0.2)) 1px, transparent 1px),
        linear-gradient(90deg, var(--pattern-color, rgba(255, 255, 255, 0.2)) 1px, transparent 1px) !important;
    background-size: 50px 50px !important;
    animation: gridPulse var(--animation-duration, 4s) ease-in-out infinite !important;
}

/* Starfield - Twinkling stars effect */
.animated-starfield {
    background-color: var(--background-color, #FFE9EF) !important;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, var(--pattern-color, #fff), transparent),
        radial-gradient(2px 2px at 40px 70px, var(--pattern-color, rgba(255, 255, 255, 0.8)), transparent),
        radial-gradient(1px 1px at 50px 40px, var(--pattern-color, #fff), transparent),
        radial-gradient(1px 1px at 80px 10px, var(--pattern-color, #fff), transparent),
        radial-gradient(2px 2px at 90px 60px, var(--pattern-color, rgba(255, 255, 255, 0.6)), transparent) !important;
    background-repeat: repeat !important;
    background-size: 100px 100px !important;
    animation: twinkle var(--animation-duration, 5s) ease-in-out infinite !important;
}

/* Gradient Shift - Smooth gradient color transitions */
.animated-gradient-shift {
    background: linear-gradient(45deg, var(--background-color, #FFE9EF), var(--pattern-color, #ffd4e5), #e6d4ff, #d4e5ff, var(--background-color, #FFE9EF)) !important;
    background-size: 400% 400% !important;
    animation: gradientShift var(--animation-duration, 15s) ease infinite !important;
}

/* Confetti Rain - Colorful confetti falling */
.animated-confetti {
    background-color: var(--background-color, #FFE9EF) !important;
    background-image: 
        linear-gradient(45deg, transparent 40%, var(--pattern-color, rgba(255, 105, 180, 0.4)) 40%, var(--pattern-color, rgba(255, 105, 180, 0.4)) 60%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, var(--pattern-color, rgba(138, 43, 226, 0.4)) 40%, var(--pattern-color, rgba(138, 43, 226, 0.4)) 60%, transparent 60%),
        linear-gradient(90deg, transparent 40%, var(--pattern-color, rgba(255, 182, 193, 0.4)) 40%, var(--pattern-color, rgba(255, 182, 193, 0.4)) 60%, transparent 60%) !important;
    background-size: 30px 40px, 40px 30px, 35px 35px !important;
    background-position: 0 0, 20px 0, 10px 15px !important;
    animation: confettiFall var(--animation-duration, 10s) linear infinite !important;
}

/* Hexagon Pattern - Animated honeycomb */
.animated-hexagon {
    background-color: var(--background-color, #FFE9EF) !important;
    background-image: 
        radial-gradient(circle farthest-side at 50% 0, transparent 70%, var(--pattern-color, rgba(255, 255, 255, 0.3)) 71%, var(--pattern-color, rgba(255, 255, 255, 0.3)) 100%),
        radial-gradient(circle farthest-side at 50% 100%, transparent 70%, var(--pattern-color, rgba(255, 255, 255, 0.3)) 71%, var(--pattern-color, rgba(255, 255, 255, 0.3)) 100%),
        radial-gradient(circle farthest-side at 0% 50%, transparent 70%, var(--pattern-color, rgba(255, 255, 255, 0.3)) 71%, var(--pattern-color, rgba(255, 255, 255, 0.3)) 100%),
        radial-gradient(circle farthest-side at 100% 50%, transparent 70%, var(--pattern-color, rgba(255, 255, 255, 0.3)) 71%, var(--pattern-color, rgba(255, 255, 255, 0.3)) 100%) !important;
    background-size: 60px 40px !important;
    background-position: 0 0, 0 0, 30px 20px, 30px 20px !important;
    animation: hexShift var(--animation-duration, 20s) linear infinite !important;
}

/* Animation Keyframes */

@keyframes bgMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 40px 40px;
    }
}

@keyframes floatUp {
    0%, 100% {
        background-position: 0 100px, 40px 160px, 20px 140px, 60px 120px, 30px 130px;
    }
    50% {
        background-position: 0 0, 40px 60px, 20px 40px, 60px 20px, 30px 30px;
    }
}

@keyframes waveMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 70px 0;
    }
}

@keyframes gridPulse {
    0%, 100% {
        opacity: 1;
        background-size: 50px 50px;
    }
    50% {
        opacity: 0.7;
        background-size: 55px 55px;
    }
}

@keyframes twinkle {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

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

@keyframes confettiFall {
    0% {
        background-position: 0 -40px, 20px -40px, 10px -25px;
    }
    100% {
        background-position: 0 100vh, 20px 100vh, 10px 100vh;
    }
}

@keyframes hexShift {
    0% {
        background-position: 0 0, 0 0, 30px 20px, 30px 20px;
    }
    100% {
        background-position: 60px 0, 60px 0, 90px 20px, 90px 20px;
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .animated-halftone-dots,
    .animated-floating-bubbles,
    .animated-wave-pattern,
    .animated-grid-pulse,
    .animated-starfield,
    .animated-gradient-shift,
    .animated-confetti,
    .animated-hexagon {
        animation: none;
    }
}