/* Main Loader */
.loader {
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
    border-radius: 50%;
    animation: circleAnimation 1s linear infinite;
}

.loader::before,
.loader::after {
    content: "";
    position: absolute;
}

/* Glassmorphism */
.loader::before {
    inset: 10px;
    background: rgba(233, 30, 99, 0.05);
    border-radius: 50%;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1;
}

/* animated Circle */
.loader::after {
    top: -50%;
    left: -50%;
    width: 100%;
    height: 100%;
    background: var(--cui-primary);
}

@keyframes circleAnimation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}