/* Enhanced Dark Theme Background
   Improved all-wrapper background effects for dark mode
   Created for Shaheer Designs
*/

/* Enhanced all-wrapper background for dark theme */
[data-theme="dark"] .all-wrapper {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, rgb(0 0 0) 0%, rgb(0 0 0 / 98%) 50%, rgb(0 0 0) 100%);
    overflow: hidden;
}

/* Enhanced noise texture with better contrast and pattern */
[data-theme="dark"] .all-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cfilter id='noise' x='0%25' y='0%25' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.35'/%3E%3C/svg%3E");
    pointer-events: none; 
    z-index: -1;
    opacity: 1;
    mix-blend-mode: overlay;
}

/* Enhanced grid pattern overlay for more depth */
[data-theme="dark"] .all-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(#ffffff0f 1px, transparent 1px), linear-gradient(90deg, #ffffff0f 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
    z-index: -1;
    opacity: 1;
}

/* Enhanced main background circles for dark theme */
[data-theme="dark"] .all-wrapper .main-circle-1 {
    width: 1200px;
    height: 1200px;
    top: 2%;
    left: 50%;
    transform: translateX(-50%) !important;
    z-index: -2;
    opacity: 0.95 !important;
    filter: blur(550px);
    animation: pulse 30s infinite ease-in-out;
    mix-blend-mode: screen;
    backdrop-filter: blur(15px);
    background: linear-gradient(135deg, #ff6b35, #ff8201);
    box-shadow: 0 0 200px 50px rgba(255, 107, 53, 0.7);
}

[data-theme="dark"] .all-wrapper .main-circle-2 {
    width: 1000px;
    height: 1000px;
    top: 25%;
    left: 50%;
    transform: translateX(-50%) !important;
    z-index: -2;
    opacity: 0.95 !important;
    filter: blur(550px);
    animation: pulse 35s infinite ease-in-out;
    animation-delay: 2s;
    mix-blend-mode: screen;
    backdrop-filter: blur(15px);
    background: linear-gradient(135deg, #4B6FFF, #4169E1);
    box-shadow: 0 0 200px 50px rgba(75, 111, 255, 0.7);
}

[data-theme="dark"] .all-wrapper .main-circle-3 {
    width: 1100px;
    height: 1100px;
    top: 50%;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: -2;
    opacity: 0.95 !important;
    filter: blur(550px);
    animation: pulse 25s infinite ease-in-out;
    animation-delay: 1s;
    mix-blend-mode: screen;
    backdrop-filter: blur(15px);
    background: linear-gradient(135deg, #ff6b35, #ff8201);
    box-shadow: 0 0 200px 50px rgba(255, 107, 53, 0.7);
}   

[data-theme="dark"] .all-wrapper .main-circle-4 {
    width: 950px;
    height: 950px;
    top: 70%;
    left: 50% !important ;
    transform: translateX(-50%) !important;
    z-index: -2;
    opacity: 0.95 !important;
    filter: blur(550px);
    animation: pulse 28s infinite ease-in-out;
    animation-delay: 3s;
    mix-blend-mode: screen;
    backdrop-filter: blur(15px);
    background: linear-gradient(135deg, #4B6FFF, #4169E1);
    box-shadow: 0 0 200px 50px rgba(75, 111, 255, 0.7);
}      

[data-theme="dark"] .all-wrapper .main-circle-5 {
    width: 1050px;
    height: 1050px;
    top: 85%;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: -2;
    opacity: 0.95 !important;
    filter: blur(560px);
    animation: pulse 32s infinite ease-in-out;
    animation-delay: 4s;
    mix-blend-mode: screen;
    backdrop-filter: blur(15px);
    background: linear-gradient(135deg, #ff6b35, #ff8201);
    box-shadow: 0 0 200px 50px rgba(255, 107, 53, 0.7);
}

/* Enhanced subtle pulsing animation for main background circles */
@keyframes pulse {
    0% {
        transform: translateX(-50%) scale(1);
        opacity: 0.9;
    }
    50% {
        transform: translateX(-50%) scale(1.08);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.9;
    }
}

/* Enhanced depth effect with subtle shadow */
[data-theme="dark"] .all-wrapper {
    box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.5);
}

/* Improved section transitions */
[data-theme="dark"] section {
    position: relative;
    z-index: 1;
}
 

/* Responsive adjustments */
@media (max-width: 992px) {
    [data-theme="dark"] .all-wrapper .main-circle-1,
    [data-theme="dark"] .all-wrapper .main-circle-2,
    [data-theme="dark"] .all-wrapper .main-circle-3,
    [data-theme="dark"] .all-wrapper .main-circle-4,
    [data-theme="dark"] .all-wrapper .main-circle-5 {
        width: 800px;
        height: 800px;
        filter: blur(400px);
    }
}

@media (max-width: 768px) {
    [data-theme="dark"] .all-wrapper .main-circle-1,
    [data-theme="dark"] .all-wrapper .main-circle-2,
    [data-theme="dark"] .all-wrapper .main-circle-3,
    [data-theme="dark"] .all-wrapper .main-circle-4,
    [data-theme="dark"] .all-wrapper .main-circle-5 {
        width: 600px;
        height: 600px;
        filter: blur(300px);
    }
}

@media (max-width: 576px) {
    [data-theme="dark"] .all-wrapper .main-circle-1,
    [data-theme="dark"] .all-wrapper .main-circle-2,
    [data-theme="dark"] .all-wrapper .main-circle-3,
    [data-theme="dark"] .all-wrapper .main-circle-4,
    [data-theme="dark"] .all-wrapper .main-circle-5 {
        width: 450px;
        height: 450px;
        filter: blur(250px);
    }
}