/**
 * Shared background for internal pages.
 *
 * The component is enabled by inc/site-background.php and is intentionally
 * absent from the landing page. Change the pattern, opacity and ambient light
 * here instead of editing individual page templates.
 */

body.site-background {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 8% 6%, rgba(39, 111, 222, 0.11), transparent 25rem),
    radial-gradient(circle at 92% 15%, rgba(13, 180, 202, 0.1), transparent 25rem),
    linear-gradient(180deg, #f8fafc 0%, #f5f8fb 100%);
}

body.site-background::before,
body.site-background::after {
  position: fixed;
  content: "";
  pointer-events: none;
}

body.site-background::before {
  inset: -36px;
  z-index: -2;
  background-image: url("../backgrounds/site-doodle-pattern.svg");
  background-position: center top;
  background-repeat: repeat;
  background-size: 600px 450px;
  opacity: 0.11;
  transform: rotate(-0.35deg);
}

body.site-background::after {
  top: -2%;
  left: 50%;
  z-index: -1;
  width: min(1280px, 88vw);
  height: 590px;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.34) 48%, transparent 76%);
  transform: translateX(-50%);
}

body.site-background .release-page,
body.site-background .ppc-wp-content:not(.ppc-wp-content--not-found),
body.site-background .page,
body.site-background .site-footer {
  background: transparent;
}

html[data-theme="dark"] body.site-background {
  background:
    radial-gradient(circle at 8% 6%, rgba(50, 132, 235, 0.13), transparent 25rem),
    radial-gradient(circle at 92% 15%, rgba(16, 182, 202, 0.09), transparent 25rem),
    var(--surface);
}

html[data-theme="dark"] body.site-background::before {
  opacity: 0.13;
  filter: brightness(1.65) saturate(0.76);
}

html[data-theme="dark"] body.site-background::after {
  background: radial-gradient(ellipse, rgba(8, 13, 22, 0.74), rgba(8, 13, 22, 0.32) 50%, transparent 76%);
}

@media (max-width: 760px) {
  body.site-background::before {
    background-size: 440px 330px;
    opacity: 0.09;
  }

  body.site-background::after {
    top: 2%;
    width: 130vw;
    height: 520px;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.3) 52%, transparent 78%);
  }

  html[data-theme="dark"] body.site-background::before {
    opacity: 0.11;
  }

  html[data-theme="dark"] body.site-background::after {
    background: radial-gradient(ellipse, rgba(8, 13, 22, 0.7), rgba(8, 13, 22, 0.3) 54%, transparent 78%);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.site-background::before {
    transform: none;
  }
}