/* ── HÁTTÉR ───────────────────────────────────────
   VILÁGOS (alapértelmezett): nyugodt, statikus alap – sima háttérszín,
   épphogy érzékelhető kékes derengéssel, animáció nélkül.
   SÖTÉT: az EREDETI, animált, színes bokeh-háttér (piros/kék/arany
   foltok, lassan sodródva) – ez adta az oldal korábbi karakterét,
   sötét módban visszahozzuk. */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--bg);
  overflow: hidden;
  pointer-events: none;
}

.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  will-change: transform;
  animation: none;
}

.bg-blob--1 {
  width: 500px; height: 500px;
  background: var(--accent);
  opacity: 0.05;
  top: -120px; left: -100px;
}

.bg-blob--2 {
  width: 450px; height: 450px;
  background: var(--accent);
  opacity: 0.04;
  bottom: -100px; right: -80px;
}

/* Világosban a 3. és 4. dísz-folt elrejtve a letisztult hatás miatt */
.bg-blob--3,
.bg-blob--4 {
  display: none;
}

@keyframes blobDrift1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(60px, 50px) scale(1.08); }
}

@keyframes blobDrift2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-50px, -40px) scale(1.1); }
}

@keyframes blobDrift3 {
  from { transform: translate(0, 0); }
  to   { transform: translate(-40px, 30px); }
}

@keyframes blobDrift4 {
  from { transform: translate(0, 0); }
  to   { transform: translate(30px, -25px); }
}

/* ── SÖTÉT – automatikusan, ha a rendszer sötétet kér ──────────── */
@media (prefers-color-scheme: dark) {
  .bg-blob { filter: blur(80px); }

  .bg-blob--1 { background: #C8102E; opacity: 0.22; animation: blobDrift1 14s ease-in-out infinite alternate; }
  .bg-blob--2 { background: #1a4a8a; opacity: 0.26; animation: blobDrift2 17s ease-in-out infinite alternate; }

  .bg-blob--3 {
    display: block;
    width: 280px; height: 280px;
    background: #E8A020;
    opacity: 0.10;
    top: 40%; left: 55%;
    animation: blobDrift3 11s ease-in-out infinite alternate;
  }

  .bg-blob--4 {
    display: block;
    width: 200px; height: 200px;
    background: #0d3060;
    opacity: 0.30;
    top: 30%; left: 5%;
    animation: blobDrift4 13s ease-in-out infinite alternate;
  }
}

/* ── SÖTÉT – kézi felülbírálás (a kapcsoló mindig felülír) ─────── */
:root[data-theme="dark"] .bg-blob { filter: blur(80px); }

:root[data-theme="dark"] .bg-blob--1 { background: #C8102E; opacity: 0.22; animation: blobDrift1 14s ease-in-out infinite alternate; }
:root[data-theme="dark"] .bg-blob--2 { background: #1a4a8a; opacity: 0.26; animation: blobDrift2 17s ease-in-out infinite alternate; }

:root[data-theme="dark"] .bg-blob--3 {
  display: block;
  width: 280px; height: 280px;
  background: #E8A020;
  opacity: 0.10;
  top: 40%; left: 55%;
  animation: blobDrift3 11s ease-in-out infinite alternate;
}

:root[data-theme="dark"] .bg-blob--4 {
  display: block;
  width: 200px; height: 200px;
  background: #0d3060;
  opacity: 0.30;
  top: 30%; left: 5%;
  animation: blobDrift4 13s ease-in-out infinite alternate;
}

/* ── VILÁGOS – kézi felülbírálás (akkor is, ha a rendszer sötétet kér) ── */
:root[data-theme="light"] .bg-blob { filter: blur(110px); animation: none; }
:root[data-theme="light"] .bg-blob--1 { background: var(--accent); opacity: 0.05; animation: none; }
:root[data-theme="light"] .bg-blob--2 { background: var(--accent); opacity: 0.04; animation: none; }
:root[data-theme="light"] .bg-blob--3,
:root[data-theme="light"] .bg-blob--4 { display: none; }

/* Mozgáscsökkentés hozzáférhetőséghez – mindkét témában */
@media (prefers-reduced-motion: reduce) {
  .bg-blob { animation: none !important; }
}