/* Decorative page background — loaded on the website and in the admin/mentor areas. */
/* ==========================================================================
   Decorative background (Admin → Settings → Homepage → Look)
   ========================================================================== */
html:has(.bg-fx) { background: #0E0F0C; }
body:has(> .bg-fx) { background: transparent !important; }
/* Admin and mentor areas (Filament): let the effect show behind the content */
body.fi-body:has(> .bg-fx) .fi-layout, body.fi-body:has(> .bg-fx) .fi-main-ctn { background: transparent !important; }
.bg-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-fx-soft { --fx: 16%; --fx-o: .7; }
.bg-fx-medium { --fx: 26%; --fx-o: .9; }
.bg-fx-strong { --fx: 38%; --fx-o: 1; }
.fx-blob {
    position: absolute; border-radius: 50%; filter: blur(60px); opacity: var(--fx-o);
    background: radial-gradient(closest-side, rgba(198, 242, 78, .2), transparent);
    /* Two overlapping puffs look more like a cloud than one round glow */
    background:
        radial-gradient(closest-side at 35% 45%, color-mix(in srgb, var(--accent) var(--fx), transparent), transparent),
        radial-gradient(closest-side at 65% 60%, color-mix(in srgb, var(--accent) calc(var(--fx) * .7), transparent), transparent 90%);
}
/* Clouds: soft glow on the left and right edges */
.fx-l1 { width: 46vw; height: 62vh; left: -22vw; top: 6vh; }
.fx-l2 { width: 34vw; height: 44vh; left: -12vw; top: 58vh; }
.fx-r1 { width: 44vw; height: 58vh; right: -21vw; top: 30vh; }
.fx-r2 { width: 30vw; height: 40vh; right: -10vw; top: -8vh; }

/* Aurora: wide bands across the top corners */
.bg-fx-aurora .fx-l1 { width: 70vw; height: 30vh; left: -20vw; top: -6vh; transform: rotate(-12deg); border-radius: 45%; }
.bg-fx-aurora .fx-r1 { width: 70vw; height: 28vh; right: -24vw; top: 12vh; transform: rotate(10deg); border-radius: 45%; }
.bg-fx-aurora .fx-l2 { width: 40vw; height: 40vh; left: -18vw; top: 70vh; }
.bg-fx-aurora .fx-r2 { width: 34vw; height: 34vh; right: -14vw; top: 78vh; background: radial-gradient(closest-side, rgba(56, 189, 248, .10), transparent); }

/* Storm: darker clouds with faint lightning on both sides */
.bg-fx-storm .fx-blob { filter: blur(48px); }
.bg-fx-storm .fx-l2, .bg-fx-storm .fx-r2 { background: radial-gradient(closest-side, rgba(120, 130, 110, .14), transparent); }
.fx-bolt { position: absolute; width: 90px; height: 46vh; opacity: calc(var(--fx-o) * .55); filter: drop-shadow(0 0 8px var(--accent)); }
.fx-bolt polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fx-bolt-l { left: 1.5vw; top: 14vh; }
.fx-bolt-r { right: 1.5vw; top: 46vh; transform: scaleX(-1); }

/* Grid: glow plus a faint grid that fades towards the middle */
.fx-grid {
    position: absolute; inset: 0; opacity: var(--fx-o);
    background-image: linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000);
    mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000);
}
@media (max-width: 1100px) { .fx-bolt { display: none; } }
@media (max-width: 700px) { .fx-blob { filter: blur(40px); } }


/* Phones can have their own effect (Look → "On phones") */
@media (max-width: 700px) { .bg-fx.fx-desktop-only { display: none; } }
@media (min-width: 701px) { .bg-fx.fx-mobile-only { display: none; } }

/* Effects made for narrow screens: sizes follow the screen width, so they stay round */
.fx-m1, .fx-m2 {
    filter: blur(30px);
    background:
        radial-gradient(closest-side at 40% 45%, color-mix(in srgb, var(--accent) calc(var(--fx) * 1.5), transparent), transparent),
        radial-gradient(closest-side at 60% 60%, color-mix(in srgb, var(--accent) var(--fx), transparent), transparent 90%);
}
/* Soft glow at the top, behind the menu */
.bg-fx-topglow .fx-m1 { width: 150vw; height: 95vw; left: -25vw; top: -48vw; }
.bg-fx-topglow .fx-m2 { width: 80vw; height: 60vw; right: -30vw; top: 20vw; opacity: calc(var(--fx-o) * .45); }
/* Glow at the bottom of the screen */
.bg-fx-bottomglow .fx-m1 { width: 150vw; height: 95vw; left: -25vw; bottom: -52vw; }
.bg-fx-bottomglow .fx-m2 { width: 70vw; height: 55vw; left: -30vw; top: 6vw; opacity: calc(var(--fx-o) * .4); }
/* Two corners: top left and bottom right */
.bg-fx-corners .fx-m1 { width: 100vw; height: 100vw; left: -50vw; top: -42vw; }
.bg-fx-corners .fx-m2 { width: 100vw; height: 100vw; right: -50vw; bottom: -42vw; }
/* Faint dots with a glow at the top */
.bg-fx-dots .fx-m1 { width: 140vw; height: 85vw; left: -20vw; top: -45vw; }
.bg-fx-dots .fx-m2 { display: none; }
.fx-dots {
    position: absolute; inset: 0; opacity: var(--fx-o);
    background-image: radial-gradient(color-mix(in srgb, var(--accent) 40%, rgba(255, 255, 255, .2)) 1px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%);
    mask-image: linear-gradient(180deg, #000, transparent 55%);
}
/* Thin glow along both edges */
.bg-fx-edges .fx-m1, .bg-fx-edges .fx-m2 { width: 30vw; height: 110vh; top: -5vh; border-radius: 40%; filter: blur(22px); }
.bg-fx-edges .fx-m1 { left: -17vw; }
.bg-fx-edges .fx-m2 { right: -17vw; }