/**
 * Noribel page backdrop.
 * Controlled by Design System (data-ds-bg on <html>) + --nor-page-bg-* vars.
 */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--nor-page-bg-pattern-opacity, 1);
  background:
    repeating-radial-gradient(
      circle at 82% 18%,
      transparent 0 128px,
      rgba(28, 108, 158, 0.05) 128px 129.5px
    ),
    repeating-radial-gradient(
      circle at 12% 88%,
      transparent 0 104px,
      rgba(28, 108, 158, 0.04) 104px 105.5px
    );
}

html[data-ds-bg='solid'] body::before,
html[data-ds-bg='photo'] body::before,
html[data-ds-bg='none'] body::before {
  background: none;
  opacity: 0;
}

html[data-ds-bg='dots'] body::before {
  background-image: radial-gradient(
    rgba(28, 108, 158, 0.14) 1.1px,
    transparent 1.2px
  );
  background-size: 18px 18px;
  background-position: 0 0;
}

html[data-ds-bg='grid'] body::before {
  background-image:
    linear-gradient(rgba(28, 108, 158, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 108, 158, 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
}

html[data-ds-bg='diagonal'] body::before {
  background-image: repeating-linear-gradient(
    -32deg,
    transparent 0 14px,
    rgba(28, 108, 158, 0.05) 14px 15px
  );
}

html[data-ds-bg='wash'] body::before {
  background:
    radial-gradient(ellipse 70% 55% at 12% 0%, rgba(142, 199, 237, 0.28), transparent 60%),
    radial-gradient(ellipse 60% 50% at 92% 100%, rgba(28, 108, 158, 0.16), transparent 55%);
}

html[data-ds-bg='vignette'] body::before {
  background:
    radial-gradient(ellipse 85% 75% at 50% 40%, transparent 40%, rgba(11, 34, 51, 0.1) 100%);
}

html[data-ds-bg='mesh'] body::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(142, 199, 237, 0.32), transparent 42%),
    radial-gradient(circle at 82% 18%, rgba(66, 171, 224, 0.18), transparent 38%),
    radial-gradient(circle at 70% 78%, rgba(28, 108, 158, 0.16), transparent 45%),
    radial-gradient(circle at 22% 86%, rgba(142, 199, 237, 0.2), transparent 40%);
}

html[data-ds-bg='rings'] body::before {
  background:
    repeating-radial-gradient(
      circle at 82% 18%,
      transparent 0 128px,
      rgba(28, 108, 158, 0.05) 128px 129.5px
    ),
    repeating-radial-gradient(
      circle at 12% 88%,
      transparent 0 104px,
      rgba(28, 108, 158, 0.04) 104px 105.5px
    );
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--nor-page-bg-image, none);
  background-size: cover;
  background-position: var(--nor-page-bg-position, center);
  filter: blur(var(--nor-page-bg-blur, 0px));
  transform: scale(1.03);
  opacity: 0;
}

html[data-ds-bg='photo'] body::after {
  opacity: var(--nor-page-bg-opacity, 0.28);
}

/* Keep the app itself above the backdrop */
.shell,
#race-event-shell,
.race-event-app,
.nds-shell,
.nds-wrap {
  position: relative;
  z-index: 1;
}