/* ==========================================================================
   BACKGROUND DECOR — Circles pattern
   Depends on theme tokens from main.css ([data-theme], [data-mode]).
   ========================================================================== */

html.has-bg-decor {
  background-color: var(--color-bg);
  transition: background-color var(--transition);
}

body.has-bg-decor {
  background: transparent;
}

body.has-bg-decor > :not(.bg-decor) {
  position: relative;
  z-index: 1;
}

body.has-bg-decor > .site-header:not(.bg-decor) {
  z-index: 100;
}

.bg-decor {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  --decor-fill: color-mix(in srgb, var(--color-primary) 8%, transparent);
  --decor-fill-accent: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

[data-mode="dark"] .bg-decor {
  --decor-fill: color-mix(in srgb, var(--color-primary) 11%, transparent);
  --decor-fill-accent: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.bg-decor__item {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.bg-decor__item--c1 {
  width: clamp(480px, 62vw, 920px);
  height: clamp(480px, 62vw, 920px);
  top: -16%;
  left: -14%;
  right: auto;
  background: var(--decor-fill);
}

.bg-decor__item--c2 {
  width: clamp(380px, 52vw, 720px);
  height: clamp(380px, 52vw, 720px);
  bottom: -10%;
  right: -12%;
  left: auto;
  background: var(--decor-fill-accent);
}

.bg-decor__item--c3 {
  width: clamp(300px, 42vw, 540px);
  height: clamp(300px, 42vw, 540px);
  top: 48%;
  left: 62%;
  right: auto;
  background: var(--decor-fill);
}