.isavens-pearl-background {
  --pearl-base: #f8f7f4;
  --pearl-veil: oklch(98.4% 0.008 88 / .92);
  --pearl-shift: oklch(96.6% 0.018 178 / .42);
  --pearl-warm: oklch(97.2% 0.017 92 / .52);
  --pearl-cool: oklch(96.9% 0.015 225 / .36);
  --pearl-sheen-opacity: 0;
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  background: var(--pearl-base);
}

.isavens-pearl-background::before,
.isavens-pearl-background::after {
  content: "";
  position: fixed;
  inset: -10vh -8vw;
  z-index: 0;
  pointer-events: none;
}

.isavens-pearl-background::before {
  background:
    linear-gradient(112deg, var(--pearl-veil) 0%, var(--pearl-warm) 31%, var(--pearl-shift) 56%, var(--pearl-cool) 76%, var(--pearl-veil) 100%),
    conic-gradient(from 214deg at 82% 74%, oklch(99% 0.006 82 / .22), oklch(96.6% 0.018 178 / .24), oklch(97.2% 0.014 312 / .16), oklch(97.2% 0.017 92 / .22), oklch(99% 0.006 82 / .22)),
    linear-gradient(18deg, transparent 14%, rgb(255 255 255 / .26) 43%, transparent 62%);
  background-attachment: fixed;
  background-blend-mode: soft-light, screen, normal;
  background-position: 50% 8%, 82% 74%, 18% 0%;
  background-size: 160% 160%, 210% 210%, 120% 120%;
  transform: translateZ(0);
}

.isavens-pearl-background::after {
  background:
    linear-gradient(105deg, transparent 34%, rgb(255 255 255 / .2) 45%, transparent 56%),
    repeating-linear-gradient(118deg, rgb(255 255 255 / .1) 0 1px, transparent 1px 12px);
  mix-blend-mode: soft-light;
  opacity: var(--pearl-sheen-opacity);
}

@media (prefers-color-scheme: dark) {
  .isavens-pearl-background {
    --pearl-base: #12101a;
    --pearl-veil: oklch(19% 0.032 296 / .94);
    --pearl-shift: oklch(36% 0.055 186 / .42);
    --pearl-warm: oklch(25% 0.052 312 / .52);
    --pearl-cool: oklch(31% 0.058 238 / .44);
    background: var(--pearl-base);
  }

  .isavens-pearl-background::before {
    background:
      linear-gradient(116deg, var(--pearl-veil) 0%, var(--pearl-warm) 30%, var(--pearl-cool) 55%, var(--pearl-shift) 76%, var(--pearl-veil) 100%),
      conic-gradient(from 205deg at 82% 74%, oklch(26% 0.04 302 / .24), oklch(31% 0.058 238 / .24), oklch(36% 0.055 186 / .18), oklch(25% 0.052 312 / .24), oklch(26% 0.04 302 / .24)),
      linear-gradient(20deg, transparent 16%, rgb(116 231 219 / .1) 44%, transparent 64%);
    background-attachment: fixed;
    background-blend-mode: screen, soft-light, normal;
    background-position: 50% 8%, 82% 74%, 18% 0%;
    background-size: 160% 160%, 210% 210%, 120% 120%;
  }

  .isavens-pearl-background::after {
    background:
      linear-gradient(105deg, transparent 35%, rgb(126 231 220 / .12) 45%, transparent 56%),
      repeating-linear-gradient(118deg, rgb(215 195 255 / .07) 0 1px, transparent 1px 13px);
  }
}