/* =========================
   FUTURISTIC FOOTER — safe animations (no layout impact)
   Replace your footer CSS with this file
   ========================= */

.futuristic-footer {
  --accent: #6e56e6;
  color: rgba(255,255,255,0.95);
  background: linear-gradient(180deg, rgba(7,11,24,0.96), rgba(18,13,45,0.98));
  padding: 36px 18px 20px;
  position: relative;
  overflow: visible;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

/* top accent band — animated via background-position & opacity only */
.futuristic-footer__accent {
  position:absolute;
  left:0; right:0; top:0; height:12px;
  background: linear-gradient(90deg,
    rgba(142,107,230,0.55) 0%,
    rgba(111,180,255,0.35) 50%,
    rgba(142,107,230,0.55) 100%);
  filter: blur(10px);
  opacity: 0.85;
  z-index:0;
  /* animate background shift (no transform) and subtle opacity pulse */
  background-size: 300% 100%;
  animation: ff-accent-bg 10s linear infinite, ff-accent-opacity 6s ease-in-out infinite;
}

/* inner layout: brand / nav / socials */
.futuristic-footer__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 420px 260px;
  gap: 22px;
  align-items: start;
  padding-top: 8px;
}

/* Brand */
.futuristic-footer__brand { display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.futuristic-footer__brand-link { display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit; }
.futuristic-footer__logo { width:56px; height:56px; border-radius:10px; object-fit:cover; border:1px solid rgba(255,255,255,0.04); box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
.futuristic-footer__name { font-weight:900; font-size:1.05rem; display:block; }
.futuristic-footer__tag { font-size:0.88rem; color: rgba(255,255,255,0.82); display:block; }
.futuristic-footer__desc { margin:0; color: rgba(255,255,255,0.78); max-width:520px; line-height:1.45; font-size:0.95rem; }

/* NAV (simple horizontal list) - keep static, only opacity fade on load */
.futuristic-footer__nav { display:flex; align-items:center; }
.futuristic-footer__links { display:flex; gap:14px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.futuristic-footer__links a {
  color: rgba(255,255,255,0.88);
  font-weight:700;
  text-decoration:none;
  padding:6px 4px;
  border-radius:6px;
  transition: color .16s ease, transform .12s ease;
}
.futuristic-footer__links a:hover,
.futuristic-footer__links a:focus { color: var(--accent); transform: translateY(-3px); outline: none; }

/* SOCIALS */
.futuristic-footer__socials-wrap { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.futuristic-footer__socials { display:flex; gap:10px; align-items:center; }
.futuristic-footer__social {
  display:inline-grid; place-items:center;
  width:46px; height:46px; border-radius:12px;
  color:#fff; text-decoration:none;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s, filter .18s;
  position: relative;
}
.futuristic-footer__social i { display:block; width:20px; height:20px; }
.futuristic-footer__social:hover,
.futuristic-footer__social:focus {
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 16px 48px rgba(110,80,220,0.18);
  filter: saturate(1.08);
  color: var(--accent);
}

/* social glow uses opacity only (no transform that alters layout) */
.futuristic-footer__social::after {
  content:"";
  position:absolute;
  inset:auto;
  width:86px; height:86px;
  left:50%; top:50%;
  transform: translate(-50%,-50%); /* transform here doesn't change layout of surrounding content */
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(110,165,255,0.12), transparent 35%);
  opacity:0;
  pointer-events:none;
  transition: opacity .28s ease;
}
.futuristic-footer__social:hover::after { opacity:1; }

/* hint */
.futuristic-footer__social-hint { font-size:0.9rem; color: rgba(255,255,255,0.78); }

/* bottom bar */
.futuristic-footer__bar { margin-top:18px; border-top:1px solid rgba(255,255,255,0.04); padding-top:14px; text-align:center; color: rgba(255,255,255,0.72); font-size:0.92rem; }

/* visually-hidden helper */
.visually-hidden { position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px; }

/* Responsive */
@media (max-width: 980px) {
  .futuristic-footer { padding: 26px 16px 20px; }
  .futuristic-footer__inner { grid-template-columns: 1fr; gap:18px; }
  .futuristic-footer__socials-wrap { align-items:flex-start; }
  .futuristic-footer__brand { align-items:flex-start; }
  .futuristic-footer__nav { order: 3; }
  .futuristic-footer__socials-wrap { order: 2; }
  .futuristic-footer__desc { max-width:100%; }
}

/* SAFER ANIMATIONS — OPACITY & BACKGROUND-ONLY (no page reflow changes) */
@keyframes ff-accent-bg {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes ff-accent-opacity {
  0% { opacity: 0.82; filter: blur(10px); }
  50% { opacity: 0.92; filter: blur(12px) saturate(1.05); }
  100% { opacity: 0.82; filter: blur(10px); }
}

/* small fade-in for footer content using opacity only */
.futuristic-footer { opacity: 0; animation: ff-fade-in 600ms ease forwards 140ms; }
@keyframes ff-fade-in { to { opacity: 1; } }

/* reduced motion users */
@media (prefers-reduced-motion: reduce) {
  .futuristic-footer__accent,
  .futuristic-footer { animation: none !important; transition: none !important; }
}