/* ============================================================
WEBSITE CREATOR — backgrounds.css
Drop-in background & effect layers. No external files, no build.
------------------------------------------------------------
HOW TO USE
1) Make a container that fills the area you want decorated:
Full page -> ...layers...
(put it first in )
A card/hero-> ...layers...
2) Drop one or more effect LAYERS inside it, e.g.
(a base color)
(pattern on top)
(texture — put LAST)
3) Your real content goes AFTER the .bg block (or with a higher z-index).
Sources / credit in README.md
============================================================ */
.bg{pointer-events:none}
.bg-fixed{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bg-relative{position:relative;overflow:hidden}
.layer{position:absolute;inset:0;pointer-events:none}
/* ============ MESH GRADIENT BASES (pick one) ============ */
.mesh-blush{background:
radial-gradient(760px 620px at 10% 16%, rgba(255,214,232,.65), transparent 55%),
radial-gradient(820px 700px at 90% 78%, rgba(255,234,205,.60), transparent 55%),
radial-gradient(620px 520px at 78% 4%, rgba(255,255,255,.80), transparent 52%),
radial-gradient(1300px 950px at 50% 24%, #fdeef5, #f8d9e5 46%, #f1c6d6 100%);}
.mesh-royal{background:
radial-gradient(700px 560px at 12% 18%, rgba(233,196,255,.55), transparent 55%),
radial-gradient(760px 620px at 88% 80%, rgba(255,226,170,.45), transparent 55%),
radial-gradient(1300px 950px at 50% 24%, #f3e9ff, #e4d2f4 46%, #d3b8e8 100%);}
.mesh-champagne{background:
radial-gradient(700px 560px at 14% 16%, rgba(255,245,225,.8), transparent 55%),
radial-gradient(760px 620px at 86% 82%, rgba(240,220,180,.55), transparent 55%),
radial-gradient(1300px 950px at 50% 24%, #fffaf0, #f6ecd8 46%, #ecdcbf 100%);}
.mesh-emerald{background:
radial-gradient(700px 560px at 12% 18%, rgba(190,240,215,.5), transparent 55%),
radial-gradient(760px 620px at 88% 80%, rgba(255,236,180,.4), transparent 55%),
radial-gradient(1300px 950px at 50% 24%, #eafaf1, #cfeede 46%, #aad9c2 100%);}
.mesh-midnight{background:
radial-gradient(760px 620px at 74% 8%, rgba(229,52,138,.28), transparent 55%),
radial-gradient(700px 600px at 15% 85%, rgba(232,193,112,.16), transparent 55%),
radial-gradient(1300px 950px at 50% 20%, #2a1020, #170a12 55%, #0b050a 100%);}
.mesh-aurora{background:linear-gradient(120deg,#ffd6e8,#ffe9c9,#e8d6ff,#d6f0ff,#ffd6e8);
background-size:400% 400%;animation:aurora 18s ease infinite}
@keyframes aurora{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* ============ DAMASK ORNAMENTAL PATTERN (gold, tiled) ============ */
.damask{opacity:.5;background-repeat:repeat;background-size:150px 190px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='190'%3E%3Cg fill='none' stroke='%23c69a46' stroke-width='1.4' stroke-opacity='0.55' stroke-linecap='round'%3E%3Cpath d='M75 -6C72 8 78 18 75 32M75 158C72 172 78 184 75 198'/%3E%3Cpath d='M75 78C68 54 52 41 37 39C24 37 18 50 29 58C37 64 47 58 44 49'/%3E%3Cpath d='M75 78C82 54 98 41 113 39C126 37 132 50 121 58C113 64 103 58 106 49'/%3E%3Cpath d='M75 112C68 136 52 149 37 151C24 153 18 140 29 132C37 126 47 132 44 141'/%3E%3Cpath d='M75 112C82 136 98 149 113 151C126 153 132 140 121 132C113 126 103 132 106 141'/%3E%3Cpath d='M37 39C31 29 33 21 42 19'/%3E%3Cpath d='M113 39C119 29 117 21 108 19'/%3E%3C/g%3E%3Cg fill='%23c69a46' fill-opacity='0.5'%3E%3Ccircle cx='75' cy='95' r='4'/%3E%3Ccircle cx='42' cy='19' r='2'/%3E%3Ccircle cx='108' cy='19' r='2'/%3E%3Ccircle cx='75' cy='6' r='2.4'/%3E%3Ccircle cx='75' cy='184' r='2.4'/%3E%3C/g%3E%3C/svg%3E");}
/* half-drop companion: add a 2nd .damask.damask-b for denser, offset tiling */
.damask-b{opacity:.34;background-position:75px 95px}
/* hearts pattern (tiled) — add .hearts + .hearts.hearts-b for a half-drop */
.hearts{opacity:.5;background-repeat:repeat;background-size:54px 60px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='60'%3E%3Cpath d='M27 40 C10 29 10 16 18 14 C23 13 27 16 27 21 C27 16 31 13 36 14 C44 16 44 29 27 40 Z' fill='%23c69a46' fill-opacity='0.14' stroke='%23c69a46' stroke-opacity='0.5' stroke-width='1.3'/%3E%3C/svg%3E");}
.hearts-b{opacity:.34;background-position:27px 30px}
/* small trellis / quatrefoil pattern (subtler alternative) */
.trellis{opacity:.5;background-size:46px 46px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='none' stroke='%23c69a46' stroke-opacity='0.16' stroke-width='1'%3E%3Cpath d='M23 8C29 14 29 20 23 23C17 20 17 14 23 8Z'/%3E%3Cpath d='M23 38C29 32 29 26 23 23C17 26 17 32 23 38Z'/%3E%3Cpath d='M8 23C14 29 20 29 23 23C20 17 14 17 8 23Z'/%3E%3Cpath d='M38 23C32 29 26 29 23 23C26 17 32 17 38 23Z'/%3E%3Ccircle cx='23' cy='23' r='2.4'/%3E%3C/g%3E%3C/svg%3E");}
/* dot grid */
.dots{opacity:.5;background-size:24px 24px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='%23c69a46' fill-opacity='0.35'/%3E%3C/svg%3E");}
/* ============ FILM GRAIN (the 'expensive' texture) ============ */
/* feTurbulence baked into a data-uri; blends with layers beneath it */
.grain{opacity:.5;mix-blend-mode:soft-light;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.grain-strong{opacity:.8}
/* ============ VIGNETTE (edge framing) ============ */
.vignette{background:radial-gradient(125% 105% at 50% 32%, transparent 54%, rgba(120,60,90,.20) 100%)}
.vignette-dark{background:radial-gradient(125% 105% at 50% 40%, transparent 48%, rgba(0,0,0,.45) 100%)}
/* ============ BOKEH GLOW ORBS ============ */
.orb-field{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;display:block;border-radius:50%;filter:blur(70px);will-change:transform}
.orb.o1{width:44%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,205,130,.45),transparent 68%);top:4%;left:2%;animation:drift1 22s ease-in-out infinite}
.orb.o2{width:38%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,150,195,.42),transparent 68%);bottom:4%;right:3%;animation:drift2 26s ease-in-out infinite}
.orb.o3{width:32%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 64%);top:38%;right:24%;animation:drift1 30s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(6%,-5%)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-5%,4%)}}
/* ============ LIGHT BEAM / GOD RAY ============ */
.beam::before{content:"";position:absolute;top:-45%;right:2%;width:48%;height:210%;
background:linear-gradient(102deg,transparent 40%,rgba(255,255,255,.6) 49%,rgba(255,247,214,.35) 55%,transparent 64%);
transform:rotate(9deg);filter:blur(5px);animation:beamMove 8s ease-in-out infinite}
@keyframes beamMove{0%,100%{opacity:.45;transform:rotate(9deg) translateX(6px)}50%{opacity:.85;transform:rotate(9deg) translateX(-16px)}}
/* ============ ORNATE GOLD FRAME ============ */
.frame-ornate{position:absolute;inset:14px;border:1.5px solid rgba(198,154,70,.6);border-radius:12px;pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.frame-ornate::before{content:"";position:absolute;inset:5px;border:1px solid rgba(198,154,70,.28);border-radius:9px}
/* pair with the 4 corner flourishes from ornaments.svg (class .corner-fl) */
.corner-fl{position:absolute;width:clamp(90px,22%,260px);opacity:.55;pointer-events:none}
.corner-fl.tl{top:6px;left:6px}
.corner-fl.tr{top:6px;right:6px;transform:scaleX(-1)}
.corner-fl.bl{bottom:6px;left:6px;transform:scaleY(-1)}
.corner-fl.br{bottom:6px;right:6px;transform:scale(-1,-1)}
/* ============================================================
NEON / MODERN (dark) — the Website Creator's own aesthetic
============================================================ */
.mesh-ink{background:radial-gradient(1200px 820px at 50% -5%, #16161f, #0b0b12 60%, #06060b 100%)}
.mesh-cyber{background:
radial-gradient(700px 560px at 12% 10%, rgba(0,229,255,.22), transparent 55%),
radial-gradient(760px 620px at 88% 86%, rgba(255,45,149,.22), transparent 55%),
radial-gradient(1200px 900px at 50% 32%, #12121c, #0a0a12 60%, #06060b 100%)}
.mesh-synthwave{background:
radial-gradient(700px 560px at 20% 6%, rgba(124,58,237,.30), transparent 55%),
radial-gradient(700px 620px at 82% 26%, rgba(255,45,149,.24), transparent 55%),
radial-gradient(900px 700px at 50% 104%, rgba(0,229,255,.20), transparent 55%),
linear-gradient(180deg,#160f2e,#0a0716 70%,#06040e)}
.mesh-toxic{background:
radial-gradient(700px 560px at 15% 14%, rgba(170,255,0,.20), transparent 55%),
radial-gradient(760px 620px at 85% 84%, rgba(0,229,255,.20), transparent 55%),
radial-gradient(1200px 900px at 50% 30%, #0e130f, #080b09 60%, #050705 100%)}
.mesh-ember{background:
radial-gradient(700px 560px at 16% 12%, rgba(255,120,40,.22), transparent 55%),
radial-gradient(760px 620px at 86% 84%, rgba(255,45,120,.20), transparent 55%),
radial-gradient(1200px 900px at 50% 30%, #17100e, #0c0807 60%, #060403 100%)}
/* textures (pure CSS) */
.grid{background-size:40px 40px;background-image:
linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px)}
.grid-neon{background-size:42px 42px;background-image:
linear-gradient(rgba(0,229,255,.11) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,45,149,.10) 1px, transparent 1px)}
/* fade any layer toward the edges (great over grids) */
.mask-fade{-webkit-mask-image:radial-gradient(circle at 50% 38%, #000 35%, transparent 78%);
mask-image:radial-gradient(circle at 50% 38%, #000 35%, transparent 78%)}
.scanlines{background:repeating-linear-gradient(rgba(255,255,255,.05) 0 1px, transparent 1px 3px)}
/* neon glow orb colors — combine with .orb + .o1/.o2/.o3 (declared later so they win) */
.orb.oc-cyan{background:radial-gradient(circle,rgba(0,229,255,.5),transparent 68%)}
.orb.oc-magenta{background:radial-gradient(circle,rgba(255,45,149,.5),transparent 68%)}
.orb.oc-purple{background:radial-gradient(circle,rgba(168,85,247,.5),transparent 68%)}
.orb.oc-lime{background:radial-gradient(circle,rgba(170,255,0,.42),transparent 68%)}
.orb.oc-white{background:radial-gradient(circle,rgba(255,255,255,.5),transparent 66%)}
/* neon glow borders (add to a card/box) */
.glow-cyan{box-shadow:0 0 0 1px rgba(0,229,255,.5), 0 0 26px rgba(0,229,255,.32)}
.glow-magenta{box-shadow:0 0 0 1px rgba(255,45,149,.5), 0 0 26px rgba(255,45,149,.32)}
.glow-purple{box-shadow:0 0 0 1px rgba(168,85,247,.5), 0 0 26px rgba(168,85,247,.32)}
.glow-gold{box-shadow:0 0 0 1px rgba(255,207,6,.55), 0 0 26px rgba(255,207,6,.30)}
.glow-green{box-shadow:0 0 0 1px rgba(66,174,1,.55), 0 0 26px rgba(66,174,1,.30)}
/* ============================================================
GÉOMISSION — saved brand kit (forest green · gold · sunrise)
palette: forest #205C00 · grass #42AE01 · gold #FFCF06 · white #FFF · red accent #ED2900
sunrise ramp: #F05423 -> #F47320 -> #FDB515 -> #FFCF06
============================================================ */
.mesh-forest{background:
radial-gradient(700px 560px at 18% 12%, rgba(66,174,1,.38), transparent 55%),
radial-gradient(760px 640px at 84% 86%, rgba(255,207,6,.20), transparent 55%),
radial-gradient(1200px 900px at 50% 26%, #2d7a06, #205C00 55%, #143f00 100%)}
.mesh-sunrise{background:linear-gradient(180deg,#F05423,#F47320 32%,#FDB515 64%,#FFCF06)}
.mesh-sunrise-sky{background:radial-gradient(900px 560px at 50% 120%, #FFCF06, #FDB515 26%, #F47320 52%, #F05423 76%, #6e2a12 100%)}
/* radiating sun rays — layer over mesh-sunrise-sky for the sunburst idiom */
.rays{background:repeating-conic-gradient(from 0deg at 50% 62%, rgba(255,255,255,.08) 0deg 3deg, transparent 3deg 11deg)}
.rays-gold{background:repeating-conic-gradient(from 0deg at 50% 62%, rgba(255,207,6,.14) 0deg 3deg, transparent 3deg 11deg)}
/* ============================================================
LIGHT MODE BASES (clean, bright) — added v2
Pair with dark text. Great for docs, SaaS, portfolios.
============================================================ */
.mesh-daylight{background:
radial-gradient(720px 560px at 12% 10%, rgba(120,170,255,.20), transparent 55%),
radial-gradient(760px 620px at 88% 84%, rgba(180,140,255,.18), transparent 55%),
radial-gradient(1300px 950px at 50% 20%, #ffffff, #f2f6ff 55%, #e7edfb 100%)}
.mesh-paper{background:
radial-gradient(700px 560px at 16% 14%, rgba(255,238,210,.55), transparent 55%),
radial-gradient(760px 620px at 84% 82%, rgba(230,225,215,.45), transparent 55%),
radial-gradient(1300px 950px at 50% 22%, #fdfcf9, #f6f3ec 55%, #efeae0 100%)}
.mesh-sky{background:
radial-gradient(900px 600px at 50% -10%, rgba(255,255,255,.9), transparent 60%),
linear-gradient(180deg,#dff1ff,#eaf6ff 45%,#f7fbff)}
.mesh-mint{background:
radial-gradient(700px 560px at 14% 14%, rgba(120,230,190,.28), transparent 55%),
radial-gradient(760px 620px at 86% 84%, rgba(150,220,255,.22), transparent 55%),
radial-gradient(1300px 950px at 50% 22%, #f2fffb, #e3f7ef 55%, #d3efe3 100%)}
.mesh-peach{background:
radial-gradient(700px 560px at 14% 14%, rgba(255,200,170,.4), transparent 55%),
radial-gradient(760px 620px at 86% 84%, rgba(255,170,190,.3), transparent 55%),
radial-gradient(1300px 950px at 50% 22%, #fff6f1, #ffe9e0 55%, #ffdcd0 100%)}
.mesh-lavender{background:
radial-gradient(700px 560px at 14% 14%, rgba(200,180,255,.35), transparent 55%),
radial-gradient(760px 620px at 86% 84%, rgba(255,190,230,.28), transparent 55%),
radial-gradient(1300px 950px at 50% 22%, #faf7ff, #efe9fb 55%, #e4daf6 100%)}
/* ============================================================
MORE DARK / NEON BASES — added v2
============================================================ */
.mesh-plasma{background:
radial-gradient(680px 560px at 18% 12%, rgba(124,58,237,.40), transparent 55%),
radial-gradient(720px 600px at 82% 22%, rgba(0,229,255,.28), transparent 55%),
radial-gradient(760px 620px at 60% 92%, rgba(255,45,149,.30), transparent 55%),
radial-gradient(1200px 900px at 50% 30%, #140a24, #0a0616 60%, #05030c 100%)}
.mesh-ocean{background:
radial-gradient(700px 560px at 16% 12%, rgba(0,180,255,.26), transparent 55%),
radial-gradient(760px 620px at 84% 86%, rgba(0,255,200,.18), transparent 55%),
radial-gradient(1200px 900px at 50% 26%, #07202e, #04141d 60%, #020a0f 100%)}
.mesh-nebula{background:
radial-gradient(600px 480px at 22% 20%, rgba(120,80,255,.34), transparent 55%),
radial-gradient(640px 520px at 78% 30%, rgba(255,80,180,.24), transparent 55%),
radial-gradient(520px 460px at 60% 78%, rgba(0,200,255,.20), transparent 55%),
radial-gradient(1200px 900px at 50% 40%, #0d0a1f, #070512 60%, #030109 100%)}
.mesh-noir{background:
radial-gradient(900px 700px at 50% -8%, #1b1b22, #101015 55%, #070709 100%)}
.mesh-gold-noir{background:
radial-gradient(760px 620px at 74% 8%, rgba(232,193,112,.20), transparent 55%),
radial-gradient(700px 600px at 15% 88%, rgba(198,154,70,.14), transparent 55%),
radial-gradient(1200px 900px at 50% 24%, #17140d, #0d0b07 55%, #060503 100%)}
/* ============================================================
AURORA UI — animated glow (the 2026 "dream" look)
Layer over a dark base (mesh-ink / mesh-plasma / mesh-nebula).
============================================================ */
.aurora{background:
radial-gradient(60% 50% at 20% 30%, rgba(0,229,255,.30), transparent 60%),
radial-gradient(55% 55% at 80% 25%, rgba(168,85,247,.30), transparent 60%),
radial-gradient(60% 50% at 55% 85%, rgba(255,45,149,.26), transparent 60%);
background-size:200% 200%;filter:blur(6px) saturate(1.15);
animation:auroraShift 18s ease-in-out infinite}
.aurora-warm{background:
radial-gradient(60% 50% at 20% 30%, rgba(255,180,80,.30), transparent 60%),
radial-gradient(55% 55% at 80% 25%, rgba(255,90,120,.28), transparent 60%),
radial-gradient(60% 50% at 55% 85%, rgba(255,220,120,.24), transparent 60%);
background-size:200% 200%;filter:blur(6px) saturate(1.15);
animation:auroraShift 20s ease-in-out infinite}
@keyframes auroraShift{
0%,100%{background-position:0% 50%,100% 20%,50% 100%}
50%{background-position:100% 50%,0% 80%,60% 0%}}
/* roaming blobs — screen-blended, breathing (soft mesh in motion) */
.blob-field{overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(60px);mix-blend-mode:screen;will-change:transform}
.blob.bl1{width:46%;aspect-ratio:1;top:-6%;left:-4%;background:radial-gradient(circle,rgba(0,229,255,.55),transparent 66%);animation:blobRoam1 24s ease-in-out infinite}
.blob.bl2{width:40%;aspect-ratio:1;bottom:-8%;right:-4%;background:radial-gradient(circle,rgba(255,45,149,.5),transparent 66%);animation:blobRoam2 28s ease-in-out infinite}
.blob.bl3{width:38%;aspect-ratio:1;top:30%;left:45%;background:radial-gradient(circle,rgba(168,85,247,.5),transparent 66%);animation:blobRoam3 32s ease-in-out infinite}
@keyframes blobRoam1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(18%,12%) scale(1.18)}}
@keyframes blobRoam2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-16%,-10%) scale(1.22)}}
@keyframes blobRoam3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-14%,14%) scale(.85)}}
/* slow-spinning conic halo (put behind content, blurred) */
.conic-spin{top:-50%;left:-50%;width:200%;height:200%;inset:auto;
background:conic-gradient(from 0deg,#00e5ff,#a855f7,#ff2d95,#aaff00,#00e5ff);
filter:blur(58px);opacity:.35;animation:conicSpin 22s linear infinite}
.conic-spin.warm{background:conic-gradient(from 0deg,#ff7828,#ffd166,#ff2d78,#ff7828)}
@keyframes conicSpin{to{transform:rotate(360deg)}}
/* ============================================================
SPOTLIGHT — follows the cursor (set --mx/--my via Spotlight.bind)
falls back to centred if no JS.
============================================================ */
.spotlight{background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.10), transparent 60%)}
.spotlight-cyan{background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%), rgba(0,229,255,.16), transparent 60%)}
.spotlight-gold{background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%), rgba(255,207,6,.16), transparent 60%)}
/* auto pulsing spotlight (no JS needed) */
.spotlight-pulse{background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.12), transparent 55%);
animation:spotPulse 6s ease-in-out infinite}
@keyframes spotPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
/* ============================================================
MORE PATTERNS / TEXTURES — added v2 (pure CSS or tiny data-uri)
default stroke tuned for dark bases; recolor via currentColor swap.
============================================================ */
/* graph paper — fine grid + bolder major lines */
.graph{background-size:22px 22px,22px 22px,110px 110px,110px 110px;background-image:
linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px)}
/* diagonal hatch */
.diagonal{background-size:14px 14px;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 1px,transparent 1px 14px)}
/* crosshatch (both diagonals) */
.crosshatch{background-size:16px 16px;background-image:
repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 16px),
repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 16px)}
/* plus / cross grid */
.plus{opacity:.6;background-size:32px 32px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M16 11v10M11 16h10' stroke='%23ffffff' stroke-opacity='0.14' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")}
/* hexagon mesh */
.hexes{opacity:.5;background-size:56px 96px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='1.2'%3E%3Cpath d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z'/%3E%3Cpath d='M28 64 L56 80 L56 112 M28 64 L0 80 L0 112'/%3E%3C/g%3E%3C/svg%3E")}
/* layered waves */
.waves{opacity:.5;background-repeat:repeat-x;background-position:0 60%;background-size:120px 40px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cpath d='M0 20 Q30 4 60 20 T120 20' fill='none' stroke='%23ffffff' stroke-opacity='0.12' stroke-width='1.5'/%3E%3C/svg%3E")}
/* isometric / carbon weave */
.carbon{background-size:12px 12px;background-image:
repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 3px,transparent 3px 6px),
repeating-linear-gradient(-45deg,rgba(0,0,0,.20) 0 3px,transparent 3px 6px)}
/* dot grid, brighter neon variant of .dots for dark bases */
.dots-neon{opacity:.7;background-size:26px 26px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='%2300e5ff' fill-opacity='0.28'/%3E%3C/svg%3E")}
/* ============================================================
CONTRAST HELPERS — drop over a busy bg so text stays readable
============================================================ */
.tint-dark{background:linear-gradient(180deg,rgba(6,6,12,.2),rgba(6,6,12,.55))}
.tint-light{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.7))}
.tint-radial{background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(0,0,0,.5))}
/* light-base grid variants (dark lines for use on mesh-daylight etc.) */
.grid-ink{background-size:40px 40px;background-image:
linear-gradient(rgba(20,30,60,.06) 1px,transparent 1px),
linear-gradient(90deg,rgba(20,30,60,.06) 1px,transparent 1px)}
.dots-ink{opacity:.6;background-size:24px 24px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='%23335' fill-opacity='0.22'/%3E%3C/svg%3E")}
/* ============================================================
THEMED STYLE BASES — added v4 (drive the Builder's "Style" wheel)
Each is a distinct mood; pair with the matching brand kit + particles.
============================================================ */
.mesh-gothic{background:
radial-gradient(700px 560px at 20% 12%, rgba(138,15,42,.42), transparent 55%),
radial-gradient(760px 620px at 82% 86%, rgba(80,10,44,.36), transparent 55%),
radial-gradient(1200px 900px at 50% 26%, #1a0a10, #12060a 60%, #070305 100%)}
.mesh-nature{background:
radial-gradient(700px 560px at 18% 14%, rgba(96,150,44,.34), transparent 55%),
radial-gradient(760px 640px at 84% 84%, rgba(190,150,70,.22), transparent 55%),
radial-gradient(1200px 900px at 50% 26%, #1f2a16, #16200f 60%, #0b1408 100%)}
.mesh-space{background:
radial-gradient(600px 480px at 24% 20%, rgba(124,92,255,.36), transparent 55%),
radial-gradient(640px 520px at 78% 28%, rgba(0,150,255,.22), transparent 55%),
radial-gradient(520px 460px at 60% 80%, rgba(0,220,255,.14), transparent 55%),
radial-gradient(1200px 900px at 50% 40%, #0a0820, #060414 60%, #02010a 100%)}
.mesh-waterfall{background:
radial-gradient(700px 560px at 16% 12%, rgba(23,195,214,.32), transparent 55%),
radial-gradient(760px 620px at 84% 86%, rgba(20,120,180,.30), transparent 55%),
radial-gradient(1200px 900px at 50% 26%, #0a2b33, #072028 60%, #03141a 100%)}
.mesh-cyberpunk{background:
radial-gradient(700px 560px at 12% 8%, rgba(0,229,255,.30), transparent 52%),
radial-gradient(720px 600px at 88% 20%, rgba(255,45,149,.32), transparent 52%),
radial-gradient(680px 560px at 60% 92%, rgba(247,255,0,.14), transparent 55%),
radial-gradient(1200px 900px at 50% 34%, #0e0518, #08030f 60%, #040009 100%)}
.mesh-crypto{background:
radial-gradient(700px 560px at 18% 12%, rgba(247,201,72,.28), transparent 55%),
radial-gradient(760px 620px at 82% 84%, rgba(22,179,100,.26), transparent 55%),
radial-gradient(1200px 900px at 50% 26%, #12140c, #0c0e08 60%, #060703 100%)}
/* light-leaning seasonal bases */
.mesh-spring{background:
radial-gradient(700px 560px at 14% 14%, rgba(150,230,150,.42), transparent 55%),
radial-gradient(760px 620px at 86% 84%, rgba(255,190,225,.42), transparent 55%),
radial-gradient(1300px 950px at 50% 22%, #f3fff0, #eafbe6 55%, #ffeef6 100%)}
.mesh-winter{background:
radial-gradient(700px 560px at 14% 14%, rgba(180,220,255,.55), transparent 55%),
radial-gradient(760px 620px at 86% 84%, rgba(220,235,255,.55), transparent 55%),
radial-gradient(1300px 950px at 50% 22%, #f4f9ff, #e3eefb 55%, #d5e6f7 100%)}
.mesh-summer{background:
radial-gradient(700px 560px at 16% 10%, rgba(255,210,90,.55), transparent 55%),
radial-gradient(760px 620px at 84% 84%, rgba(255,130,90,.42), transparent 55%),
radial-gradient(900px 700px at 50% 112%, rgba(60,190,255,.42), transparent 60%),
radial-gradient(1300px 950px at 50% 20%, #fff7e6, #ffe9c9 60%, #ffd9b0 100%)}
.mesh-angelic{background:
radial-gradient(760px 600px at 50% -10%, rgba(255,255,255,.95), transparent 60%),
radial-gradient(760px 620px at 84% 84%, rgba(233,201,106,.35), transparent 55%),
radial-gradient(1300px 950px at 50% 30%, #fffdf6, #fbf3dd 55%, #f3e9cf 100%)}
/* ============ RAIN (animated diagonal streaks) ============ */
.rain{background-image:repeating-linear-gradient(104deg, rgba(190,215,255,.14) 0 1px, transparent 1px 9px);
background-size:9px 100%;animation:rainFall .55s linear infinite;opacity:.7}
@keyframes rainFall{from{background-position:0 0}to{background-position:-30px 60px}}
/* ============ LIGHTNING (occasional screen flash) ============ */
.lightning{mix-blend-mode:screen;background:rgba(200,220,255,0);animation:lightning 8s linear infinite}
@keyframes lightning{
0%,90%,100%{background:rgba(200,220,255,0)}
91%{background:rgba(210,225,255,.30)} 92%{background:rgba(200,220,255,0)}
94%{background:rgba(220,232,255,.55)} 95%{background:rgba(200,220,255,0)} 96%{background:rgba(210,225,255,.22)} 97%{background:rgba(200,220,255,0)}}
/* ============================================================
CATEGORY SIGNATURE PATTERNS — added v4.4 (drive the Builder's
per-type backgrounds). Subtle, tile-repeating, theme-neutral.
============================================================ */
/* CIRCUIT board — traces, pads & vias, gently illuminating (crypto / electric / tech) */
.circuit{background-repeat:repeat;background-size:80px 80px;animation:circuitGlow 4.5s ease-in-out infinite;
filter:drop-shadow(0 0 3px rgba(160,240,255,.4));
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23a9e9ff' stroke-opacity='0.4' stroke-width='1.4'%3E%3Cpath d='M12 0 V26 H40'/%3E%3Cpath d='M40 26 V54'/%3E%3Cpath d='M40 54 H74 V80'/%3E%3Cpath d='M0 40 H24 V64'/%3E%3Cpath d='M80 14 H56 V38'/%3E%3Cpath d='M12 80 V60'/%3E%3C/g%3E%3Cg fill='%23a9e9ff' fill-opacity='0.5'%3E%3Ccircle cx='12' cy='26' r='2.2'/%3E%3Ccircle cx='40' cy='54' r='2.2'/%3E%3Ccircle cx='24' cy='40' r='2'/%3E%3Ccircle cx='56' cy='38' r='2'/%3E%3Crect x='38' y='24' width='4' height='4'/%3E%3Crect x='72' y='52' width='4' height='4'/%3E%3C/g%3E%3C/svg%3E")}
@keyframes circuitGlow{0%,100%{opacity:.5}50%{opacity:.92}}
/* traveling light — a highlight band that sweeps diagonally (layer over .circuit for the
"illuminating in patterns" effect). Colour it with a .wash-* layer above. */
.energy{mix-blend-mode:screen;background-size:250% 250%;animation:energySweep 4s linear infinite;
background-image:linear-gradient(115deg,transparent 40%,rgba(190,255,225,.16) 48%,rgba(190,255,225,.36) 50%,rgba(190,255,225,.16) 52%,transparent 60%)}
@keyframes energySweep{0%{background-position:120% 0}100%{background-position:-20% 100%}}
/* BLUEPRINT — fine grid + ticks + arc (tools / renovation / architecture) */
.blueprint{background-repeat:repeat;background-size:80px 80px,80px 80px,80px 80px;
background-image:
linear-gradient(rgba(150,200,255,.10) 1px,transparent 1px),
linear-gradient(90deg,rgba(150,200,255,.10) 1px,transparent 1px),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%2396c8ff' stroke-opacity='0.3' stroke-width='1.2'%3E%3Cpath d='M0 0 H10 M0 0 V10'/%3E%3Ccircle cx='40' cy='40' r='16'/%3E%3Cpath d='M40 20 V26 M40 54 V60 M20 40 H26 M54 40 H60'/%3E%3Cpath d='M64 8 L72 16'/%3E%3C/g%3E%3C/svg%3E");
background-size:20px 20px,20px 20px,80px 80px}
/* PIPES — rounded plumbing runs & joints (plumbing / water) */
.pipes{background-repeat:repeat;background-size:90px 90px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='none' stroke='%239fdcff' stroke-opacity='0.34' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M10 0 V40 a12 12 0 0 0 12 12 H60'/%3E%3Cpath d='M78 20 V60 a12 12 0 0 1 -12 12 H30'/%3E%3C/g%3E%3Cg fill='%239fdcff' fill-opacity='0.4'%3E%3Ccircle cx='10' cy='6' r='3'/%3E%3Ccircle cx='78' cy='84' r='3'/%3E%3C/g%3E%3C/svg%3E")}
/* TOPO — contour lines (outdoors / activities / eco) */
.topo{background-repeat:repeat;background-size:120px 120px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23a7e0b8' stroke-opacity='0.26' stroke-width='1.3'%3E%3Cpath d='M60 30 C90 30 100 60 90 80 C80 100 40 100 30 80 C20 60 30 30 60 30Z'/%3E%3Cpath d='M60 45 C80 45 86 62 80 76 C74 90 46 90 40 76 C34 62 40 45 60 45Z'/%3E%3Cpath d='M60 58 C72 58 76 68 72 76 C68 84 52 84 48 76 C44 68 48 58 60 58Z'/%3E%3C/g%3E%3C/svg%3E")}
/* NEON WASH — pulsing coloured glow, layer over a pattern for "illuminating" */
.wash-green,.wash-gold,.wash-cyan,.wash-blue,.wash-pink,.wash-purple{mix-blend-mode:screen;animation:washPulse 5s ease-in-out infinite}
.wash-green{background:radial-gradient(72% 60% at 50% 58%, rgba(22,240,138,.22), transparent 72%)}
.wash-gold{background:radial-gradient(72% 60% at 50% 58%, rgba(247,201,72,.22), transparent 72%)}
.wash-cyan{background:radial-gradient(72% 60% at 50% 58%, rgba(0,229,255,.20), transparent 72%)}
.wash-blue{background:radial-gradient(72% 60% at 50% 58%, rgba(60,150,255,.22), transparent 72%)}
.wash-pink{background:radial-gradient(72% 60% at 50% 58%, rgba(255,90,170,.20), transparent 72%)}
.wash-purple{background:radial-gradient(72% 60% at 50% 58%, rgba(150,90,255,.22), transparent 72%)}
@keyframes washPulse{0%,100%{opacity:.55}50%{opacity:1}}
/* ============ reduced-motion courtesy ============ */
@media (prefers-reduced-motion: reduce){
.mesh-aurora,.orb,.beam::before,.aurora,.aurora-warm,.blob,.conic-spin,.spotlight-pulse,.rain,.lightning,
.circuit,.wash-green,.wash-gold,.wash-cyan,.wash-blue,.wash-pink,.wash-purple{animation:none!important}
.lightning{background:rgba(200,220,255,.06)}
}
/* ==== TruScan — scan / security / truth atmosphere ==== */
.scanbeam{position:absolute;left:-30%;right:-30%;height:38%;top:-20%;pointer-events:none;
background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--brand) 10%,transparent) 46%,color-mix(in srgb,var(--accent) 18%,transparent) 50%,transparent);
filter:blur(6px);transform:rotate(8deg);animation:ts-sweep 14s linear infinite}
@keyframes ts-sweep{0%{top:-30%}100%{top:120%}}
.reticle{position:absolute;inset:-20% 0;opacity:.5;pointer-events:none;will-change:background-position;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%2334c2d1' stroke-width='1' opacity='0.5'%3E%3Cpath d='M48 40v16M40 48h16'/%3E%3C/g%3E%3Ccircle cx='48' cy='48' r='1.4' fill='%235fe0ef'/%3E%3C/svg%3E");
background-size:96px 96px}
@media (prefers-reduced-motion: reduce){.scanbeam{animation:none}}