/* zHome background themes: generated from public/themes/<id>/theme.css */

/* ---------- aurora ---------- */
/* Aurora: Soft colour that slowly drifts. */

.bgfx[data-bg="aurora"] .fx-blob { animation: aurora-drift 38s ease-in-out infinite alternate; }
.bgfx[data-bg="aurora"] .fx-b2 { animation-duration: 46s; animation-delay: -12s; }
.bgfx[data-bg="aurora"] .fx-b3 { animation-duration: 52s; animation-delay: -20s; }

@keyframes aurora-drift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(8cqmax, 6cqmax) scale(1.12); }
    100% { transform: translate(-6cqmax, 10cqmax) scale(0.94); }
}

/* ---------- mesh ---------- */
/* Mesh: A still, soft gradient mesh from corner to corner. */

.bgfx[data-bg="mesh"] .fx-blob { width: 70cqmax; height: 70cqmax; filter: blur(9cqmax); opacity: calc(var(--blob-opacity) * 1.2); }
.bgfx[data-bg="mesh"] .fx-b1 { top: -38cqmax; left: -30cqmax; }
.bgfx[data-bg="mesh"] .fx-b2 { top: auto; bottom: -42cqmax; right: -28cqmax; }
.bgfx[data-bg="mesh"] .fx-b3 { bottom: auto; top: 12cqmax; left: 45%; width: 42cqmax; height: 42cqmax; opacity: calc(var(--blob-opacity) * 0.75); }

/* ---------- grain ---------- */
/* Grain: Colour with a film-grain texture. */

:root[data-theme="dark"] .bgfx[data-bg="grain"]  { --grain-opacity: 0.2; }
:root[data-theme="light"] .bgfx[data-bg="grain"] { --grain-opacity: 0.22; }

.bgfx[data-bg="grain"] .fx-blob { opacity: calc(var(--blob-opacity) * 1.35); }
.bgfx[data-bg="grain"] .fx-b3 { bottom: -30cqmax; opacity: var(--blob-opacity); }
.bgfx[data-bg="grain"] .fx-grain {
    display: block; opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(themes/grain/%23n)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
}

/* ---------- spotlight ---------- */
/* Spotlight: A beam of light from the top. */

:root[data-theme="dark"] .bgfx[data-bg="spotlight"]  { --beam: 55%; } /* how much the glow fades the accent: higher = fainter */
:root[data-theme="light"] .bgfx[data-bg="spotlight"] { --beam: 45%; }

.bgfx[data-bg="spotlight"] .fx-blob { display: none; }
.bgfx[data-bg="spotlight"] .fx-pattern {
    display: block;
    background:
        radial-gradient(ellipse 30% 40% at 50% -6%, color-mix(in oklab, var(--accent), transparent var(--beam)), transparent 75%),
        conic-gradient(from 180deg at 50% -18%,
            transparent 156deg,
            color-mix(in oklab, var(--accent-2), transparent 84%) 168deg,
            color-mix(in oklab, var(--accent), transparent 68%) 180deg,
            color-mix(in oklab, var(--accent-3), transparent 84%) 192deg,
            transparent 204deg);
    mask-image: linear-gradient(#000 15%, transparent 90%);
}

/* ---------- horizon ---------- */
/* Horizon: A glowing planet rim along the bottom. */

:root[data-theme="dark"] .bgfx[data-bg="horizon"]  { --beam: 55%; }
:root[data-theme="light"] .bgfx[data-bg="horizon"] { --beam: 45%; }

.bgfx[data-bg="horizon"] .fx-blob { display: none; }
.bgfx[data-bg="horizon"] .fx-pattern {
    display: block;
    background:
        radial-gradient(ellipse 65% 42% at 50% 100%, color-mix(in oklab, var(--accent), transparent var(--beam)), transparent 72%),
        radial-gradient(ellipse 38% 28% at 26% 100%, color-mix(in oklab, var(--accent-2), transparent 80%), transparent 70%),
        radial-gradient(ellipse 38% 28% at 74% 100%, color-mix(in oklab, var(--accent-3), transparent 80%), transparent 70%);
}
.bgfx[data-bg="horizon"] .fx-pattern::after {
    content: ""; position: absolute; left: -30%; right: -30%; top: 82%; height: 140%;
    border-radius: 50%; background: var(--bg);
    border-top: 1px solid color-mix(in oklab, var(--accent), transparent 35%);
    box-shadow: 0 -1.2cqmax 5cqmax -0.8cqmax color-mix(in oklab, var(--accent), transparent 45%);
}

/* ---------- grid ---------- */
/* Grid: Fine lines fading out from the top. */

:root[data-theme="dark"] .bgfx[data-bg="grid"]  { --line: rgb(255 255 255 / 0.05); }
:root[data-theme="light"] .bgfx[data-bg="grid"] { --line: rgb(20 20 40 / 0.06); }

.bgfx[data-bg="grid"] .fx-b2, .bgfx[data-bg="grid"] .fx-b3 { display: none; }
.bgfx[data-bg="grid"] .fx-b1 { opacity: calc(var(--blob-opacity) * 0.5); }
.bgfx[data-bg="grid"] .fx-pattern {
    display: block;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 3.4cqmax 3.4cqmax;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 100%);
}

/* ---------- dots ---------- */
/* Dots: A dot grid with a soft glow. */

:root[data-theme="dark"] .bgfx[data-bg="dots"]  { --dot: rgb(255 255 255 / 0.15); }
:root[data-theme="light"] .bgfx[data-bg="dots"] { --dot: rgb(20 20 40 / 0.16); }

.bgfx[data-bg="dots"] .fx-b2, .bgfx[data-bg="dots"] .fx-b3 { display: none; }
.bgfx[data-bg="dots"] .fx-b1 { left: auto; right: -22cqmax; top: -34cqmax; opacity: calc(var(--blob-opacity) * 0.55); }
.bgfx[data-bg="dots"] .fx-pattern {
    display: block;
    background-image: radial-gradient(circle, var(--dot) max(1px, 0.09cqmax), transparent calc(max(1px, 0.09cqmax) + 0.5px));
    background-size: 1.7cqmax 1.7cqmax;
    mask-image: radial-gradient(ellipse 85% 70% at 50% 15%, #000 25%, transparent 90%);
}

/* In the small Settings tile the dots would blur together: make them coarser. */
.bgfx.fx-preview[data-bg="dots"] .fx-pattern { background-size: 7cqmax 7cqmax; background-image: radial-gradient(circle, var(--dot) 0.9px, transparent 1.4px); }

/* ---------- topography ---------- */
/* Topography: Contour lines, like a map. */

:root[data-theme="dark"] .bgfx[data-bg="topography"]  { --topo-opacity: 0.16; }
:root[data-theme="light"] .bgfx[data-bg="topography"] { --topo-opacity: 0.2; }

.bgfx[data-bg="topography"] .fx-b2 { display: none; }
.bgfx[data-bg="topography"] .fx-b1 { opacity: calc(var(--blob-opacity) * 0.55); }
.bgfx[data-bg="topography"] .fx-b3 { opacity: calc(var(--blob-opacity) * 0.35); }
.bgfx[data-bg="topography"] .fx-pattern {
    display: block; opacity: var(--topo-opacity);
    background: color-mix(in oklab, var(--accent) 45%, var(--fg));
    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M310 70c96 4 170 60 182 138s-36 158-128 184-214 8-258-70 6-176 88-222c38-22 76-32 116-30z'/%3E%3Cpath d='M306 118c70 3 124 44 133 101s-26 115-93 134-156 6-188-51 4-128 64-162c28-16 55-23 84-22z'/%3E%3Cpath d='M302 166c44 2 78 28 84 64s-17 73-59 85-99 4-119-32 3-81 40-102c18-10 35-15 54-15z'/%3E%3Cpath d='M298 214c20 1 36 13 38 29s-8 33-27 38-45 2-54-14 1-37 19-46c8-5 16-7 24-7z'/%3E%3Cpath d='M-10 468c70-34 140-40 208-14s128 70 208 58 130-54 204-46'/%3E%3Cpath d='M-10 512c70-30 140-34 208-10s128 62 208 52 130-48 204-40'/%3E%3Cpath d='M-10 556c70-26 140-28 208-6s128 54 208 46 130-42 204-34'/%3E%3Cpath d='M-10 24c60 18 120 22 176 4s116-34 170-18'/%3E%3Cpath d='M540 330c38 14 62 48 58 90s-34 72-72 76'/%3E%3Cpath d='M548 382c20 8 32 26 30 48s-18 38-38 40'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 90% 75% at 50% 30%, #000 30%, transparent 95%);
    mask-size: 42cqmax 42cqmax, 100% 100%;
    mask-repeat: repeat, no-repeat;
    mask-composite: intersect;
}

/* In the small Settings tile the lines would be too fine: zoom in. */
.bgfx.fx-preview[data-bg="topography"] .fx-pattern { mask-size: 120cqmax 120cqmax, 100% 100%; opacity: calc(var(--topo-opacity) * 2); }

/* ---------- plain ---------- */
/* Plain: Just the page colour. */

.bgfx[data-bg="plain"] .fx-blob { display: none; }