.gearr-loading {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(20, 23, 32, .72);
    backdrop-filter: grayscale(1) blur(3px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

.gearr-loading.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.gearr-loading__card {
    min-width: min(360px, 90vw);
    padding: 1.6rem 2rem;
    text-align: center;
    color: #fff;
    background: rgba(19, 17, 27, .94);
    border: 1px solid rgba(167, 139, 250, .42);
    border-radius: 1rem;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
}

.gearr-loading__logo-wrap {
    position: relative;
    display: grid;
    place-items: center;
    width: 110px;
    height: 110px;
    margin: 0 auto 1rem;
}

.gearr-loading__logo-wrap::before,
.gearr-loading__logo-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid rgba(167, 139, 250, .55);
    border-radius: 50%;
    animation: gearr-loading-ring 1.8s ease-out infinite;
}

.gearr-loading__logo-wrap::after { animation-delay: .9s; }

.gearr-loading__logo {
    width: 82px;
    height: 82px;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(124, 58, 237, .45));
    animation: gearr-loading-spin 2.4s linear infinite;
}

.gearr-loading__title { display: block; font: 700 1.05rem/1.35 system-ui, sans-serif; }
.gearr-loading__message { display: block; margin-top: .35rem; color: #d7d0e8; font: .86rem/1.5 system-ui, sans-serif; }

@keyframes gearr-loading-spin { to { transform: rotate(360deg); } }
@keyframes gearr-loading-ring {
    0% { transform: scale(.65); opacity: 0; }
    35% { opacity: 1; }
    100% { transform: scale(1.25); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .gearr-loading,
    .gearr-loading__logo,
    .gearr-loading__logo-wrap::before,
    .gearr-loading__logo-wrap::after { animation: none; transition: none; }
    .gearr-loading__logo { filter: drop-shadow(0 0 14px rgba(167, 139, 250, .7)); }
}