/**
 * Advanced Backgrounds - خلفيات احترافية
 * 7 تصاميم خلفية مذهلة مع تأثيرات زجاجية
 */

/* الخلفية الأساسية */
body.has-advanced-bg {
    position: relative;
    overflow-x: hidden;
}

body.has-advanced-bg::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
}

/* اسم الموقع في الخلفية */
body.has-advanced-bg::after {
    content: attr(data-site-name);
    position: fixed;
    font-size: 15vw;
    font-weight: 900;
    opacity: 0.03;
    z-index: -1;
    pointer-events: none;
    color: var(--primary-color, #00A859);
    white-space: nowrap;
}

/* مواضع اسم الموقع */
body.site-name-center::after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

body.site-name-top-right::after {
    top: 10%;
    right: 5%;
}

body.site-name-top-left::after {
    top: 10%;
    left: 5%;
}

body.site-name-bottom-right::after {
    bottom: 10%;
    right: 5%;
}

body.site-name-bottom-left::after {
    bottom: 10%;
    left: 5%;
}

body.site-name-hidden::after {
    display: none;
}

/* ========================================
   Style 1: موجات زجاجية متدرجة
   ======================================== */
body.bg-style-style1::before {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    clip-path: ellipse(150% 80% at 50% 0%);
}

body.bg-style-style1 {
    background: linear-gradient(180deg, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.95) 40%, 
        rgba(255,255,255,1) 60%);
}

/* ========================================
   Style 2: فقاعات ملونة عائمة
   ======================================== */
body.bg-style-style2::before {
    background-image: 
        radial-gradient(circle at 20% 50%, var(--primary-color), transparent 50%),
        radial-gradient(circle at 80% 80%, var(--accent-color), transparent 50%),
        radial-gradient(circle at 40% 20%, var(--secondary-color), transparent 50%),
        radial-gradient(circle at 60% 70%, var(--primary-color), transparent 40%),
        radial-gradient(circle at 90% 30%, var(--accent-color), transparent 45%);
    filter: blur(80px);
}

/* ========================================
   Style 3: شبكة هندسية متداخلة
   ======================================== */
body.bg-style-style3::before {
    background-color: #f5f5f5;
    background-image: 
        repeating-linear-gradient(45deg, 
            var(--primary-color) 0px, 
            var(--primary-color) 2px, 
            transparent 2px, 
            transparent 20px),
        repeating-linear-gradient(-45deg, 
            var(--accent-color) 0px, 
            var(--accent-color) 2px, 
            transparent 2px, 
            transparent 20px);
}

/* ========================================
   Style 4: تدرج قوس قزح
   ======================================== */
body.bg-style-style4::before {
    background: linear-gradient(135deg, 
        var(--primary-color) 0%, 
        var(--accent-color) 25%, 
        #f093fb 50%, 
        #f5576c 75%, 
        var(--primary-color) 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

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

/* ========================================
   Style 5: نمط Aurora بوريالس
   ======================================== */
body.bg-style-style5::before {
    background: linear-gradient(135deg, 
        rgba(0, 201, 255, 0.3) 0%, 
        rgba(146, 254, 157, 0.3) 50%, 
        rgba(0, 201, 255, 0.3) 100%);
    background-size: 200% 200%;
    animation: auroraWave 20s ease-in-out infinite;
    filter: blur(60px);
}

@keyframes auroraWave {
    0%, 100% { background-position: 0% 50%; transform: rotate(0deg); }
    25% { background-position: 50% 0%; transform: rotate(5deg); }
    50% { background-position: 100% 50%; transform: rotate(0deg); }
    75% { background-position: 50% 100%; transform: rotate(-5deg); }
}

/* ========================================
   Style 6: الورق الزجاجي (Glassmorphism)
   ======================================== */
body.bg-style-style6::before {
    background: 
        linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%),
        repeating-linear-gradient(45deg, 
            transparent, 
            transparent 10px, 
            rgba(0,0,0,0.03) 10px, 
            rgba(0,0,0,0.03) 20px);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

body.bg-style-style6 .site-header,
body.bg-style-style6 .site-footer {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ========================================
   Style 7: موجات نيون متوهجة
   ======================================== */
body.bg-style-style7::before {
    background: 
        linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    background-size: 200% 200%;
    animation: neonPulse 10s ease infinite;
}

body.bg-style-style7::after {
    text-shadow: 
        0 0 20px var(--primary-color),
        0 0 40px var(--primary-color),
        0 0 60px var(--primary-color);
}

@keyframes neonPulse {
    0%, 100% { 
        background-position: 0% 50%;
        filter: brightness(1) hue-rotate(0deg);
    }
    50% { 
        background-position: 100% 50%;
        filter: brightness(1.2) hue-rotate(30deg);
    }
}

/* ========================================
   تأثير Parallax
   ======================================== */
body.has-parallax::before {
    transform: translateZ(0);
    will-change: transform;
}

/* ========================================
   تأثير الماوس التفاعلي
   ======================================== */
body.has-mouse-effect::before {
    transition: background-position 0.5s ease;
}

/* ========================================
   وضع التباين العالي
   ======================================== */
body.high-contrast {
    filter: contrast(1.2);
}

body.high-contrast * {
    text-shadow: 0 0 1px rgba(0,0,0,0.3);
}

/* ========================================
   تأثيرات الحركة
   ======================================== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Fade In */
.animation-fade .animate-on-scroll {
    animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Slide */
.animation-slide .animate-on-scroll {
    animation: slideUp 0.8s ease forwards;
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(50px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Zoom */
.animation-zoom .animate-on-scroll {
    animation: zoomIn 0.8s ease forwards;
}

@keyframes zoomIn {
    from { 
        opacity: 0;
        transform: scale(0.8);
    }
    to { 
        opacity: 1;
        transform: scale(1);
    }
}

/* Bounce */
.animation-bounce .animate-on-scroll {
    animation: bounceIn 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes bounceIn {
    0% { 
        opacity: 0;
        transform: scale(0.3);
    }
    50% { 
        transform: scale(1.05);
    }
    70% { 
        transform: scale(0.9);
    }
    100% { 
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================
   حماية الأداء - تحسينات
   ======================================== */
body.has-advanced-bg::before,
body.has-advanced-bg::after {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Responsive */
@media (max-width: 768px) {
    body.has-advanced-bg::after {
        font-size: 20vw;
    }
    
    /* تقليل التأثيرات على الموبايل للأداء */
    body.bg-style-style2::before,
    body.bg-style-style5::before {
        filter: blur(40px);
    }
    
    body.bg-style-style4::before,
    body.bg-style-style5::before,
    body.bg-style-style7::before {
        animation-duration: 20s;
    }
}