.site-footer {
  margin-top: auto;

  position: relative;
  background: var(--bg-main);
  padding: 80px 20px 40px;
  overflow: hidden;
}

.footer-content {
  position: relative;
  z-index: 2;
  color: #bdbdbd;
  text-align: center;
  font-size: 14px;
}

.footer-transition {
  height: 180px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(8, 11, 12, 0.4) 35%,
    rgba(8, 11, 12, 0.8) 70%,
    var(--bg-abyss) 100%
  );
}

.site-footer::after {
  content: "";
  position: absolute;
  left: -25%;
  bottom: -120px;

  width: 150%;
  height: 260px;

  background:
    radial-gradient(
      50% 80% at 15% 100%,
      rgba(63, 192, 198, 0.55),
      transparent 70%
    ),
    radial-gradient(
      55% 90% at 85% 100%,
      rgba(20, 155, 159, 0.45),
      transparent 75%
    ),
    radial-gradient(
      40% 70% at 50% 100%,
      rgba(22, 123, 126, 0.35),
      transparent 80%
    );

  filter: blur(42px);
  opacity: 0.9;

  animation: auroraMove 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes auroraMove {
  0% {
    transform: translateX(-12%) scaleY(0.9);
    opacity: 0.6;
  }
  50% {
    transform: translateX(12%) scaleY(1.1);
    opacity: 1;
  }
  100% {
    transform: translateX(-12%) scaleY(0.9);
    opacity: 0.6;
  }
}

.footer-link {
  text-decoration: none;
  color: var(--text-secondary);
  position: relative;
}

.footer-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-light),
    transparent
  );

  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.footer-link:hover {
  color: var(--accent-light);
  text-shadow:
    0 0 12px rgba(63, 192, 198, 0.6),
    0 0 32px rgba(20, 155, 159, 0.45);
}

.footer-link:hover::after {
  transform: scaleX(1);
}

.footer-link.muted {
  color: var(--text-secondary);
}

.footer-link.muted::after {
  display: none;
}

.footer-link::after {
  content: "";
  position: absolute;
  left: -30%;
  bottom: -6px;
  width: 160%;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-light),
    transparent
  );

  opacity: 0;
  transition:
    left 0.35s ease,
    opacity 0.2s ease;
}

.footer-link:hover::after {
  left: -10%;
  opacity: 1;
}