/* ============================================================
   MOBILE THEME — Animated Sunset Horizon
   (kept exactly as you designed it)
============================================================ */

.social-body {
  background: linear-gradient(
    120deg,
    #5a2a82,
    #c445a5,
    #ff8f1f
  );
  background-size: 300% 300%;
  animation: sunsetGradient 18s ease infinite;
}

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

/* Overlay for depth (mobile only) */
.social-page::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.15);
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   DESKTOP OVERRIDE — Clean, professional gradient
   (replaces animated purple background)
============================================================ */

@media (min-width: 900px) {

  /* Replace animated gradient with clean global gradient */
  .social-body {
    background: linear-gradient(to bottom, #0a1f3d, #fca17d) !important;
    animation: none !important;
    background-size: cover !important;
  }

  /* Remove dark overlay on desktop */
  .social-page::before {
    display: none !important;
  }
}