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

   TO REMOVE:
   1. Delete this file and js/bg-decor.js
   2. Remove <link href="css/bg-decor.css"> from every HTML page
   3. Remove <script src="js/bg-decor.js"> from every HTML page
   ========================================================================== */

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):not(.dev-panel) {
  position: relative;
  z-index: 1;
}

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

.bg-decor {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

[data-bg-pattern="none"] .bg-decor {
  display: none;
}

.bg-decor__item {
  position: absolute;
  display: none;
}

.bg-decor {
  --decor-fill: color-mix(in srgb, var(--color-primary) 11%, transparent);
  --decor-fill-accent: color-mix(in srgb, var(--color-accent) 9%, transparent);
  --decor-stroke: color-mix(in srgb, var(--color-primary) 16%, transparent);
  --decor-stroke-accent: color-mix(in srgb, var(--color-accent) 13%, transparent);
  --decor-dot: color-mix(in srgb, var(--color-primary) 22%, transparent);
}

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

/* Circles */
[data-bg-pattern="circles"] .bg-decor {
  --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"][data-bg-pattern="circles"] .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);
}

[data-bg-pattern="circles"] .bg-decor__item--c1,
[data-bg-pattern="circles"] .bg-decor__item--c2,
[data-bg-pattern="circles"] .bg-decor__item--c3 {
  display: block;
  border-radius: 50%;
}

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

[data-bg-pattern="circles"] .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);
}

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

/* Shapes */
[data-bg-pattern="shapes"] .bg-decor__item--s1,
[data-bg-pattern="shapes"] .bg-decor__item--s2,
[data-bg-pattern="shapes"] .bg-decor__item--s3 {
  display: block;
  background: transparent;
}

[data-bg-pattern="shapes"] .bg-decor__item--s1 {
  width: clamp(300px, 38vw, 520px);
  height: clamp(300px, 38vw, 520px);
  top: 2%;
  right: clamp(0.5rem, 4vw, 3rem);
  border: 2px solid var(--decor-stroke);
  border-radius: 50%;
}

[data-bg-pattern="shapes"] .bg-decor__item--s2 {
  width: clamp(200px, 26vw, 320px);
  height: clamp(200px, 26vw, 320px);
  bottom: 12%;
  left: clamp(0.5rem, 4vw, 3rem);
  border: 2px solid var(--decor-stroke-accent);
  border-radius: 22%;
  transform: rotate(24deg);
}

[data-bg-pattern="shapes"] .bg-decor__item--s3 {
  width: clamp(180px, 24vw, 300px);
  height: clamp(180px, 24vw, 300px);
  top: 42%;
  right: clamp(0.5rem, 6vw, 4rem);
  border: 2px solid var(--decor-stroke);
  border-radius: 50%;
}

/* Dots */
.bg-decor__dots {
  display: none;
  position: absolute;
  inset: 0;
}

[data-bg-pattern="dots"] .bg-decor__dots {
  display: block;
}

.bg-decor__dot {
  position: absolute;
  width: calc(18px * var(--dot-scale, 1));
  height: calc(18px * var(--dot-scale, 1));
  border-radius: 50%;
  background: var(--decor-dot);
  filter: blur(3px);
}

.bg-decor__dot:nth-child(3n) {
  background: var(--decor-fill-accent);
}

.bg-decor__dot:nth-child(5n) {
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
}

/* Waves */
[data-bg-pattern="waves"] .bg-decor__item--w1,
[data-bg-pattern="waves"] .bg-decor__item--w2,
[data-bg-pattern="waves"] .bg-decor__item--w3 {
  display: block;
  border-radius: 50%;
  background: transparent;
}

[data-bg-pattern="waves"] .bg-decor__item--w1 {
  width: 185%;
  height: clamp(280px, 40vw, 480px);
  top: 6%;
  left: -44%;
  border: 3px solid var(--decor-stroke);
  transform: rotate(-11deg);
}

[data-bg-pattern="waves"] .bg-decor__item--w2 {
  width: 108%;
  height: clamp(220px, 30vw, 360px);
  top: 42%;
  right: -22%;
  left: auto;
  border: 2.5px solid var(--decor-stroke-accent);
  transform: rotate(16deg);
}

[data-bg-pattern="waves"] .bg-decor__item--w3 {
  width: 158%;
  height: clamp(260px, 34vw, 420px);
  bottom: -10%;
  left: -28%;
  border: 3px solid var(--decor-stroke);
  transform: rotate(-4deg);
  opacity: 0.65;
}

/* Overlap */
[data-bg-pattern="mesh"] .bg-decor {
  --decor-fill: color-mix(in srgb, var(--color-primary) 7%, transparent);
  --decor-fill-accent: color-mix(in srgb, var(--color-accent) 6%, transparent);
  --decor-stroke: color-mix(in srgb, var(--color-primary) 12%, transparent);
  --decor-stroke-accent: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

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

[data-bg-pattern="mesh"] .bg-decor__item--m1,
[data-bg-pattern="mesh"] .bg-decor__item--m2,
[data-bg-pattern="mesh"] .bg-decor__item--m3 {
  display: block;
  border-radius: 50%;
  background: var(--decor-fill);
  border: 1.5px solid var(--decor-stroke);
}

[data-bg-pattern="mesh"] .bg-decor__item--m1 {
  width: clamp(420px, 54vw, 760px);
  height: clamp(420px, 54vw, 760px);
  top: -12%;
  left: -10%;
}

[data-bg-pattern="mesh"] .bg-decor__item--m2 {
  width: clamp(360px, 48vw, 640px);
  height: clamp(360px, 48vw, 640px);
  top: 24%;
  right: -8%;
  background: var(--decor-fill-accent);
  border-color: var(--decor-stroke-accent);
}

[data-bg-pattern="mesh"] .bg-decor__item--m3 {
  width: clamp(300px, 40vw, 540px);
  height: clamp(300px, 40vw, 540px);
  bottom: 2%;
  left: 18%;
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}