/* Same palette and movement as the original agency homepage. */
body.has-ambient{background:#fafafa;isolation:isolate;min-height:100svh}
@property --x1 { syntax: '<percentage>'; inherits: false; initial-value: 18%; }
@property --y1 { syntax: '<percentage>'; inherits: false; initial-value: 22%; }
@property --x2 { syntax: '<percentage>'; inherits: false; initial-value: 78%; }
@property --y2 { syntax: '<percentage>'; inherits: false; initial-value: 18%; }
@property --x3 { syntax: '<percentage>'; inherits: false; initial-value: 48%; }
@property --y3 { syntax: '<percentage>'; inherits: false; initial-value: 78%; }






.ambient-background {
  content: "";
  position: fixed;
  inset: -2px;
  transform: translateZ(0);
  contain: paint;
  view-transition-name: site-background;
  z-index: -1;
  pointer-events: none;

  --c1: 180 180 180;
  --c2: 255 255 255;
  --c3: 100 100 100;

  --x1: 18%; --y1: 22%;
  --x2: 78%; --y2: 18%;
  --x3: 48%; --y3: 78%;

  background:
    radial-gradient(55% 65% at var(--x1) var(--y1), rgb(var(--c1) / .28) 0%, rgb(var(--c1) / 0) 60%),
    radial-gradient(60% 70% at var(--x2) var(--y2), rgb(var(--c2) / .24) 0%, rgb(var(--c2) / 0) 62%),
    radial-gradient(60% 60% at var(--x3) var(--y3), rgb(var(--c3) / .22) 0%, rgb(var(--c3) / 0) 58%),
    linear-gradient(180deg, #fafafa 0%, #e9e9e9 100%);
  background-repeat: no-repeat;
  background-size: 140% 140%, 150% 150%, 160% 160%, 100% 100%;
  filter: saturate(108%) contrast(102%);
  animation:
    plasma-drift 5s ease-in-out infinite alternate,
    plasma-breathe 5s ease-in-out infinite alternate;
}

@keyframes plasma-drift {
  0%   { --x1: 18%; --y1: 22%; --x2: 78%; --y2: 18%; --x3: 48%; --y3: 78%; }
  33%  { --x1: 28%; --y1: 34%; --x2: 70%; --y2: 30%; --x3: 58%; --y3: 66%; }
  66%  { --x1: 62%; --y1: 44%; --x2: 40%; --y2: 76%; --x3: 40%; --y3: 34%; }
  100% { --x1: 72%; --y1: 38%; --x2: 28%; --y2: 68%; --x3: 32%; --y3: 28%; }
}

@keyframes plasma-breathe {
  0%   { background-size: 140% 140%, 150% 150%, 160% 160%, 100% 100%; }
  50%  { background-size: 150% 150%, 160% 160%, 170% 170%, 100% 100%; }
  100% { background-size: 135% 135%, 145% 145%, 155% 155%, 100% 100%; }
}


.ambient-background.is-paused{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.ambient-background{animation:none}}
