/* Background canvas container for the JA4 directory. */

.ja4-bg-container {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 15% 0%, rgba(124, 92, 255, 0.15), transparent 55%),
        radial-gradient(ellipse at 88% 100%, rgba(0, 229, 176, 0.09), transparent 55%),
        var(--ja4-bg, #0b0a12);
}

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

/*
 * Motion toggle. Not gated on prefers-reduced-motion — see the note in the
 * Handshake Mirror's background CSS for why an ambient canvas gets a control
 * rather than a media query.
 */
.ja4-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(--ja4-text-dim, #9a9aad);
    background: rgba(20, 18, 29, 0.92);
    border: 1px solid var(--ja4-border, #292539);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.ja4-motion-toggle:hover,
.ja4-motion-toggle:focus-visible {
    color: var(--ja4-primary-light, #b9a8ff);
    border-color: var(--ja4-primary-dark, #5b3fd6);
    outline: none;
}