/* ==========================================================================
   11. Footer
   ========================================================================== */

footer {
  position: relative;
  overflow: hidden;
}

footer::before {
  content: "";

  position: absolute;
  top: -200px;
  left: 50%;

  width: 520px;
  height: 320px;

  border-radius: 50%;

  pointer-events: none;

  background: rgba(231, 111, 29, 0.08);
  filter: blur(100px);
  transform: translateX(-50%);
}

footer > div {
  position: relative;
  z-index: 1;
}

footer img {
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.34));
}

.footer-link {
  position: relative;

  display: inline-flex;

  color: #8f99a5;

  transition:
    color var(--transition-base),
    transform var(--transition-base);
}

.footer-link::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;

  height: 1px;

  background: var(--color-fire);

  transform: scaleX(0);
  transform-origin: left;

  transition: transform var(--transition-base);
}

.footer-link:hover {
  color: #ffffff;
  transform: translateX(3px);
}

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