.visual {
  /* transform: translateZ(0); */
  background: linear-gradient(
      30deg,
      hsla(274, 100%, 77%, 0.05) 0%,
      hsla(200, 43%, 1%, 0.2) 30%,
      hsla(200, 43%, 1%, 0.2) 70%,
      hsla(151, 50%, 53%, 0.1) 100%
    ),
    hsla(200, 43%, 1%, 0.8);
  /* background: hsla(200, 43%, 1%, 0.2); */
  box-shadow: 0px 1px 27px rgba(158, 68, 239, 0.06),
    /* 0 0 0 1px rgba(121, 89, 134, 0.25), */ 0 10px 20px 0px rgba(20, 17, 21, 0.8),
    inset 0 0.2px 1px 0.2px rgba(214, 210, 210, 0.4),
    inset -0.4px -0.4px 1px -0.3px rgba(74, 252, 175, 0.4);
  /* border: 1px solid rgba(0, 0, 0, 0.05); */
  /* border-radius: 16px; */

  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);

  /* border: 1px solid #1c1c1c; */
  /* animation: 2s ease-in-out infinite alternate; */

  background-repeat: no-repeat;
  background-size: contain;
}

.visual--gold {
  background: radial-gradient(#fcdf9d50, #dbb33340);
}

.visual--gold::before {
  content: ' ';
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 60px #fcdf9d);
  background: radial-gradient(#fcdf9d50, #dbb33320);
  /* border: 1px solid #dbb33320; */
}

@keyframes opacity-pulse {
  from {
    opacity: 0.5;
  }

  to {
    opacity: 1;
  }
}

@keyframes svg-shadow {
  from {
    filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #d99f0c) drop-shadow(0 0 6px #d99f0c);
  }

  to {
    filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 6px #d99f0c) drop-shadow(0 0 9px #d99f0c);
  }
}

@keyframes blank-svg-shadow {
  from {
    filter: drop-shadow(0 0 2px #bada55) drop-shadow(0 0 2px #bada55) drop-shadow(0 0 2px #bada55);
  }

  to {
    filter: drop-shadow(0 0 3px #bada55) drop-shadow(0 0 2px #bada55) drop-shadow(0 0 2px #bada55);
  }
}