.nav-list {
  display: flex;
  align-items: center;
  gap: 6rem;
}

.nav-links{
  /* color tokens reused from global root */
  --clr-main:   var(--accent);
  --clr-accent: var(--accent-2);
  --bg-base:    var(--secondary-clr);

  position:relative;
  display:inline-block;
  padding:0.9rem 2.2rem;
  font:700 clamp(1rem,1vw + .2rem,1.2rem)/1 'Poppins',sans-serif;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--clr-main);
  background:var(--bg-base);
  border-radius:40px;
  cursor:pointer;
  user-select:none;
  transition:
    color .45s ease,
    box-shadow .45s ease,
    transform .35s cubic-bezier(.68,-.55,.265,1.55);
  box-shadow:
    0 6px 14px hsla(0 0% 0%/.25),
    inset 0 -2px 4px var(--clr-main);
  z-index:0;
  overflow:hidden;
}


.nav-links::before,               /* animated pill shine */
.nav-links::after{                /* underline bar        */
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.nav-links::before{
  background:linear-gradient(90deg,
              transparent 0 30%,
              var(--clr-main) 45% 55%,
              transparent 70% 100%);
  background-size:200% 100%;
  transform:translateX(-100%);
  transition:transform .6s ease;
}

/* simple underline that scales, no @property needed */
.nav-links::after{
  bottom:5px; height:3px; width:80%; left:10%;
  background:var(--clr-accent);
  border-radius:9999px;
  transform-origin:left;
  transform:scaleX(0);
  transition:transform .45s ease;
}

.nav-links:hover::before{transform:translateX(0);}
.nav-links:hover::after{ transform:scaleX(1); }
.nav-links:hover,
.nav-links:focus-visible{
  color:transparent;
  background:linear-gradient(90deg,var(--clr-main),var(--clr-accent));
  -webkit-background-clip:text; background-clip:text;
  box-shadow:0 0 12px var(--clr-accent),inset 0 0 10px var(--clr-main);
  outline:2px solid var(--clr-accent);
  outline-offset:4px;
  transform:scale(1.05);
}

.nav-links:active{
  transform:scale(.92);
  transition:transform .12s;
}

.nav-links.active{
  color:var(--clr-accent);
  box-shadow:
    inset 4px 4px 8px hsla(0 0% 0%/.4),
    inset -4px -4px 8px var(--clr-accent);
  transform:scale(1.12);
}

/* ───────────────── SOCIAL ICON LINKS ───────────────── */
.social-nav{
  display:flex;
  gap:2.4rem;
  perspective:800px;
}

.social-nav a{
  --size:42px;
  width:var(--size); height:var(--size);
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:2px solid currentColor;
  color:#fff;
  position:relative;
  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    box-shadow .35s cubic-bezier(.22,1,.36,1),
    color .35s;
  transform-style:preserve-3d;
}

/* glow ring */
.social-nav a::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:linear-gradient(45deg,var(--accent-2),var(--accent));
  filter:blur(8px);
  opacity:0;
  transition:opacity .4s ease;
  z-index:-1;
}

.social-nav a:hover,
.social-nav a:focus-visible{
  background:var(--accent-2);
  color:var(--secondary-clr);
  transform:scale(1.15) rotateX(8deg) rotateY(10deg);
  box-shadow:0 0 8px var(--accent-2),0 8px 18px rgba(0,0,0,.25);
  outline:2px solid var(--secondary-clr);
}

.social-nav a:hover::before,
.social-nav a:focus-visible::before{opacity:1;}

.social-nav a:active{
  transform:scale(.98) rotateX(0) rotateY(0);
  box-shadow:none;
}
.nav-links.blurred {
  filter: blur(2px) brightness(0.6);
  opacity: 0.4;
  transform: scale(0.95);
  transition: all 0.3s ease;
  pointer-events: none;
}


/* icon size */
.social-nav a svg{
  width:20px; height:20px;
}

/* prefers‑reduced‑motion */
@media (prefers-reduced-motion:reduce){
  .nav-links,
  .social-nav a,
  .nav-links::before,
  .nav-links::after{
    transition:none!important; animation:none!important;
  }
}
.nav-links.blurred {
  filter: blur(2px) brightness(0.7);
  opacity: 0.5;
  transform: scale(0.95);
  transition: all 0.3s ease;
}


.name {
  color: #fff;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
  text-shadow:
    0 0 5px var(--accent),
    0 0 10px var(--accent),
    0 0 15px var(--accent-2),
    0 0 25px var(--accent-2);
  transition: all 0.4s ease;
  animation: textPulse 3s ease-in-out infinite;
}
@keyframes textPulse {
  0%, 100% {
    text-shadow:
      0 0 5px var(--accent),
      0 0 10px var(--accent),
      0 0 15px var(--accent-2),
      0 0 25px var(--accent-2);
  }
  50% {
    text-shadow:
      0 0 2px var(--accent),
      0 0 4px var(--accent),
      0 0 6px var(--accent-2),
      0 0 10px var(--accent-2);
  }
}