/**
 * Custom CSS for Rekowski Tech Theme
 * Additional styles and animations
 */

/* Ensure body has proper positioning context */
body {
    position: relative;
    background-color: #0a0a0f;
}

/* Background Animation Enhancements */
.bg-animation {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -1 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* Ensure orbs are visible and animated */
.gradient-orb {
    position: absolute !important;
    border-radius: 50% !important;
    filter: blur(80px) !important;
    opacity: 0.5 !important;
    will-change: transform;
    animation: floatOrb 20s infinite ease-in-out !important;
}

/* Individual orb styles with different animations */
.orb1 {
    width: 600px !important;
    height: 600px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    top: -200px !important;
    left: -200px !important;
    animation: floatOrb1 15s infinite ease-in-out !important;
}

.orb2 {
    width: 500px !important;
    height: 500px !important;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    bottom: -150px !important;
    right: -150px !important;
    animation: floatOrb2 18s infinite ease-in-out !important;
}

.orb3 {
    width: 400px !important;
    height: 400px !important;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    animation: floatOrb3 20s infinite ease-in-out !important;
}

/* Keyframe animations for each orb */
@keyframes floatOrb1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(100px, -100px) scale(1.1);
    }
    50% {
        transform: translate(-50px, 100px) scale(0.9);
    }
    75% {
        transform: translate(-100px, -50px) scale(1.05);
    }
}

@keyframes floatOrb2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(-80px, 80px) scale(1.05);
    }
    50% {
        transform: translate(100px, -50px) scale(0.95);
    }
    75% {
        transform: translate(50px, 100px) scale(1.1);
    }
}

@keyframes floatOrb3 {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    25% {
        transform: translate(calc(-50% + 50px), calc(-50% - 50px)) scale(1.08);
    }
    50% {
        transform: translate(calc(-50% - 30px), calc(-50% + 30px)) scale(0.92);
    }
    75% {
        transform: translate(calc(-50% + 30px), calc(-50% + 50px)) scale(1.05);
    }
}

/* Fallback animation */
@keyframes floatOrb {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(50px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-50px, 50px) scale(0.9);
    }
}

/* Performance optimization */
@media (prefers-reduced-motion: reduce) {
    .gradient-orb {
        animation: none !important;
    }
}

/* Ensure animations work on all pages */
.home .bg-animation,
.blog .bg-animation,
.single .bg-animation,
.page .bg-animation,
.archive .bg-animation {
    display: block !important;
    visibility: visible !important;
}

/* Fix for some themes that might interfere */
#page,
#content,
.site-content {
    position: relative;
    z-index: 1;
    background: transparent;
}

/* Additional animation for page load */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.bg-animation {
    animation: fadeIn 1.5s ease-out;
}

/* Ensure proper layering */
.site-header,
.site-footer,
.content,
article,
.blog-grid {
    position: relative;
    z-index: 1;
}