.gradient-logo {
  --gradient-logo-width: 325px;
  --gradient-logo-circle-size: calc(var(--gradient-logo-width) * 0.54);
  --gradient-logo-blending: hard-light;

  position: relative;
  width: var(--gradient-logo-width);
  max-width: 100%;
  aspect-ratio: 1339.73 / 619.13;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  display: block;
  text-decoration: none;
}

.gradient-logo__filters {
  position: absolute;
  width: 0;
  height: 0;
}

.gradient-logo__gradients {
  position: absolute;
  inset: 1px;
  background: linear-gradient(40deg, var(--gradient-logo-bg1), var(--gradient-logo-bg2));
}

.gradient-logo__mask {
  position: absolute;
  z-index: 2;
  inset: -1px;
  width: calc(100% + 2px);
  max-width: none;
  height: calc(100% + 2px);
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.gradient-logo__bubble {
  position: absolute;
  top: calc(50% - var(--gradient-logo-circle-size) / 2);
  left: calc(50% - var(--gradient-logo-circle-size) / 2);
  width: var(--gradient-logo-circle-size);
  height: var(--gradient-logo-circle-size);
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: var(--gradient-logo-blending);
  opacity: 1;
  will-change: transform;
}

.gradient-logo__bubble--1 {
  background-image: radial-gradient(circle at center, rgba(var(--gradient-logo-color-1), 0.8) 0, rgba(var(--gradient-logo-color-1), 0) 50%);
  transform-origin: center center;
  animation: gradient-logo-move-vertical var(--gradient-logo-duration-1) ease infinite;
}

.gradient-logo__bubble--2 {
  background-image: radial-gradient(circle at center, rgba(var(--gradient-logo-color-2), 0.8) 0, rgba(var(--gradient-logo-color-2), 0) 50%);
  transform-origin: calc(50% - 80px);
  animation: gradient-logo-move-circle var(--gradient-logo-duration-2) reverse infinite;
}

.gradient-logo__bubble--3 {
  top: calc(50% - var(--gradient-logo-circle-size) / 2 + 35px);
  left: calc(50% - var(--gradient-logo-circle-size) / 2 - 85px);
  background-image: radial-gradient(circle at center, rgba(var(--gradient-logo-color-3), 0.8) 0, rgba(var(--gradient-logo-color-3), 0) 50%);
  transform-origin: calc(50% + 70px);
  animation: gradient-logo-move-circle var(--gradient-logo-duration-3) linear infinite;
}

.gradient-logo__bubble--4 {
  background-image: radial-gradient(circle at center, rgba(var(--gradient-logo-color-4), 0.8) 0, rgba(var(--gradient-logo-color-4), 0) 50%);
  transform-origin: calc(50% - 45px);
  animation: gradient-logo-move-horizontal var(--gradient-logo-duration-4) ease infinite;
  opacity: 0.75;
}

.gradient-logo__bubble--5 {
  top: calc(50% - var(--gradient-logo-circle-size));
  left: calc(50% - var(--gradient-logo-circle-size));
  width: calc(var(--gradient-logo-circle-size) * 2);
  height: calc(var(--gradient-logo-circle-size) * 2);
  background-image: radial-gradient(circle at center, rgba(var(--gradient-logo-color-5), 0.8) 0, rgba(var(--gradient-logo-color-5), 0) 50%);
  transform-origin: calc(50% - 120px) calc(50% + 45px);
  animation: gradient-logo-move-circle var(--gradient-logo-duration-5) ease infinite;
}

.gradient-logo__bubble--interactive {
  top: -50%;
  left: -50%;
  width: 100%;
  height: 200%;
  background-image: radial-gradient(circle at center, rgba(var(--gradient-logo-color-interactive), 1) 0, rgba(var(--gradient-logo-color-interactive), 0.75) 24%, rgba(var(--gradient-logo-color-interactive), 0) 46%);
  opacity: 0;
  transition: opacity 650ms ease;
}

.gradient-logo--interactive-visible .gradient-logo__bubble--interactive {
  opacity: 0.9;
}

@keyframes gradient-logo-move-circle {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes gradient-logo-move-vertical {
  0% {
    transform: translateY(-35%);
  }

  50% {
    transform: translateY(35%);
  }

  100% {
    transform: translateY(-35%);
  }
}

@keyframes gradient-logo-move-horizontal {
  0% {
    transform: translateX(-35%) translateY(-10%);
  }

  50% {
    transform: translateX(35%) translateY(10%);
  }

  100% {
    transform: translateX(-35%) translateY(-10%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-logo__bubble {
    animation: none;
  }
}