/* ======================================== 🔥 АНИМИРОВАННЫЕ ФОНЫ С ПЕРЕЛИВАМИ ======================================== Топовые градиентные фоны в стиле: - Stripe Mesh Gradient - Vercel Aurora - Apple Liquid Gradient - Linear Wave Gradient Добавьте класс к : - gradient-mesh - gradient-aurora - gradient-liquid - gradient-waves - gradient-flame - gradient-cosmic */ /* ======================================== 1. MESH GRADIENT (Stripe Style) ======================================== */ body.gradient-mesh { background: #000; position: relative; } body.gradient-mesh::before { content: ''; position: fixed; top: -50%; left: -50%; right: -50%; bottom: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 20% 50%, rgba(220, 38, 38, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(249, 115, 22, 0.15) 0%, transparent 50%), radial-gradient(circle at 40% 20%, rgba(239, 68, 68, 0.12) 0%, transparent 50%), radial-gradient(circle at 80% 30%, rgba(251, 146, 60, 0.12) 0%, transparent 50%), radial-gradient(circle at 30% 80%, rgba(252, 165, 165, 0.1) 0%, transparent 50%); filter: blur(80px); animation: mesh-gradient 20s ease-in-out infinite; z-index: 0; } @keyframes mesh-gradient { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(10%, -10%) rotate(5deg); } 50% { transform: translate(-5%, 10%) rotate(-5deg); } 75% { transform: translate(-10%, -5%) rotate(3deg); } } /* ======================================== 2. AURORA (Полярное сияние) ======================================== */ body.gradient-aurora { background: #000; position: relative; } body.gradient-aurora::before, body.gradient-aurora::after { content: ''; position: fixed; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 0; } body.gradient-aurora::before { background: linear-gradient(120deg, transparent 0%, rgba(220, 38, 38, 0.08) 20%, rgba(249, 115, 22, 0.12) 40%, rgba(239, 68, 68, 0.08) 60%, transparent 80% ); animation: aurora-wave 15s ease-in-out infinite; filter: blur(60px); } body.gradient-aurora::after { background: linear-gradient(240deg, transparent 0%, rgba(251, 146, 60, 0.1) 25%, rgba(220, 38, 38, 0.15) 50%, rgba(252, 165, 165, 0.08) 75%, transparent 100% ); animation: aurora-wave-reverse 18s ease-in-out infinite; filter: blur(80px); } @keyframes aurora-wave { 0%, 100% { transform: translateY(0) scaleX(1); opacity: 0.8; } 33% { transform: translateY(-20%) scaleX(1.1); opacity: 1; } 66% { transform: translateY(10%) scaleX(0.9); opacity: 0.9; } } @keyframes aurora-wave-reverse { 0%, 100% { transform: translateY(0) scaleX(1); opacity: 0.7; } 33% { transform: translateY(15%) scaleX(0.95); opacity: 0.9; } 66% { transform: translateY(-15%) scaleX(1.05); opacity: 1; } } /* ======================================== 3. LIQUID GRADIENT (Apple Style) ======================================== */ body.gradient-liquid { background: #000; position: relative; overflow: hidden; } body.gradient-liquid::before { content: ''; position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 30% 40%, rgba(220, 38, 38, 0.2) 0%, transparent 40%), radial-gradient(ellipse at 70% 60%, rgba(249, 115, 22, 0.18) 0%, transparent 40%), radial-gradient(ellipse at 50% 80%, rgba(239, 68, 68, 0.15) 0%, transparent 40%); filter: blur(100px); animation: liquid-flow 25s ease-in-out infinite; z-index: 0; } @keyframes liquid-flow { 0%, 100% { transform: translate(0, 0) scale(1); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 25% { transform: translate(5%, -5%) scale(1.05); border-radius: 40% 60% 70% 30% / 50% 60% 30% 60%; } 50% { transform: translate(-5%, 5%) scale(0.95); border-radius: 70% 30% 50% 50% / 30% 60% 70% 40%; } 75% { transform: translate(-3%, -3%) scale(1.02); border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%; } } /* ======================================== 4. WAVES GRADIENT (Linear Style) ======================================== */ body.gradient-waves { background: #000; position: relative; } .gradient-waves-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; pointer-events: none; } .gradient-waves-bg::before, .gradient-waves-bg::after { content: ''; position: absolute; width: 200%; height: 200%; } .gradient-waves-bg::before { top: -50%; left: -50%; background: linear-gradient(45deg, transparent 0%, rgba(220, 38, 38, 0.1) 25%, rgba(249, 115, 22, 0.15) 50%, rgba(220, 38, 38, 0.1) 75%, transparent 100% ); animation: waves-diagonal 20s linear infinite; filter: blur(60px); } .gradient-waves-bg::after { bottom: -50%; right: -50%; background: linear-gradient(-45deg, transparent 0%, rgba(251, 146, 60, 0.08) 30%, rgba(239, 68, 68, 0.12) 60%, transparent 100% ); animation: waves-diagonal-reverse 25s linear infinite; filter: blur(70px); } @keyframes waves-diagonal { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes waves-diagonal-reverse { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(50%, 50%) rotate(-360deg); } } /* ======================================== 5. FLAME GRADIENT (Огненный) ======================================== */ body.gradient-flame { background: #000; position: relative; } body.gradient-flame::before { content: ''; position: fixed; bottom: -30%; left: 50%; transform: translateX(-50%); width: 150%; height: 150%; background: radial-gradient(ellipse at 50% 100%, rgba(220, 38, 38, 0.25) 0%, rgba(249, 115, 22, 0.18) 20%, rgba(251, 146, 60, 0.12) 35%, rgba(252, 165, 165, 0.06) 50%, transparent 70% ); filter: blur(80px); animation: flame-flicker 8s ease-in-out infinite; z-index: 0; } @keyframes flame-flicker { 0%, 100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; } 25% { transform: translateX(-48%) translateY(-5%) scale(1.05); opacity: 0.9; } 50% { transform: translateX(-52%) translateY(-8%) scale(0.98); opacity: 0.95; } 75% { transform: translateX(-49%) translateY(-3%) scale(1.02); opacity: 0.92; } } /* ======================================== 6. COSMIC GRADIENT (Космический) ======================================== */ body.gradient-cosmic { background: #000; position: relative; } body.gradient-cosmic::before, body.gradient-cosmic::after { content: ''; position: fixed; width: 600px; height: 600px; border-radius: 50%; pointer-events: none; z-index: 0; } body.gradient-cosmic::before { top: 10%; right: 15%; background: radial-gradient(circle, rgba(220, 38, 38, 0.2) 0%, rgba(249, 115, 22, 0.15) 30%, rgba(251, 146, 60, 0.08) 60%, transparent 100% ); filter: blur(80px); animation: cosmic-orbit 30s linear infinite; } body.gradient-cosmic::after { bottom: 15%; left: 10%; background: radial-gradient(circle, rgba(239, 68, 68, 0.18) 0%, rgba(220, 38, 38, 0.12) 40%, rgba(252, 165, 165, 0.06) 70%, transparent 100% ); filter: blur(90px); animation: cosmic-orbit-reverse 35s linear infinite; } @keyframes cosmic-orbit { 0% { transform: rotate(0deg) translateX(100px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(100px) rotate(-360deg); } } @keyframes cosmic-orbit-reverse { 0% { transform: rotate(0deg) translateX(-80px) rotate(0deg); } 100% { transform: rotate(-360deg) translateX(-80px) rotate(360deg); } } /* ======================================== 7. GLOW PARTICLES (Светящиеся частицы) ======================================== */ body.gradient-particles { background: #000; position: relative; } .gradient-particles-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; pointer-events: none; } .particle { position: absolute; width: 200px; height: 200px; border-radius: 50%; filter: blur(60px); opacity: 0.15; } .particle:nth-child(1) { top: 20%; left: 10%; background: radial-gradient(circle, rgba(220, 38, 38, 0.8) 0%, transparent 70%); animation: particle-float 25s ease-in-out infinite; } .particle:nth-child(2) { top: 60%; right: 15%; background: radial-gradient(circle, rgba(249, 115, 22, 0.7) 0%, transparent 70%); animation: particle-float 30s ease-in-out infinite 5s; } .particle:nth-child(3) { bottom: 20%; left: 50%; background: radial-gradient(circle, rgba(239, 68, 68, 0.6) 0%, transparent 70%); animation: particle-float 28s ease-in-out infinite 10s; } .particle:nth-child(4) { top: 40%; right: 30%; background: radial-gradient(circle, rgba(251, 146, 60, 0.5) 0%, transparent 70%); animation: particle-float 32s ease-in-out infinite 15s; } @keyframes particle-float { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(50px, -80px) scale(1.2); } 50% { transform: translate(-30px, 60px) scale(0.9); } 75% { transform: translate(70px, 30px) scale(1.1); } } /* ======================================== 8. RAINBOW FLOW (Радужный поток) ======================================== */ body.gradient-rainbow { background: #000; position: relative; } body.gradient-rainbow::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(220, 38, 38, 0.12) 0%, rgba(249, 115, 22, 0.15) 25%, rgba(251, 146, 60, 0.12) 50%, rgba(239, 68, 68, 0.10) 75%, rgba(252, 165, 165, 0.08) 100% ); filter: blur(100px); animation: rainbow-shift 15s ease-in-out infinite; z-index: 0; } @keyframes rainbow-shift { 0%, 100% { transform: translateX(0) scaleX(1); } 33% { transform: translateX(10%) scaleX(1.1); } 66% { transform: translateX(-10%) scaleX(0.9); } } /* ======================================== СОХРАНИТЬ NOISE И ДРУГИЕ ЭЛЕМЕНТЫ ======================================== */ /* Noise остается поверх всех градиентов */ body[class*="gradient-"] .noise { z-index: 1; } /* Контент поверх градиентов */ body[class*="gradient-"] > *:not(.noise):not(::before):not(::after) { position: relative; z-index: 2; } /* ======================================== PERFORMANCE OPTIMIZATION ======================================== */ @media (prefers-reduced-motion: reduce) { body[class*="gradient-"]::before, body[class*="gradient-"]::after, .particle { animation: none !important; } } /* Для мобильных устройств - упрощенные анимации */ @media (max-width: 768px) { body[class*="gradient-"]::before, body[class*="gradient-"]::after { filter: blur(60px) !important; } }