@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  --bg: rgba(12, 9, 28, 1);
--c1: #44b9ed;
--c2: #bf4cf0;
--c3: #4f6ce4;
}

/*html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  font-family: system-ui, sans-serif;
  background-color: var(--bg);
}*/

.orb {
display: grid;
    grid-template-areas: "stack";
    inline-size: min(80vmin, 100%);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scale(2.2);
    filter: blur(41px);
    opacity: 0.4;

  &::before,
  &::after {
    content: "";
    display: block;
    grid-area: stack;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: translateZ(0);
  }

  &::before {
    background: conic-gradient(
        from calc(var(--angle) * 2) at 25% 70%,
        var(--c3),
        transparent 20% 80%,
        var(--c3)
      ),
      conic-gradient(
        from calc(var(--angle) * 2) at 45% 75%,
        var(--c2),
        transparent 30% 60%,
        var(--c2)
      ),
      conic-gradient(
        from calc(var(--angle) * -3) at 80% 20%,
        var(--c1),
        transparent 40% 60%,
        var(--c1)
      ),
      conic-gradient(
        from calc(var(--angle) * 2) at 15% 5%,
        var(--c2),
        transparent 10% 90%,
        var(--c2)
      ),
      conic-gradient(
        from calc(var(--angle) * 1) at 20% 80%,
        var(--c1),
        transparent 10% 90%,
        var(--c1)
      ),
      conic-gradient(
        from calc(var(--angle) * -2) at 85% 10%,
        var(--c3),
        transparent 20% 80%,
        var(--c3)
      );
    box-shadow: inset var(--bg) 0 0 5vmin 1vmin;
    filter: blur(3vmin) contrast(5);
    -webkit-animation: rotate 20s linear infinite;
            animation: rotate 20s linear infinite;
  }

  &::after {
    --dot: 1.5px;
    background-image: radial-gradient(
      circle at center,
      var(--bg) var(--dot),
      transparent var(--dot)
    );
    background-size: calc(var(--dot) * 2) calc(var(--dot) * 2);
    -webkit-mask-image: radial-gradient(black 25%, transparent 75%);
            mask-image: radial-gradient(black 25%, transparent 75%);
    -webkit-backdrop-filter: blur(8vmin) contrast(10);
            backdrop-filter: blur(8vmin) contrast(10);
    mix-blend-mode: overlay;
  }
}

@-webkit-keyframes rotate {
  to {
    --angle: 360deg;
  }
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}