:root {
  color-scheme: dark;
  --mx: 50%;
  --my: 50%;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #05060a;
}

body { min-height: 100svh; }

.canvas {
  position: fixed;
  inset: 0;
  isolation: isolate;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(62, 81, 145, .15), transparent 24rem),
    radial-gradient(circle at 20% 10%, #151431 0, transparent 38%),
    linear-gradient(145deg, #03040a 0%, #090b17 52%, #030309 100%);
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .48;
  mix-blend-mode: screen;
  animation: drift 16s ease-in-out infinite alternate;
}

.glow-a {
  width: 48vw;
  height: 48vw;
  left: -15vw;
  top: -19vw;
  background: #3e43c9;
}

.glow-b {
  width: 40vw;
  height: 40vw;
  right: -13vw;
  bottom: -15vw;
  background: #0d9d99;
  animation-delay: -6s;
}

.glow-c {
  width: 28vw;
  height: 28vw;
  left: 42%;
  top: 35%;
  background: #7137a8;
  opacity: .22;
  animation-delay: -10s;
}

.orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(52vw, 34rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  animation: breathe 8s ease-in-out infinite;
}

.orb-core {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 28%, rgba(255,255,255,.65), transparent 7%),
    radial-gradient(circle at 40% 35%, #5b66c8 0, #181c48 25%, #090b18 64%, #020308 100%);
  box-shadow:
    0 0 8rem rgba(65, 80, 190, .38),
    inset -2rem -2rem 4rem rgba(0, 0, 0, .8),
    inset 1rem 1rem 2rem rgba(160, 178, 255, .13);
}

.ring {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(186, 199, 255, .2);
  border-radius: 50%;
  transform: rotateX(68deg) rotateZ(12deg);
  box-shadow: 0 0 1.3rem rgba(121, 141, 255, .13);
}

.ring-a { animation: spin 17s linear infinite; }
.ring-b { inset: 2%; transform: rotateX(74deg) rotateZ(75deg); animation: spin-alt 23s linear infinite; }
.ring-c { inset: -5%; border-color: rgba(95, 218, 206, .13); transform: rotateY(68deg) rotateZ(35deg); animation: spin 29s linear infinite reverse; }

.veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 10%, rgba(0,0,0,.12) 52%, rgba(0,0,0,.7) 120%);
  pointer-events: none;
}

.grain {
  position: absolute;
  inset: -50%;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  animation: grain .25s steps(2) infinite;
  pointer-events: none;
}

@keyframes drift {
  to { transform: translate3d(7vw, 4vh, 0) scale(1.12); }
}

@keyframes breathe {
  50% { transform: translate(-50%, -50%) scale(1.035); }
}

@keyframes spin {
  to { transform: rotateX(68deg) rotateZ(372deg); }
}

@keyframes spin-alt {
  to { transform: rotateX(74deg) rotateZ(-285deg); }
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(2%, -3%); }
  50% { transform: translate(-3%, 2%); }
  75% { transform: translate(3%, 4%); }
  100% { transform: translate(-2%, -4%); }
}

@media (max-width: 700px) {
  .orb { width: min(86vw, 30rem); }
  .glow-a, .glow-b { width: 75vw; height: 75vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}