/* olloa backgrounds — load after olloa-tokens.css. Markup: the Backgrounds section. */

:root {
  --olloa-wallpaper-dot: 0.14;
  --olloa-wallpaper-field: 0.14;
  --olloa-wallpaper-line: 0.09;
}
:root[data-theme="dark"] {
  --olloa-wallpaper-dot: 0.12;
  --olloa-wallpaper-field: 0.18;
  --olloa-wallpaper-line: 0.08;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --olloa-wallpaper-dot: 0.12;
    --olloa-wallpaper-field: 0.18;
    --olloa-wallpaper-line: 0.08;
  }
}

.olloa-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  color: var(--olloa-ink);
}

/* Seed grid */
.olloa-bg--seed .olloa-bg__dots { opacity: var(--olloa-wallpaper-dot); }

/* Horizon */
.olloa-bg--horizon { --olloa-disc: clamp(360px, 72vh, 760px); }
.olloa-bg__disc {
  position: absolute;
  width: var(--olloa-disc);
  height: var(--olloa-disc);
  left: calc(var(--olloa-disc) * -0.34);
  bottom: calc(var(--olloa-disc) * -0.42);
  fill: var(--olloa-field);
  opacity: var(--olloa-wallpaper-field);
}
.olloa-bg__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 40px;
  bottom: 18vh;
  fill: none;
  stroke: var(--olloa-ink);
  stroke-width: 1.25px;
  stroke-linecap: round;
  opacity: var(--olloa-wallpaper-line);
}

@media (max-width: 767px) {
  .olloa-bg--horizon { --olloa-disc: clamp(280px, 60vh, 420px); }
  .olloa-bg__line { bottom: calc(18vh + 64px); } /* clear the bottom nav */
}