/* ساختار اصلی */
.dynamic-bg-container {
    position: relative;
    width: 100%;
    height: 150vh;
    overflow: hidden;
    z-index: 0;
    isolation: isolate;
}

.dynamic-bg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color, #00000000);
    z-index: -1;
}

/* استایل پایه دایره‌ها */
.dynamic-bg-dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dynamic-bg-dot {
    position: absolute;
    border-radius: 50%;
    aspect-ratio: 1/1;
    transform-origin: center;
    filter: blur(var(--blur-amount, 80px));
    opacity: var(--opacity, 0.7);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* دایره 1 (نارنجی) */
.dynamic-bg-dot:nth-child(1) {
    width: var(--dot1-size, 15%);
    left: var(--dot1-x, 5%);
    top: var(--dot1-y, 30%);
    background: var(--dot1-color, rgba(255, 165, 0, 0.6));
    animation: pulse 3s infinite alternate;
    z-index: var(--dot1-zindex, 85);
}

/* دایره 2 (قرمز) */
.dynamic-bg-dot:nth-child(2) {
    width: var(--dot2-size, 20%);
    left: var(--dot2-x, 20%);
    top: var(--dot2-y, 50%);
    background: var(--dot2-color, rgba(255, 0, 0, 0.6));
    animation: pulse 3s infinite alternate;
    z-index: var(--dot2-zindex, 80);
}

/* دایره 3 (سرخابی) */
.dynamic-bg-dot:nth-child(3) {
    width: var(--dot3-size, 30%);
    left: var(--dot3-start-x, 15%);
    top: var(--dot3-start-y, 20%);
    background: var(--dot3-color, rgba(255, 0, 255, 0.5));
    animation: moveAtoC 3s infinite;
    z-index: var(--dot3-zindex, 70);
}

/* دایره 4 (زرد) */
.dynamic-bg-dot:nth-child(4) {
    width: var(--dot4-size, 40%);
    left: var(--dot4-x, 60%);
    top: var(--dot4-y, 30%);
    background: var(--dot4-color, rgba(255, 255, 0, 0.6));
    animation: pulse 3s infinite alternate;
    z-index: var(--dot4-zindex, 60);
}

/* دایره 5 (آبی) */
.dynamic-bg-dot:nth-child(5) {
    width: var(--dot5-size, 35%);
    left: var(--dot5-x, 65%);
    top: var(--dot5-y, 55%);
    background: var(--dot5-color, rgba(0, 150, 255, 0.5));
    animation: pulse 3s infinite alternate;
    z-index: var(--dot5-zindex, 65);
}

/* دایره 6 (سبز) */
.dynamic-bg-dot:nth-child(6) {
    width: var(--dot6-size, 15%);
    left: var(--dot6-x, 80%);
    top: var(--dot6-y, 70%);
    background: var(--dot6-color, rgba(0, 255, 150, 0.5));
    animation: pulse 3s infinite alternate;
    z-index: var(--dot6-zindex, 90);
}

/* دایره 7 (بنفش) */
.dynamic-bg-dot:nth-child(7) {
    width: var(--dot7-size, 18%);
    left: var(--dot7-x, 70%);
    top: var(--dot7-y, 40%);
    background: var(--dot7-color, rgba(200, 100, 255, 0.5));
    animation: pulse 3s infinite alternate;
    z-index: var(--dot7-zindex, 82);
}

/* انیمیشن‌ها */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes moveAtoC {
    0% {
        transform: translate(0, 0) scale(1);
        left: var(--dot3-start-x, 15%);
        top: var(--dot3-start-y, 20%);
    }
    25% {
        transform: scale(1.3);
    }
    50% {
        transform: scale(1.5);
        left: var(--dot3-end-x, 70%);
        top: var(--dot3-end-y, 70%);
    }
    75% {
        transform: scale(1.3);
    }
    100% {
        transform: translate(0, 0) scale(1);
        left: var(--dot3-start-x, 15%);
        top: var(--dot3-start-y, 20%);
    }
}

/* Fade all sides */
.elementor-widget-dynamic_bg_widget .dynamic-bg-container{
  --fade: 140px;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%),
    linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  -webkit-mask-composite: intersect;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%),
    linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}