/* static/core/page-bg.css */

/* 1) слой фона: ВСЕГДА под контентом */
.page-bg{
  position: fixed;
  inset: 0;
  z-index: -1;           /* ключевое: НЕ перекрывает дизайн */
  pointer-events: none;
  overflow: hidden;
}

/* 2) если включён page-bg — убираем “родной фон страницы”, который его перекрывает */
body.has-page-bg .ip-page{
  background: transparent !important;
  --ip-bg: transparent !important; /* если фон задан переменной */
}

/* если у тебя есть большие обёртки с фоном — тоже гасим */
body.has-page-bg .full-width-bg{
  background: transparent !important;
}

/* =========================
   THEMES
   ========================= */
.page-bg[data-theme="softlux"]{
  background:
    radial-gradient(900px 600px at 15% 25%, rgba(224,122,95,.22), transparent 60%),
    radial-gradient(900px 650px at 85% 20%, rgba(173,216,230,.20), transparent 62%),
    radial-gradient(1000px 700px at 55% 85%, rgba(61,64,91,.10), transparent 60%),
    linear-gradient(180deg, #fbf7f4 0%, #f6f2ef 60%, #f3f1f8 100%);
}

.page-bg[data-theme="pearl"]{
  background:
    radial-gradient(900px 650px at 20% 20%, rgba(210,180,222,.22), transparent 60%),
    radial-gradient(900px 650px at 80% 30%, rgba(180,220,235,.18), transparent 60%),
    linear-gradient(180deg, #fbfbfe 0%, #f6f3ff 100%);
}

.page-bg[data-theme="sky"]{
  background:
    radial-gradient(900px 650px at 20% 25%, rgba(255,205,210,.18), transparent 60%),
    radial-gradient(900px 650px at 80% 25%, rgba(180,235,250,.20), transparent 60%),
    linear-gradient(180deg, #f7fbff 0%, #f4f2ff 100%);
}

.page-bg[data-theme="terracotta"]{
  background:
    radial-gradient(1000px 700px at 25% 30%, rgba(224,122,95,.26), transparent 60%),
    radial-gradient(900px 650px at 80% 20%, rgba(61,64,91,.14), transparent 60%),
    linear-gradient(180deg, #fbf6f1 0%, #f3f0ff 100%);
}

/* =========================
   LAYERS
   ========================= */
.page-bg .bg-glow{
  position: absolute;
  inset: 0;
  opacity: var(--bg-container-glow, .18);
  background:
    radial-gradient(600px 240px at 50% 15%, rgba(224,122,95,.35), transparent 70%),
    radial-gradient(700px 260px at 50% 100%, rgba(61,64,91,.18), transparent 70%);
}

.page-bg .bg-rays{
  position: absolute;
  inset: 0;
  opacity: .26;
  background: radial-gradient(900px 520px at 10% 5%, rgba(255,255,255,.55), transparent 60%);
  mix-blend-mode: soft-light;
}

.page-bg .bg-noise{
  position: absolute;
  inset: -40%;
  opacity: var(--bg-noise-opacity, .14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  transform: rotate(3deg);
}

.page-bg .bg-dust{
  position: absolute;
  inset: 0;
  opacity: var(--bg-dust-opacity, .08);
  background-image: radial-gradient(rgba(0,0,0,.18) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* orbs контейнер */
.page-bg .orbs{
  position: absolute;
  inset: 0;
}
.page-bg[data-orbs="0"] .orbs{ display:none; }
.page-bg[data-noise="0"] .bg-noise{ display:none; }
.page-bg[data-dust="0"] .bg-dust{ display:none; }
.page-bg[data-rays="0"] .bg-rays{ display:none; }
.page-bg[data-glow="0"] .bg-glow{ display:none; }

/* orb */
.page-bg .orb{
  position: absolute;
  width: var(--s, 220px);
  height: var(--s, 220px);
  left: var(--x, 10%);
  top: var(--y, 20%);
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.75), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 60% 70%, rgba(224,122,95,.35), rgba(61,64,91,.06) 55%, rgba(255,255,255,0) 70%);
  opacity: var(--o, .55);
  animation: orb-fade 6.5s ease-in-out infinite;
}

.page-bg .orb:nth-child(1){ animation-delay: 0s; }
.page-bg .orb:nth-child(2){ animation-delay: 1.2s; }
.page-bg .orb:nth-child(3){ animation-delay: 2.1s; }
.page-bg .orb:nth-child(4){ animation-delay: 3.1s; }

@keyframes orb-fade{
  0%,100% { opacity: var(--o, .55); }
  50% { opacity: calc(var(--o, .55) + 0.10); }
}

/* =========================
   THEME: RETRO
   ========================= */
.page-bg[data-theme="retro"]{
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(243,166,179,.26), transparent 60%),
    radial-gradient(1000px 650px at 85% 20%, rgba(183,166,255,.22), transparent 60%),
    radial-gradient(900px 650px at 70% 85%, rgba(127,230,209,.18), transparent 55%),
    linear-gradient(180deg, #fff6f1, #fffaf6 55%, #f6f2ff);
}

/* бумажная текстура именно для retro */
.page-bg[data-theme="retro"] .bg-noise{
  opacity: var(--bg-noise-opacity, .18);
  mix-blend-mode: multiply;
}

/* ретро-шары (ярче/дороже) */
.page-bg[data-theme="retro"] .orb{
  opacity: var(--o, .90);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.25) 45%, transparent 70%),
    radial-gradient(circle at 70% 70%, rgba(216,181,106,.28), transparent 60%),
    radial-gradient(circle at 40% 70%, rgba(243,166,179,.26), transparent 62%);
  box-shadow: 0 18px 40px rgba(43,36,49,.08);
}


/* =========================
   THEME: LUXURY
   ========================= */
.page-bg[data-theme="luxury"]{
  background:
    radial-gradient(1200px 800px at 18% 18%, rgba(255,215,170,.18), transparent 60%),
    radial-gradient(1100px 760px at 82% 20%, rgba(190,210,255,.18), transparent 60%),
    radial-gradient(1100px 800px at 60% 90%, rgba(140,120,170,.12), transparent 60%),
    linear-gradient(180deg, #fbf6f0 0%, #f6f3ff 55%, #f3f1fa 100%);
}

/* мягкий “премиум glow” */
.page-bg[data-theme="luxury"] .bg-glow{
  opacity: var(--bg-container-glow, .22);
  background:
    radial-gradient(780px 260px at 50% 12%, rgba(255,215,170,.38), transparent 70%),
    radial-gradient(860px 320px at 50% 105%, rgba(110,90,150,.20), transparent 70%);
}

/* шары luxury — более “перламутр” */
.page-bg[data-theme="luxury"] .orb{
  opacity: var(--o, .55);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.90), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 65% 70%, rgba(255,215,170,.28), rgba(190,210,255,.14) 55%, rgba(255,255,255,0) 72%);
  box-shadow: 0 18px 60px rgba(25,18,35,.08);
}


/* =========================
   THEME: AURA NEON
   ========================= */

.page-bg[data-theme="aura"]{
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(120,80,255,.25), transparent 60%),
    radial-gradient(1100px 760px at 85% 15%, rgba(0,180,255,.20), transparent 60%),
    radial-gradient(900px 700px at 60% 90%, rgba(255,90,200,.14), transparent 60%),
    linear-gradient(180deg, #0b0f1c 0%, #0a1024 45%, #0a0f1a 100%);
}

/* мягкое сияние пространства */
.page-bg[data-theme="aura"] .bg-glow{
  opacity: .35;
  background:
    radial-gradient(900px 320px at 50% 8%, rgba(120,80,255,.55), transparent 70%),
    radial-gradient(1000px 380px at 50% 100%, rgba(0,180,255,.28), transparent 70%);
}

/* шум слабый — глубина */
.page-bg[data-theme="aura"] .bg-noise{
  opacity: .10;
}

/* ===== СВЕТЯЩИЕСЯ ОРБЫ ===== */

.page-bg[data-theme="aura"] .orb{
  opacity: var(--o, .85);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.10) 45%, transparent 70%),
    radial-gradient(circle at 60% 70%, rgba(120,80,255,.55), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(0,180,255,.45), transparent 65%),
    radial-gradient(circle at 40% 70%, rgba(255,90,200,.35), transparent 70%);
  box-shadow:
    0 0 35px rgba(120,80,255,.45),
    0 0 60px rgba(0,180,255,.35),
    0 0 90px rgba(255,90,200,.25);
  filter: blur(.2px);
}