/* =========================================================
   bg.css — анимированный фон для ВСЕХ окон.
========================================================= */

html,
body {
  margin: 0;
  height: 100%;
}

body.gradient-bg {
  position: relative;
  overflow: hidden;
  background: #0b0b0f;
}

/* ---------- Слой 1: фиолетово-синие пятна ---------- */
body.gradient-bg::before {
  content: "";
  position: fixed;
  top: -25%;
  left: -25%;
  width: 150%;
  height: 150%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 25% 25%,
      rgba(168, 85, 247, 0.32),
      transparent 30%
    ),
    radial-gradient(
      circle at 75% 30%,
      rgba(99, 102, 241, 0.28),
      transparent 32%
    ),
    radial-gradient(
      circle at 30% 75%,
      rgba(139, 92, 246, 0.26),
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(59, 130, 246, 0.24),
      transparent 32%
    );
  filter: blur(60px);
  opacity: 0.45;
  animation: bgMove1 8s ease-in-out infinite alternate;
}

@keyframes bgMove1 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(20%, -15%) scale(1.35);
  }
  100% {
    transform: translate(-10%, 10%) scale(1.1);
  }
}

/* ---------- Слой 2: розово-бирюзовые пятна ---------- */
body.gradient-bg::after {
  content: "";
  position: fixed;
  top: -25%;
  left: -25%;
  width: 150%;
  height: 150%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(236, 72, 153, 0.22),
      transparent 32%
    ),
    radial-gradient(
      circle at 20% 60%,
      rgba(6, 182, 212, 0.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 15%,
      rgba(251, 146, 60, 0.15),
      transparent 32%
    );
  filter: blur(80px);
  opacity: 0.45;
  animation: bgMove2 12s ease-in-out infinite alternate;
}

@keyframes bgMove2 {
  0% {
    transform: translate(0, 0) scale(1.1);
  }
  50% {
    transform: translate(-20%, 18%) scale(0.85);
  }
  100% {
    transform: translate(15%, -12%) scale(1.2);
  }
}

/* Контент поверх фона */
body.gradient-bg
  > *:not(.yt-modal-backdrop):not(.modal-backdrop):not(.pomodoro-overlay) {
  position: relative;
  z-index: 1;
}

/* ---------- Светлая тема ---------- */
body.light.gradient-bg {
  background: #f5f5f7;
}

body.light.gradient-bg::before {
  background:
    radial-gradient(
      circle at 25% 25%,
      rgba(168, 85, 247, 0.14),
      transparent 30%
    ),
    radial-gradient(
      circle at 75% 30%,
      rgba(99, 102, 241, 0.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 30% 75%,
      rgba(139, 92, 246, 0.1),
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(59, 130, 246, 0.08),
      transparent 30%
    );
  opacity: 0.6;
}

body.light.gradient-bg::after {
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(236, 72, 153, 0.1),
      transparent 30%
    ),
    radial-gradient(circle at 20% 60%, rgba(6, 182, 212, 0.08), transparent 30%);
  opacity: 0.5;
}

/* ---------- Полупрозрачные карточки ---------- */
body.gradient-bg .card {
  backdrop-filter: blur(16px);
  background: rgba(18, 18, 24, 0.55);
}

body.light.gradient-bg .card {
  background: rgba(255, 255, 255, 0.85);
  border-color: #e2e2ea;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 8px 20px -14px rgba(0, 0, 0, 0.15);
}