/* Minimal elegant footer separated from showcase content */
.site-footer {
  --footer-gap: clamp(6rem, 12vh, 14rem); /* vertical space above footer */
  margin-top: var(--footer-gap);
  padding: 4rem 2rem 6rem;
  text-align: center;
  position: relative;
  font-family: inherit;
  color: var(--icon-1);
  isolation: isolate;
}

/* Subtle separator using fading theme glow */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(78ch, 90%);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--theme) 35%, var(--icon-2) 50%, var(--theme) 65%, transparent);
  filter: drop-shadow(0 0 8px var(--theme)) drop-shadow(0 0 18px var(--theme));
  opacity: .55;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Soft radial highlight that bleeds upward, giving breathing space */
.site-footer::after {
  content: "";
  position: absolute;
  top: -18rem;
  left: 50%;
  transform: translateX(-50%);
  width: 60vw;
  max-width: 1100px;
  aspect-ratio: 3 / 1;
  background: radial-gradient(circle at 50% 80%, hsla(var(--active-color), 90%, 60%, 0.25), transparent 70%);
  filter: blur(40px) saturate(1.3);
  opacity: .28;
  z-index: -1;
  pointer-events: none;
}

.site-footer__line {
  font-size: clamp(1.2rem, 1.15rem + 0.2vw, 1.6rem);
  letter-spacing: .6px;
  font-weight: 400;
  margin: 0;
  background: linear-gradient(90deg, var(--icon-1), var(--icon-2-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 4px hsla(var(--active-color), 100%, 60%, 0.35));
  animation: footerFade .9s var(--easing-standard) both;
}

@keyframes footerFade {
  from { opacity: 0; transform: translateY(1.2rem); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (max-width: 640px) {
  .site-footer { padding: 3.5rem 1.25rem 5rem; }
  .site-footer::before { width: 92%; }
  .site-footer::after { width: 88vw; top: -14rem; }
}

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