/* Static ambient scenery. Opt in on the page root, never on a state panel.
   Palette follows oa_directory/directory.css. Interactive blue stays unchanged.
   Background paint cannot receive input, affect layout or create stacking contexts.
   Viewport-sized layers stay identical when the root's height/content changes. */
/* Gold needs more pigment than violet to read equally clearly on near-white. */
[data-oa-ambient="optiver"] {
    --oa-ambient-rgb: 240, 160, 0;
    --oa-ambient-light: 255, 212, 93;
    --oa-ambient-line: .25;
    --oa-ambient-glow: .23;
    --oa-ambient-wash: .065;
}
[data-oa-ambient="akuna"] {
    --oa-ambient-rgb: 8, 123, 196;
    --oa-ambient-light: 18, 201, 222;
    --oa-ambient-line: .19;
    --oa-ambient-glow: .16;
    --oa-ambient-wash: .045;
}
[data-oa-ambient="sig"] {
    --oa-ambient-rgb: 237, 71, 101;
    --oa-ambient-light: 255, 151, 126;
    --oa-ambient-line: .21;
    --oa-ambient-glow: .20;
    --oa-ambient-wash: .055;
}
[data-oa-ambient="flow-traders"] {
    --oa-ambient-rgb: 121, 80, 223;
    --oa-ambient-light: 180, 140, 246;
    --oa-ambient-line: .18;
    --oa-ambient-glow: .17;
    --oa-ambient-wash: .045;
}

:is(.oa-app.oa-standard, .feed)[data-oa-ambient] {
    --oa-ambient-x: calc(100vw + 140px);
    --oa-ambient-y: 24px;
    --oa-ambient-radius: clamp(240px, 28vw, 430px);
    --oa-ambient-gap: 84px;
    --oa-ambient-strength: 1;
    --oa-ambient-secondary-radius: clamp(230px, 24vw, 360px);
    background-color: #fafbff;
    /* Soft-edged strokes taper in weight and colour towards the outside.
       All layers are background paint: no DOM, overlays, filters or animation. */
    background-image:
        radial-gradient(circle at var(--oa-ambient-x) var(--oa-ambient-y),
            transparent calc(var(--oa-ambient-radius) - 1.5px),
            rgba(var(--oa-ambient-rgb), calc(var(--oa-ambient-line) * var(--oa-ambient-strength))) calc(var(--oa-ambient-radius) - .3px),
            rgba(var(--oa-ambient-rgb), calc(var(--oa-ambient-line) * var(--oa-ambient-strength))) calc(var(--oa-ambient-radius) + .3px),
            transparent calc(var(--oa-ambient-radius) + 1.5px)),
        radial-gradient(circle at var(--oa-ambient-x) var(--oa-ambient-y),
            transparent calc(var(--oa-ambient-radius) + var(--oa-ambient-gap) - 1.3px),
            rgba(var(--oa-ambient-rgb), calc(var(--oa-ambient-line) * var(--oa-ambient-strength) * .65)) calc(var(--oa-ambient-radius) + var(--oa-ambient-gap)),
            transparent calc(var(--oa-ambient-radius) + var(--oa-ambient-gap) + 1.3px)),
        radial-gradient(circle at var(--oa-ambient-x) var(--oa-ambient-y),
            transparent calc(var(--oa-ambient-radius) + 2 * var(--oa-ambient-gap) - 1px),
            rgba(var(--oa-ambient-rgb), calc(var(--oa-ambient-line) * var(--oa-ambient-strength) * .38)) calc(var(--oa-ambient-radius) + 2 * var(--oa-ambient-gap)),
            transparent calc(var(--oa-ambient-radius) + 2 * var(--oa-ambient-gap) + 1px)),
        radial-gradient(ellipse 48vw 62vh at 105% 5%,
            rgba(var(--oa-ambient-light), calc(var(--oa-ambient-glow) * var(--oa-ambient-strength))),
            rgba(var(--oa-ambient-rgb), calc(var(--oa-ambient-wash) * var(--oa-ambient-strength))) 46%, transparent 84%),
        radial-gradient(circle at -180px 108%,
            transparent calc(var(--oa-ambient-secondary-radius) - 1px),
            rgba(var(--oa-ambient-rgb), calc(var(--oa-ambient-line) * var(--oa-ambient-strength) * .28)) var(--oa-ambient-secondary-radius),
            transparent calc(var(--oa-ambient-secondary-radius) + 1px)),
        radial-gradient(ellipse 36vw 48vh at -7% 103%,
            rgba(var(--oa-ambient-light), calc(var(--oa-ambient-glow) * var(--oa-ambient-strength) * .62)),
            rgba(var(--oa-ambient-rgb), calc(var(--oa-ambient-wash) * var(--oa-ambient-strength) * .5)) 42%, transparent 82%);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100vw 100vh;
    background-size: 100vw 100svh;
    background-attachment: fixed;
}

/* Only full-page surface fills are cleared. Cards, choices, menus, tooltips,
   progress bars and their existing transitions retain their own backgrounds. */
.oa-app.oa-standard[data-oa-ambient] .oa-first-screen,
.oa-app.oa-standard[data-oa-ambient] .oa-guide,
.oa-app.oa-standard[data-oa-ambient] .oa-inline-breakdown {
    background: transparent;
}

/* The still-supported legacy result feed has an old decorative grid. */
.feed[data-oa-ambient]::before { background-image: none; }

@media (max-width: 900px) {
    :is(.oa-app.oa-standard, .feed)[data-oa-ambient] {
        --oa-ambient-x: calc(100vw + 180px);
        --oa-ambient-radius: 270px;
        --oa-ambient-gap: 60px;
        --oa-ambient-strength: .85;
    }
}

@media (max-width: 600px) {
    :is(.oa-app.oa-standard, .feed)[data-oa-ambient] {
        --oa-ambient-x: calc(100vw + 175px);
        --oa-ambient-y: -42px;
        --oa-ambient-radius: 205px;
        --oa-ambient-gap: 32px;
        --oa-ambient-strength: .72;
        --oa-ambient-secondary-radius: 220px;
        /* iOS ignores fixed background attachment. A viewport-sized, top-aligned
           local image gives the same stable composition in every state there. */
        background-attachment: scroll;
    }
}

@media print, (forced-colors: active) {
    :is(.oa-app.oa-standard, .feed)[data-oa-ambient] { background-image: none; }
}