#loading-overlays {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    /* پس‌زمینه تیره‌تر با بلور بیشتر */
    background: rgba(21, 21, 21, 0.6); /* شفافیت کمتر (تیره‌تر) */
    backdrop-filter: blur(60px); /* بلور بیشتر */
    -webkit-backdrop-filter: blur(60px); /* برای سازگاری با سافاری */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1005
;
    opacity: 1;
    visibility: visible;
    transition: opacity 1s ease, visibility 1s ease,transform 10s ease, visibility 1s ease;
}

#loading-overlays.hidden {
    transform:scale(1.05);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#loading-boxs {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px; /* فاصله بین لوگو، دایره و متن */
}

#logo-svg {
    width:100vw;
    max-width:350px;
    display:flex;
    align-items:center;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.8)); /* سایه نرم و بیشتر */

}
.playing #logo-svg{
    animation: logoPulse 1.8s ease-in-out infinite alternate;
}
.spinners-containers {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px; /* فاصله بین دایره و متن */
}

.spinners {
    width: 40px;
    height: 40px;
    position: relative;
}

.spinners::before,
.spinners::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 100%;
}

/* حلقه بیرونی */
.spinners::before {
    border: 4px solid rgba(255, 255, 255, 0.3);
}
.playing .spinners::before{
    animation: opacity 1.2s linear infinite;
}
/* بخش چرخان مدرن */
.spinners::after {
    border: 4px solid transparent;
    border-top-color: rgba(200, 0, 50, 1);
    border-right-color: rgba(200, 0, 50, 0);
    border-left-color: rgba(200, 0, 50, 0);
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 50, 2)); /* سایه برای دایره */
}
.playing .spinners::after{
    animation: spin 1.2s linear infinite;
}
.loading-texts, .loading-textss {
    font-family: azar; /* یا فونت دلخواه سایت شما */
    color: #ffffff;
    font-size: 16px;
    letter-spacing: 2px;
    position: relative;
    opacity: 1;
}

.loading-texts::after {
    content: '...';
    position: ;
    right: 0px; /* تنظیم فاصله نقاط */
    top: 0;
}
.playing .loading-texts::after{
    animation: dots 2s linear infinite;
}
@keyframes opacity{
    0% {opacity: 100%;}
    28% {opacity: 0%;}
    52% {opacity: 0%;}
    100% {opacity: 100%;}
}
@keyframes spin {

    0%{transform: rotate(20deg);}
    10%{transform: rotate(120deg);}
    20%{transform: rotate(270deg);}
    30%{transform: rotate(460deg);}
    40%{transform: rotate(560deg);}
    50%{transform: rotate(630deg);}
    60%{transform: rotate(665deg);}
    70%{transform: rotate(690deg);}
    80%{transform: rotate(705deg);}
    90%{transform: rotate(715deg);}
    100%{transform: rotate(720deg);}

}

@keyframes logoPulse {
    from { transform: scale(1); opacity: 0.7; }
    to { transform: scale(1.08); opacity: 1; }
}

@keyframes dots {
    0% { content: ''; }
    50% { content: '.'; }
    50.5% { content: '..'; }
    90% { content: '...'; }
    100% { content: '...'; }
}