/* SpyMeLive: живой 3D-фон (плита Artlist + парящие объекты + мягкие огни). Слои глубины двигаются от курсора и прокрутки. */
.bg3d { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: layout paint; background: var(--bg); }
.bg3d-pl { position: absolute; inset: -4%; display: block; transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px + var(--sy, 0) * -.025px), 0); transition: transform .5s var(--ease); will-change: transform; }
.bg3d-pl img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; animation: bgBreathe 28s ease-in-out infinite alternate; }
@keyframes bgBreathe { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.09) translate3d(-1.2%, -1%, 0); } }

/* Мягкие огни поверх плиты: дышат */
.bg3d-glow { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform, opacity; }
.bg3d-glow.g1 { width: 64vmax; height: 64vmax; right: -22vmax; top: -26vmax; background: radial-gradient(closest-side, rgba(255, 106, 77, .34), transparent 72%); animation: glowA 13s ease-in-out infinite alternate; }
.bg3d-glow.g2 { width: 58vmax; height: 58vmax; left: -24vmax; bottom: -24vmax; background: radial-gradient(closest-side, rgba(45, 212, 191, .26), transparent 72%); animation: glowA 17s ease-in-out -6s infinite alternate; }
.bg3d-glow.g3 { width: 34vmax; height: 34vmax; left: 34vw; top: 62vh; background: radial-gradient(closest-side, rgba(255, 184, 77, .13), transparent 70%); animation: glowA 21s ease-in-out -11s infinite alternate; }
@keyframes glowA { from { transform: translate3d(0, 0, 0) scale(.92); opacity: .65; } to { transform: translate3d(3vmax, 2vmax, 0) scale(1.1); opacity: 1; } }

/* Парящие 3D-объекты: позиция и глубина задаются в разметке (--x --y --w --d --b --t --l) */
.bg3d-sp { position: absolute; left: var(--x); top: var(--y); width: clamp(calc(var(--w) * .55px), calc(var(--w) * .0694vw), calc(var(--w) * 1px));
  transform: translate3d(calc(-50% + var(--mx, 0) * var(--d) * 1px), calc(-50% + var(--my, 0) * var(--d) * 1px + var(--sy, 0) * var(--d) * -.04px), 0);
  transition: transform .45s var(--ease); will-change: transform; }
.bg3d-sp img { display: block; width: 100%; height: auto; filter: blur(calc(var(--b) * 1px)) drop-shadow(0 20px 22px rgba(0, 0, 0, .5)); animation: spA var(--t) ease-in-out var(--l) infinite alternate; }
.bg3d-sp.b img { animation-name: spB; }
.bg3d-sp.tw img { animation-name: spTw; filter: drop-shadow(0 0 14px rgba(255, 184, 77, .55)); }
@keyframes spA { from { transform: translate3d(0, 6px, 0) rotate(-5deg); } to { transform: translate3d(0, -20px, 0) rotate(7deg); } }
@keyframes spB { from { transform: translate3d(0, 8px, 0) perspective(500px) rotateY(-24deg) rotateZ(-4deg); } to { transform: translate3d(0, -24px, 0) perspective(500px) rotateY(24deg) rotateZ(6deg); } }
@keyframes spTw { from { transform: scale(.72) rotate(-10deg); opacity: .6; } to { transform: scale(1.12) rotate(14deg); opacity: 1; } }

/* Затемнение под текстом героя и лёгкий градиент вниз: читаемость важнее декора */
.bg3d-shade { position: absolute; inset: 0; background:
  radial-gradient(ellipse 46% 68% at 27% 52%, rgba(12, 14, 23, .78) 0%, rgba(12, 14, 23, .6) 55%, transparent 100%),
  linear-gradient(90deg, rgba(12, 14, 23, 0) 0, rgba(12, 14, 23, .42) 15%, rgba(12, 14, 23, .42) 85%, rgba(12, 14, 23, 0) 100%),
  linear-gradient(180deg, rgba(12, 14, 23, .12) 0%, rgba(12, 14, 23, .28) 60%, rgba(12, 14, 23, .5) 100%); }

@media (max-width: 760px) {
  .bg3d-pl { inset: -2%; }
  .bg3d-pl img { object-position: 50% 30%; }
  .bg3d-sp:not(.m) { display: none; }
  .bg3d-sp { opacity: .55; }
  .bg3d-shade { background: radial-gradient(ellipse 100% 62% at 40% 48%, rgba(12, 14, 23, .74), rgba(12, 14, 23, .5) 70%, transparent 100%), linear-gradient(180deg, rgba(12, 14, 23, .42), rgba(12, 14, 23, .6)); }
}
@media (prefers-reduced-motion: reduce) {
  .bg3d-pl img, .bg3d-glow, .bg3d-sp img { animation: none !important; }
  .bg3d-pl, .bg3d-sp { transition: none; }
}