/* ============================================================================
* LiquidAuroraBackground — animated CSS aurora mesh
* "Minimal Soft Mesh + Aurora Liquid" for a premium fintech / connectivity brand.
*
* Pure CSS — no images, no JS. Several large blurred colour fields drift slowly
* and overlap → a flowing liquid mesh. Visible in BOTH themes: dark uses the
* `screen` blend (colour glows as light over navy); light uses `normal` blend
* with real colour at a soft alpha (so it actually shows on the near-white floor).
*
* ── USAGE ───────────────────────────────────────────────────────────────────
* 1) Link this file (after design-system.css):
*
* 2) Drop the layer as the FIRST child of (behind everything):
*
*
*
*
*
*
*
* 3) Give the page a transparent floor so the layer shows through:
* html { background: var(--bg-primary); }
* body { background: transparent; position: relative; }
* Content sits above automatically (this layer is z-index:-1).
*
* ── TUNING — everything is driven by the tokens below ────────────────────────
* --aurora-opacity : overall intensity (0 = off · 1 = max)
* --aurora-blur : softness of the light (bigger = dreamier / smoother)
* --aurora-speed : base motion duration (bigger = slower / calmer)
* --aurora-c1..c5 : the five hues as "R, G, B" triplets
* ========================================================================== */
:root {
/* Hues: cyan → electric-blue → teal → soft indigo → bright-cyan highlight.
No magenta / neon — stays on the Wyra brand + the "no strong purples" rule.
Want it closer to a classic aurora? nudge --aurora-c4 toward violet. */
--aurora-c1: 0, 196, 216; /* cyan (brand) */
--aurora-c2: 43, 111, 224; /* electric blue */
--aurora-c3: 26, 201, 178; /* teal */
--aurora-c4: 99, 102, 222; /* soft indigo (gentle) */
--aurora-c5: 125, 232, 245; /* bright cyan highlight */
--aurora-opacity: 0.6; /* overall intensity */
--aurora-blur: 72px; /* softness */
--aurora-speed: 26s; /* base motion speed */
}
.liquid-aurora {
position: fixed;
inset: 0;
z-index: -1; /* behind all content (content stays >= 0) */
pointer-events: none;
overflow: hidden; /* clips the oversized fields → never adds scroll */
isolation: isolate; /* contain the blend modes to this layer */
background: var(--bg-primary, #F8FAFB); /* themed on design-system pages; off-white fallback on standalone pages */
}
.liquid-aurora__field {
position: absolute;
border-radius: 50%;
opacity: var(--aurora-opacity);
filter: blur(var(--aurora-blur));
mix-blend-mode: screen; /* DARK default: colours add as light over navy */
will-change: transform;
}
/* Five overlapping fields → a flowing mesh that fills the view.
Layout: indigo top-left · cyan left · teal centre · blue bottom · bright-cyan right. */
.laf-1 { width: 60vw; height: 60vw; top: -14%; left: -12%;
background: radial-gradient(circle, rgba(var(--aurora-c4), 0.90) 0%, rgba(var(--aurora-c4), 0) 60%);
animation: laf-1 calc(var(--aurora-speed) * 1.45) ease-in-out infinite alternate; }
.laf-2 { width: 52vw; height: 52vw; top: 16%; left: -14%;
background: radial-gradient(circle, rgba(var(--aurora-c1), 0.95) 0%, rgba(var(--aurora-c1), 0) 60%);
animation: laf-2 calc(var(--aurora-speed) * 1.10) ease-in-out infinite alternate; }
.laf-3 { width: 64vw; height: 54vw; top: 30%; left: 22%;
background: radial-gradient(circle, rgba(var(--aurora-c3), 0.85) 0%, rgba(var(--aurora-c3), 0) 62%);
animation: laf-3 calc(var(--aurora-speed) * 1.70) ease-in-out infinite alternate; }
.laf-4 { width: 66vw; height: 54vw; top: 50%; left: 6%;
background: radial-gradient(circle, rgba(var(--aurora-c2), 0.90) 0%, rgba(var(--aurora-c2), 0) 60%);
animation: laf-4 calc(var(--aurora-speed) * 1.25) ease-in-out infinite alternate; }
.laf-5 { width: 52vw; height: 88vh; top: 8%; right: -20%;
background: radial-gradient(circle, rgba(var(--aurora-c5), 0.92) 0%, rgba(var(--aurora-c2), 0.32) 38%, rgba(var(--aurora-c2), 0) 66%);
animation: laf-5 var(--aurora-speed) ease-in-out infinite alternate; }
@keyframes laf-1 { 0% { transform: translate(-4%, -3%) scale(1); } 100% { transform: translate(7%, 6%) scale(1.22); } }
@keyframes laf-2 { 0% { transform: translate(3%, 2%) scale(1.05); } 100% { transform: translate(-5%, 7%) scale(1.20); } }
@keyframes laf-3 { 0% { transform: translate(-3%, 4%) scale(1.12); } 100% { transform: translate(6%, -4%) scale(1.00); } }
@keyframes laf-4 { 0% { transform: translate(4%, 3%) scale(1.05); } 100% { transform: translate(-7%, -4%) scale(1.22); } }
@keyframes laf-5 { 0% { transform: translate(2%, -4%) scale(1.00); } 100% { transform: translate(-4%, 6%) scale(1.16); } }
/* ── Light theme ──────────────────────────────────────────────────────────────
`screen` is invisible on white, so switch to `normal` and paint real colour at
a soft alpha → a luminous pastel mesh on the off-white floor (no flat white). */
@media (prefers-color-scheme: light) {
.liquid-aurora__field {
mix-blend-mode: normal;
opacity: var(--aurora-opacity);
/* tighter blur than dark → the colour pools stay DEFINED instead of washing
out into a flat haze (this was the "disipado" look). */
filter: blur(calc(var(--aurora-blur) - 22px));
}
.laf-1 { background: radial-gradient(circle, rgba(var(--aurora-c4), 0.85) 0%, rgba(var(--aurora-c4), 0) 58%); }
.laf-2 { background: radial-gradient(circle, rgba(var(--aurora-c1), 0.92) 0%, rgba(var(--aurora-c1), 0) 58%); }
.laf-3 { background: radial-gradient(circle, rgba(var(--aurora-c3), 0.82) 0%, rgba(var(--aurora-c3), 0) 60%); }
.laf-4 { background: radial-gradient(circle, rgba(var(--aurora-c2), 0.84) 0%, rgba(var(--aurora-c2), 0) 58%); }
.laf-5 { background: radial-gradient(circle, rgba(var(--aurora-c5), 0.88) 0%, rgba(var(--aurora-c2), 0.30) 40%, rgba(var(--aurora-c2), 0) 66%); }
}
/* ── Forced-light variant ─────────────────────────────────────────────────────
For standalone, light-only pages (no design-system tokens, no dark mode):
add class "liquid-aurora--light" so the pastel mesh renders regardless of the
OS colour scheme (the unconditional rules below outrank the dark defaults). */
.liquid-aurora--light .liquid-aurora__field {
mix-blend-mode: normal;
opacity: var(--aurora-opacity);
filter: blur(calc(var(--aurora-blur) - 22px));
}
.liquid-aurora--light .laf-1 { background: radial-gradient(circle, rgba(var(--aurora-c4), 0.85) 0%, rgba(var(--aurora-c4), 0) 58%); }
.liquid-aurora--light .laf-2 { background: radial-gradient(circle, rgba(var(--aurora-c1), 0.92) 0%, rgba(var(--aurora-c1), 0) 58%); }
.liquid-aurora--light .laf-3 { background: radial-gradient(circle, rgba(var(--aurora-c3), 0.82) 0%, rgba(var(--aurora-c3), 0) 60%); }
.liquid-aurora--light .laf-4 { background: radial-gradient(circle, rgba(var(--aurora-c2), 0.84) 0%, rgba(var(--aurora-c2), 0) 58%); }
.liquid-aurora--light .laf-5 { background: radial-gradient(circle, rgba(var(--aurora-c5), 0.88) 0%, rgba(var(--aurora-c2), 0.30) 40%, rgba(var(--aurora-c2), 0) 66%); }
/* ── Mobile: lighter blur keeps the effect cheap on small GPUs. ── */
@media (max-width: 640px) {
:root { --aurora-blur: 54px; }
}
/* ── Respect reduced-motion: freeze the mesh (still visible, just still). ── */
@media (prefers-reduced-motion: reduce) {
.liquid-aurora__field { animation: none !important; }
}