/* ════════════════════════════════════════════════════════════════════ Мистический фон: звёздное небо + nebula-свечение + vignette CSS-only, без JS, без canvas. Подключай как и оборачивай страницу в ──────────────────────────────────────────────────────────────────── */ .has-mystical-bg { position: relative; background-color: #0a0817; /* углублённый базовый фон */ } /* Слой 1: nebula-пятна (медленное «дыхание») */ .has-mystical-bg::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(ellipse 800px 600px at 15% 25%, rgba(94, 64, 158, 0.22) 0%, transparent 60%), radial-gradient(ellipse 700px 500px at 85% 70%, rgba(201, 168, 76, 0.10) 0%, transparent 60%), radial-gradient(ellipse 500px 400px at 50% 110%, rgba(168, 85, 247, 0.12) 0%, transparent 60%); animation: nebula-breathe 18s ease-in-out infinite alternate; } /* Слой 2: звёзды — статичный паттерн через множественные radial-gradient */ .has-mystical-bg::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.65), transparent), radial-gradient(1px 1px at 28% 72%, rgba(255,255,255,0.55), transparent), radial-gradient(1px 1px at 45% 32%, rgba(255,255,255,0.7), transparent), radial-gradient(1px 1px at 62% 88%, rgba(255,255,255,0.5), transparent), radial-gradient(1px 1px at 78% 14%, rgba(255,255,255,0.6), transparent), radial-gradient(1px 1px at 8% 65%, rgba(255,255,255,0.5), transparent), radial-gradient(1px 1px at 92% 42%, rgba(255,255,255,0.55), transparent), radial-gradient(1px 1px at 35% 5%, rgba(255,255,255,0.45), transparent), radial-gradient(1px 1px at 55% 55%, rgba(255,255,255,0.4), transparent), radial-gradient(1px 1px at 22% 38%, rgba(255,255,255,0.5), transparent), radial-gradient(1.5px 1.5px at 70% 22%, rgba(201,168,76,0.7), transparent), radial-gradient(1.5px 1.5px at 18% 92%, rgba(201,168,76,0.6), transparent), radial-gradient(1.5px 1.5px at 88% 78%, rgba(201,168,76,0.55), transparent), /* vignette по краям */ radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.5) 100%); background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; animation: stars-twinkle 8s ease-in-out infinite alternate; } @keyframes nebula-breathe { 0% { opacity: 0.85; transform: scale(1); } 100% { opacity: 1; transform: scale(1.05); } } @keyframes stars-twinkle { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } /* ════════════════════════════════════════════════════════════════════ Декоративные мистические символы по краям контента ──────────────────────────────────────────────────────────────────── */ .mystical-corner { position: fixed; pointer-events: none; z-index: -1; font-size: 1.4rem; color: rgba(201, 168, 76, 0.18); text-shadow: 0 0 12px rgba(201, 168, 76, 0.4); user-select: none; animation: float-symbol 12s ease-in-out infinite alternate; } .mystical-corner.tl { top: 80px; left: 32px; } .mystical-corner.tr { top: 100px; right: 40px; animation-delay: -3s; } .mystical-corner.bl { bottom: 80px; left: 40px; animation-delay: -6s; } .mystical-corner.br { bottom: 100px; right: 32px; animation-delay: -9s; } @keyframes float-symbol { 0% { transform: translateY(0) rotate(0deg); opacity: 0.4; } 50% { transform: translateY(-12px) rotate(8deg); opacity: 0.7; } 100% { transform: translateY(0) rotate(0deg); opacity: 0.4; } } @media (max-width: 768px) { .mystical-corner { display: none; } /* убираем на мобиле, мало места */ } /* ════════════════════════════════════════════════════════════════════ Scroll-reveal: элементы появляются плавно при попадании в viewport Подключай через JS (см. mystical-bg.js) ──────────────────────────────────────────────────────────────────── */ .reveal-up { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); } .reveal-up.is-visible { opacity: 1; transform: translateY(0); } .reveal-fade { opacity: 0; transition: opacity 0.9s ease; } .reveal-fade.is-visible { opacity: 1; } /* ════════════════════════════════════════════════════════════════════ Shimmer-эффект для золотых акцентов (CTA, цены, бэйджи) Применяй классом .shimmer ──────────────────────────────────────────────────────────────────── */ .shimmer { position: relative; overflow: hidden; } .shimmer::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent); animation: shimmer-slide 4s ease-in-out infinite; } @keyframes shimmer-slide { 0% { left: -100%; } 60%, 100% { left: 200%; } } /* ════════════════════════════════════════════════════════════════════ Pulse-glow для CTA-кнопок (Разложить карты, Купить...) Применяй классом .pulse-glow на кнопке ──────────────────────────────────────────────────────────────────── */ .pulse-glow { animation: pulse-glow-anim 3s ease-in-out infinite; } @keyframes pulse-glow-anim { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.0), 0 6px 18px rgba(0,0,0,0.3); } 50% { box-shadow: 0 0 0 10px rgba(201, 168, 76, 0.0), 0 0 30px rgba(201, 168, 76, 0.35), 0 6px 18px rgba(0,0,0,0.3); } }