:root {
    --preloader-bg-start: #ffffff;
    --preloader-bg-end:   #f5f3ff;
    --preloader-ring-1:   #7c3aed;
    --preloader-ring-2:   #6d28d9;
    --preloader-ring-3:   #c4b5fd;
    --preloader-text:     #374151;
}

#preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background: linear-gradient(180deg, var(--preloader-bg-start) 0%, var(--preloader-bg-end) 100%);
    transition: opacity .35s ease;
}
#preloader.is-hiding { opacity: 0; pointer-events: none; }

#preloader .preloader-ring {
    width: 64px;
    height: 64px;
    position: relative;
    display: block;
}
#preloader .preloader-ring span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--preloader-ring-1);
    animation: preloader-spin 1.1s cubic-bezier(.5, .15, .5, .85) infinite;
}
#preloader .preloader-ring span:nth-child(2) {
    inset: 8px;
    border-top-color: var(--preloader-ring-2);
    animation-duration: 1.5s;
    animation-direction: reverse;
}
#preloader .preloader-ring span:nth-child(3) {
    inset: 16px;
    border-top-color: var(--preloader-ring-3);
    animation-duration: 1.9s;
}
#preloader .preloader-brand {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--preloader-text);
    text-transform: uppercase;
    animation: preloader-pulse 1.6s ease-in-out infinite;
}

@keyframes preloader-spin { to { transform: rotate(360deg); } }
@keyframes preloader-pulse {
    0%, 100% { opacity: .5; }
    50%      { opacity: 1;  }
}

@media (prefers-reduced-motion: reduce) {
    #preloader .preloader-ring span,
    #preloader .preloader-brand { animation: none; }
}