:root {
  --bt-page-background: #0f172a;
  --bt-first-color: 72, 102, 139;
  --bt-second-color: 207, 171, 110;
  --bt-third-color: 72, 102, 139;
  --bt-fourth-color: 207, 171, 110;
  --bt-fifth-color: 72, 102, 139;
  --bt-pointer-color: 207, 171, 110;
  --bt-orb-size: 78%;
  --bt-blending-value: soft-light;
}

.bt-gradient-background {
  position: fixed;
  inset: 0;
  z-index: -30;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--bt-page-background);
  background-image:
    radial-gradient(65% 65% at 16% 12%, rgba(var(--bt-first-color), .18), transparent 62%),
    radial-gradient(45rem 45rem at 82% 18%, rgba(var(--bt-second-color), .14), transparent 65%),
    linear-gradient(180deg, var(--bt-page-background), var(--bt-page-background));
  isolation: isolate;
}

.bt-gradient-background svg {
  position: absolute;
  width: 0;
  height: 0;
}

.bt-gradients-container {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  filter: url(#bt-blur-filter) blur(52px);
}

.bt-gradient-background.is-safari .bt-gradients-container {
  filter: blur(72px);
}

.bt-gradient-orb {
  position: absolute;
  width: var(--bt-orb-size);
  height: var(--bt-orb-size);
  top: calc(50% - var(--bt-orb-size) / 2);
  left: calc(50% - var(--bt-orb-size) / 2);
  mix-blend-mode: var(--bt-blending-value);
  background-repeat: no-repeat;
  opacity: .6;
  will-change: transform;
}

.bt-orb-one {
  background: radial-gradient(circle at center, rgba(var(--bt-first-color), .34) 0, rgba(var(--bt-first-color), 0) 50%);
  transform-origin: center center;
  animation: bt-move-one 30s ease infinite;
}

.bt-orb-two {
  background: radial-gradient(circle at center, rgba(var(--bt-second-color), .3) 0, rgba(var(--bt-second-color), 0) 50%);
  transform-origin: calc(50% - 400px);
  animation: bt-move-two 20s reverse infinite;
}

.bt-orb-three {
  background: radial-gradient(circle at center, rgba(var(--bt-third-color), .22) 0, rgba(var(--bt-third-color), 0) 50%);
  transform-origin: calc(50% + 400px);
  animation: bt-move-three 40s linear infinite;
}

.bt-orb-four {
  background: radial-gradient(circle at center, rgba(var(--bt-fourth-color), .2) 0, rgba(var(--bt-fourth-color), 0) 50%);
  transform-origin: calc(50% - 200px);
  animation: bt-move-four 40s ease infinite;
  opacity: .44;
}

.bt-orb-five {
  background: radial-gradient(circle at center, rgba(var(--bt-fifth-color), .12) 0, rgba(var(--bt-fifth-color), 0) 50%);
  transform-origin: calc(50% - 800px) calc(50% + 800px);
  animation: bt-move-five 20s ease infinite;
}

.bt-interactive-orb {
  position: absolute;
  width: 100%;
  height: 100%;
  top: -50%;
  left: -50%;
  opacity: .34;
  mix-blend-mode: var(--bt-blending-value);
  background: radial-gradient(circle at center, rgba(var(--bt-pointer-color), .28) 0, rgba(var(--bt-pointer-color), 0) 50%);
  background-repeat: no-repeat;
  will-change: transform;
}

[data-glow-card] {
  --base: 220;
  --spread: 180;
  --radius: 24;
  --border: 1;
  --backdrop: hsl(0 0% 100% / .06);
  --backup-border: hsl(0 0% 100% / .12);
  --size: 220;
  --outer: .38;
  --border-size: calc(var(--border, 1) * 1px);
  --spotlight-size: calc(var(--size, 180) * 1px);
  --glow-color: 72, 102, 139;
  --bg-spot-opacity: .06;
  --border-spot-opacity: .42;
  --border-light-opacity: .18;
  position: relative;
  border: var(--border-size) solid var(--backup-border) !important;
  background-color: var(--backdrop) !important;
  background-image: radial-gradient(var(--spotlight-size) var(--spotlight-size) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px), rgba(var(--glow-color), var(--bg-spot-opacity)), transparent) !important;
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-position: 50% 50%;
  background-attachment: fixed;
  box-shadow: 0 1rem 2rem -1rem rgba(0, 0, 0, .9), 0 18px 52px rgba(72, 102, 139, .1);
  backdrop-filter: blur(8px);
  isolation: isolate;
}

[data-glow-card]::before,
[data-glow-card]::after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -1);
  border: var(--border-size) solid transparent;
  border-radius: inherit;
  background-attachment: fixed;
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: source-in;
  mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;
  z-index: 2;
}

[data-glow-card]::before {
  background-image: radial-gradient(calc(var(--spotlight-size) * .75) calc(var(--spotlight-size) * .75) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px), rgba(var(--glow-color), var(--border-spot-opacity)), transparent 100%);
  filter: brightness(1.08);
}

[data-glow-card]::after {
  background-image: radial-gradient(calc(var(--spotlight-size) * .5) calc(var(--spotlight-size) * .5) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px), hsl(0 100% 100% / var(--border-light-opacity)), transparent 100%);
}

.glow-card__outer {
  position: absolute;
  inset: 0;
  opacity: var(--outer);
  border-radius: inherit;
  filter: blur(calc(var(--border-size) * 10));
  pointer-events: none;
  z-index: 0;
}

.glow-card__outer::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 10px solid transparent;
  border-radius: inherit;
  background-image: radial-gradient(calc(var(--spotlight-size) * .75) calc(var(--spotlight-size) * .75) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px), rgba(var(--glow-color), .28), transparent 100%);
  background-attachment: fixed;
}

[data-glow-card]> :not(.glow-card__outer) {
  position: relative;
  z-index: 3;
}

[data-glow-card].glow-card--sand {
  --glow-color: 207, 171, 110;
}

[data-glow-card].glow-card--blue {
  --glow-color: 72, 102, 139;
}

@keyframes bt-move-one {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  50% {
    transform: translate(120px, -80px) rotate(180deg);
  }
}

@keyframes bt-move-two {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  50% {
    transform: translate(-160px, 90px) rotate(180deg);
  }
}

@keyframes bt-move-three {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  50% {
    transform: translate(140px, 120px) rotate(180deg);
  }
}

@keyframes bt-move-four {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  50% {
    transform: translate(-100px, -120px) rotate(180deg);
  }
}

@keyframes bt-move-five {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  50% {
    transform: translate(180px, 80px) rotate(180deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bt-gradient-orb {
    animation: none;
  }

  .bt-interactive-orb {
    display: none;
  }
}

@media (max-width: 640px) {
  :root {
    --bt-orb-size: 120%;
  }

  [data-glow-card] {
    --size: 170;
  }
}