/* ── BOKEH HÁTTÉR ─────────────────────────────── */

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

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

.bg-blob--1 {
  width: 500px; height: 500px;
  background: #C8102E;
  opacity: 0.22;
  top: -120px; left: -100px;
  animation: blobDrift1 14s ease-in-out infinite alternate;
}

.bg-blob--2 {
  width: 450px; height: 450px;
  background: #1a4a8a;
  opacity: 0.26;
  bottom: -100px; right: -80px;
  animation: blobDrift2 17s ease-in-out infinite alternate;
}

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

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

@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); }
}

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