/*
 * Page backgrounds: the shared layers every theme is built from.
 * The themes themselves are in public/themes/<id>/theme.css (served together by
 * themes.php). See public/themes/README.md to make your own.
 *
 * Inside a .bgfx box (see bgLayers() in js/backgrounds.js): three soft colour blobs,
 * a pattern layer, a grain layer and an image layer. data-bg picks the theme. Sizes
 * use container units (cqmax), so the small previews in Settings look like the page.
 */

.bgfx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; container-type: size; background: var(--bg); }
#bg.bgfx { position: fixed; z-index: -1; }

.fx-blob {
    position: absolute; width: 55cqmax; height: 55cqmax; border-radius: 50%;
    filter: blur(6.5cqmax); opacity: var(--blob-opacity);
    transition: background 0.6s;
}
.fx-b1 { background: var(--accent); top: -30cqmax; left: -15cqmax; }
.fx-b2 { background: var(--accent-2); top: -25cqmax; right: -25cqmax; width: 45cqmax; height: 45cqmax; }
.fx-b3 { background: var(--accent-3); bottom: -38cqmax; left: 25%; opacity: calc(var(--blob-opacity) * 0.6); }
.fx-pattern, .fx-grain, .fx-image { position: absolute; inset: 0; display: none; }

/* ---------- "Your image": an uploaded photo, with optional dimming and blur ---------- */
[data-bg="custom"] .fx-blob { display: none; }
[data-bg="custom"] .fx-image {
    display: block;
    inset: calc(var(--custom-blur, 0px) * -2); /* hide the soft edges a blur leaves */
    background: var(--custom-image, none) center / cover no-repeat;
    filter: blur(var(--custom-blur, 0px));
}
/* The dim layer sits on top of the photo (it comes before .fx-image in the markup). */
[data-bg="custom"] .fx-grain { display: block; z-index: 1; background: var(--bg); opacity: var(--custom-dim, 0.4); }
.fx-preview[data-bg="custom"] .fx-image { filter: blur(calc(var(--custom-blur, 0px) / 8)); inset: 0; }