animarte/animarte.css

Making the digital world a little more animated place

.animarte-ellipsis {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.animarte-ellipsis__element {
  --width: 20%;
  --height: 20%;
  width: var(--width);
  height: var(--height);
  border-radius: 100vw;
  background: currentColor;
  animation-iteration-count: infinite;
}

.animarte {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  width: var(--animarte-size);
  height: var(--animarte-size);
  color: var(--animarte-color);
}

.animarte-blocks--dancing-1 .animarte-blocks__element {
  display: grid;
  grid-template: 1fr 1fr/1fr 1fr;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 75%;
  height: 75%;
}
.animarte-blocks--dancing-1 .animarte-blocks__element:nth-of-type(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.animarte-blocks--dancing-1 .animarte-blocks__element:nth-of-type(2) {
  opacity: 0.5;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.animarte-blocks--dancing-1 .animarte-blocks__element:nth-of-type(3) {
  opacity: 0.5;
  transform: translate(-50%, -50%) rotate(135deg);
}
.animarte-blocks--dancing-1 .animarte-blocks__element:nth-of-type(4) {
  transform: translate(-50%, -50%) rotate(-135deg);
}
.animarte-blocks--dancing-1 .animarte-blocks__element::before {
  content: "";
  display: block;
  position: relative;
  margin: 7.5%;
  background: currentColor;
  animation-iteration-count: infinite;
  animation-duration: var(--animarte-speed);
  animation-name: blockDancing1;
}

@keyframes blockDancing1 {
  0% {
    top: 0%;
    left: 0%;
  }
  25% {
    top: 0%;
    left: 100%;
  }
  50% {
    top: 100%;
    left: 100%;
  }
  75% {
    top: 100%;
    left: 0%;
  }
  100% {
    top: 0%;
    left: 0%;
  }
}
.animarte-blocks--dancing-2 .animarte-blocks__element {
  display: grid;
  grid-template: 1fr 1fr/1fr 1fr;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%;
  height: 70%;
}
.animarte-blocks--dancing-2 .animarte-blocks__element:nth-of-type(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.animarte-blocks--dancing-2 .animarte-blocks__element:nth-of-type(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.animarte-blocks--dancing-2 .animarte-blocks__element:nth-of-type(3) {
  transform: translate(-50%, -50%) rotate(135deg);
}
.animarte-blocks--dancing-2 .animarte-blocks__element:nth-of-type(4) {
  transform: translate(-50%, -50%) rotate(-135deg);
}
.animarte-blocks--dancing-2 .animarte-blocks__element::before {
  content: "";
  display: block;
  position: relative;
  background: currentColor;
  animation-iteration-count: infinite;
  animation-duration: var(--animarte-speed);
  animation-name: blockDancing2;
}

@keyframes blockDancing2 {
  0% {
    top: 0%;
    left: 0%;
  }
  50% {
    top: 0%;
    left: 100%;
    border-radius: calc(var(--animarte-size) / 2);
    scale: 0.5;
  }
  100% {
    top: 100%;
    left: 100%;
  }
}
.animarte-blocks--rolling .animarte-blocks__element {
  display: grid;
  grid-template: 1fr 1fr/1fr 1fr;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.animarte-blocks--rolling .animarte-blocks__element:nth-of-type(1) {
  rotate: 0deg;
}
.animarte-blocks--rolling .animarte-blocks__element:nth-of-type(3) {
  rotate: 180deg;
}
.animarte-blocks--rolling .animarte-blocks__element:nth-of-type(2) {
  rotate: 270deg;
}
.animarte-blocks--rolling .animarte-blocks__element::before {
  content: "";
  display: block;
  position: relative;
  border-radius: 25%;
  margin: 7.5%;
  background: currentColor;
  animation-iteration-count: infinite;
  animation-duration: var(--animarte-speed);
}
.animarte-blocks--rolling .animarte-blocks__element:nth-child(1)::before {
  animation-name: blockKeyframes;
  animation-delay: calc(var(--animarte-speed) / 4 / 4 * 1);
}
.animarte-blocks--rolling .animarte-blocks__element:nth-child(2)::before {
  animation-name: blockKeyframes;
  animation-delay: calc(var(--animarte-speed) / 4 / 4 * 2);
}
.animarte-blocks--rolling .animarte-blocks__element:nth-child(3)::before {
  animation-name: blockKeyframes;
  animation-delay: calc(var(--animarte-speed) / 4 / 4 * 3);
}

@keyframes blockKeyframes {
  0% {
    top: 0%;
    left: 0%;
  }
  25% {
    top: 0%;
    left: 100%;
    transform: rotateZ(180deg);
  }
  50% {
    top: 100%;
    left: 100%;
    transform: rotateZ(360deg);
  }
  75% {
    top: 100%;
    left: 0%;
    transform: rotateZ(540deg);
  }
  100% {
    top: 0%;
    left: 0%;
    transform: rotateZ(720deg);
  }
}
.animarte-circles--agitated-1 .animarte-circles__element {
  position: absolute;
  top: 50%;
  width: 20%;
  height: 20%;
  border-radius: 100vw;
  background: currentColor;
  animation-name: circlesAgitated1;
  animation-duration: var(--animarte-speed);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.animarte-circles--agitated-1 .animarte-circles__element:nth-of-type(1) {
  opacity: calc(1 / 1);
  animation-delay: calc(var(--animarte-speed) * 0.02 * 1);
}
.animarte-circles--agitated-1 .animarte-circles__element:nth-of-type(2) {
  opacity: calc(1 / 2);
  animation-delay: calc(var(--animarte-speed) * 0.02 * 2);
}
.animarte-circles--agitated-1 .animarte-circles__element:nth-of-type(3) {
  opacity: calc(1 / 3);
  animation-delay: calc(var(--animarte-speed) * 0.02 * 3);
}

@keyframes circlesAgitated1 {
  0%, 100% {
    left: 0%;
    height: 20%;
    transform: translate(0%, -50%);
  }
  25% {
    height: 16%;
  }
  50% {
    left: 100%;
    height: 20%;
    transform: translate(-100%, -50%);
  }
  75% {
    height: 15%;
  }
}
.animarte-circles {
  display: grid;
}
.animarte-circles--breathing .animarte-circles__element {
  grid-area: 1/1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  animation-name: blinkKeyframes;
  animation-duration: var(--animarte-speed);
  animation-iteration-count: infinite;
}
.animarte-circles--breathing .animarte-circles__element:nth-of-type(1) {
  animation-delay: calc(var(--animarte-speed) / 2 / 4 * 1);
}
.animarte-circles--breathing .animarte-circles__element:nth-of-type(2) {
  animation-delay: calc(var(--animarte-speed) / 2 / 4 * 2);
}
.animarte-circles--breathing .animarte-circles__element:nth-of-type(3) {
  animation-delay: calc(var(--animarte-speed) / 2 / 4 * 3);
}

@keyframes blinkKeyframes {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
.animarte-circles {
  display: grid;
  justify-items: center;
  align-items: center;
}
.animarte-circles--pulsing-1 .animarte-circles__element {
  grid-area: 1/1;
  margin: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
  border: 1px solid currentColor;
  animation-name: circlesPulsing1;
  animation-duration: var(--animarte-speed);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.animarte-circles--pulsing-1 .animarte-circles__element:nth-of-type(1) {
  width: calc(20% * 1);
  height: calc(20% * 1);
  animation-delay: calc(var(--animarte-speed) / 2 / 4 * 1);
}
.animarte-circles--pulsing-1 .animarte-circles__element:nth-of-type(2) {
  width: calc(20% * 2);
  height: calc(20% * 2);
  animation-delay: calc(var(--animarte-speed) / 2 / 4 * 2);
}
.animarte-circles--pulsing-1 .animarte-circles__element:nth-of-type(3) {
  width: calc(20% * 3);
  height: calc(20% * 3);
  animation-delay: calc(var(--animarte-speed) / 2 / 4 * 3);
}
.animarte-circles--pulsing-1 .animarte-circles__element:nth-of-type(4) {
  width: calc(20% * 4);
  height: calc(20% * 4);
  animation-delay: calc(var(--animarte-speed) / 2 / 4 * 4);
}
.animarte-circles--pulsing-1 .animarte-circles__element:nth-of-type(5) {
  width: calc(20% * 5);
  height: calc(20% * 5);
  animation-delay: calc(var(--animarte-speed) / 2 / 4 * 5);
}

@keyframes circlesPulsing1 {
  0%, 100% {
    transform: scale(0.85);
    opacity: 0.2;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}
.animarte-circles {
  display: grid;
}
.animarte-circles--pulsing-2 .animarte-circles__element {
  grid-area: 1/1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  animation-name: blinkKeyframes;
  animation-duration: var(--animarte-speed);
  animation-iteration-count: infinite;
  transform: scale(0);
  opacity: 1;
}
.animarte-circles--pulsing-2 .animarte-circles__element:nth-of-type(1) {
  animation-delay: calc(var(--animarte-speed) * 0.2 * 1);
}
.animarte-circles--pulsing-2 .animarte-circles__element:nth-of-type(2) {
  animation-delay: calc(var(--animarte-speed) * 0.2 * 2);
}
.animarte-circles--pulsing-2 .animarte-circles__element:nth-of-type(3) {
  animation-delay: calc(var(--animarte-speed) * 0.2 * 3);
}
.animarte-circles--pulsing-2 .animarte-circles__element:nth-of-type(4) {
  animation-delay: calc(var(--animarte-speed) * 0.2 * 4);
}
.animarte-circles--pulsing-2 .animarte-circles__element:nth-of-type(5) {
  animation-delay: calc(var(--animarte-speed) * 0.2 * 5);
}

@keyframes blinkKeyframes {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.animarte-circles--rotating-1 {
  display: grid;
  justify-items: center;
  align-items: center;
}
.animarte-circles--rotating-1 .animarte-circles__element {
  grid-area: 1/1;
  margin: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
  border: calc(var(--animarte-size) * 0.1) solid currentColor;
  animation-name: circlesRotating1;
  animation-duration: var(--animarte-speed);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.animarte-circles--rotating-1 .animarte-circles__element:nth-of-type(1) {
  width: calc(100% - 30% * (1 - 1));
  height: calc(100% - 30% * (1 - 1));
  animation-delay: calc(var(--animarte-speed) / 2 / 4 * 1);
}
.animarte-circles--rotating-1 .animarte-circles__element:nth-of-type(2) {
  width: calc(100% - 30% * (2 - 1));
  height: calc(100% - 30% * (2 - 1));
  animation-delay: calc(var(--animarte-speed) / 2 / 4 * 2);
}
.animarte-circles--rotating-1 .animarte-circles__element:nth-of-type(3) {
  width: calc(100% - 30% * (3 - 1));
  height: calc(100% - 30% * (3 - 1));
  animation-delay: calc(var(--animarte-speed) / 2 / 4 * 3);
}

@keyframes circlesRotating1 {
  50% {
    transform: rotate3d(1, 1, 1, 1turn);
  }
}
.animarte-circles--rotating-2 {
  display: grid;
  justify-items: center;
  align-items: center;
}
.animarte-circles--rotating-2 .animarte-circles__element {
  grid-area: 1/1;
  margin: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
  border: calc(var(--animarte-size) * 0.1) solid currentColor;
  animation-name: circlesRotating2;
  animation-duration: var(--animarte-speed);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.animarte-circles--rotating-2 .animarte-circles__element:nth-of-type(1) {
  animation-delay: calc(var(--animarte-speed) / 2 / 4 * 1);
}
.animarte-circles--rotating-2 .animarte-circles__element:nth-of-type(2) {
  animation-delay: calc(var(--animarte-speed) / 2 / 4 * 2);
}
.animarte-circles--rotating-2 .animarte-circles__element:nth-of-type(3) {
  animation-delay: calc(var(--animarte-speed) / 2 / 4 * 3);
}

@keyframes circlesRotating2 {
  50% {
    transform: rotate3d(1, 1, 1, 1turn);
  }
}
.animarte-circles--rotating-3 {
  display: grid;
  justify-items: center;
  align-items: center;
}
.animarte-circles--rotating-3 .animarte-circles__element {
  grid-area: 1/1;
  margin: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
  border: calc(var(--animarte-size) * 0.1) solid currentColor;
  animation-duration: var(--animarte-speed);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.animarte-circles--rotating-3 .animarte-circles__element:nth-child(1) {
  animation-name: circlesRotating3Element1;
}
.animarte-circles--rotating-3 .animarte-circles__element:nth-child(2) {
  animation-name: circlesRotating3Element2;
}

@keyframes circlesRotating3Element1 {
  0% {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    transform: rotate3d(1, 0, 0, 1turn);
  }
}
@keyframes circlesRotating3Element2 {
  0% {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, 1turn);
  }
}
.animarte-circles--rotating-4 {
  display: grid;
  justify-items: center;
  align-items: center;
}
.animarte-circles--rotating-4 .animarte-circles__element {
  grid-area: 1/1;
  margin: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
  border: calc(var(--animarte-size) * 0.1) solid currentColor;
  animation-duration: var(--animarte-speed);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.animarte-circles--rotating-4 .animarte-circles__element:nth-child(1) {
  animation-name: circlesRotating4Element1;
}
.animarte-circles--rotating-4 .animarte-circles__element:nth-child(2) {
  animation-name: circlesRotating4Element2;
}

@keyframes circlesRotating4Element1 {
  0% {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    transform: rotate3d(1, 0, 1, 1turn);
  }
}
@keyframes circlesRotating4Element2 {
  0% {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    transform: rotate3d(0, 1, 1, 1turn);
  }
}
.animarte-clock {
  --radius: calc((var(--animarte-size) - 50%) / 2);
}
.animarte-clock--crazy-1 .animarte-clock__element:nth-child(1), .animarte-clock--crazy-1 .animarte-clock__element:nth-child(2), .animarte-clock--crazy-1 .animarte-clock__element:nth-child(3), .animarte-clock--crazy-1 .animarte-clock__element:nth-child(4) {
  position: absolute;
  left: 50%;
  top: 50%;
}
.animarte-clock--crazy-1 .animarte-clock__element:nth-child(1), .animarte-clock--crazy-1 .animarte-clock__element:nth-child(2) {
  border-radius: 100vw;
  width: 8%;
  animation-name: clockCrazy1;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: top;
  translate: -50% 0%;
}
.animarte-clock--crazy-1 .animarte-clock__element:nth-child(1) {
  height: 40%;
  background: currentColor;
  animation-duration: calc(var(--animarte-speed) / 3);
}
.animarte-clock--crazy-1 .animarte-clock__element:nth-child(2) {
  height: 30%;
  animation-duration: var(--animarte-speed);
  background: color-mix(in srgb, currentColor 50%, transparent);
}
.animarte-clock--crazy-1 .animarte-clock__element:nth-child(3), .animarte-clock--crazy-1 .animarte-clock__element:nth-child(4) {
  transform: translate(-50%, -50%);
}
.animarte-clock--crazy-1 .animarte-clock__element:nth-child(3) {
  width: 8%;
  height: 8%;
  background-color: currentColor;
  border: 1px solid color-mix(in srgb, currentColor 90%, #000);
  background: currentColor;
  border-radius: 100vw;
}
.animarte-clock--crazy-1 .animarte-clock__element:nth-child(4) {
  width: 100%;
  height: 100%;
  border: 4px solid currentColor;
  border-radius: 100vw;
}

@keyframes clockCrazy1 {
  to {
    transform: rotate(1turn);
  }
}
.animarte-ellipsis--agitated .animarte-ellipsis__element {
  position: relative;
  display: flex;
  align-items: flex-end;
  background-color: transparent;
}
.animarte-ellipsis--agitated .animarte-ellipsis__element::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: currentColor;
  animation-name: ellipsisAgitated;
  animation-duration: var(--animarte-speed);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.animarte-ellipsis--agitated .animarte-ellipsis__element:nth-of-type(1)::before {
  animation-delay: calc(var(--animarte-speed) / 4 * 1);
}
.animarte-ellipsis--agitated .animarte-ellipsis__element:nth-of-type(2)::before {
  animation-delay: calc(var(--animarte-speed) / 4 * 2);
}
.animarte-ellipsis--agitated .animarte-ellipsis__element:nth-of-type(3)::before {
  animation-delay: calc(var(--animarte-speed) / 4 * 3);
}

@keyframes ellipsisAgitated {
  50% {
    height: 50%;
  }
}
.animarte-ellipsis--blinking-1 .animarte-ellipsis__element {
  animation-name: ellipsisBlinking1;
  animation-duration: var(--animarte-speed);
  animation-timing-function: ease-in-out;
}
.animarte-ellipsis--blinking-1 .animarte-ellipsis__element:nth-of-type(1) {
  animation-delay: calc(var(--animarte-speed) / 4 * 1);
}
.animarte-ellipsis--blinking-1 .animarte-ellipsis__element:nth-of-type(2) {
  animation-delay: calc(var(--animarte-speed) / 4 * 2);
}
.animarte-ellipsis--blinking-1 .animarte-ellipsis__element:nth-of-type(3) {
  animation-delay: calc(var(--animarte-speed) / 4 * 3);
}

@keyframes ellipsisBlinking1 {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0;
    transform: scale(0);
  }
}
.animarte-ellipsis--blinking-2 .animarte-ellipsis__element {
  animation-duration: var(--animarte-speed);
  animation-timing-function: ease-in-out;
}
.animarte-ellipsis--blinking-2 .animarte-ellipsis__element:nth-of-type(1) {
  animation-name: ellipsisBlinking2Left;
}
.animarte-ellipsis--blinking-2 .animarte-ellipsis__element:nth-of-type(2) {
  animation-name: ellipsisBlinking2Middle;
}
.animarte-ellipsis--blinking-2 .animarte-ellipsis__element:nth-of-type(3) {
  animation-name: ellipsisBlinking2Right;
}

@keyframes ellipsisBlinking2Left {
  0%, 24.9%, 100% {
    opacity: 0;
  }
  25%, 99.9% {
    opacity: 1;
  }
}
@keyframes ellipsisBlinking2Middle {
  0%, 49.9%, 100% {
    opacity: 0;
  }
  50%, 99.9% {
    opacity: 1;
  }
}
@keyframes ellipsisBlinking2Right {
  0%, 74.9%, 100% {
    opacity: 0;
  }
  75%, 99.9% {
    opacity: 1;
  }
}
.animarte-ellipsis--blinking-3 .animarte-ellipsis__element {
  animation-name: ellipsisBlinking3;
  animation-duration: var(--animarte-speed);
  animation-timing-function: ease-in-out;
  opacity: 0;
}
.animarte-ellipsis--blinking-3 .animarte-ellipsis__element:nth-of-type(1) {
  animation-delay: calc(var(--animarte-speed) / 3 * 1);
}
.animarte-ellipsis--blinking-3 .animarte-ellipsis__element:nth-of-type(2) {
  animation-delay: calc(var(--animarte-speed) / 3 * 2);
}
.animarte-ellipsis--blinking-3 .animarte-ellipsis__element:nth-of-type(3) {
  animation-delay: calc(var(--animarte-speed) / 3 * 3);
}

@keyframes ellipsisBlinking3 {
  0%, 33.33% {
    opacity: 1;
  }
  33.34%, 99.9% {
    opacity: 0;
  }
}
.animarte-ellipsis--blinking-4 .animarte-ellipsis__element {
  animation-name: ellipsisBlinking4;
  animation-duration: var(--animarte-speed);
  animation-timing-function: ease-in-out;
}
.animarte-ellipsis--blinking-4 .animarte-ellipsis__element:nth-of-type(1) {
  animation-delay: calc(var(--animarte-speed) / 3 * 1);
}
.animarte-ellipsis--blinking-4 .animarte-ellipsis__element:nth-of-type(2) {
  animation-delay: calc(var(--animarte-speed) / 3 * 2);
}
.animarte-ellipsis--blinking-4 .animarte-ellipsis__element:nth-of-type(3) {
  animation-delay: calc(var(--animarte-speed) / 3 * 3);
}

@keyframes ellipsisBlinking4 {
  50% {
    opacity: 0.4;
  }
}
.animarte-ellipsis--blinking-5 .animarte-ellipsis__element {
  animation-name: ellipsisBlinking5;
  animation-duration: var(--animarte-speed);
  animation-timing-function: linear;
  animation-direction: alternate;
}
.animarte-ellipsis--blinking-5 .animarte-ellipsis__element:nth-of-type(1) {
  animation-name: ellipsisBlinking5Left;
}
.animarte-ellipsis--blinking-5 .animarte-ellipsis__element:nth-of-type(2) {
  animation-name: ellipsisBlinking5Middle;
}
.animarte-ellipsis--blinking-5 .animarte-ellipsis__element:nth-of-type(3) {
  animation-name: ellipsisBlinking5Right;
}

@keyframes ellipsisBlinking5Left {
  0%, 25% {
    opacity: 0.4;
  }
  50%, 100% {
    opacity: 1;
  }
}
@keyframes ellipsisBlinking5Middle {
  0%, 25%, 75%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
@keyframes ellipsisBlinking5Right {
  0%, 50% {
    opacity: 1;
  }
  75%, 100% {
    opacity: 0.4;
  }
}
@property --ellipsis-dancing-1_angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}
.animarte-ellipsis--dancing-1 .animarte-ellipsis__element {
  position: absolute;
  animation-timing-function: linear;
  animation-duration: var(--animarte-speed);
}
.animarte-ellipsis--dancing-1 .animarte-ellipsis__element:nth-of-type(1) {
  animation-name: ellipsisDancing1Left;
}
.animarte-ellipsis--dancing-1 .animarte-ellipsis__element:nth-of-type(2) {
  animation-name: ellipsisDancing1Middle;
}
.animarte-ellipsis--dancing-1 .animarte-ellipsis__element:nth-of-type(3) {
  --ellipsis-dancing-1_angle: 0deg;
  --radius: calc(var(--animarte-size) / 2 - 2.5 * var(--width));
  left: calc(50% - var(--width) / 2);
  animation-timing-function: linear;
  animation-name: ellipsisDancing1Right;
  translate: calc(cos(var(--ellipsis-dancing-1_angle)) * var(--radius)) calc(sin(var(--ellipsis-dancing-1_angle) * -1) * var(--radius));
}

@keyframes ellipsisDancing1Left {
  0% {
    right: 100%;
    bottom: 50%;
    transform: translate(100%, 50%);
  }
  100% {
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
  }
}
@keyframes ellipsisDancing1Middle {
  0% {
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
  }
  100% {
    right: 0%;
    bottom: 50%;
    transform: translate(0%, 50%);
  }
}
@keyframes ellipsisDancing1Right {
  to {
    --ellipsis-dancing-1_angle: 180deg;
  }
}
@property --ellipsis-dancing-2_angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}
.animarte-ellipsis--dancing-2 .animarte-ellipsis__element {
  position: absolute;
  animation-timing-function: linear;
  animation-duration: var(--animarte-speed);
}
.animarte-ellipsis--dancing-2 .animarte-ellipsis__element:nth-of-type(1) {
  animation-name: ellipsisDancing2Left;
}
.animarte-ellipsis--dancing-2 .animarte-ellipsis__element:nth-of-type(2) {
  animation-name: ellipsisDancing2Middle;
}
.animarte-ellipsis--dancing-2 .animarte-ellipsis__element:nth-of-type(3) {
  --radius: calc(var(--animarte-size) / 4 - var(--width));
  animation-timing-function: linear;
  animation-name: ellipsisDancing2Right;
  translate: calc(cos(var(--ellipsis-dancing-2_angle)) * var(--radius)) calc(sin(var(--ellipsis-dancing-2_angle) * -1) * var(--radius));
}

@keyframes ellipsisDancing2Left {
  0%, 50% {
    right: 100%;
    bottom: 50%;
    transform: translate(100%, 50%);
  }
  100% {
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
  }
}
@keyframes ellipsisDancing2Middle {
  0% {
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
  }
  50%, 100% {
    right: 0%;
    bottom: 50%;
    transform: translate(0%, 50%);
  }
}
@keyframes ellipsisDancing2Right {
  0% {
    --ellipsis-dancing-2_angle: 0deg;
    left: calc(50% + var(--width) - var(--width) / 2);
  }
  49.99% {
    --ellipsis-dancing-2_angle: 180deg;
    left: calc(50% + var(--width) - var(--width) / 2);
  }
  50% {
    --ellipsis-dancing-2_angle: 0deg;
    left: var(--width);
  }
  100% {
    --ellipsis-dancing-2_angle: -180deg;
    left: var(--width);
  }
}
@property --ellipsis-dancing-3_angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}
.animarte-ellipsis--dancing-3 .animarte-ellipsis__element {
  position: absolute;
  animation-timing-function: linear;
  animation-duration: var(--animarte-speed);
}
.animarte-ellipsis--dancing-3 .animarte-ellipsis__element:nth-of-type(1) {
  animation-name: ellipsisDancing3Left;
}
.animarte-ellipsis--dancing-3 .animarte-ellipsis__element:nth-of-type(2) {
  animation-name: ellipsisDancing3Middle;
}
.animarte-ellipsis--dancing-3 .animarte-ellipsis__element:nth-of-type(3) {
  --ellipsis-dancing-3_angle: 0deg;
  --radius: calc(var(--animarte-size) / 2 - 2.5 * var(--width));
  left: calc(50% - var(--width) / 2);
  animation-timing-function: linear;
  animation-name: ellipsisDancing3Right;
  translate: calc(cos(var(--ellipsis-dancing-3_angle)) * var(--radius)) calc(sin(var(--ellipsis-dancing-3_angle) * -1) * var(--radius));
}

@keyframes ellipsisDancing3Left {
  0%, 100% {
    right: 100%;
    bottom: 50%;
    transform: translate(100%, 50%);
  }
  50% {
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
  }
}
@keyframes ellipsisDancing3Middle {
  0%, 100% {
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
  }
  50% {
    right: 0%;
    bottom: 50%;
    transform: translate(0%, 50%);
  }
}
@keyframes ellipsisDancing3Right {
  to {
    --ellipsis-dancing-3_angle: 1turn;
  }
}
.animarte-ellipsis--dancing-4 .animarte-ellipsis__element {
  position: absolute;
  animation-timing-function: ease-in-out;
  animation-duration: var(--animarte-speed);
  animation-iteration-count: infinite;
}
.animarte-ellipsis--dancing-4 .animarte-ellipsis__element:nth-of-type(1) {
  animation-name: ellipsisDancing4Left;
}
.animarte-ellipsis--dancing-4 .animarte-ellipsis__element:nth-of-type(2) {
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 50%);
}
.animarte-ellipsis--dancing-4 .animarte-ellipsis__element:nth-of-type(3) {
  animation-name: ellipsisDancing4Right;
}

@keyframes ellipsisDancing4Left {
  0%, 100% {
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%);
  }
  33.33% {
    left: 0%;
    bottom: 0%;
    transform: translate(0%, 0%);
  }
  66.66% {
    left: 0%;
    bottom: 100%;
    transform: translate(0%, 100%);
  }
}
@keyframes ellipsisDancing4Right {
  0%, 100% {
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%);
  }
  33.33% {
    left: 100%;
    bottom: 100%;
    transform: translate(-100%, 100%);
  }
  66.66% {
    left: 100%;
    bottom: 0%;
    transform: translate(-100%, 0%);
  }
}
.animarte-ellipsis--growing-1 .animarte-ellipsis__element {
  animation-name: ellipsisGrowing1;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--animarte-speed);
}
.animarte-ellipsis--growing-1 .animarte-ellipsis__element:nth-of-type(1) {
  transform-origin: left 100%;
}
.animarte-ellipsis--growing-1 .animarte-ellipsis__element:nth-of-type(2) {
  transform-origin: center 100%;
  animation-delay: calc(var(--animarte-speed) * 0.1);
}
.animarte-ellipsis--growing-1 .animarte-ellipsis__element:nth-of-type(3) {
  transform-origin: right 100%;
  animation-delay: calc(var(--animarte-speed) * 0.2);
}

@keyframes ellipsisGrowing1 {
  0%, 20%, 100% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.5);
  }
}
.animarte-ellipsis--growing-2 .animarte-ellipsis__element {
  animation-name: ellipsisGrowing2;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--animarte-speed);
}
.animarte-ellipsis--growing-2 .animarte-ellipsis__element:nth-of-type(1) {
  transform-origin: left center;
}
.animarte-ellipsis--growing-2 .animarte-ellipsis__element:nth-of-type(2) {
  transform-origin: center center;
  animation-delay: calc(var(--animarte-speed) * 0.05);
}
.animarte-ellipsis--growing-2 .animarte-ellipsis__element:nth-of-type(3) {
  transform-origin: right center;
  animation-delay: calc(var(--animarte-speed) * 0.1);
}

@keyframes ellipsisGrowing2 {
  0%, 20%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  10% {
    transform: scale(2.5);
    opacity: 0.3;
  }
}
.animarte-ellipsis--jumping-1 .animarte-ellipsis__element {
  animation-name: ellipsisJumping1;
  animation-duration: var(--animarte-speed);
  animation-timing-function: ease;
  position: relative;
  inset: 0;
}
.animarte-ellipsis--jumping-1 .animarte-ellipsis__element:nth-of-type(1) {
  animation-delay: calc(var(--animarte-speed) / 4 * 1);
}
.animarte-ellipsis--jumping-1 .animarte-ellipsis__element:nth-of-type(2) {
  animation-delay: calc(var(--animarte-speed) / 4 * 2);
}
.animarte-ellipsis--jumping-1 .animarte-ellipsis__element:nth-of-type(3) {
  animation-delay: calc(var(--animarte-speed) / 4 * 3);
}

@keyframes ellipsisJumping1 {
  0%, 100% {
    top: 0;
  }
  50% {
    top: -20%;
  }
}
.animarte-ellipsis--jumping-2 .animarte-ellipsis__element {
  animation-name: ellipsisJumping2;
  animation-duration: var(--animarte-speed);
  animation-timing-function: ease;
  position: relative;
  inset: 0;
}
.animarte-ellipsis--jumping-2 .animarte-ellipsis__element:nth-of-type(1) {
  animation-delay: calc(var(--animarte-speed) / 4 * 1);
}
.animarte-ellipsis--jumping-2 .animarte-ellipsis__element:nth-of-type(2) {
  animation-delay: calc(var(--animarte-speed) / 4 * 2);
}
.animarte-ellipsis--jumping-2 .animarte-ellipsis__element:nth-of-type(3) {
  animation-delay: calc(var(--animarte-speed) / 4 * 3);
}

@keyframes ellipsisJumping2 {
  0%, 75%, 100% {
    top: 0;
  }
  25% {
    top: -20%;
  }
  50% {
    top: 20%;
  }
}
.animarte-ellipsis--one-for-all-1 .animarte-ellipsis__element {
  position: absolute;
  animation-timing-function: linear;
  animation-duration: var(--animarte-speed);
}
.animarte-ellipsis--one-for-all-1 .animarte-ellipsis__element:nth-child(1) {
  animation-name: ellipsisOneForAll1Top;
  left: 50%;
}
.animarte-ellipsis--one-for-all-1 .animarte-ellipsis__element:nth-child(2) {
  top: 50%;
  animation-name: ellipsisOneForAll1Right;
}
.animarte-ellipsis--one-for-all-1 .animarte-ellipsis__element:nth-child(3) {
  left: 50%;
  animation-name: ellipsisOneForAll1Bottom;
}
.animarte-ellipsis--one-for-all-1 .animarte-ellipsis__element:nth-child(4) {
  top: 50%;
  animation-name: ellipsisOneForAll1Left;
}

@keyframes ellipsisOneForAll1Top {
  0%, 90%, 100% {
    top: 0;
    transform: translate(-50%, 0);
  }
  10%, 80% {
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
@keyframes ellipsisOneForAll1Right {
  0%, 20%, 90%, 100% {
    left: 100%;
    transform: translate(-100%, -50%);
  }
  25% {
    width: var(--width);
    height: var(--height);
  }
  30% {
    left: 50%;
    transform: translate(-50%, -50%);
  }
  35%, 45% {
    width: calc(1.5 * var(--width));
    height: calc(1.5 * var(--height));
  }
  55%, 65% {
    width: calc(2 * var(--width));
    height: calc(2 * var(--height));
  }
  75% {
    width: calc(2.5 * var(--width));
    height: calc(2.5 * var(--height));
  }
  80% {
    width: calc(2.5 * var(--width));
    height: calc(2.5 * var(--height));
    left: 50%;
    transform: translate(-50%, -50%);
  }
  85% {
    width: var(--width);
    height: var(--height);
  }
}
@keyframes ellipsisOneForAll1Bottom {
  0%, 40%, 90%, 100% {
    top: 100%;
    transform: translate(-50%, -100%);
  }
  50%, 80% {
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
@keyframes ellipsisOneForAll1Left {
  0%, 60%, 90%, 100% {
    left: 0;
    transform: translate(0, -50%);
  }
  70%, 80% {
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.animarte-ellipsis--one-for-all-2 .animarte-ellipsis__element {
  position: absolute;
  animation-timing-function: ease;
  animation-duration: var(--animarte-speed);
  top: 50%;
}
.animarte-ellipsis--one-for-all-2 .animarte-ellipsis__element:nth-child(1) {
  animation-name: ellipsisOneForAll2Left;
}
.animarte-ellipsis--one-for-all-2 .animarte-ellipsis__element:nth-child(2) {
  left: 50%;
  transform: translate(-50%, -50%);
  animation-name: ellipsisOneForAll2Middle;
}
.animarte-ellipsis--one-for-all-2 .animarte-ellipsis__element:nth-child(3) {
  animation-name: ellipsisOneForAll2Right;
}

@keyframes ellipsisOneForAll2Left {
  0%, 100% {
    left: 0;
    transform: translate(0, -50%);
  }
  50% {
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
@keyframes ellipsisOneForAll2Middle {
  0% {
    width: var(--width);
    height: var(--height);
  }
  50% {
    width: calc(2 * var(--width));
    height: calc(2 * var(--height));
  }
}
@keyframes ellipsisOneForAll2Right {
  0%, 100% {
    left: 100%;
    transform: translate(-100%, -50%);
  }
  50% {
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.animarte-ellipsis--orbiting .animarte-ellipsis__element {
  position: absolute;
}
.animarte-ellipsis--orbiting .animarte-ellipsis__element:nth-of-type(1) {
  animation-direction: alternate;
}
.animarte-ellipsis--orbiting .animarte-ellipsis__element:nth-of-type(2) {
  right: 50%;
  transform: translateX(50%);
}
.animarte-ellipsis--orbiting .animarte-ellipsis__element:nth-of-type(3) {
  animation-direction: alternate-reverse;
}
.animarte-ellipsis--orbiting .animarte-ellipsis__element:nth-of-type(1), .animarte-ellipsis--orbiting .animarte-ellipsis__element:nth-of-type(3) {
  animation-name: ellipsisOrbiting;
  animation-duration: var(--animarte-speed);
  animation-timing-function: ease-in-out;
}

@keyframes ellipsisOrbiting {
  0% {
    right: 0%;
    transform: translateX(0%);
  }
  100% {
    right: 100%;
    transform: translateX(100%);
  }
}
.animarte-ellipsis--pendulum-1 .animarte-ellipsis__element {
  position: absolute;
  animation-timing-function: ease;
  animation-duration: var(--animarte-speed);
  top: 50%;
}
.animarte-ellipsis--pendulum-1 .animarte-ellipsis__element:nth-child(1) {
  animation-name: ellipsisPendulum1Left;
}
.animarte-ellipsis--pendulum-1 .animarte-ellipsis__element:nth-child(2) {
  left: 50%;
  transform: translate(-50%, -50%);
}
.animarte-ellipsis--pendulum-1 .animarte-ellipsis__element:nth-child(3) {
  animation-name: ellipsisPendulum1Right;
}

@keyframes ellipsisPendulum1Left {
  0%, 100% {
    left: calc(50% - var(--width));
    transform: translate(-50%, -50%);
  }
  50% {
    left: 0;
    transform: translate(0, -50%);
  }
}
@keyframes ellipsisPendulum1Right {
  0%, 100% {
    left: 100%;
    transform: translate(-100%, -50%);
  }
  50% {
    left: calc(50% + var(--width));
    transform: translate(-50%, -50%);
  }
}
.animarte-ellipsis--pendulum-2 .animarte-ellipsis__element {
  position: absolute;
  animation-timing-function: linear;
  animation-duration: var(--animarte-speed);
  top: 50%;
}
.animarte-ellipsis--pendulum-2 .animarte-ellipsis__element:nth-child(1) {
  animation-name: ellipsisPendulum2Left;
}
.animarte-ellipsis--pendulum-2 .animarte-ellipsis__element:nth-child(2) {
  left: 50%;
  transform: translate(-50%, -50%);
}
.animarte-ellipsis--pendulum-2 .animarte-ellipsis__element:nth-child(3) {
  animation-name: ellipsisPendulum2Right;
}

@keyframes ellipsisPendulum2Left {
  0%, 25%, 75%, 100% {
    left: calc(50% - var(--width));
    transform: translate(-50%, -50%);
  }
  50% {
    left: 0;
    transform: translate(0, -50%);
  }
}
@keyframes ellipsisPendulum2Right {
  0%, 100% {
    left: 100%;
    transform: translate(-100%, -50%);
  }
  25%, 75% {
    left: calc(50% + var(--width));
    transform: translate(-50%, -50%);
  }
}
.animarte-ellipsis--queue .animarte-ellipsis__element {
  position: absolute;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: var(--animarte-speed);
}
.animarte-ellipsis--queue .animarte-ellipsis__element:nth-of-type(1) {
  animation-name: ellipsisQueue1;
}
.animarte-ellipsis--queue .animarte-ellipsis__element:nth-of-type(2) {
  animation-name: ellipsisQueue2;
}
.animarte-ellipsis--queue .animarte-ellipsis__element:nth-of-type(3) {
  animation-name: ellipsisQueue3;
}

@keyframes ellipsisQueue1 {
  0%, 40% {
    right: 100%;
    bottom: 50%;
    transform: translate(100%, 50%);
  }
  100% {
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
  }
}
@keyframes ellipsisQueue2 {
  0%, 10% {
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
  }
  100% {
    right: 0%;
    bottom: 50%;
    transform: translate(0%, 50%);
  }
}
@keyframes ellipsisQueue3 {
  0% {
    right: 0%;
    bottom: 50%;
    transform: translate(0%, 50%);
  }
  20% {
    right: 0%;
    bottom: 50%;
    transform: translate(100%, 50%);
  }
  40% {
    right: 0%;
    bottom: 0;
    transform: translate(100%, 100%);
  }
  60% {
    right: 100%;
    bottom: 0;
    transform: translate(0%, 100%);
  }
  80% {
    right: 100%;
    bottom: 50%;
    transform: translate(0%, 50%);
  }
  100% {
    right: 100%;
    bottom: 50%;
    transform: translate(100%, 50%);
  }
}
.animarte-ellipsis--stretching-1 .animarte-ellipsis__element {
  animation-name: ellipsisStretching1;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: var(--animarte-speed);
}
.animarte-ellipsis--stretching-1 .animarte-ellipsis__element:nth-of-type(1) {
  animation-delay: calc(var(--animarte-speed) * 0.2 * 1);
}
.animarte-ellipsis--stretching-1 .animarte-ellipsis__element:nth-of-type(2) {
  animation-delay: calc(var(--animarte-speed) * 0.2 * 2);
}
.animarte-ellipsis--stretching-1 .animarte-ellipsis__element:nth-of-type(3) {
  animation-delay: calc(var(--animarte-speed) * 0.2 * 3);
}

@keyframes ellipsisStretching1 {
  50% {
    height: 70%;
  }
}
.animarte-graph--bar-1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 5%;
}
.animarte-graph--bar-1 .animarte-graph__element {
  display: flex;
  align-items: flex-end;
  background: currentColor;
  animation-name: graphBar1;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-duration: var(--animarte-speed);
  height: 0;
}
.animarte-graph--bar-1 .animarte-graph__element:nth-child(1) {
  --height: 20%;
}
.animarte-graph--bar-1 .animarte-graph__element:nth-child(2) {
  --height: 60%;
}
.animarte-graph--bar-1 .animarte-graph__element:nth-child(3) {
  --height: 40%;
}
.animarte-graph--bar-1 .animarte-graph__element:nth-child(4) {
  --height: 90%;
}
.animarte-graph--bar-1 .animarte-graph__element:nth-of-type(1) {
  animation-delay: calc(var(--animarte-speed) * 0.05 * 1);
}
.animarte-graph--bar-1 .animarte-graph__element:nth-of-type(2) {
  animation-delay: calc(var(--animarte-speed) * 0.05 * 2);
}
.animarte-graph--bar-1 .animarte-graph__element:nth-of-type(3) {
  animation-delay: calc(var(--animarte-speed) * 0.05 * 3);
}
.animarte-graph--bar-1 .animarte-graph__element:nth-of-type(4) {
  animation-delay: calc(var(--animarte-speed) * 0.05 * 4);
}

@keyframes graphBar1 {
  50% {
    height: var(--height);
  }
}
.animarte-lines--agitated-1 .animarte-lines__element {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 100vw;
  width: 100%;
  height: 10%;
}
.animarte-lines--agitated-1 .animarte-lines__element::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 100vw;
  background: currentColor;
  animation-name: linesAgited1;
  animation-timing-function: ease-in-out;
  animation-duration: var(--animarte-speed);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes linesAgited1 {
  0% {
    left: 0;
    width: 0;
  }
  50% {
    left: 0;
    width: 100%;
  }
  100% {
    left: 100%;
    width: 0;
  }
}
.animarte-lines--stretching-1 .animarte-lines__element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 10%;
  background-color: currentColor;
  animation-name: linesStretching1;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--animarte-speed);
}
.animarte-lines--stretching-1 .animarte-lines__element:nth-of-type(1) {
  animation-delay: calc(var(--animarte-speed) * 0.2 * 1);
}
.animarte-lines--stretching-1 .animarte-lines__element:nth-of-type(2) {
  animation-delay: calc(var(--animarte-speed) * 0.2 * 2);
}
.animarte-lines--stretching-1 .animarte-lines__element:nth-of-type(3) {
  animation-delay: calc(var(--animarte-speed) * 0.2 * 3);
}
.animarte-lines--stretching-1 .animarte-lines__element:nth-of-type(4) {
  animation-delay: calc(var(--animarte-speed) * 0.2 * 4);
}
.animarte-lines--stretching-1 .animarte-lines__element:nth-of-type(5) {
  animation-delay: calc(var(--animarte-speed) * 0.2 * 5);
}

@keyframes linesStretching1 {
  0% {
    height: 0%;
    left: 0%;
  }
  50% {
    height: 80%;
    left: 50%;
  }
  100% {
    height: 0%;
    left: 100%;
    transform: translate(-100%, -50%);
  }
}
.animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(1), .animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(2), .animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(3) {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  height: 40%;
  animation-name: paperPlaneFlying1;
  animation-duration: var(--animarte-speed);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(1) {
  z-index: 1;
  clip-path: polygon(10% 10%, 100% 100%, 10% 100%, 10% 55%, 100% 100%, 10% 45%);
  background-color: currentColor;
}
.animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(2) {
  z-index: -2;
  clip-path: polygon(0% 60%, 100% 100%, 10% 45%);
  background-color: color-mix(in srgb, currentColor 90%, #000);
}
.animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(3) {
  z-index: -1;
  clip-path: polygon(0% 60%, 100% 100%, 10% 55%);
  background-color: color-mix(in srgb, currentColor 80%, #000);
}
.animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(4), .animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(5) {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.6);
  width: 40%;
  height: 20%;
  border-radius: 50%;
  animation-name: paperPlaneClouds1;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0;
}
.animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(4)::before, .animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(4)::after, .animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(5)::before, .animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(5)::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
  opacity: 0.8;
}
.animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(4)::before, .animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(5)::before {
  width: 30%;
  height: 30%;
  top: 0;
  left: 0;
}
.animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(4)::after, .animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(5)::after {
  width: 40%;
  height: 40%;
  bottom: 0;
  right: -10%;
}
.animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(4) {
  z-index: -3;
  animation-duration: calc(var(--animarte-speed) / 0.9);
  top: 15%;
}
.animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(5) {
  z-index: 2;
  animation-duration: calc(var(--animarte-speed) / 1.1);
  bottom: 15%;
}

@keyframes paperPlaneFlying1 {
  0%, 100% {
    transform: translate(-50%, -75%) rotate(-45deg);
  }
  12.5% {
    transform: translate(-50%, -85%) rotate(-55deg);
  }
  25% {
    transform: translate(-50%, -100%) rotate(-65deg);
  }
  37.5% {
    transform: translate(-50%, -90%) rotate(-55deg);
  }
  50% {
    height: 50%;
    transform: translate(-50%, -75%) rotate(-45deg);
  }
  62.5% {
    transform: translate(-50%, -65%) rotate(-35deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(-25deg);
  }
  87.5% {
    transform: translate(-50%, -65%) rotate(-35deg);
  }
}
@keyframes paperPlaneClouds1 {
  0% {
    left: 100%;
    transform: translateX(100%);
  }
  50% {
    opacity: 1;
  }
  100% {
    left: 0;
    transform: translateX(-100%);
  }
}
.animarte-semicircle--growing-2 .animarte-semicircle__element {
  display: grid;
  width: 100%;
  height: 100%;
  border-radius: 100vw;
  border-color: currentColor;
  border-style: solid;
  border-width: calc(var(--animarte-size) * 0.1);
  padding: calc(var(--animarte-size) * 0.1);
}
.animarte-semicircle--growing-2 .animarte-semicircle__element::before {
  content: "";
  grid-area: 1/1;
  border-radius: 100vw;
  background: currentColor;
  animation-iteration-count: infinite, infinite;
  animation-duration: var(--animarte-speed), var(--animarte-speed);
  animation-timing-function: linear, linear;
  animation-name: semicircleGrowing2ChangeForm, semicircleGrowing2Spin;
}

@keyframes semicircleGrowing2Spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes semicircleGrowing2ChangeForm {
  0% {
    clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  6.25% {
    clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
  }
  18.75% {
    clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
  }
  31.25% {
    clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%, 0% 100%);
  }
  43.75% {
    clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 0% 0%);
  }
  50% {
    clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%);
  }
  56.25% {
    clip-path: polygon(50% 50%, 100% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%);
  }
  68.75% {
    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0% 100%, 0% 0%, 50% 0%);
  }
  81.25% {
    clip-path: polygon(50% 50%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 0%, 50% 0%);
  }
  93.75% {
    clip-path: polygon(50% 50%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 50% 0%);
  }
  100% {
    clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
}
.animarte-semicircle--growing .animarte-semicircle__element {
  width: 100%;
  height: 100%;
  border-radius: 100vw;
  background-color: transparent;
  border-color: currentColor;
  border-style: solid;
  border-width: calc(var(--animarte-size) * 0.1);
  animation-iteration-count: infinite, infinite;
  animation-duration: var(--animarte-speed), var(--animarte-speed);
  animation-timing-function: linear, linear;
  animation-direction: alternate, normal;
  animation-name: changeShapeKeyframes, spinKeyframes;
}

@keyframes spinKeyframes {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes changeShapeKeyframes {
  0% {
    clip-path: polygon(50% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%);
  }
  25% {
    clip-path: polygon(50% 50%, 100% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
  }
  75% {
    clip-path: polygon(50% 50%, 0% 0%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%);
  }
  100% {
    clip-path: polygon(50% 50%, 0% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%);
  }
}
.animarte-semicircle--spinning-1 .animarte-semicircle__element {
  --padding: 10%;
  width: 100%;
  height: 100%;
  border-radius: 100vw;
  background-color: transparent;
  border-color: currentColor;
  border-style: solid;
  border-width: calc(var(--animarte-size) * 0.1);
  clip-path: polygon(0% 0%, calc(50% - var(--padding)) 0%, calc(50% - var(--padding)) calc(50% - var(--padding)), calc(50% + var(--padding)) calc(50% - var(--padding)), calc(50% + var(--padding)) 0%, 100% 0%, 100% calc(50% - var(--padding)), calc(50% + var(--padding)) calc(50% - var(--padding)), calc(50% + var(--padding)) calc(50% + var(--padding)), 100% calc(50% + var(--padding)), 100% 100%, calc(50% + var(--padding)) 100%, calc(50% + var(--padding)) calc(50% + var(--padding)), calc(50% - var(--padding)) calc(50% + var(--padding)), calc(50% - var(--padding)) 100%, 0% 100%, 0% calc(50% + var(--padding)), calc(50% - var(--padding)) calc(50% + var(--padding)), calc(50% - var(--padding)) calc(50% - var(--padding)), 0% calc(50% - var(--padding)));
  animation-name: semicircleSpinning1;
  animation-iteration-count: infinite;
  animation-duration: calc(var(--animarte-speed) / 2);
  animation-timing-function: linear;
}

@keyframes semicircleSpinning1 {
  100% {
    transform: rotate(1turn);
  }
}
.animarte-semicircle--spinning-2 {
  display: grid;
  justify-items: center;
  align-items: center;
}
.animarte-semicircle--spinning-2 .animarte-semicircle__element {
  --padding: 15%;
  grid-area: 1/1;
  width: 100%;
  height: 100%;
  border-radius: 100vw;
  background-color: transparent;
  border-color: currentColor;
  border-style: solid;
  border-width: calc(var(--animarte-size) * 0.1);
}
.animarte-semicircle--spinning-2 .animarte-semicircle__element:nth-child(1) {
  --slice-count: 6;
  --slice-gap: 30deg;
  -webkit-mask: repeating-conic-gradient(#000 0 calc(360deg / var(--slice-count) - var(--slice-gap)), transparent 0 calc(360deg / var(--slice-count)));
  mask: repeating-conic-gradient(#000 0 calc(360deg / var(--slice-count) - var(--slice-gap)), transparent 0 calc(360deg / var(--slice-count)));
  animation-name: semicircleSpinning2;
  animation-iteration-count: infinite;
  animation-duration: var(--animarte-speed);
  animation-timing-function: linear;
}
.animarte-semicircle--spinning-2 .animarte-semicircle__element:nth-child(2) {
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
  animation-name: semicircleSpinning2;
  animation-iteration-count: infinite;
  animation-duration: var(--animarte-speed);
  animation-timing-function: linear;
  animation-direction: reverse;
}

@keyframes semicircleSpinning2 {
  100% {
    transform: rotate(1turn);
  }
}
.animarte-semicircle--spinning-3 {
  display: grid;
  justify-items: center;
  align-items: center;
}
.animarte-semicircle--spinning-3 .animarte-semicircle__element {
  grid-area: 1/1;
  width: 100%;
  height: 100%;
  border-radius: 100vw;
  background-color: transparent;
  border-style: solid;
  border-width: calc(var(--animarte-size) * 0.1);
}
.animarte-semicircle--spinning-3 .animarte-semicircle__element:nth-child(1) {
  border-color: color-mix(in srgb, currentColor 30%, transparent);
}
.animarte-semicircle--spinning-3 .animarte-semicircle__element:nth-child(2) {
  border-color: currentColor;
  -webkit-mask: repeating-conic-gradient(#000 0 120deg, transparent 0 360deg);
  mask: repeating-conic-gradient(#000 0 120deg, transparent 0 360deg);
  animation-name: semicircleSpinning3;
  animation-iteration-count: infinite;
  animation-duration: var(--animarte-speed);
  animation-timing-function: linear;
}

@keyframes semicircleSpinning3 {
  100% {
    transform: rotate(1turn);
  }
}
.animarte-semicircle--spinning-4 {
  display: grid;
  justify-items: center;
  align-items: center;
}
.animarte-semicircle--spinning-4 .animarte-semicircle__element {
  grid-area: 1/1;