/* Ambient background for the certificate-compression page.
   The canvas sits behind everything and never intercepts a click. */
.cc-bg-container {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

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

/* The motion control is the escape hatch for the animation, which runs by
   default for everyone. It has to be reachable and obviously a control, not a
   decoration someone has to discover. */
.cc-motion-toggle {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 5;
    padding: 6px 12px;
    font: inherit;
    font-size: 0.78rem;
    color: var(--cc-text-dim);
    background: rgba(15, 20, 29, 0.92);
    border: 1px solid var(--cc-border);
    border-radius: 999px;
    cursor: pointer;
}

.cc-motion-toggle:hover { color: var(--cc-primary); border-color: var(--cc-primary-dark); }
.cc-motion-toggle:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: 2px; }