#footer-container {
  width: 100%;
}

.footer {
  padding: 6rem 0 2rem;
  position: relative;
  background: linear-gradient(180deg, #2a2a5e 0%, #1a1a3e 100%);
}

/* Divider line above footer */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 5px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.5rem;
  text-align: center;
  position: relative;
}

/* Tagline - Top */
.footer-tagline {
  font-family: var(--font-tagline);
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-size-5xl);
  color: var(--color-secondary);
  line-height: 1.4;
  max-width: 925px;
}

/* Navigation - Middle */
.footer-navigation {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Navigation group containers (The Lounge, The Lab, The Legal) */
.footer-navigation > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Group titles (The Lounge, The Lab, The Legal) */
.footer-navigation .nav-group-title {
  color: #9898c8;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--font-size-small);
  text-transform: uppercase;
  /* Ensure title doesn't block links below */
  pointer-events: none;
  position: relative;
  z-index: 1;
}

.footer-nav-links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  /* Ensure links are above any background elements */
  position: relative;
  z-index: 2;
}

.footer-nav-links li:not(:last-child)::after {
  content: '•';
  position: absolute;
  right: -1.65rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-secondary);
  pointer-events: none;
}

.footer-nav-links li {
  position: relative;
}

.footer-nav-link {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--font-size-base);
  color: var(--color-quaternary);
  text-decoration: none;
  transition: all 0.5s ease;
  /* Position relative for ::after pseudo-element and z-index stacking */
  position: relative;
  /* Ensure links are clickable and above other elements */
  z-index: 3;
  /* Ensure the link itself is clickable */
  pointer-events: auto;
  /* Add padding for better click area */
  padding: 0.25rem 0;
  display: inline-block;
}

.footer-nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-secondary);
  transition: width 0.5s ease;
}

.footer-nav-link:hover {
  color: var(--color-white);
}

.footer-nav-link:hover::after {
  width: 100%;
}

/* Copyright - Bottom */
.footer-copyright {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--font-size-small);
  color: var(--color-quaternary);
  line-height: 1.6;
  padding-top: 4rem;
}

/* Glowing Stars Background */
.footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: radial-gradient(2px 2px at 15% 25%, #86702f, transparent),
    radial-gradient(3px 3px at 85% 15%, #cbb77b, transparent),
    radial-gradient(2px 2px at 45% 35%, #413103, transparent),
    radial-gradient(4px 4px at 75% 45%, #86702f, transparent),
    radial-gradient(2px 2px at 25% 55%, #cbb77b, transparent),
    radial-gradient(3px 3px at 90% 65%, #413103, transparent),
    radial-gradient(2px 2px at 35% 75%, #86702f, transparent),
    radial-gradient(3px 3px at 65% 85%, #cbb77b, transparent),
    radial-gradient(4px 4px at 10% 80%, #413103, transparent),
    radial-gradient(2px 2px at 55% 20%, #86702f, transparent),
    radial-gradient(3px 3px at 20% 65%, #cbb77b, transparent),
    radial-gradient(2px 2px at 80% 55%, #413103, transparent),
    radial-gradient(4px 4px at 50% 50%, #86702f, transparent),
    radial-gradient(2px 2px at 70% 30%, #cbb77b, transparent),
    radial-gradient(3px 3px at 40% 90%, #413103, transparent);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.5;
  animation: twinkle 6s ease-in-out infinite;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.7;
  }
}

/* Add glow effect to stars */
.footer::after {
  filter: blur(0.5px) drop-shadow(0 0 2px #86702f) drop-shadow(0 0 4px rgba(134, 112, 47, 0.5));
}

/* Shooting Star Animation */
.footer-content::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 3px;
  background: #cbb77b;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 6px 2px rgba(203, 183, 123, 0.8), 0 0 12px 4px rgba(203, 183, 123, 0.4),
    30px -15px 0 0 rgba(203, 183, 123, 0.3), 25px -12px 0 -0.5px rgba(203, 183, 123, 0.25),
    20px -10px 0 -1px rgba(203, 183, 123, 0.2), 15px -7px 0 -1.5px rgba(203, 183, 123, 0.15),
    10px -5px 0 -2px rgba(203, 183, 123, 0.1);
  animation: shootingStar 2.5s ease-in infinite;
  animation-delay: 0s;
  z-index: 5;
}

@keyframes shootingStar {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  5% {
    opacity: 0.4;
  }
  95% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
    transform: translate(-400px, 200px);
  }
}

/* Shooting star appears every 17.5 seconds (2.5s animation + 15s wait) */
.footer-content::before {
  animation-duration: 17.5s;
}