/* Background canvas container for the MASQUE relay page. */

.mq-bg-container {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 12% 0%, rgba(20, 184, 166, 0.14), transparent 55%),
        radial-gradient(ellipse at 90% 100%, rgba(251, 191, 36, 0.07), transparent 55%),
        var(--mq-bg, #071012);
}

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

/* Motion toggle — see the Handshake Mirror background CSS for why this is a
   control rather than a prefers-reduced-motion gate. */
.mq-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(--mq-text-dim, #94a8ab);
    background: rgba(14, 26, 29, 0.92);
    border: 1px solid var(--mq-border, #1d3034);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.mq-motion-toggle:hover,
.mq-motion-toggle:focus-visible {
    color: var(--mq-primary-light, #5eead4);
    border-color: var(--mq-primary-dark, #0d9488);
    outline: none;
}