/* ============================================================
   AMBIENT WIDE-SCREEN BACKGROUND
   - CSS-only (no JS)
   - Only on wide desktop screens
   - Respects prefers-reduced-motion
============================================================ */

@media (min-width: 1200px) {
  /* Keep the effect subtle: low alpha + slow movement */
  body {
    /* Preserve existing white base background from utilities.css */
    background-color: #fff;

    /* Soft, gently shifting “psychedelic” glow using existing theme palette */
    background-image:
      radial-gradient(
        900px 700px at 12% 18%,
        color-mix(in srgb, var(--info) 26%, transparent),
        transparent 62%
      ),
      radial-gradient(
        900px 700px at 88% 82%,
        color-mix(in srgb, var(--danger) 18%, transparent),
        transparent 64%
      ),
      radial-gradient(
        1000px 800px at 18% 86%,
        color-mix(in srgb, var(--accent-primary) 22%, transparent),
        transparent 66%
      ),
      radial-gradient(
        1000px 800px at 82% 14%,
        color-mix(in srgb, var(--accent-secondary) 22%, transparent),
        transparent 66%
      );

    background-repeat: no-repeat;
    background-size: 140% 140%;
    background-attachment: fixed;

    animation: bg-ambient-shift 28s ease-in-out infinite alternate;
  }

  @keyframes bg-ambient-shift {
    0% {
      background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0%;
    }
    50% {
      background-position: 10% 6%, 92% 96%, 6% 92%, 96% 8%;
    }
    100% {
      background-position: 18% 14%, 84% 86%, 14% 84%, 86% 18%;
    }
  }

  /* Fallback for browsers without color-mix(): use the same palette as design-system.css */
  @supports not (background: color-mix(in srgb, white 50%, black)) {
    body {
      background-image:
        radial-gradient(900px 700px at 12% 18%, rgba(23, 162, 184, 0.14), transparent 62%),
        radial-gradient(900px 700px at 88% 82%, rgba(220, 53, 69, 0.10), transparent 64%),
        radial-gradient(1000px 800px at 18% 86%, rgba(212, 175, 55, 0.12), transparent 66%),
        radial-gradient(1000px 800px at 82% 14%, rgba(139, 115, 85, 0.12), transparent 66%);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none !important;
    background-attachment: scroll;
  }
}