/* =========================
   SHARED THEME ANIMATIONS
========================= */

@keyframes themeGradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes themeDrift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-30px, -40px) scale(1.08);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

/* =========================
   JANUARY
========================= */

body.theme-january {
  background: linear-gradient(-45deg, #08131f, #102235, #1a3148, #0b1825);
  background-size: 600% 600%;
  animation: themeGradientFlow 14s ease infinite;
}

body.theme-january::before {
  background:
    radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.14), transparent 32%),
    radial-gradient(circle at 70% 60%, rgba(180, 220, 255, 0.10), transparent 38%),
    radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.08), transparent 42%);
  animation: themeDrift 20s ease-in-out infinite;
}

/* =========================
   FEBRUARY
========================= */

body.theme-february {
  background: linear-gradient(-45deg, #1a0c12, #2a1018, #3b1520, #190910);
  background-size: 600% 600%;
  animation: themeGradientFlow 14s ease infinite;
}

body.theme-february::before {
  background:
    radial-gradient(circle at 25% 30%, rgba(255, 120, 150, 0.14), transparent 30%),
    radial-gradient(circle at 70% 60%, rgba(255, 80, 100, 0.10), transparent 36%),
    radial-gradient(circle at 50% 80%, rgba(255, 180, 200, 0.08), transparent 42%);
  animation: themeDrift 20s ease-in-out infinite;
}

/* =========================
   MARCH
========================= */

body.theme-march {
  background: linear-gradient(-45deg, #0b160d, #14291a, #1d3a24, #0d1c12);
  background-size: 600% 600%;
  animation: themeGradientFlow 14s ease infinite;
}

body.theme-march::before {
  background:
    radial-gradient(circle at 25% 30%, rgba(120, 255, 150, 0.12), transparent 32%),
    radial-gradient(circle at 70% 60%, rgba(180, 255, 200, 0.08), transparent 38%),
    radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.06), transparent 44%);
  animation: themeDrift 20s ease-in-out infinite;
}

/* =========================
   APRIL
========================= */

body.theme-april {
  background: linear-gradient(-45deg, #0e1720, #1a2c3d, #243e54, #101c27);
  background-size: 600% 600%;
  animation: themeGradientFlow 14s ease infinite;
}

body.theme-april::before {
  background:
    radial-gradient(circle at 25% 30%, rgba(150, 210, 255, 0.12), transparent 32%),
    radial-gradient(circle at 70% 60%, rgba(180, 220, 255, 0.09), transparent 38%),
    radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.05), transparent 44%);
  animation: themeDrift 20s ease-in-out infinite;
}

/* =========================
   MAY
========================= */

body.theme-may {
  background: linear-gradient(-45deg, #112012, #1e3320, #2a472c, #142717);
  background-size: 600% 600%;
  animation: themeGradientFlow 14s ease infinite;
}

body.theme-may::before {
  background:
    radial-gradient(circle at 25% 30%, rgba(170, 255, 170, 0.13), transparent 32%),
    radial-gradient(circle at 70% 60%, rgba(255, 240, 200, 0.08), transparent 38%),
    radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.06), transparent 44%);
  animation: themeDrift 20s ease-in-out infinite;
}

/* =========================
   JUNE
========================= */

body.theme-june {
  background: linear-gradient(-45deg, #23160c, #3a2411, #523416, #2a1a0d);
  background-size: 600% 600%;
  animation: themeGradientFlow 14s ease infinite;
}

body.theme-june::before {
  background:
    radial-gradient(circle at 25% 30%, rgba(255, 200, 120, 0.14), transparent 32%),
    radial-gradient(circle at 70% 60%, rgba(255, 180, 90, 0.10), transparent 38%),
    radial-gradient(circle at 50% 80%, rgba(255, 240, 200, 0.06), transparent 44%);
  animation: themeDrift 20s ease-in-out infinite;
}

/* =========================
   JULY
========================= */

body.theme-july {
  background: linear-gradient(-45deg, #0a1322, #12233d, #3b1a22, #111827);
  background-size: 600% 600%;
  animation: themeGradientFlow 14s ease infinite;
}

body.theme-july::before {
  background:
    radial-gradient(circle at 25% 30%, rgba(255, 90, 90, 0.12), transparent 30%),
    radial-gradient(circle at 70% 60%, rgba(120, 180, 255, 0.10), transparent 36%),
    radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.08), transparent 42%);
  animation: themeDrift 20s ease-in-out infinite;
}

/* =========================
   AUGUST
========================= */

body.theme-august {
  background: linear-gradient(-45deg, #21150d, #382313, #4f3118, #28190f);
  background-size: 600% 600%;
  animation: themeGradientFlow 14s ease infinite;
}

body.theme-august::before {
  background:
    radial-gradient(circle at 25% 30%, rgba(255, 180, 100, 0.13), transparent 32%),
    radial-gradient(circle at 70% 60%, rgba(220, 150, 70, 0.09), transparent 38%),
    radial-gradient(circle at 50% 80%, rgba(255, 230, 180, 0.05), transparent 44%);
  animation: themeDrift 20s ease-in-out infinite;
}

/* =========================
   SEPTEMBER
========================= */

body.theme-september {
  background: linear-gradient(-45deg, #1c160f, #322618, #4b381f, #241c12);
  background-size: 600% 600%;
  animation: themeGradientFlow 14s ease infinite;
}

body.theme-september::before {
  background:
    radial-gradient(circle at 25% 30%, rgba(255, 190, 120, 0.12), transparent 32%),
    radial-gradient(circle at 70% 60%, rgba(170, 120, 70, 0.09), transparent 38%),
    radial-gradient(circle at 50% 80%, rgba(255, 240, 200, 0.05), transparent 44%);
  animation: themeDrift 20s ease-in-out infinite;
}

/* =========================
   OCTOBER
========================= */

body.theme-october {
  background: linear-gradient(-45deg, #140d0a, #2b160f, #442014, #1c100b);
  background-size: 600% 600%;
  animation: themeGradientFlow 14s ease infinite;
}

body.theme-october::before {
  background:
    radial-gradient(circle at 25% 30%, rgba(255, 130, 50, 0.15), transparent 30%),
    radial-gradient(circle at 70% 60%, rgba(255, 90, 40, 0.10), transparent 36%),
    radial-gradient(circle at 50% 80%, rgba(255, 220, 160, 0.06), transparent 42%);
  animation: themeDrift 20s ease-in-out infinite;
}

/* =========================
   NOVEMBER
========================= */

body.theme-november {
  background: linear-gradient(-45deg, #18120f, #2a2019, #3c2d24, #1d1713);
  background-size: 600% 600%;
  animation: themeGradientFlow 14s ease infinite;
}

body.theme-november::before {
  background:
    radial-gradient(circle at 25% 30%, rgba(220, 170, 110, 0.12), transparent 32%),
    radial-gradient(circle at 70% 60%, rgba(180, 130, 90, 0.08), transparent 38%),
    radial-gradient(circle at 50% 80%, rgba(255, 235, 190, 0.05), transparent 44%);
  animation: themeDrift 20s ease-in-out infinite;
}

/* =========================
   DECEMBER
========================= */

body.theme-december {
  background: linear-gradient(-45deg, #08111a, #102033, #183149, #0c1621);
  background-size: 600% 600%;
  animation: themeGradientFlow 14s ease infinite;
}

body.theme-december::before {
  background:
    radial-gradient(circle at 25% 30%, rgba(200, 230, 255, 0.14), transparent 32%),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.10), transparent 38%),
    radial-gradient(circle at 50% 80%, rgba(180, 220, 255, 0.08), transparent 44%);
  animation: themeDrift 20s ease-in-out infinite;
}

body.theme-january .particle,
body.theme-december .particle {
  color: rgba(255, 255, 255, 0.9);
}

body.theme-february .particle {
  color: rgba(255, 160, 190, 0.9);
}

body.theme-march .particle,
body.theme-may .particle {
  color: rgba(180, 255, 180, 0.85);
}

body.theme-april .particle {
  color: rgba(180, 220, 255, 0.8);
}

body.theme-june .particle,
body.theme-july .particle,
body.theme-august .particle {
  color: rgba(255, 210, 140, 0.85);
}

body.theme-september .particle,
body.theme-october .particle,
body.theme-november .particle {
  color: rgba(255, 170, 90, 0.85);
}

body.theme-january .particle,
body.theme-december .particle {
  color: rgba(255, 255, 255, 0.92);
}

body.theme-february .particle {
  color: rgba(255, 150, 190, 0.9);
}

body.theme-march .particle,
body.theme-may .particle {
  color: rgba(180, 255, 180, 0.88);
}

body.theme-april .particle {
  color: rgba(180, 220, 255, 0.75);
}

body.theme-june .particle,
body.theme-july .particle,
body.theme-august .particle {
  color: rgba(255, 210, 140, 0.85);
}

body.theme-september .particle,
body.theme-november .particle {
  color: rgba(220, 170, 100, 0.85);
}

body.theme-october .particle {
  color: rgba(255, 140, 60, 0.92);
}

body.theme-october .particle.motion-spark {
  color: rgba(255, 190, 90, 0.9);
}

body.theme-december .particle.motion-spark {
  color: rgba(210, 235, 255, 0.9);
}