:root {
  color-scheme: dark;
  background: #030409;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { overflow: hidden; }
.stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 52%, #0b101d 0, #05070e 35%, #030409 70%);
}
.halo {
  position: absolute;
  width: min(68vw, 64svh, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(111 134 202 / .065), transparent 67%);
}
.sculpture {
  position: relative;
  display: block;
  width: min(94vw, 92svh, 960px);
  height: auto;
  overflow: visible;
  animation: turn 32s ease-in-out infinite;
  will-change: transform;
}
.glint-one {
  stroke-dasharray: 170 1250;
  animation: current 24s linear infinite;
}
.glint-two {
  stroke-dasharray: 85 1600;
  animation: countercurrent 32s linear infinite reverse;
}
@keyframes current { to { stroke-dashoffset: -2840; } }
@keyframes countercurrent { to { stroke-dashoffset: -3370; } }
@keyframes turn {
  0%, 100% { transform: perspective(1200px) rotateX(8deg) rotateY(-13deg) rotate(-18deg) scale(.96); }
  50% { transform: perspective(1200px) rotateX(-9deg) rotateY(16deg) rotate(18deg) scale(1.04); }
}
@media (max-width: 600px) {
  .sculpture { width: min(112vw, 86svh); }
}
@media (prefers-reduced-motion: reduce) {
  .sculpture, .glint { animation: none; will-change: auto; }
  .sculpture { transform: rotate(-12deg); }
}