.startup-loader {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient( circle at center, color-mix(in srgb, var(--surface-2) 85%, var(--bg)) 0%, var(--bg) 100% );
    z-index: 9999;
}

.startup-loader-logo {
    width: 140px;
    height: 140px;
    object-fit: contain;
    animation: comsGlowPulse 1.8s ease-in-out infinite;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--primary) 55%, transparent)) drop-shadow(0 0 16px color-mix(in srgb, var(--primary) 45%, transparent)) drop-shadow(0 0 32px color-mix(in srgb, var(--primary) 30%, transparent));
}

@keyframes comsGlowPulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 4px color-mix(in srgb, var(--primary) 45%, transparent)) drop-shadow(0 0 10px color-mix(in srgb, var(--primary) 35%, transparent)) drop-shadow(0 0 20px color-mix(in srgb, var(--primary) 20%, transparent));
    }

    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 8px color-mix(in srgb, var(--primary) 85%, transparent)) drop-shadow(0 0 20px color-mix(in srgb, var(--primary) 65%, transparent)) drop-shadow(0 0 42px color-mix(in srgb, var(--primary) 40%, transparent));
    }

    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 4px color-mix(in srgb, var(--primary) 45%, transparent)) drop-shadow(0 0 10px color-mix(in srgb, var(--primary) 35%, transparent)) drop-shadow(0 0 20px color-mix(in srgb, var(--primary) 20%, transparent));
    }
}