/* Footer */
.footer {
  padding: 3rem 0 2rem;
  position: relative;
  border-top: 1px solid rgba(0, 240, 255, 0.08);
}

/* City skyline decoration */
.footer__skyline {
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 60px;
  opacity: 0.06;
  background:
    /* Buildings */
    linear-gradient(to bottom, transparent 20%, var(--text-primary) 20%) no-repeat 5% bottom / 30px 50px,
    linear-gradient(to bottom, transparent 10%, var(--text-primary) 10%) no-repeat 10% bottom / 20px 55px,
    linear-gradient(to bottom, transparent 30%, var(--text-primary) 30%) no-repeat 15% bottom / 25px 40px,
    linear-gradient(to bottom, transparent 5%, var(--text-primary) 5%) no-repeat 22% bottom / 15px 58px,
    linear-gradient(to bottom, transparent 25%, var(--text-primary) 25%) no-repeat 28% bottom / 35px 45px,
    linear-gradient(to bottom, transparent 15%, var(--text-primary) 15%) no-repeat 37% bottom / 20px 52px,
    linear-gradient(to bottom, transparent 35%, var(--text-primary) 35%) no-repeat 42% bottom / 28px 38px,
    linear-gradient(to bottom, transparent 8%, var(--text-primary) 8%) no-repeat 50% bottom / 18px 56px,
    linear-gradient(to bottom, transparent 20%, var(--text-primary) 20%) no-repeat 56% bottom / 32px 48px,
    linear-gradient(to bottom, transparent 40%, var(--text-primary) 40%) no-repeat 65% bottom / 22px 35px,
    linear-gradient(to bottom, transparent 12%, var(--text-primary) 12%) no-repeat 72% bottom / 25px 53px,
    linear-gradient(to bottom, transparent 28%, var(--text-primary) 28%) no-repeat 80% bottom / 30px 42px,
    linear-gradient(to bottom, transparent 18%, var(--text-primary) 18%) no-repeat 88% bottom / 20px 50px,
    linear-gradient(to bottom, transparent 5%, var(--text-primary) 5%) no-repeat 95% bottom / 15px 58px;
  pointer-events: none;
}

.footer__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.footer__logo {
  font-family: var(--font-pixel);
  font-size: 0.8rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer__logo-icon {
  font-size: 1.2rem;
}

.footer__tagline {
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.footer__socials {
  display: flex;
  gap: 1rem;
}

.footer__social {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid rgba(0, 240, 255, 0.1);
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 1.1rem;
  transition: all var(--transition-base);
}

.footer__social:hover {
  transform: translateY(-3px) scale(1.1);
}

.footer__social--x:hover {
  border-color: #fff;
  color: #fff;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.footer__social--discord:hover {
  border-color: #5865f2;
  color: #5865f2;
  box-shadow: 0 0 20px rgba(88, 101, 242, 0.3);
}

.footer__social--opensea:hover {
  border-color: #2081e2;
  color: #2081e2;
  box-shadow: 0 0 20px rgba(32, 129, 226, 0.3);
}

.footer__divider {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.footer__copyright {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.footer__chain {
  font-family: var(--font-pixel);
  font-size: 0.4rem;
  color: var(--neon-blue);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer__chain-dot {
  width: 6px;
  height: 6px;
  background: var(--neon-green);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 5px rgba(57, 255, 20, 0.5); }
  50% { opacity: 0.5; box-shadow: none; }
}

@media (max-width: 768px) {
  .footer__container {
    gap: 1.5rem;
  }
}