:root {
  --site-bg-image: url("/bg-bracelet.jpg");
  --site-bg-position: center 45%;
}

html {
  min-height: 100%;
  background: #050505 var(--site-bg-image) var(--site-bg-position) / cover fixed no-repeat;
}

body {
  min-height: 100%;
  background: transparent !important;
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.18) 28%, rgba(0,0,0,0.2) 72%, rgba(0,0,0,0.86) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.14) 34%, rgba(0,0,0,0.72) 100%),
    var(--site-bg-image) var(--site-bg-position) / cover fixed no-repeat;
  transform: translateZ(0);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(0,0,0,0) 0 36%, rgba(0,0,0,0.44) 68%, rgba(0,0,0,0.9) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0.18) 34%, rgba(0,0,0,0.78));
}

.hero-stack,
.hero,
main,
section {
  background-color: transparent !important;
}

.hero-stack {
  background: transparent !important;
}

.hero-stack::before {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.08) 42%, rgba(0,0,0,0.76) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.56) 100%) !important;
}

@media (max-width: 760px) {
  :root {
    --site-bg-position: center 42%;
  }

  html,
  body::before {
    background-position: var(--site-bg-position);
  }
}