/* Background canvas container for the CBOM validator. */

.cb-bg-container {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 14% 0%, rgba(56, 189, 248, 0.12), transparent 55%),
        radial-gradient(ellipse at 88% 100%, rgba(74, 222, 128, 0.07), transparent 55%),
        var(--cb-bg, #070a10);
}

.cb-bg-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Motion toggle — a control rather than a prefers-reduced-motion gate; see the
   Handshake Mirror background CSS for the reasoning. */
.cb-motion-toggle {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 5;
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    font-family: inherit;
    letter-spacing: 0.04em;
    color: var(--cb-text-dim, #94a3b8);
    background: rgba(15, 20, 29, 0.92);
    border: 1px solid var(--cb-border, #1e293b);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.cb-motion-toggle:hover,
.cb-motion-toggle:focus-visible {
    color: var(--cb-primary-light, #7dd3fc);
    border-color: var(--cb-primary-dark, #0369a1);
    outline: none;
}