/* ========================================================================== Общий фон: поле цифр 0/1/7/8 (assets/digits.js), перелив и виньетка. Подключение: + разметка ========================================================================== */ body.digits-bg { background: radial-gradient(1100px 700px at 50% 100%, rgba(120,20,14,.10), transparent 70%), radial-gradient(900px 600px at 50% 40%, #111 0%, transparent 70%), #050505; color: #f1f0eb; } html:has(body.digits-bg) { background: #050505; } body.digits-bg::before { opacity: .35; mix-blend-mode: screen; z-index: 1; } body.digits-bg::after { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 55%, transparent 55%, rgba(0,0,0,.75) 100%); } body.digits-bg .page { position: relative; z-index: 2; } /* isolation: перелив смешивается только с цифрами, а не со всей страницей */ .bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; isolation: isolate; overflow: hidden; background: #050505; } #digits { position: absolute; inset: 0; width: 100%; height: 100%; } /* Перелив: светлая полоса едет по полю. overlay не трогает чёрный — светятся только цифры. Двигается только transform → работает на видеокарте, холст не перерисовывается. */ .bg-wave { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.85) 47%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.85) 53%, transparent 62%); mix-blend-mode: overlay; will-change: transform; animation: bg-wave 7s cubic-bezier(.45, 0, .55, 1) infinite; } .bg-wave--ember { background: radial-gradient(40% 30% at 50% 50%, rgba(214,58,44,.9), transparent 70%); mix-blend-mode: color-dodge; opacity: .5; animation: bg-ember 13s ease-in-out infinite alternate; } @keyframes bg-wave { 0% { transform: translate(-45%, -20%); } 100% { transform: translate(45%, 20%); } } @keyframes bg-ember { 0% { transform: translate(-25%, 20%); } 100% { transform: translate(25%, -15%); } } @media (prefers-reduced-motion: reduce) { .bg-wave { display: none; } } /* Чеки и текст поверх цифр */ body.digits-bg .receipt-wrap { filter: drop-shadow(0 16px 22px rgba(0,0,0,.7)) drop-shadow(0 1px 2px rgba(0,0,0,.6)); } body.digits-bg .topline { color: rgba(241,240,235,.75); } body.digits-bg .topline a:hover { color: #fff; } body.digits-bg .topline, body.digits-bg .hero, body.digits-bg .swipe-hint { text-shadow: 0 0 6px #050505, 0 0 14px #050505, 0 0 24px #050505; } body.digits-bg .hero p { color: rgba(241,240,235,.8); }