#progressContainer {
    width: 100%;
    max-width: 600px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 7px 11px -1px rgba(0,0,0,0.80);
    margin: 32px auto;
    position: relative;
}

/**
 * ==============================================
 * Progress bar
 * ==============================================
 */

#progressBar {
    height: 100%;
    width: 0;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 15px 0 0 15px;
    overflow: hidden;
    transition: width 0.3s cubic-bezier(.4,0,.2,1);
    z-index: 1;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
}

#progressBar.full {
    border-radius: 15px;
}

.glow {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(circle at 60% 50%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.1) 70%);
    opacity: 0.5;
    animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
    0% { opacity: 0.1; }
    50% { opacity: 0.9; }
    100% { opacity: 0.1; }
}

#progressText {
    width: 100%;
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 31px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.4);
    font-weight: normal;
    user-select: none;
    pointer-events: none;
    z-index: 4;
}

/**
 * ==============================================
 * Dot Spin
 * ==============================================
 */
.snippet {
    position: relative;
    padding: 32px 5%;
    margin: 24px 0;
}

.dot-spin {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: transparent;
    color: transparent;
    box-shadow: 0 -18px 0 0 #95A8C7, 12.727926px -12.727926px 0 0 #95A8C7, 18px 0 0 0 #95A8C7, 12.727926px 12.727926px 0 0 rgba(152, 128, 255, 0), 0 18px 0 0 rgba(152, 128, 255, 0), -12.727926px 12.727926px 0 0 rgba(152, 128, 255, 0), -18px 0 0 0 rgba(152, 128, 255, 0), -12.727926px -12.727926px 0 0 rgba(152, 128, 255, 0);
    animation: dot-spin 1.5s infinite linear;
}

@keyframes dot-spin {
    0%, 100% {
        box-shadow: 0 -18px 0 0 #95A8C7, 12.727926px -12.727926px 0 0 #95A8C7, 18px 0 0 0 #95A8C7, 12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0);
    }
    12.5% {
        box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.727926px -12.727926px 0 0 #95A8C7, 18px 0 0 0 #95A8C7, 12.727926px 12.727926px 0 0 #95A8C7, 0 18px 0 -5px rgba(152, 128, 255, 0), -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0);
    }
    25% {
        box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 0 #95A8C7, 12.727926px 12.727926px 0 0 #95A8C7, 0 18px 0 0 #95A8C7, -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0);
    }
    37.5% {
        box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.727926px 12.727926px 0 0 #95A8C7, 0 18px 0 0 #95A8C7, -12.727926px 12.727926px 0 0 #95A8C7, -18px 0 0 -5px rgba(152, 128, 255, 0), -12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0);
    }
    50% {
        box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 0 #95A8C7, -12.727926px 12.727926px 0 0 #95A8C7, -18px 0 0 0 #95A8C7, -12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0);
    }
    62.5% {
        box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.727926px 12.727926px 0 0 #95A8C7, -18px 0 0 0 #95A8C7, -12.727926px -12.727926px 0 0 #95A8C7;
    }
    75% {
        box-shadow: 0 -18px 0 0 #95A8C7, 12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 0 #95A8C7, -12.727926px -12.727926px 0 0 #95A8C7;
    }
    87.5% {
        box-shadow: 0 -18px 0 0 #95A8C7, 12.727926px -12.727926px 0 0 #95A8C7, 18px 0 0 -5px rgba(152, 128, 255, 0), 12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.727926px -12.727926px 0 0 #95A8C7;
    }
}


/**
 * ==============================================
 * Wave loader
 * ==============================================
 */

.wave-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    gap: 5px;
    position: relative;
    /*margin: 50px 0;*/
}

.wave-bar {
    width: 5px;
    background-color: #fff;
    border-radius: 2px;
    overflow: hidden;
    /* Начальное состояние */
    height: 15px;
    opacity: 0.2;
    box-shadow: -1px 1px 2px 1px rgba(0,0,0,0.80);
    animation: waveCycle 2s linear infinite;
}

/* Задержки для движения волны справа налево */
.bar1 { animation-delay: 0.9s; }
.bar2 { animation-delay: 0.8s; }
.bar3 { animation-delay: 0.7s; }
.bar4 { animation-delay: 0.6s; }
.bar5 { animation-delay: 0.5s; } /* Пик волны */
.bar6 { animation-delay: 0.4s; }
.bar7 { animation-delay: 0.3s; }
.bar8 { animation-delay: 0.2s; }
.bar9 { animation-delay: 0.1s; }
.bar10 { animation-delay: 0s; } /* Первый стартует (крайний правый) */

/* Анимация полного цикла волны с 2‑секундной паузой */
@keyframes waveCycle {
    0%, 30% {
        /* Активная фаза: */
        height: 15px;
        opacity: 0.2;
    }
    10% {
        height: 20px;
        opacity: 0.4;
    }
    20% {
        height: 50px;
        opacity: 0.6;
    }
    30% {
        height: 20px;
        opacity: 0.4;
    }
    /*40% {*/
    /*    height: 20px;*/
    /*    opacity: 0.2;*/
    /*}*/
    /* Пауза: */
    31%, 100% {
        height: 15px;
        opacity: 0.2; /* Фиксированное состояние во время паузы */
    }
}






/*.wave-loader {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    height: 120px;*/
/*    gap: 8px;*/
/*    position: relative;*/
/*    margin: 50px 0;*/
/*}*/

/*.wave-bar {*/
/*    width: 10px;*/
/*    background-color: #fff;*/
/*    border-radius: 5px;*/
/*    overflow: hidden;*/
/*    height: 15px;*/
/*    opacity: 0.2;*/
/*    animation: waveCycle 2s linear infinite; !* Ускорили до 3с *!*/
/*}*/

/*!* Задержки для движения волны справа налево *!*/
/*.bar1 { animation-delay: 2.7s; }*/
/*.bar2 { animation-delay: 2.4s; }*/
/*.bar3 { animation-delay: 2.1s; }*/
/*.bar4 { animation-delay: 1.8s; }*/
/*.bar5 { animation-delay: 1.5s; } !* Пик волны *!*/
/*.bar6 { animation-delay: 1.2s; }*/
/*.bar7 { animation-delay: 0.9s; }*/
/*.bar8 { animation-delay: 0.6s; }*/
/*.bar9 { animation-delay: 0.3s; }*/
/*.bar10 { animation-delay: 0s; } !* Первый стартует (крайний правый) *!*/

/*!* Анимация полного цикла волны с 1‑секундной паузой *!*/
/*@keyframes waveCycle {*/
/*    0%, 95% {*/
/*        height: 15px;*/
/*        opacity: 0.2;*/
/*    }*/
/*    10% {*/
/*        height: 15px;*/
/*        opacity: 0.2;*/
/*    }*/
/*    20% {*/
/*        height: 20px;*/
/*        opacity: 0.4;*/
/*    }*/
/*    30% {*/
/*        height: 30px;*/
/*        opacity: 0.6;*/
/*    }*/
/*    40% {*/
/*        height: 50px;*/
/*        opacity: 1.0; !* Пик волны *!*/
/*    }*/
/*    50% {*/
/*        height: 30px;*/
/*        opacity: 0.6;*/
/*    }*/
/*    60% {*/
/*        height: 20px;*/
/*        opacity: 0.4;*/
/*    }*/
/*    70% {*/
/*        height: 15px;*/
/*        opacity: 0.2;*/
/*    }*/
/*    80% {*/
/*        height: 15px;*/
/*        opacity: 0.2;*/
/*    }*/
/*    95%, 100% {*/
/*        !* 1‑секундная пауза (10% от 10с общего цикла) *!*/
/*        height: 15px;*/
/*        opacity: 0.2;*/
/*    }*/
/*}*/