/* Unclick Ambient Background
 * Una única capa global, sin nodos, animación ni impacto en el layout.
 * Intensidad, escala y posiciones se ajustan desde estos tokens.
 */
:root {
  --loq-ambient-supernova-image: url("ambient-supernova.webp");
  --loq-ambient-base: #02030a;
  --loq-ambient-violet-strength: 18%;
  --loq-ambient-blue-strength: 14%;
  --loq-ambient-cyan-strength: 11%;
  --loq-ambient-pink-strength: 15%;
  --loq-ambient-warm-strength: 13%;
}

body.loq-ambient-background {
  background-color: var(--loq-ambient-base);
  background-image:
    url("ambient-noise.svg"),
    url("ambient-supernova.webp"),
    url("ambient-supernova.webp"),
    url("ambient-supernova.webp"),
    url("ambient-supernova.webp"),
    url("ambient-supernova.webp"),
    radial-gradient(ellipse at center, color-mix(in srgb, var(--unclick-violet, var(--loq-primary)) var(--loq-ambient-violet-strength), transparent) 0, color-mix(in srgb, var(--unclick-violet, var(--loq-primary)) 5%, transparent) 38%, transparent 74%),
    radial-gradient(ellipse at center, color-mix(in srgb, var(--unclick-pink, var(--loq-accent)) var(--loq-ambient-pink-strength), transparent) 0, transparent 72%),
    radial-gradient(ellipse at center, color-mix(in srgb, var(--unclick-blue, var(--loq-secondary)) var(--loq-ambient-blue-strength), transparent) 0, color-mix(in srgb, var(--unclick-blue, var(--loq-secondary)) 4%, transparent) 42%, transparent 76%),
    radial-gradient(ellipse at center, color-mix(in srgb, var(--unclick-orange, var(--loq-warm)) var(--loq-ambient-warm-strength), transparent) 0, transparent 74%),
    radial-gradient(ellipse at center, color-mix(in srgb, var(--unclick-violet, var(--loq-primary)) 9%, transparent) 0, transparent 76%),
    radial-gradient(ellipse at center, color-mix(in srgb, #38bdf8 var(--loq-ambient-cyan-strength), transparent) 0, transparent 76%);
  background-position:
    0 0,
    right 5% top 230px,
    left 8% top 680px,
    right 12% top 1080px,
    left 4% top 1600px,
    right 28% top 2150px,
    calc(100% + 90px) 1%,
    42% 12%,
    -150px 29%,
    calc(100% + 150px) 49%,
    -130px 71%,
    calc(100% + 130px) 89%;
  background-size:
    128px 128px,
    146px 146px,
    108px 108px,
    128px 128px,
    76px 76px,
    92px 92px,
    940px 740px,
    660px 540px,
    820px 680px,
    760px 620px,
    780px 640px,
    860px 700px;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: scroll;
}

body.loq-ambient-background :is(.site, .site-main, #page, #primary, .content-area) {
  background-color: transparent;
}

@media (max-width: 767px) {
  body.loq-ambient-background {
    --loq-ambient-violet-strength: 16%;
    --loq-ambient-blue-strength: 12%;
    --loq-ambient-cyan-strength: 9%;
    --loq-ambient-pink-strength: 12%;
    --loq-ambient-warm-strength: 11%;
    background-position: 0 0, left 6px top 155px, left 8px top 610px, right 8px top 1030px, left 6px top 1510px, right 14px top 2100px, calc(100% + 180px) 1%, 45% 13%, -260px 30%, calc(100% + 250px) 50%, -240px 72%, calc(100% + 240px) 90%;
    background-size: 128px 128px, 104px 104px, 94px 94px, 104px 104px, 84px 84px, 90px 90px, 940px 740px, 660px 540px, 820px 680px, 760px 620px, 780px 640px, 860px 700px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.loq-ambient-background { background-attachment: scroll; }
}