.uiverse-logo-wrapper {
  --logo-green: #2bad72;
  --logo-dark-green: #1d8c59;
  --logo-glow: rgba(43, 173, 114, 0.6);
  --background: #121212;

  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  min-width: 300px;
  background: linear-gradient(to bottom, #121212, #0a1a0a);
  font-family: "Arial", sans-serif;
  overflow: hidden;
  position: relative;
}

.uiverse-logo-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(90deg, rgba(43, 173, 114, 0.05) 1px, transparent 1px) 0 0 /
      40px 40px,
    linear-gradient(0deg, rgba(43, 173, 114, 0.05) 1px, transparent 1px) 0 0 /
      40px 40px;
  z-index: 0;
}

.uiverse-logo-button {
  position: relative;
  width: 200px;
  height: 200px;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
  padding: 0;
  overflow: visible;
  z-index: 1;
}

.uiverse-logo-button:hover {
  transform: scale(1.05);
}

.uiverse-logo-button:active {
  transform: scale(0.95);
}

.uiverse-logo {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.uiverse-logo svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px var(--logo-glow));
  transition:
    filter 0.3s ease,
    transform 0.3s ease;
  animation:
    uiverse-initialLoad 1s ease-out,
    uiverse-oscillate 6s infinite ease-in-out;
}

.uiverse-logo svg path {
  fill: var(--logo-green);
  transition:
    fill 0.3s ease,
    filter 0.3s ease,
    transform 0.3s ease;
}

.uiverse-logo-button:hover svg {
  filter: drop-shadow(0 0 15px var(--logo-glow));
  transform: rotate(2deg);
}

.uiverse-logo-button:hover svg path {
  fill: #33cc80;
}

.uiverse-logo-button:active svg {
  filter: drop-shadow(0 0 20px var(--logo-glow)) brightness(1.2);
  transform: rotate(-2deg) scale(0.9);
  transition: transform 0.1s ease;
}

.uiverse-logo-button:active svg path {
  fill: #40e090;
}

.uiverse-logo-button:active svg path:first-child {
  transform: translateY(-3px);
  transition: transform 0.2s ease;
}

.uiverse-logo-button:active svg path:last-child {
  transform: translateY(3px);
  transition: transform 0.2s ease;
}

.uiverse-glow-effect {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(43, 173, 114, 0.2) 0%,
    rgba(43, 173, 114, 0) 70%
  );
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.uiverse-logo-button:hover .uiverse-glow-effect {
  opacity: 0.6;
}

.uiverse-logo-button:active .uiverse-glow-effect {
  opacity: 1;
  animation: uiverse-pulse 0.5s ease;
}

@keyframes uiverse-pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
}

.uiverse-logo-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(43, 173, 114, 0.1) 0%,
    transparent 70%
  );
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.uiverse-logo-button:hover::before {
  opacity: 1;
}

.uiverse-logo-button:active::before {
  animation: uiverse-explode 0.6s ease-out;
}

@keyframes uiverse-explode {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

@keyframes uiverse-pathGlow {
  0% {
    filter: drop-shadow(0 0 2px rgba(43, 173, 114, 0.8));
  }
  30% {
    filter: drop-shadow(0 0 5px rgba(43, 173, 114, 0.8));
  }
  60% {
    filter: drop-shadow(0 0 3px rgba(43, 173, 114, 0.8));
  }
  100% {
    filter: drop-shadow(0 0 2px rgba(43, 173, 114, 0.8));
  }
}

.uiverse-logo svg path:nth-child(1) {
  animation: uiverse-pathGlow 3s infinite ease-in-out;
}

.uiverse-logo svg path:nth-child(2) {
  animation: uiverse-pathGlow 4s infinite ease-in-out;
  animation-delay: 1s;
}

@keyframes uiverse-initialLoad {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes uiverse-oscillate {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.uiverse-logo-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(43, 173, 114, 0.2);
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 1;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.uiverse-logo-button:hover::after {
  opacity: 1;
  transform: scale(1.05);
}