/**
 * Achtergrond van de site: een verloop, patroon of eigen foto achter alle inhoud.
 * Kleuren komen uit de Shapecrest-variabelen, zodat alles meeschakelt met de donkere modus.
 *
 * @author Ferhat Remory
 * @link   https://steirk.be
 */

/* De laag zelf: vast achter de pagina, de sterkte (--bg-k) schaalt elke kleur */
.f-bg::before {
    --bg-p: calc(var(--g-glow, 22%) * var(--bg-k, 1));
    --bg-c1: var(--bgc-1, var(--f-accent));
    --bg-c2: var(--bgc-2, var(--f-accent-2, #f59e0b));
    --bg-ink: color-mix(in srgb, var(--f-ink) calc(7% * var(--bg-k, 1)), transparent);
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    -webkit-mask-image: var(--bg-mask, linear-gradient(#000, #000)), var(--bg-fade, linear-gradient(#000, #000));
    mask-image: var(--bg-mask, linear-gradient(#000, #000)), var(--bg-fade, linear-gradient(#000, #000));
    -webkit-mask-size: var(--bg-mask-size, 100% 100%), 100% 100%;
    mask-size: var(--bg-mask-size, 100% 100%), 100% 100%;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* Alleen bovenaan: de laag scrolt mee en vervaagt naar de gewone achtergrond */
body.f-bg-area-top { position: relative; }

.f-bg-area-top::before {
    position: absolute;
    bottom: auto;
    height: min(1100px, 140vh);
    --bg-fade: linear-gradient(#000 40%, transparent);
}

/* Verlopen */
.f-bg-glow::before {
    background:
        radial-gradient(42% 38% at 12% 8%, color-mix(in srgb, var(--bg-c1) var(--bg-p), transparent), transparent 70%),
        radial-gradient(36% 32% at 92% 22%, color-mix(in srgb, var(--bgc-2, #ff9a6b) var(--bg-p), transparent), transparent 70%),
        radial-gradient(46% 40% at 72% 88%, color-mix(in srgb, #3ec7c2 var(--bg-p), transparent), transparent 70%),
        radial-gradient(40% 36% at 6% 78%, color-mix(in srgb, var(--bg-c1) calc(var(--bg-p) * .7), transparent), transparent 70%);
}

.f-bg-fade::before { background: linear-gradient(180deg, color-mix(in srgb, var(--bg-c1) calc(var(--bg-p) * .8), transparent), transparent 70%); }

.f-bg-aurora::before {
    background:
        radial-gradient(60% 50% at 20% 0%, color-mix(in srgb, var(--bg-c1) calc(var(--bg-p) * 1.3), transparent), transparent 70%),
        radial-gradient(50% 45% at 80% 10%, color-mix(in srgb, var(--bg-c2) calc(var(--bg-p) * .95), transparent), transparent 70%),
        radial-gradient(60% 50% at 50% 60%, color-mix(in srgb, #3ec7c2 calc(var(--bg-p) * .8), transparent), transparent 70%);
}

.f-bg-duotone::before { background: linear-gradient(135deg, color-mix(in srgb, var(--bg-c1) calc(var(--bg-p) * .75), transparent), color-mix(in srgb, var(--bg-c2) calc(var(--bg-p) * .65), transparent)); }

.f-bg-horizon::before { background: radial-gradient(90% 60% at 50% 110%, color-mix(in srgb, var(--bg-c1) calc(var(--bg-p) * 1.35), transparent), transparent 70%); }

.f-bg-spot::before { background: radial-gradient(55% 55% at 50% 0%, color-mix(in srgb, var(--bg-c1) calc(var(--bg-p) * 1.2), transparent), transparent 72%); }

/* Patronen */
.f-bg-dots::before { background: radial-gradient(color-mix(in srgb, var(--f-ink) calc(16% * var(--bg-k, 1)), transparent) 1px, transparent 1.5px) 0 0 / 22px 22px; }

.f-bg-grid::before {
    background:
        linear-gradient(var(--bg-ink) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, var(--bg-ink) 1px, transparent 1px) 0 0 / 40px 40px;
}

.f-bg-grid-fade::before {
    --bg-mask: radial-gradient(80% 60% at 50% 0%, #000 30%, transparent 85%);
    background:
        linear-gradient(color-mix(in srgb, var(--bg-c1) calc(var(--bg-p) * .65), transparent) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, color-mix(in srgb, var(--bg-c1) calc(var(--bg-p) * .65), transparent) 1px, transparent 1px) 0 0 / 32px 32px;
}

.f-bg-diagonal::before { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--f-ink) calc(6% * var(--bg-k, 1)), transparent) 0 1px, transparent 1px 14px); }

/* Kruisjes en golven zijn een vorm als masker over een vlak, zodat de kleur een variabele kan zijn */
.f-bg-crosses::before {
    --bg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 9v10M9 14h10' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
    --bg-mask-size: 28px 28px;
    background: color-mix(in srgb, var(--f-ink) calc(20% * var(--bg-k, 1)), transparent);
}

.f-bg-waves::before {
    --bg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='18'%3E%3Cpath d='M0 9c12 0 12-7 24-7s12 7 24 7' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
    --bg-mask-size: 48px 18px;
    background: color-mix(in srgb, var(--bg-c1) var(--bg-p), transparent);
}

.f-bg-rings::before { background: repeating-radial-gradient(circle at 92% 0%, transparent 0 27px, color-mix(in srgb, var(--bg-c1) calc(var(--bg-p) * .65), transparent) 27px 28px); }

.f-bg-dots-glow::before {
    background:
        radial-gradient(color-mix(in srgb, var(--f-ink) calc(14% * var(--bg-k, 1)), transparent) 1px, transparent 1.5px) 0 0 / 22px 22px,
        radial-gradient(60% 55% at 50% 0%, color-mix(in srgb, var(--bg-c1) calc(var(--bg-p) * 1.1), transparent), transparent 72%);
}

/* Eigen foto, met een waas in de achtergrondkleur zodat tekst leesbaar blijft; sterker = minder waas */
.f-bg-image::before {
    background:
        linear-gradient(color-mix(in srgb, var(--f-bg) calc(100% - 35% * var(--bg-k, 1)), transparent), color-mix(in srgb, var(--f-bg) calc(100% - 35% * var(--bg-k, 1)), transparent)),
        var(--bg-img, none) center / cover no-repeat;
}

/* Voorbeeldtegels in Shapecrest > Ontwerp: dezelfde lagen, binnen een kader */
.f-bg-tile { position: relative; overflow: hidden; isolation: isolate; background: var(--f-bg, #fff); }

.f-bg-tile::before { position: absolute; }