/* OffMusic Brand-Logo: CD + "Off" (weiss) + "Music" (blau)
   Analog zur Landing Page (server/static/landing.html).
   Varianten werden ueber den Wrapper (.auth-logo, .header-brand) gesteuert. */

.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1;
    color: var(--text-primary);
}

.brand-cd {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    background:
        radial-gradient(circle at 50% 50%, #f5f5f5 0 15%, #0a0a0a 15.5% 17%, transparent 17.5%),
        repeating-radial-gradient(circle at 50% 50%,
            #050505 0 1px,
            #1a1a1a 1px 2.5px),
        radial-gradient(circle at 65% 65%, var(--accent) 0%, transparent 60%),
        #000;
    box-shadow:
        inset 0 0 0 1px #000,
        inset 0 0 6px rgba(0, 0, 0, 0.8),
        0 2px 6px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(59, 142, 208, 0.3);
}

/* Langsam rotierender Lichtschein, analog zur grossen Vinyl-Platte auf der Landing Page. */
.brand-cd::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 200deg,
        transparent 0 8%,
        rgba(255, 255, 255, 0.22) 14%,
        transparent 26% 68%,
        rgba(255, 255, 255, 0.12) 75%,
        transparent 82%
    );
    mix-blend-mode: screen;
    animation: brand-cd-spin 20s linear infinite;
}

/* Mittelpunkt-Loch der CD. */
.brand-cd::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #000;
}

@keyframes brand-cd-spin {
    to { transform: rotate(360deg); }
}

.brand-text {
    display: inline-flex;
    line-height: 1;
    font-size: inherit;
    font-weight: 700;
}
.brand-text .off { color: #ffffff; }
.brand-text .music { color: var(--accent); }

/* ---- Variante: Auth-Screens (gross, vertikal zentriert) ---- */
.brand-logo.auth-logo {
    flex-direction: column;
    gap: 14px;
    font-size: 28px;
    margin-bottom: 8px;
    justify-content: center;
}
.brand-logo.auth-logo .brand-cd {
    width: 56px;
    height: 56px;
    box-shadow:
        inset 0 0 0 1px #000,
        inset 0 0 10px rgba(0, 0, 0, 0.8),
        0 4px 14px rgba(0, 0, 0, 0.5),
        0 0 22px rgba(59, 142, 208, 0.35);
}
.brand-logo.auth-logo .brand-cd::after {
    width: 8px;
    height: 8px;
}

/* ---- Variante: Header (klein, inline) ---- */
.brand-logo.header-brand {
    font-size: var(--font-size-lg);
    margin-right: 8px;
    white-space: nowrap;
}