.preloader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(240, 240, 240, 0.7); /* Полупрозрачный фон */
    z-index: 2001;
    transition: opacity 0.3s ease;
}

.preloader-container.hidden {
    opacity: 0;
    pointer-events: none;
}

.avatar-frame {
    position: relative;
    width: 100px;
    height: 100px;
    border: 5px solid transparent;
    border-radius: 50%;
    box-sizing: border-box;
    background: linear-gradient(45deg, #ff69b4, #ff85c0, #ff9ed8, #ffb6e8, #cc99ff, #9980ff, #6666ff, #0000ff) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-in;
    mask-composite: exclude;
    z-index: 2;
    animation: hueRotate 3s linear infinite;
}

@keyframes hueRotate {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.avatar-preloader {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    z-index: 3;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loading-block {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform-origin: 50px 50px;
    opacity: 0.7;
    animation: rotate 2s linear infinite, colorShift 3s linear infinite;
    background: linear-gradient(45deg, #ff69b4, #ff85c0);
    z-index: 1;
}

.block-1 { transform: rotate(0deg) translateX(50px) rotate(0deg); animation-delay: 0s, 0s; }
.block-2 { transform: rotate(30deg) translateX(50px) rotate(-30deg); animation-delay: 0.1s, 0.25s; }
.block-3 { transform: rotate(60deg) translateX(50px) rotate(-60deg); animation-delay: 0.2s, 0.5s; }
.block-4 { transform: rotate(90deg) translateX(50px) rotate(-90deg); animation-delay: 0.3s, 0.75s; }
.block-5 { transform: rotate(120deg) translateX(50px) rotate(-120deg); animation-delay: 0.4s, 1.0s; }
.block-6 { transform: rotate(150deg) translateX(50px) rotate(-150deg); animation-delay: 0.5s, 1.25s; }
.block-7 { transform: rotate(180deg) translateX(50px) rotate(-180deg); animation-delay: 0.6s, 1.5s; }
.block-8 { transform: rotate(210deg) translateX(50px) rotate(-210deg); animation-delay: 0.7s, 1.75s; }
.block-9 { transform: rotate(240deg) translateX(50px) rotate(-240deg); animation-delay: 0.8s, 2.0s; }
.block-10 { transform: rotate(270deg) translateX(50px) rotate(-270deg); animation-delay: 0.9s, 2.25s; }
.block-11 { transform: rotate(300deg) translateX(50px) rotate(-300deg); animation-delay: 1.0s, 2.5s; }
.block-12 { transform: rotate(330deg) translateX(50px) rotate(-330deg); animation-delay: 1.1s, 2.75s; }

@keyframes rotate {
    0% {
        opacity: 0.7;
        transform: rotate(var(--rotate)) translateX(50px) rotate(calc(-1 * var(--rotate)));
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.7;
        transform: rotate(calc(var(--rotate) + 360deg)) translateX(50px) rotate(calc(-1 * var(--rotate) - 360deg));
    }
}

@keyframes colorShift {
    0% { background: linear-gradient(45deg, #ff69b4, #ff85c0); }
    20% { background: linear-gradient(45deg, #ff85c0, #ff9ed8); }
    40% { background: linear-gradient(45deg, #ff9ed8, #ffb6e8); }
    60% { background: linear-gradient(45deg, #ffb6e8, #cc99ff); }
    80% { background: linear-gradient(45deg, #cc99ff, #9980ff); }
    100% { background: linear-gradient(45deg, #9980ff, #6666ff, #0000ff); }
}