/* ==========================================================
   wallpaper.css — ОБОИ (фон) отдельным файлом
   Подключай ПОСЛЕ app.css:
     <link rel="stylesheet" href="assets/css/app.css?v=1">
     <link rel="stylesheet" href="assets/css/wallpaper.css?v=1">

   КАРТИНКА ДЛЯ ОБОЕВ:
   - SVG:  assets/img/wallpaper.svg
   - PNG:  assets/img/wallpaper.png

   ВАЖНО:
   Твой PNG НЕ квадратный (2048×1365), поэтому background-size должен быть
   вида "520px auto" (чтобы НЕ растягивало).
   ========================================================== */

:root{
  --wallpaper-image: url("../img/wallpaper.png");

  /* ✅ сохраняем пропорции (НЕ тянет) */
  --wallpaper-size: 460px auto;  /* можешь: 780px auto / 520px auto / 460px auto */

  --wallpaper-opacity: .12;
}

/* БАЗА */
html, body{ min-height: 100%; }
body{ background: transparent !important; }

/* Слой 1: неоновая подложка (градиенты) */
html::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;

  background:
    radial-gradient(1200px 900px at 18% 12%, rgba(0,230,255,.16), transparent 60%),
    radial-gradient(1200px 900px at 82% 18%, rgba(139,92,255,.14), transparent 62%),
    radial-gradient(900px 760px at 55% 110%, rgba(26,169,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(3,1,10,1), rgba(3,1,10,1));

  transform: translateZ(0);
  will-change: transform;
}

/* Слой 2: ПАТТЕРН (PNG/SVG) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background-image: var(--wallpaper-image);
  background-repeat: repeat;
  background-size: var(--wallpaper-size);
  background-position: 0 0;

  opacity: var(--wallpaper-opacity);
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 10px rgba(0,230,255,.10))
    drop-shadow(0 0 12px rgba(139,92,255,.08));

  transform: translateZ(0);
  will-change: transform;
}

/* Слой 3: лёгкий “шум” (делает фон матовее) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: .08;
}

/* На мобиле — тайл меньше, и узор тише */
@media (max-width: 520px){
  :root{
    --wallpaper-size: 460px auto;  /* ✅ тоже auto */
    --wallpaper-opacity: .10;
  }
}

/* Если reduced motion — просто убираем will-change */
@media (prefers-reduced-motion: reduce){
  html::before, body::before{ will-change: auto; }
}