.links {
  display: grid;
  gap: 1.15rem;
  width: var(--page-w);
}

.link {
  --c: var(--pink);
  --tilt: -1.2deg;
  --from: -130%;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.1rem 0.85rem 0.85rem;
  border: 3px solid var(--void);
  border-radius: 18px;
  background: var(--c);
  color: var(--void);
  text-decoration: none;
  box-shadow:
    6px 6px 0 var(--white),
    0 0 28px var(--c);
  transform: rotate(var(--tilt));
  transition:
    transform 0.18s cubic-bezier(0.3, 1.8, 0.5, 1),
    box-shadow 0.18s;
}

.link:nth-child(even) {
  --tilt: 1.3deg;
  --from: 130%;
}

.link[data-id='signal'] {
  --c: var(--cyan);
}

.link[data-id='x'] {
  --c: var(--yellow);
}

.link[data-id='email'] {
  --c: var(--pink);
}

.link[data-id='site'] {
  --c: var(--acid);
}

.link[data-id='personal'] {
  --c: var(--white);
}

/* ---------- VIP mode (unlocked by the Wallet pass) ---------- */

.link--vip {
  border-color: var(--yellow);
  box-shadow:
    6px 6px 0 var(--yellow),
    0 0 34px var(--c);
}

.link--vip .link__label::after {
  content: 'VIP';
  margin-left: 0.45em;
  padding: 0.05em 0.4em 0.1em;
  border-radius: 6px;
  background: var(--void);
  color: var(--yellow);
  font-size: 0.6em;
  vertical-align: 0.25em;
}

.vip {
  display: grid;
  gap: 0.3rem;
  width: var(--page-w);
  margin: 0;
  padding: 0.9rem 1rem;
  border: 3px solid var(--void);
  border-radius: 16px;
  background: linear-gradient(110deg, #b8860b, var(--yellow) 30%, #fff6b0 45%, var(--yellow) 60%, #b8860b);
  background-size: 250% 100%;
  color: var(--void);
  text-align: center;
  box-shadow:
    0 0 0 3px var(--white),
    0 0 40px var(--yellow);
  transform: rotate(-1.5deg);
  animation:
    rainbow-slide 2.4s linear infinite,
    throb 1.3s ease-in-out infinite;
}

.vip[hidden] {
  display: none;
}

.vip__title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 5.4vw, 1.5rem);
}

.vip__sub {
  font-family: var(--font-term);
  font-size: 1.25rem;
  line-height: 1;
}

.link:active {
  transform: rotate(0deg) scale(0.93);
  box-shadow:
    2px 2px 0 var(--white),
    0 0 44px var(--c);
}

.link:focus-visible {
  outline: 4px dashed var(--white);
  outline-offset: 5px;
}

@media (hover: hover) {
  .link:hover {
    transform: rotate(0deg) scale(1.05);
  }
}

/* shine sweep */
.link::after {
  content: '';
  position: absolute;
  inset: -20% auto -20% 0;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.8), transparent);
  transform: translateX(-150%) skewX(-20deg);
  animation: shine 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.35s);
  pointer-events: none;
}

.link__emoji {
  display: grid;
  place-items: center;
  width: 3.1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--void);
  font-size: 1.8rem;
  box-shadow: 0 0 0 3px var(--white);
  animation: emoji-wobble 1.7s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.4s);
}

.link__text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  line-height: 1;
}

.link__label {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 5.6vw, 1.5rem);
}

.link__sub {
  overflow: hidden;
  font-size: 1.2rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0.85;
}

.link__arrow {
  font-family: var(--font-display);
  font-size: 1.7rem;
  animation: arrow-poke 0.7s ease-in-out infinite alternate;
}

.is-live .link {
  animation: link-in 0.85s cubic-bezier(0.2, 1.7, 0.4, 1) backwards;
  animation-delay: calc(0.3s + var(--i, 0) * 0.13s);
}

/* ---------- save contact ---------- */

.save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: var(--page-w);
  padding: 1.05rem 1rem;
  border: 3px solid var(--void);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink), var(--orange), var(--yellow), var(--acid), var(--cyan), var(--pink));
  background-size: 300% 100%;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 5.2vw, 1.45rem);
  text-decoration: none;
  -webkit-text-stroke: 1.5px var(--void);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--void);
  box-shadow:
    0 0 0 3px var(--white),
    0 0 36px var(--pink);
  animation:
    rainbow-slide 2.2s linear infinite,
    throb 1.1s ease-in-out infinite;
}

.save:active {
  scale: 0.94;
}

.save:focus-visible {
  outline: 4px dashed var(--white);
  outline-offset: 6px;
}