/* =====================================================================
Mawhiba Future — Ambient animated background (universal, theme-driven)
---------------------------------------------------------------------
Drop-in living backdrop for any lesson. Pick a theme on :
space / stars
torch-lit cave
Then add once near the top of :
...and before :
The dark gradient + drifting particles sit BEHIND the app; white cards
stay white, and text that sits directly on the backdrop is lightened.
Honors prefers-reduced-motion (renders a calm static field, no loop).
READABILITY CONTRACT (why this file owns text colour on dark themes)
--------------------------------------------------------------------
On a dark theme, any text that sits straight on the void MUST be light,
or it renders black-on-black (e.g. the writing "⏳ أراجع كتابتك…" verdict
or the "skip the question" link). We used to keep a hand-listed allowlist
of selectors to lighten — but every NEW label added to a lesson silently
inherited the dark ink and disappeared. So instead of an allowlist, we
REMAP THE TEXT TOKENS (--mhf-text / --mhf-text-dim / --mhf-text-muted) to
light values on the dark . Every element that draws its colour from
those tokens (including ones added later) is now readable by default.
White cards then RE-ASSERT the original dark tokens within their own scope
(see the reset block below), so card text stays dark. Rule of thumb when
adding a new white/light-surface container: add its class to that reset
list. Everything else is handled for you.
===================================================================== */
/* The animated canvas lives behind everything. */
#ambient-bg{
position:fixed; inset:0; width:100%; height:100%;
z-index:-2; pointer-events:none; display:block;
}
/* ---------------------------------------------------------------------
SPACE theme — deep navy void with brand teal/violet nebula glow
--------------------------------------------------------------------- */
body.amb-space{
background:
radial-gradient(ellipse 70% 55% at 78% 8%, rgba(11,213,200,0.14), transparent 55%),
radial-gradient(ellipse 80% 60% at 15% 100%, rgba(122,71,174,0.22), transparent 55%),
linear-gradient(180deg, #0a1022 0%, #070b18 55%, #05070f 100%) !important;
background-attachment:fixed !important;
/* Remap ink to light so ALL void text (current + future) stays readable. */
--mhf-text:#eef3ff;
--mhf-text-dim:#d4ddf2;
--mhf-text-muted:#c3cee8;
--mhf-hairline:rgba(255,255,255,0.12);
}
/* ---------------------------------------------------------------------
SEA theme — Red Sea depths: sunlit teal from above, deep blue below
(Week 2 · submarine expedition). Bubbles + marine snow via the JS.
--------------------------------------------------------------------- */
body.amb-sea{
background:
radial-gradient(ellipse 75% 50% at 50% -8%, rgba(11,213,200,0.26), transparent 60%),
radial-gradient(ellipse 70% 55% at 85% 100%, rgba(20,60,120,0.35), transparent 60%),
linear-gradient(180deg, #06243a 0%, #052033 45%, #031523 100%) !important;
background-attachment:fixed !important;
/* Remap ink to light so ALL void text (current + future) stays readable. */
--mhf-text:#e9f6ff;
--mhf-text-dim:#cde4f2;
--mhf-text-muted:#b7d3e6;
--mhf-hairline:rgba(255,255,255,0.12);
}
/* ---------------------------------------------------------------------
DUNGEON theme — warm charcoal cave with amber torch glow + embers
--------------------------------------------------------------------- */
body.amb-dungeon{
background:
radial-gradient(ellipse 60% 45% at 50% -5%, rgba(255,176,92,0.20), transparent 55%),
radial-gradient(ellipse 80% 60% at 12% 100%, rgba(122,71,174,0.16), transparent 55%),
linear-gradient(180deg, #1d1510 0%, #14100c 55%, #0c0908 100%) !important;
background-attachment:fixed !important;
/* Remap ink to warm light for the same reason as the space theme. */
--mhf-text:#fdf1e4;
--mhf-text-dim:#dcc5a8;
--mhf-text-muted:#cbb697;
--mhf-hairline:rgba(255,255,255,0.10);
}
/* ---------------------------------------------------------------------
White / light-surface cards re-assert the ORIGINAL dark ink so their
text stays dark on the white background. We reset the tokens AND set
`color` explicitly: tokens fix descendants that read var(--mhf-text*),
while `color:var(--mhf-text)` fixes elements that just INHERIT colour
(e.g. the option label, story text, overlay heading, star count) — those
would otherwise inherit the light body colour and vanish on white.
If you add a new white (or light, e.g. brand-yellow CTA) container, add
its class here. Pills that paint their own brand colour and live on a
tinted (non-white) chip — .speak-pill, .wgame-count — are intentionally
left out so they keep their brand hue.
--------------------------------------------------------------------- */
body.amb .stars-pill,
body.amb .time-pill,
body.amb .btn--cta,
body.amb .btn--write,
body.amb .btn--ghost,
body.amb .btn--clear,
body.amb .streak-banner,
body.amb .wgame-score .sval,
body.amb .opt,
body.amb .story-card,
body.amb .overlay-card,
body.amb .reward-stat,
body.amb .entry,
body.amb .sr-note{
--mhf-text:#1a1c1a;
--mhf-text-dim:#5c635c;
--mhf-text-muted:rgba(26,28,26,0.55);
color:var(--mhf-text);
}
/* v1.9.1 glass word options are the EXCEPTION to the white-container rule
above: .opt is listed there because options are normally white cards, but a
glass option is translucent over the dark scene, so it needs the light text
back. Higher specificity than the block above on purpose. Inert on classes
built before engine v1.9.1 (no .opt-glass in their markup). */
body.amb .opt.opt-glass{
--mhf-text:#ffffff;
--mhf-text-dim:rgba(255,255,255,.75);
--mhf-text-muted:rgba(255,255,255,.55);
color:#ffffff;
}
/* Brand chrome on the dark themes — the topbar name must not vanish.
Name → white; the leaf ![]()
shows the official mono-white tree logo. */
body.amb-space .brand,
body.amb-sea .brand,
body.amb-dungeon .brand{ color:#ffffff; }
body.amb .brand .leaf{ width:30px; height:30px; object-fit:contain; }
/* Static, calm field for users who prefer reduced motion. The JS skips the
animation loop; this just guarantees the backdrop never feels broken. */
@media (prefers-reduced-motion: reduce){
#ambient-bg{ opacity:.9; }
}