/* Three static pools of brand-colored light across each complete page. */
body[data-ambient-palette] {
  --ambient-point-1: 8% 4%;
  --ambient-point-2: 98% 49%;
  --ambient-point-3: 15% 88%;
  --ambient-wide: clamp(520px, 84vw, 1280px);
  --ambient-tall: clamp(420px, 62vw, 960px);
  background-color: #000 !important;
  background-image:
    url('/assets/ambient-grain.svg'),
    radial-gradient(ellipse var(--ambient-wide) var(--ambient-tall) at var(--ambient-point-1), hsl(var(--ambient-color) / .17) 0%, hsl(var(--ambient-color) / .10) 22%, hsl(var(--ambient-color) / .03) 48%, hsl(var(--ambient-color) / 0) 76%),
    radial-gradient(ellipse var(--ambient-tall) var(--ambient-wide) at var(--ambient-point-2), hsl(var(--ambient-color) / .14) 0%, hsl(var(--ambient-color) / .075) 24%, hsl(var(--ambient-color) / .022) 49%, hsl(var(--ambient-color) / 0) 78%),
    radial-gradient(ellipse var(--ambient-wide) var(--ambient-tall) at var(--ambient-point-3), hsl(var(--ambient-color) / .155) 0%, hsl(var(--ambient-color) / .085) 24%, hsl(var(--ambient-color) / .025) 50%, hsl(var(--ambient-color) / 0) 77%) !important;
  background-size: 192px 192px, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: scroll;
}

/* Only page containers are transparent; cards and images keep their surfaces. */
body[data-ambient-palette] :is(#cs-root, #career-story, main#story, .about-page) {
  background: transparent !important;
}

/* Match each project's primary hue from its existing Galaxy palette. */
body[data-ambient-palette="about"] {
  --ambient-color: 349 52% 49%;
  --ambient-point-1: 5% 5%;
  --ambient-point-2: 104% 47%;
  --ambient-point-3: 19% 89%;
}
body[data-ambient-palette="career"] {
  --ambient-color: 270 62% 55%;
  --ambient-point-1: 11% 3%;
  --ambient-point-2: 99% 51%;
  --ambient-point-3: 9% 90%;
}
body[data-ambient-palette="crd"] {
  --ambient-color: 255 65% 56%;
  --ambient-point-1: 3% 4%;
  --ambient-point-2: 96% 46%;
  --ambient-point-3: 22% 87%;
}
body[data-ambient-palette="cosmic"] {
  --ambient-color: 235 62% 55%;
  --ambient-point-1: 14% 5%;
  --ambient-point-2: 102% 53%;
  --ambient-point-3: 6% 91%;
}
body[data-ambient-palette="porsche"] {
  --ambient-color: 42 62% 51%;
  --ambient-point-1: 12% 3%;
  --ambient-point-2: 104% 48%;
  --ambient-point-3: 17% 88%;
}

@media (max-width: 768px) {
  body[data-ambient-palette] {
    --ambient-wide: clamp(420px, 110vw, 780px);
    --ambient-tall: clamp(380px, 94vw, 680px);
  }
}
@media print, (forced-colors: active) {
  body[data-ambient-palette] { background-image: none !important; }
}
body[data-ambient-palette].is-wireframe { background-image: none !important; }