/* BG-ORBS — плавающие радиальные градиенты на фоне */

.bg-orbs {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  filter: blur(80px);
  opacity: 0.55;
}

.orb {
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  will-change: transform;
}

.orb.o1 {
  top: -15%; left: -10%;
  background: radial-gradient(circle, #2EA6FF 0%, transparent 60%);
  animation: orb-drift-1 22s var(--ease-in-out) infinite;
}
.orb.o2 {
  top: 30%; right: -18%;
  background: radial-gradient(circle, #B24BF3 0%, transparent 60%);
  animation: orb-drift-2 28s var(--ease-in-out) infinite;
}
.orb.o3 {
  bottom: -20%; left: 20%;
  background: radial-gradient(circle, #22D3A0 0%, transparent 60%);
  animation: orb-drift-3 26s var(--ease-in-out) infinite;
}
.orb.o4 {
  top: 60%; left: -8%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, #FF4D6D 0%, transparent 60%);
  opacity: 0.5;
  animation: orb-drift-4 34s var(--ease-in-out) infinite;
}

@keyframes orb-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(8%, 6%) scale(1.1); }
  66%      { transform: translate(-4%, 10%) scale(0.95); }
}
@keyframes orb-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-8%, 5%) scale(1.12); }
}
@keyframes orb-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(10%, -6%) scale(1.08); }
  80%      { transform: translate(-6%, -3%) scale(0.92); }
}
@keyframes orb-drift-4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(12%, -8%) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .orb { animation: none !important; }
}

@media (max-width: 899.98px) {
  .bg-orbs { filter: blur(60px); opacity: 0.4; }
  .orb { width: 320px; height: 320px; }
  .orb.o4 { width: 240px; height: 240px; }
}