:root {
    --oc-brand-blue: #3d7dff;
    --oc-brand-violet: #7b4dff;
    --oc-brand-teal: #00e5b4;
    --oc-brand-text: #e8eeff;
}

.oc-brand {
    --oc-mark-size: 42px;
    --oc-ring-radius: 14px;
    --oc-face-radius: 11px;
    --oc-face-font-size: 12px;
    --oc-wordmark-size: 22px;
    --oc-wordmark-spacing: -0.08em;
    --oc-wordmark-color: #f8fbff;
    --oc-wordmark-accent: var(--oc-brand-teal);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.oc-brand:hover,
.oc-brand:focus,
.oc-brand:active {
    color: inherit;
    text-decoration: none;
}

.oc-brand-mark {
    position: relative;
    width: var(--oc-mark-size);
    height: var(--oc-mark-size);
    flex-shrink: 0;
    animation: oc-brand-float 5.5s ease-in-out infinite;
}

.oc-brand-ring {
    position: absolute;
    inset: 0;
    border-radius: var(--oc-ring-radius);
    background: conic-gradient(
        from 0deg,
        var(--oc-brand-blue) 0%,
        var(--oc-brand-violet) 38%,
        var(--oc-brand-teal) 70%,
        var(--oc-brand-blue) 100%
    );
    animation: oc-brand-spin 4s linear infinite;
}

.oc-brand-face {
    position: absolute;
    inset: 3px;
    border-radius: var(--oc-face-radius);
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #0b1222 0%, #08101f 100%);
    color: #fff;
    font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif;
    font-size: var(--oc-face-font-size);
    font-weight: 800;
    letter-spacing: -0.06em;
}

.oc-brand-mark::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: calc(var(--oc-ring-radius) + 8px);
    background: radial-gradient(
        ellipse,
        rgba(61, 125, 255, 0.23) 0%,
        rgba(123, 77, 255, 0.1) 44%,
        transparent 74%
    );
    animation: oc-brand-pulse 3s ease-in-out infinite;
    pointer-events: none;
}

.oc-brand-lockup {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.oc-brand-name {
    display: inline-flex;
    align-items: center;
    font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif;
    font-size: var(--oc-wordmark-size);
    font-weight: 800;
    line-height: 0.94;
    letter-spacing: var(--oc-wordmark-spacing);
    color: var(--oc-wordmark-color);
    white-space: nowrap;
}

.oc-brand-name span {
    display: inline-block;
    color: var(--letter-color, var(--oc-wordmark-color));
    text-shadow: 0 0 0 rgba(0, 229, 180, 0);
    animation: oc-brand-letter-sweep 4.8s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.08s);
    will-change: color, text-shadow, transform;
}

.oc-brand-name .accent {
    --letter-color: var(--oc-wordmark-accent);
}

.oc-brand--sidebar {
    --oc-mark-size: 34px;
    --oc-ring-radius: 11px;
    --oc-face-radius: 8px;
    --oc-face-font-size: 11px;
    --oc-wordmark-size: 19px;
    --oc-wordmark-color: #eff5ff;
    gap: 10px;
}

.oc-brand--topbar {
    --oc-mark-size: 28px;
    --oc-ring-radius: 9px;
    --oc-face-radius: 6px;
    --oc-face-font-size: 9px;
    --oc-wordmark-size: 17px;
    --oc-wordmark-color: #1c2433;
    --oc-wordmark-accent: #1fa97a;
    gap: 9px;
}

.oc-brand--topbar .oc-brand-mark::after {
    inset: -6px;
    opacity: 0.82;
}

.oc-brand--login {
    --oc-mark-size: 60px;
    --oc-ring-radius: 18px;
    --oc-face-radius: 16px;
    --oc-face-font-size: 18px;
    --oc-wordmark-size: clamp(24px, 4.3vw, 34px);
    --oc-wordmark-spacing: -0.07em;
    --oc-wordmark-color: #111827;
    --oc-wordmark-accent: #129c74;
    gap: 12px;
}

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

@keyframes oc-brand-pulse {
    0%, 100% { opacity: 0.58; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}

@keyframes oc-brand-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes oc-brand-letter-sweep {
    0%, 20%, 100% {
        color: var(--letter-color, var(--oc-wordmark-color));
        text-shadow: 0 0 0 rgba(0, 229, 180, 0);
        transform: translateY(0);
    }
    8% {
        color: #fff;
        text-shadow:
            0 0 14px rgba(0, 229, 180, 0.78),
            0 0 32px rgba(61, 125, 255, 0.45);
        transform: translateY(-3px);
    }
    13% {
        color: var(--oc-wordmark-accent);
        text-shadow: 0 0 18px rgba(0, 229, 180, 0.5);
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .oc-brand-mark,
    .oc-brand-ring,
    .oc-brand-mark::after,
    .oc-brand-name span {
        animation: none !important;
    }
}