/* ===================================================== ZhenyaCloud · фоновые темы Активируется через атрибут Интенсивность управляется через --bg-i (0..2, 1 = норма) Варианты: plain · mesh · aurora · dots · grain · stars ===================================================== */ html[data-bg] { --bg-i: 1; /* множитель интенсивности 0..2 */ } html[data-bg] body::before, html[data-bg] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; } html[data-bg] body::before { z-index: -2; } html[data-bg] body::after { z-index: -1; } /* ---------- 1. plain ---------- */ html[data-bg="plain"] body::before { background: radial-gradient(900px 500px at 50% -10%, rgba(255, 182, 39, calc(0.18 * var(--bg-i))), transparent 60%), radial-gradient(700px 500px at 10% 110%, rgba(139, 92, 246, calc(0.14 * var(--bg-i))), transparent 60%); } html[data-bg="plain"] body::after { background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,255,255,calc(0.014 * var(--bg-i))) 2px, rgba(255,255,255,calc(0.014 * var(--bg-i))) 3px); } /* ---------- 2. mesh ---------- */ html[data-bg="mesh"] body::before { background: radial-gradient(900px 600px at 0% -10%, rgba(139, 92, 246, calc(0.85 * var(--bg-i))), transparent 55%), radial-gradient(900px 600px at 100% 0%, rgba(255, 138, 0, calc(0.65 * var(--bg-i))), transparent 55%), radial-gradient(800px 600px at 50% 110%, rgba(52, 211, 153, calc(0.50 * var(--bg-i))), transparent 60%), radial-gradient(700px 500px at 80% 75%, rgba(244, 114, 182,calc(0.45 * var(--bg-i))), transparent 60%), radial-gradient(600px 500px at 15% 60%, rgba(99, 102, 241, calc(0.40 * var(--bg-i))), transparent 60%); } html[data-bg="mesh"] body::after { background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,255,255,calc(0.014 * var(--bg-i))) 2px, rgba(255,255,255,calc(0.014 * var(--bg-i))) 3px); } /* ---------- 3. aurora ---------- */ html[data-bg="aurora"] body::before { background: linear-gradient(120deg, rgba(139, 92, 246, calc(0.75 * var(--bg-i))) 0%, transparent 55%), linear-gradient(60deg, rgba(52, 211, 153, calc(0.55 * var(--bg-i))) 0%, transparent 60%), radial-gradient(900px 600px at 30% 20%, rgba(255, 182, 39, calc(0.50 * var(--bg-i))), transparent 60%), radial-gradient(800px 600px at 80% 80%, rgba(244, 114, 182,calc(0.45 * var(--bg-i))), transparent 60%); animation: zc-aurora 18s ease-in-out infinite alternate; will-change: transform, filter; filter: blur(1px); } html[data-bg="aurora"] body::after { background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,255,255,calc(0.012 * var(--bg-i))) 2px, rgba(255,255,255,calc(0.012 * var(--bg-i))) 3px); } @keyframes zc-aurora { 0% { transform: translate3d(0, 0, 0) scale(1.05); filter: blur(1px) hue-rotate(0deg); } 50% { transform: translate3d(-3%, 2%, 0) scale(1.12); filter: blur(1px) hue-rotate(30deg); } 100% { transform: translate3d(3%, -2%, 0) scale(1.05); filter: blur(1px) hue-rotate(-25deg); } } /* ---------- 4. dots ---------- */ html[data-bg="dots"] body::before { background-color: transparent; background-image: radial-gradient(circle, rgba(255, 255, 255, calc(0.18 * var(--bg-i))) 1.2px, transparent 1.8px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(circle at 50% 30%, black 0%, transparent 80%); mask-image: radial-gradient(circle at 50% 30%, black 0%, transparent 80%); } html[data-bg="dots"] body::after { background: radial-gradient(900px 600px at 80% -5%, rgba(255, 182, 39, calc(0.25 * var(--bg-i))), transparent 60%), radial-gradient(700px 500px at 15% 110%, rgba(139, 92, 246, calc(0.22 * var(--bg-i))), transparent 60%); } /* ---------- 5. grain ---------- */ html[data-bg="grain"] body::before { background: radial-gradient(900px 600px at 25% -5%, rgba(255, 182, 39, calc(0.32 * var(--bg-i))), transparent 60%), radial-gradient(900px 600px at 80% 80%, rgba(139, 92, 246, calc(0.36 * var(--bg-i))), transparent 60%), radial-gradient(700px 500px at 50% 110%, rgba(52, 211, 153, calc(0.22 * var(--bg-i))), transparent 60%); } html[data-bg="grain"] body::after { background-image: url("data:image/svg+xml;utf8,"); background-size: 220px 220px; opacity: calc(0.14 * var(--bg-i)); mix-blend-mode: screen; } /* ---------- 6. stars ---------- */ html[data-bg="stars"] body::before { background: radial-gradient(2.5px 2.5px at 11% 13%, rgba(255,255,255,calc(0.95 * var(--bg-i))), transparent 60%), radial-gradient(1.5px 1.5px at 23% 41%, rgba(255,255,255,calc(0.85 * var(--bg-i))), transparent 60%), radial-gradient(2px 2px at 37% 27%, rgba(255,255,255,calc(0.75 * var(--bg-i))), transparent 60%), radial-gradient(1.5px 1.5px at 49% 67%, rgba(255,255,255,calc(0.85 * var(--bg-i))), transparent 60%), radial-gradient(2.5px 2.5px at 61% 19%, rgba(255,255,255,calc(0.80 * var(--bg-i))), transparent 60%), radial-gradient(1.5px 1.5px at 71% 53%, rgba(255,255,255,calc(0.75 * var(--bg-i))), transparent 60%), radial-gradient(2px 2px at 83% 31%, rgba(255,255,255,calc(0.85 * var(--bg-i))), transparent 60%), radial-gradient(1.5px 1.5px at 91% 73%, rgba(255,255,255,calc(0.70 * var(--bg-i))), transparent 60%), radial-gradient(1.5px 1.5px at 16% 81%, rgba(255,255,255,calc(0.70 * var(--bg-i))), transparent 60%), radial-gradient(2px 2px at 44% 88%, rgba(255,255,255,calc(0.75 * var(--bg-i))), transparent 60%), radial-gradient(1.5px 1.5px at 7% 55%, rgba(255,255,255,calc(0.70 * var(--bg-i))), transparent 60%), radial-gradient(2px 2px at 56% 9%, rgba(255,255,255,calc(0.80 * var(--bg-i))), transparent 60%), radial-gradient(1.5px 1.5px at 34% 95%, rgba(255,255,255,calc(0.65 * var(--bg-i))), transparent 60%), radial-gradient(2px 2px at 78% 88%, rgba(255,255,255,calc(0.75 * var(--bg-i))), transparent 60%), radial-gradient(1100px 700px at 50% -10%, rgba(139, 92, 246, calc(0.32 * var(--bg-i))), transparent 60%), radial-gradient(900px 600px at 80% 90%, rgba(244, 114, 182,calc(0.22 * var(--bg-i))), transparent 60%); animation: zc-twinkle 4s ease-in-out infinite; } html[data-bg="stars"] body::after { background: radial-gradient(900px 500px at 50% 100%, rgba(255, 182, 39, calc(0.20 * var(--bg-i))), transparent 60%), radial-gradient(700px 500px at 20% 30%, rgba(52, 211, 153, calc(0.18 * var(--bg-i))), transparent 60%); } @keyframes zc-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* Респект пользователям, у которых отключены анимации */ @media (prefers-reduced-motion: reduce) { html[data-bg="aurora"] body::before, html[data-bg="stars"] body::before { animation: none !important; } }