/* Shared ambient backdrop. Colour tokens affect this layer and its controls,
   leaving platform branding, content cards, notices and download actions intact.
   The body owns one stacking context; content wrappers do not, so existing
   fixed navigation and modal layers retain their original ordering. */
body.site-atmosphere {
    --flow-color-a: 144, 144, 150;
    --flow-color-b: 93, 93, 101;
    --flow-color-c: 173, 173, 179;
    --flow-haze-a: rgba(var(--flow-color-a), .015);
    --flow-haze-b: rgba(var(--flow-color-b), .012);
    --flow-haze-c: rgba(var(--flow-color-c), .008);
    isolation: isolate;
    background-color: #040405;
}

body.site-atmosphere[data-background-theme="emerald"] {
    --flow-color-a: 77, 205, 163;
    --flow-color-b: 69, 158, 203;
    --flow-color-c: 167, 222, 199;
}
body.site-atmosphere[data-background-theme="cobalt"] {
    --flow-color-a: 90, 139, 244;
    --flow-color-b: 77, 197, 222;
    --flow-color-c: 166, 176, 248;
}
body.site-atmosphere[data-background-theme="rose"] {
    --flow-color-a: 226, 112, 145;
    --flow-color-b: 231, 157, 111;
    --flow-color-c: 231, 187, 200;
}
body.site-atmosphere[data-background-theme="ice"] {
    --flow-color-a: 96, 195, 222;
    --flow-color-b: 117, 157, 236;
    --flow-color-c: 184, 218, 236;
}
body.site-atmosphere[data-background-theme="violet"] {
    --flow-color-a: 165, 134, 229;
    --flow-color-b: 97, 176, 218;
    --flow-color-c: 214, 178, 234;
}
body.site-atmosphere[data-background-theme="amber"] {
    --flow-color-a: 220, 174, 91;
    --flow-color-b: 214, 127, 109;
    --flow-color-c: 231, 211, 161;
}

/* Old ambient effects would compete with the single shared animation. */
body.site-atmosphere::before,
body.site-atmosphere::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}
.site-atmosphere .hero-bg,
.site-atmosphere .hero-bg::before,
.site-atmosphere .hero-bg::after,
.site-atmosphere .error-bg {
    display: none;
    animation: none !important;
}

.site-flow-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    background:
        radial-gradient(ellipse 52% 65% at 3% 9%, var(--flow-haze-a), transparent 76%),
        radial-gradient(ellipse 48% 56% at 97% 82%, var(--flow-haze-b), transparent 74%),
        radial-gradient(ellipse 48% 36% at 76% -8%, var(--flow-haze-c), transparent 78%);
}
.site-flow-background canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: .6;
}
.site-flow-background::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 58% 70% at 49% 37%, rgba(4,4,5,.8), rgba(4,4,5,.45) 54%, transparent 100%),
        linear-gradient(180deg, rgba(4,4,5,.12), transparent 23%, transparent 78%, rgba(4,4,5,.16));
}

/* Only broad page backgrounds become translucent. Panels, alerts, inputs,
   ads and dialog surfaces keep the contrast their own styles establish. */
.site-atmosphere :is(.hero, .page-header, .guide-hero) { background: transparent; }
.site-atmosphere :is(.home-consoles, .tools-section, .console-section, .blog-section, .faq-section) {
    background: rgba(6,6,8,.46);
}
.site-atmosphere .footer { background: rgba(6,6,8,.72); }

/* One quiet control group, below drawers and dialogs. Native select remains
   keyboard- and touch-accessible; all motion is driven by the shared script. */
.site-background-controls {
    position: fixed;
    inset-inline-end: 84px;
    bottom: max(24px, env(safe-area-inset-bottom));
    z-index: 900;
    display: flex;
    align-items: center;
    max-width: calc(100vw - 104px);
    min-height: 44px;
    padding: 0 2px;
    border: 1px solid rgba(194,205,225,.16);
    border-radius: 12px;
    background: rgba(14,17,24,.94);
    color: #c9ced9;
    box-shadow: 0 6px 24px rgba(0,0,0,.16);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    transition: border-color 160ms ease;
}
.site-background-controls:hover,
.site-background-controls:focus-within { border-color: rgba(var(--flow-color-a), .45); }
.site-background-controls[hidden] { display: none; }
.site-palette-select {
    display: block;
    width: 132px;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 10px 9px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    color-scheme: dark;
    font: 500 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: .005em;
    cursor: pointer;
}
.site-palette-select option { background: #11151e; color: #e5e8f0; }
.site-motion-toggle {
    position: relative;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-inline-start: 1px solid rgba(194,205,225,.12);
    border-radius: 0 10px 10px 0;
    background: transparent;
    color: #bec6d5;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease;
}
.site-motion-toggle::before {
    content: "";
    display: block;
    width: 10px;
    height: 12px;
    background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px);
}
.site-motion-toggle[data-paused="true"]::before {
    width: 11px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.site-motion-toggle:hover { color: #f1f4fa; background: rgba(255,255,255,.045); }
.site-motion-toggle:active { background: rgba(var(--flow-color-a),.1); }
.site-motion-toggle[hidden] { display: none; }
.site-palette-select:focus-visible,
.site-motion-toggle:focus-visible { outline: 2px solid rgba(var(--flow-color-a),.95); outline-offset: -3px; }

@media (max-width: 1024px) {
    .site-background-controls {
        inset-inline-end: 80px;
        bottom: calc(18px + env(safe-area-inset-bottom));
    }
    /* iOS must not zoom the page when the colour selector receives focus. */
    .site-palette-select { width: 136px; font-size: 16px; letter-spacing: -.015em; }
}
@media (max-width: 380px) {
    .site-background-controls { inset-inline-end: 76px; }
    .site-palette-select { width: 132px; padding-inline: 7px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-background-controls, .site-palette-select, .site-motion-toggle { transition: none; }
}
@media (forced-colors: active) {
    .site-flow-background { display: none; }
    .site-background-controls { border-color: ButtonText; box-shadow: none; }
    .site-motion-toggle { border-inline-start-color: ButtonText; }
}
@media print {
    .site-flow-background, .site-background-controls { display: none !important; }
}