/* ===========================
   FOOTER — Aurora bar + glass pills
   =========================== */

:root {
  --footer-bg-deep: #0b101d;
  --footer-bg-mid:  #0e1424;
  --footer-accent:  #44ccff;
  --footer-accent-2:#60ffa8;
  --footer-text:    #e6eefc;
  --footer-dim:     #a2adc2;
  --footer-border:  rgba(255,255,255,.16);
}

.footer{
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1000px 600px at 50% -20%, var(--footer-bg-mid) 0%, var(--footer-bg-deep) 65%);
  color: var(--footer-text);
  padding: 22px 0;
  overflow: clip;
}

/* top glow line */
.footer::after{
  content:"";
  position:absolute; inset:0 0 auto 0; height:1px;
  background: linear-gradient(90deg, transparent, var(--footer-accent), var(--footer-accent-2), transparent);
  opacity:.6;
  z-index: 0;
}

/* aurora wash */
.footer::before{
  content:"";
  position:absolute; inset:-10% -20% -40% -20%;
  background:
    radial-gradient(60% 40% at 70% 0%, rgba(96,255,168,.12), transparent 60%),
    conic-gradient(from 210deg at 20% 10%, rgba(68,204,255,.14), rgba(96,255,168,.10), transparent 60%);
  filter: blur(18px) saturate(120%);
  opacity:.9;
  z-index: 0;
  animation: footerAurora 18s linear infinite;
}
@keyframes footerAurora {
  0%   { transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1.02); }
  50%  { transform: translate3d(1%,  1%,  0) rotate(2deg) scale(1.06); }
  100% { transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1.02); }
}

.footer .container{
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 32px);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* optional spotlight that follows the mouse (driven by JS via --mx/--my) */
.footer .container::before{
  content:"";
  position:absolute; inset:-1rem; pointer-events:none;
  background:
    radial-gradient(240px 200px at var(--mx, 60%) var(--my, 30%),
      rgba(68,204,255,.12), rgba(96,255,168,.10), transparent 60%);
  filter: blur(14px);
  z-index: -1;
  transition: opacity .25s ease;
}
@media (hover:none){ .footer .container::before{ opacity:.6; } }

.footer p{
  margin:0;
  font-size: 14px;
  color: var(--footer-dim);
}

.footer .social{
  display:flex; flex-wrap:wrap; gap: 10px;
}

/* glass pills */
.footer .social a{
  --pill-bg: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--footer-border);
  background: var(--pill-bg);
  color: var(--footer-text);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .2px;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transition: transform .08s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}

/* subtle inner shine that follows mouse via the same --mx/--my */
.footer .social a::after{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(220px 160px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.12), transparent 60%);
  opacity:.0; transition: opacity .25s ease;
  pointer-events:none;
}

.footer .social a:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 12px 32px rgba(68,204,255,.18);
}
.footer .social a:hover::after{ opacity:.9; }

.footer .social a:focus-visible{
  outline: 2px solid #7ee3ff; outline-offset: 2px;
}

/* Compact stack on small screens */
@media (max-width: 700px){
  .footer .container{ justify-content:center; text-align:center; gap: 10px 14px; }
  .footer .social{ justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  .footer::before{ animation: none; }
  .footer .social a, .footer .container::before{ transition:none; }
}