/* Referral QR modal bokeh background override. Loaded after the generated bundle. */
.referral-modal-atmosphere {
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.9)),
    radial-gradient(circle at 20% 18%, rgba(10, 132, 255, 0.12) 0%, rgba(10, 132, 255, 0.12) 9%, transparent 26%),
    radial-gradient(circle at 78% 24%, rgba(255, 55, 95, 0.08) 0%, rgba(255, 55, 95, 0.08) 8%, transparent 24%),
    radial-gradient(circle at 64% 78%, rgba(191, 90, 242, 0.1) 0%, rgba(191, 90, 242, 0.1) 10%, transparent 28%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.82));
  -webkit-backdrop-filter: blur(10px) brightness(0.58);
  backdrop-filter: blur(10px) brightness(0.58);
}

.referral-modal-atmosphere::before,
.referral-modal-atmosphere::after {
  content: "";
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}

.referral-modal-atmosphere::before {
  inset: -18%;
  opacity: 0.46;
  filter: blur(34px) saturate(138%);
  background:
    radial-gradient(circle at 16% 25%, rgba(10, 132, 255, 0.42) 0%, rgba(10, 132, 255, 0.42) 5%, rgba(10, 132, 255, 0.22) 11%, transparent 22%),
    radial-gradient(circle at 86% 17%, rgba(100, 210, 255, 0.28) 0%, rgba(100, 210, 255, 0.28) 4%, rgba(100, 210, 255, 0.14) 10%, transparent 21%),
    radial-gradient(circle at 75% 68%, rgba(191, 90, 242, 0.34) 0%, rgba(191, 90, 242, 0.34) 5%, rgba(191, 90, 242, 0.16) 12%, transparent 24%),
    radial-gradient(circle at 24% 82%, rgba(255, 159, 10, 0.20) 0%, rgba(255, 159, 10, 0.20) 4%, rgba(255, 159, 10, 0.11) 10%, transparent 21%);
  animation: referral-bokeh-field-a 18s ease-in-out infinite alternate;
  transform: translate3d(-1.5%, -1%, 0) scale(1.03);
}

.referral-modal-atmosphere::after {
  inset: -24%;
  opacity: 0.28;
  filter: blur(52px) saturate(150%);
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 35% 15%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.18) 3%, transparent 12%),
    radial-gradient(circle at 70% 32%, rgba(10, 132, 255, 0.24) 0%, rgba(10, 132, 255, 0.24) 4%, transparent 15%),
    radial-gradient(circle at 46% 72%, rgba(48, 209, 88, 0.16) 0%, rgba(48, 209, 88, 0.16) 4%, transparent 15%),
    radial-gradient(circle at 92% 82%, rgba(255, 55, 95, 0.20) 0%, rgba(255, 55, 95, 0.20) 4%, transparent 16%);
  animation: referral-bokeh-field-b 24s ease-in-out infinite alternate;
  transform: translate3d(2%, 1%, 0) scale(1.06);
}

.referral-modal-card {
  isolation: isolate;
  background-color: rgba(7, 9, 15, 0.9);
  box-shadow:
    0 38px 110px rgba(0, 0, 0, 0.86),
    0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.referral-modal-card-light {
  opacity: 0.52;
  mix-blend-mode: screen;
  filter: blur(22px) saturate(142%);
  background:
    radial-gradient(circle at 16% 14%, rgba(10, 132, 255, 0.36) 0%, rgba(10, 132, 255, 0.36) 6%, rgba(10, 132, 255, 0.18) 13%, transparent 25%),
    radial-gradient(circle at 82% 18%, rgba(100, 210, 255, 0.24) 0%, rgba(100, 210, 255, 0.24) 5%, rgba(100, 210, 255, 0.12) 12%, transparent 24%),
    radial-gradient(circle at 76% 72%, rgba(191, 90, 242, 0.28) 0%, rgba(191, 90, 242, 0.28) 6%, rgba(191, 90, 242, 0.13) 14%, transparent 26%),
    radial-gradient(circle at 24% 86%, rgba(255, 159, 10, 0.18) 0%, rgba(255, 159, 10, 0.18) 5%, rgba(255, 159, 10, 0.09) 12%, transparent 24%);
  animation: referral-card-bokeh 16s ease-in-out infinite alternate;
  transform: translate3d(-1%, -1%, 0) scale(1.08);
}

.referral-modal-card-light::before,
.referral-modal-card-light::after {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
  border-radius: inherit;
}

.referral-modal-card-light::before {
  opacity: 0.62;
  filter: blur(16px);
  background:
    radial-gradient(circle at 46% 22%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.18) 3%, transparent 12%),
    radial-gradient(circle at 60% 44%, rgba(10, 132, 255, 0.18) 0%, rgba(10, 132, 255, 0.18) 4%, transparent 14%),
    radial-gradient(circle at 34% 68%, rgba(255, 55, 95, 0.14) 0%, rgba(255, 55, 95, 0.14) 4%, transparent 15%);
  animation: referral-card-bokeh-sparkle 21s ease-in-out infinite alternate;
}

.referral-modal-card-light::after {
  opacity: 0.44;
  filter: blur(30px);
  background:
    radial-gradient(circle at 12% 54%, rgba(48, 209, 88, 0.12) 0%, rgba(48, 209, 88, 0.12) 5%, transparent 18%),
    radial-gradient(circle at 90% 52%, rgba(191, 90, 242, 0.22) 0%, rgba(191, 90, 242, 0.22) 6%, transparent 21%);
  animation: referral-card-bokeh-deep 26s ease-in-out infinite alternate;
}

@keyframes referral-bokeh-field-a {
  0% {
    opacity: 0.38;
    transform: translate3d(-2.5%, -1.5%, 0) scale(1.03);
  }

  50% {
    opacity: 0.52;
    transform: translate3d(1.5%, 1%, 0) scale(1.07);
  }

  100% {
    opacity: 0.42;
    transform: translate3d(3%, -0.5%, 0) scale(1.04);
  }
}

@keyframes referral-bokeh-field-b {
  0% {
    opacity: 0.18;
    transform: translate3d(2%, 1%, 0) scale(1.06);
  }

  100% {
    opacity: 0.34;
    transform: translate3d(-2%, -1.5%, 0) scale(1.1);
  }
}

@keyframes referral-card-bokeh {
  0% {
    opacity: 0.42;
    transform: translate3d(-2%, -1%, 0) scale(1.08);
  }

  50% {
    opacity: 0.6;
    transform: translate3d(1.5%, 1%, 0) scale(1.11);
  }

  100% {
    opacity: 0.48;
    transform: translate3d(2.5%, -0.5%, 0) scale(1.09);
  }
}

@keyframes referral-card-bokeh-sparkle {
  0% {
    opacity: 0.46;
    transform: translate3d(1%, -1%, 0) scale(1);
  }

  100% {
    opacity: 0.72;
    transform: translate3d(-1.5%, 1%, 0) scale(1.06);
  }
}

@keyframes referral-card-bokeh-deep {
  0% {
    opacity: 0.34;
    transform: translate3d(-1%, 1%, 0) scale(1.02);
  }

  100% {
    opacity: 0.52;
    transform: translate3d(1.5%, -1.5%, 0) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .referral-modal-atmosphere::before,
  .referral-modal-atmosphere::after,
  .referral-modal-card-light,
  .referral-modal-card-light::before,
  .referral-modal-card-light::after {
    animation: none;
  }
}