/* سكشن مع خلفية واضحة جدًا */
.hido-bg-floating-patterns-test {
    position: relative;
    background-color: #dfffe2; /* أخضر واضح لتجربة */
    border-radius: 0px;
    overflow: hidden;
    z-index: 1;
}

/* حركة خفيفة */
@keyframes float {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }
    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

/* الإعداد العام للـ pattern */
.hido-bg-floating-patterns-test .pattern {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.3; /* أكثر وضوحًا للتجربة */
    animation: float 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* توزيع 3 أشكال مختلفة */
.hido-bg-floating-patterns-test .p1 {
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern1.png');
    animation-delay: 0s;
}

.hido-bg-floating-patterns-test .p2 {
    bottom: 10px;
    right: 10px;
    width: 140px;
    height: 140px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern4.png');
    animation-delay: 1s;
}

.hido-bg-floating-patterns-test .p3 {
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern10.png');
    transform: translate(-50%, -50%);
    animation-delay: 2s;
}
/* css2 */
/* خلفية متحركة مع كلاس مميز */
.hido-bg-flow-v2 {
    position: relative;
    background-color: #e0f8e7;
    border-radius: 0px;
    overflow: hidden;
    z-index: 1;
}

/* حركة ناعمة */
@keyframes floatUp {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }
    50% {
        transform: translateY(-12px) rotate(6deg);
    }
}

/* العناصر المتحركة */
.hido-bg-flow-v2 .flow-v2-p1,
.hido-bg-flow-v2 .flow-v2-p2 {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.12;
    animation: floatUp 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* توزيع */
.hido-bg-flow-v2 .flow-v2-p1 {
    top: -20px;
    left: -10px;
    width: 110px;
    height: 110px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern2.png');
    animation-delay: 0s;
}

.hido-bg-flow-v2 .flow-v2-p2 {
    bottom: -30px;
    right: -20px;
    width: 130px;
    height: 130px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern6.png');
    animation-delay: 1s;
}
/* css3 */
.hido-bg-wave-float {
    position: relative;
    background: linear-gradient(135deg, #e1f7e7, #f9fff7);
    border-radius: 24px;
    overflow: hidden;
    z-index: 1;
}

@keyframes waveUp {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

.hido-bg-wave-float .wave-p1,
.hido-bg-wave-float .wave-p2 {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.1;
    animation: waveUp 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.hido-bg-wave-float .wave-p1 {
    top: 10px;
    left: 20px;
    width: 140px;
    height: 140px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern3.png');
    animation-delay: 0s;
}

.hido-bg-wave-float .wave-p2 {
    bottom: 10px;
    right: 20px;
    width: 120px;
    height: 120px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern7.png');
    animation-delay: 1.5s;
}
/* css4 */
.hido-bg-pulse-dots {
    position: relative;
    background-color: #f0fff2;
    border-radius: 24px;
    overflow: hidden;
    z-index: 1;
}

@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.2;
    }
}

.hido-bg-pulse-dots .pulse-p1,
.hido-bg-pulse-dots .pulse-p2 {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    animation: pulse 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.hido-bg-pulse-dots .pulse-p1 {
    top: 20px;
    left: 20px;
    width: 100px;
    height: 100px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern8.png');
}

.hido-bg-pulse-dots .pulse-p2 {
    bottom: 20px;
    right: 20px;
    width: 120px;
    height: 120px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern10.png');
}
/* css5 */
/* ------------------------------
  hido-bg-random-pieces
  خلفية مليئة بعناصر متكررة مختلفة
------------------------------ */
.hido-bg-random-pieces {
    position: relative;
    background-color: #e8f9ed;
    border-radius: 24px;
    overflow: hidden;
    z-index: 1;
}

.hido-bg-random-pieces .piece {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

/* عناصر pattern متعددة من نفس النوع أو مختلفة */

/* pattern1 - شفاف قليلاً */
.hido-bg-random-pieces .p1 {
    top: 20px;
    left: 30px;
    width: 80px;
    height: 80px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern5.png');
    opacity: 0.1;
}

/* pattern2 - أصغر وأكثر شفافية */
.hido-bg-random-pieces .p2 {
    top: 100px;
    left: 150px;
    width: 60px;
    height: 60px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern5.png');
    opacity: 0.05;
}

/* pattern3 - يمين */
.hido-bg-random-pieces .p3 {
    top: 50px;
    right: 40px;
    width: 90px;
    height: 90px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern7.png');
    opacity: 0.08;
}

/* pattern4 - أسفل يسار */
.hido-bg-random-pieces .p4 {
    bottom: 30px;
    left: 20px;
    width: 100px;
    height: 100px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern9.png');
    opacity: 0.07;
}

/* pattern5 - مركز */
.hido-bg-random-pieces .p5 {
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern5.png');
    transform: translate(-50%, -50%);
    opacity: 0.03;
}

/* pattern6 - تحت يمين */
.hido-bg-random-pieces .p6 {
    bottom: 10px;
    right: 10px;
    width: 70px;
    height: 70px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern7.png');
    opacity: 0.12;
}
/* ------------------------------
  hido-bg-explode-bold
  خلفية بدون زوايا، واضحة جدًا، مليئة بالعناصر
------------------------------ */
.hido-bg-explode-bold {
    position: relative;
    background-color: #d8fbe5; /* أخضر واضح */
    border-radius: 0; /* بدون زوايا */
    overflow: hidden;
    z-index: 1;
}

/* نمط العناصر */
.hido-bg-explode-bold .pattern-item {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 1; /* واضح تمامًا */
    pointer-events: none;
    z-index: 0;
}

/* توزيع متنوّع جداً */
.hido-bg-explode-bold .b1 {
    top: 10px;
    left: 10px;
    width: 90px;
    height: 90px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern1.png');
}

.hido-bg-explode-bold .b2 {
    top: 50px;
    right: 20px;
    width: 100px;
    height: 100px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern2.png');
}

.hido-bg-explode-bold .b3 {
    top: 45%;
    left: 45%;
    width: 150px;
    height: 150px;
    transform: translate(-50%, -50%) rotate(15deg);
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern3.png');
}

.hido-bg-explode-bold .b4 {
    bottom: 20px;
    left: 30px;
    width: 120px;
    height: 120px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern4.png');
}

.hido-bg-explode-bold .b5 {
    bottom: -20px;
    right: -20px;
    width: 160px;
    height: 160px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern6.png');
    transform: rotate(-20deg);
}

.hido-bg-explode-bold .b6 {
    top: 0;
    right: 40%;
    width: 80px;
    height: 80px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern10.png');
}
/* ------------------------------
  hido-bg-orbit-motion
  خلفية مركزية فيها عناصر تدور حول نقطة محورية
------------------------------ */

.hido-bg-orbit-motion {
    position: relative;
    background-color: #f3fffa;
    border-radius: 24px;
    overflow: hidden;
    z-index: 1;
}

/* العنصر المركزي (كوكب/خريطة) */
.hido-bg-orbit-motion .orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern8.png');
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
    opacity: 0.05;
    z-index: 0;
}

/* المدار */
@keyframes rotateOrbit {
    0% {
        transform: rotate(0deg) translateX(160px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(160px) rotate(-360deg);
    }
}

/* العناصر الدائرة */
.hido-bg-orbit-motion .orbit-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    animation: rotateOrbit 20s linear infinite;
    transform-origin: center;
    z-index: 0;
    opacity: 0.1;
}

/* صور مختلفة */
.hido-bg-orbit-motion .orbit-item.item-1 {
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern2.png');
    animation-delay: 0s;
}

.hido-bg-orbit-motion .orbit-item.item-2 {
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern4.png');
    animation-delay: 4s;
    animation-duration: 25s;
}

.hido-bg-orbit-motion .orbit-item.item-3 {
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern6.png');
    animation-delay: 8s;
    animation-duration: 18s;
}
/* ------------------------------
  hido-bg-animated-gradient
  خلفية تدرج لوني يتحرك باستمرار
------------------------------ */

.hido-bg-animated-gradient {
    position: relative;
    background: linear-gradient(120deg, #c7f6d6, #e0f9ea, #c7f6d6);
    background-size: 600% 600%;
    animation: moveGradient 12s ease infinite;
    border-radius: 24px;
    overflow: hidden;
    z-index: 1;
}

/* حركة التدرج */
@keyframes moveGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
/* ------------------------------
  hido-bg-bold-overlap
  خلفية جريئة فيها تداخل واضح بين الأشكال
------------------------------ */

.hido-bg-bold-overlap {
    position: relative;
    background-color: #e2fcef;
    border-radius: 24px;
    overflow: hidden;
    z-index: 1;
}

/* كل العناصر مرئية بوضوح */
.hido-bg-bold-overlap .pattern-block {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5; /* أوضح من السابق بكثير */
    pointer-events: none;
    z-index: 0;
}

/* توزيع العناصر */

/* أعلى يسار */
.hido-bg-bold-overlap .b1 {
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern5.png');
    transform: rotate(10deg);
}

/* أعلى يمين */
.hido-bg-bold-overlap .b2 {
    top: 20px;
    right: -30px;
    width: 150px;
    height: 150px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern4.png');
    transform: rotate(-15deg);
}

/* مركز مائل */
.hido-bg-bold-overlap .b3 {
    top: 40%;
    left: 45%;
    width: 180px;
    height: 180px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern6.png');
    transform: translate(-50%, -50%) rotate(25deg);
}

/* أسفل يسار */
.hido-bg-bold-overlap .b4 {
    bottom: -20px;
    left: 10px;
    width: 130px;
    height: 130px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern7.png');
}

/* أسفل يمين */
.hido-bg-bold-overlap .b5 {
    bottom: -30px;
    right: 0;
    width: 100px;
    height: 100px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern8.png');
}
/* ------------------------------
  hido-bg-galaxy-art
  خلفية فنية تجمع radial + linear + patterns بوضوح عالي
------------------------------ */

.hido-bg-galaxy-art {
    position: relative;
    background-image: radial-gradient(
            circle at top left,
            #d4fcd7 0%,
            transparent 40%
        ),
        radial-gradient(circle at bottom right, #a8edd5 0%, transparent 50%),
        linear-gradient(135deg, #c0f0df, #e4fff6);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 24px;
    overflow: hidden;
    z-index: 1;
}

/* عناصر الزخرفة */
.hido-bg-galaxy-art .star {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.35;
    z-index: 0;
    pointer-events: none;
}

/* توزيع النجوم / الأشكال */

.hido-bg-galaxy-art .s1 {
    top: 40px;
    left: 20px;
    width: 140px;
    height: 140px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern1.png');
    transform: rotate(15deg);
}

.hido-bg-galaxy-art .s2 {
    top: 100px;
    right: 30px;
    width: 120px;
    height: 120px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern4.png');
    transform: rotate(-20deg);
}

.hido-bg-galaxy-art .s3 {
    bottom: 40px;
    left: 50%;
    width: 160px;
    height: 160px;
    transform: translateX(-50%) rotate(45deg);
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern9.png');
}

.hido-bg-galaxy-art .s4 {
    bottom: 10px;
    right: -30px;
    width: 100px;
    height: 100px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern10.png');
    transform: rotate(10deg);
}
/* ------------------------------
  hido-bg-dark-galaxy
  مجرة داكنة أنيقة مع حركة وتداخلات
------------------------------ */

.hido-bg-dark-galaxy {
    position: relative;
    background: radial-gradient(circle at 30% 30%, #37b268, #7af7ac);
    background-size: 200% 200%;
    animation: galaxyMove 20s ease infinite;
    border-radius: 0; /* نتركها بدون زوايا حسب تفضيلك */
    overflow: hidden;
    z-index: 1;
    color: #fff;
}

/* حركة خفيفة في الخلفية */
@keyframes galaxyMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* عناصر زخرفة بشكل parallax */
.hido-bg-dark-galaxy .galaxy-piece {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

/* توزيع النجوم والعناصر */

.hido-bg-dark-galaxy .g1 {
    top: 10px;
    left: 15%;
    width: 180px;
    height: 180px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern6.png');
    animation: floatParallax 12s ease-in-out infinite;
    animation-delay: 0s;
}

.hido-bg-dark-galaxy .g2 {
    top: 50%;
    left: 60%;
    width: 140px;
    height: 140px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern4.png');
    animation: floatParallax 14s ease-in-out infinite;
    animation-delay: 2s;
}

.hido-bg-dark-galaxy .g3 {
    bottom: -30px;
    right: 10%;
    width: 220px;
    height: 220px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern9.png');
    animation: floatParallax 16s ease-in-out infinite;
    animation-delay: 1s;
}

/* حركة خفيفة تشبه parallax */
@keyframes floatParallax {
    0%,
    100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}
/* ------------------------------
  hido-bg-mouse-reactive
  خلفية تتفاعل مع حركة الماوس (JS مطلوبة)
------------------------------ */

.hido-bg-mouse-reactive {
    position: relative;
    background: linear-gradient(135deg, #d9fbe9, #f3fffb);
    border-radius: 24px;
    overflow: hidden;
    z-index: 1;
}

/* العناصر المتحركة */
.hido-bg-mouse-reactive .mouse-star {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
    transition: transform 0.2s ease-out;
}

/* مثال لعناصر */
.hido-bg-mouse-reactive .m1 {
    top: 20px;
    left: 20px;
    width: 120px;
    height: 120px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern1.png');
}

.hido-bg-mouse-reactive .m2 {
    bottom: 30px;
    right: 30px;
    width: 150px;
    height: 150px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern6.png');
}
/* ------------------------------
  hido-bg-mouse-cloud
  خلفية تفاعلية مع الماوس - أنماط كثيرة وأنيقة
------------------------------ */

.hido-bg-mouse-cloud {
    position: relative;
    background: radial-gradient(circle at 50% 50%, #e0f9f0, #f8fffb);
    overflow: hidden;
    border-radius: 24px;
    z-index: 1;
}

.hido-bg-mouse-cloud .cloud-item {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
    transition: transform 0.2s ease-out;
}

/* عناصر متعددة — أحجام وألوان مختلفة */

.hido-bg-mouse-cloud .c1 {
    top: 5%;
    left: 10%;
    width: 80px;
    height: 80px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern1.png');
    opacity: 0.3;
}

.hido-bg-mouse-cloud .c2 {
    top: 20%;
    right: 15%;
    width: 140px;
    height: 140px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern2.png');
    opacity: 0.2;
}

.hido-bg-mouse-cloud .c3 {
    top: 50%;
    left: 30%;
    width: 100px;
    height: 100px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern4.png');
    opacity: 0.25;
}

.hido-bg-mouse-cloud .c4 {
    top: 75%;
    right: 5%;
    width: 120px;
    height: 120px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern5.png');
    opacity: 0.35;
}

.hido-bg-mouse-cloud .c5 {
    bottom: 20px;
    left: 40%;
    width: 160px;
    height: 160px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern6.png');
    opacity: 0.15;
}

.hido-bg-mouse-cloud .c6 {
    bottom: 10%;
    right: 25%;
    width: 90px;
    height: 90px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern8.png');
    opacity: 0.4;
}
/* ------------------------------
  hido-bg-ultimate
  خلفية ديناميكية متكاملة: Gradient + Patterns + Parallax
------------------------------ */

.hido-bg-ultimate {
    position: relative;
    background: linear-gradient(120deg, #d9fbe9, #f3fffb, #cff9de);
    background-size: 400% 400%;
    animation: animatedGradient 18s ease infinite;
    overflow: hidden;
    border-radius: 24px;
    z-index: 1;
}

/* Animation for background gradient */
@keyframes animatedGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* العناصر الزخرفية */
.hido-bg-ultimate .ultimate-item {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
    transition: transform 0.2s ease-out;
}

/* توزيع فني — أحجام وأماكن متنوعة */
.hido-bg-ultimate .u1 {
    top: 10%;
    left: 8%;
    width: 90px;
    height: 90px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern1.png');
    opacity: 0.3;
}

.hido-bg-ultimate .u2 {
    top: 25%;
    right: 10%;
    width: 120px;
    height: 120px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern4.png');
    opacity: 0.2;
}

.hido-bg-ultimate .u3 {
    top: 50%;
    left: 40%;
    width: 150px;
    height: 150px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern5.png');
    opacity: 0.15;
}

.hido-bg-ultimate .u4 {
    bottom: 15%;
    left: 12%;
    width: 110px;
    height: 110px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern6.png');
    opacity: 0.25;
}

.hido-bg-ultimate .u5 {
    bottom: 8%;
    right: 8%;
    width: 100px;
    height: 100px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern7.png');
    opacity: 0.4;
}

.hido-bg-ultimate .u6 {
    top: 5%;
    right: 35%;
    width: 80px;
    height: 80px;
    background-image: url('https://hido.fayzar.com/wp-content/uploads/2025/12/pattern8.png');
    opacity: 0.3;
}