/* Background canvas container for the Handshake Mirror. */

.hs-bg-container {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(0, 119, 182, 0.16), transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(0, 255, 136, 0.10), transparent 55%),
        var(--hs-bg, #0a0a0f);
}

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

/*
 * Motion toggle.
 *
 * Deliberately NOT gated on prefers-reduced-motion: this canvas is the page's
 * ambient background, and killing it for every visitor whose OS reports that
 * preference removes the thing most of them came to look at. The control below
 * lets anyone stop it, which is the accessible answer for an ambient effect.
 */
.hs-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(--hs-text-dim, #a0a0b0);
    background: rgba(18, 18, 26, 0.9);
    border: 1px solid var(--hs-border, #2a2a3a);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.hs-motion-toggle:hover,
.hs-motion-toggle:focus-visible {
    color: var(--hs-primary-light, #90e0ef);
    border-color: var(--hs-primary-dark, #0077b6);
    outline: none;
}