.o2v2[data-astro-cid-cvskbb5b] {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  border: 10px solid red;
  position: relative;
  --speed: 20s;
  ---angle: calc(360deg / var(---charCount));
  ---offset: 300px;
  transform-style: preserve-3d;
  background-color: #000;
}

.o2v2[data-astro-cid-cvskbb5b] {
  & svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    border: 1px solid #000;
    transform: rotate(20deg);
    overflow: visible;
    perspective: 1000px;
    perspective-origin: 500px 500px;
  }

  & svg * {
    vector-effect: non-scaling-stroke;
  }

  & circle, & rect, & polygon, & path, & .item {
    fill: #000;
    stroke: none;
    transform-origin: 500px 500px;
  }

  & .sun {
    fill: #7b68ee;
  }

  & text {
    --fontSize: 90px;
    font: 800 var(--fontSize) sans-serif;
    text-transform: uppercase;
    transform: translate(-.5ch, calc(var(--fontSize) * .4));
    stroke: none;
    fill: currentColor;
  }

  & .item {
    transform: rotateY(0) translateZ(var(---offset));
    ---delay: calc(var(--speed) / var(---charCount) * var(---index) * -1);
  }

  & .-back {
    animation: rotate-back var(--speed) var(---delay) linear infinite;
    animation-direction: reverse;
    color: #000;

    & text {
      animation: colorFade-back var(--speed) var(---delay) linear infinite;
    }
  }

  & .-front {
    animation: rotate-front var(--speed) var(---delay) linear infinite;
    animation-direction: reverse;
    color: #fff;

    & text {
      animation: colorFade-front var(--speed) var(---delay) linear infinite;
    }
  }

  & circle {
    fill: #000;
    transform: translateZ(400px);
  }
}

@keyframes rotate-front {
  0% {
    transform: rotateY(-72deg) translateZ(var(---offset));
    opacity: 0;
  }

  24.999% {
    transform: rotateY(-72deg) translateZ(var(---offset));
    opacity: 0;
  }

  25% {
    transform: rotateY(-72deg) translateZ(var(---offset));
    opacity: 1;
  }

  75% {
    transform: rotateY(72deg) translateZ(var(---offset));
    opacity: 1;
  }

  75.001% {
    transform: rotateY(72deg) translateZ(var(---offset));
    opacity: 0;
  }

  100% {
    transform: rotateY(72deg) translateZ(var(---offset));
    opacity: 0;
    color: #000;
  }
}

@keyframes rotate-back {
  0% {
    transform: rotateY(110deg) translateZ(var(---offset));
    opacity: 0;
  }

  24.999% {
    transform: rotateY(110deg) translateZ(var(---offset));
    opacity: 0;
  }

  25% {
    transform: rotateY(110deg) translateZ(var(---offset));
    opacity: 1;
  }

  75% {
    transform: rotateY(290deg) translateZ(var(---offset));
    opacity: 1;
  }

  75.001% {
    transform: rotateY(290deg) translateZ(var(---offset));
    opacity: 0;
  }

  100% {
    transform: rotateY(290deg) translateZ(var(---offset));
    opacity: 0;
  }
}

@keyframes colorFade-front {
  0% {
    color: #000;
  }

  40% {
    color: #000;
  }

  70% {
    color: #7b68ee;
  }

  100% {
    color: #000;
  }
}

@keyframes colorFade-back {
  0% {
    color: #000;
  }

  50% {
    color: #000;
  }

  55% {
    color: #7b68ee;
  }

  75% {
    color: #000;
  }

  100% {
    color: #000;
  }
}