/* ══════════════════════════════════════════════════════════════
   Links page (/links) — a link-in-bio page built on style.css tokens.
   ══════════════════════════════════════════════════════════════ */

.links-page {
  background:
    radial-gradient(120% 60% at 50% -10%, var(--md-sys-color-primary-container), transparent 70%),
    var(--md-sys-color-surface);
  background-attachment: fixed;
}

/* ── Top bar ── */
.links-bar {
  display: flex; align-items: center; gap: 8px;
  max-width: 640px; margin: 0 auto;
  height: var(--top-bar-height);
  padding: 0 8px;
}
.links-bar__back { color: var(--md-sys-color-on-surface-variant); }

/* ── Layout ── */
.links {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  max-width: 600px; margin: 0 auto;
  padding: 8px var(--gutter) 32px;
}

/* ── Profile header ── */
.links__profile { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.links__avatar { position: relative; width: 136px; height: 136px; margin-bottom: 8px; display: grid; place-items: center; }
.links__avatar-bg {
  position: absolute; inset: -12px;
  background: var(--md-sys-color-tertiary-container);
  animation: links-spin 40s linear infinite;
}
.links__avatar img {
  position: relative; width: 128px; height: 128px;
  object-fit: cover; object-position: top;
  background: var(--md-sys-color-surface-container-high);
}
@keyframes links-spin { to { transform: rotate(360deg); } }
.links__role { color: var(--md-sys-color-primary); }
.links__bio { color: var(--md-sys-color-on-surface-variant); max-width: 32rem; }

/* ── Link buttons ── */
.links__list { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.link-btn {
  display: flex; align-items: center; gap: 16px;
  min-height: 72px; padding: 12px 16px 12px 12px;
  border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-level1);
  transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial),
              transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
}
html[dir="rtl"] .link-btn { padding: 12px 12px 12px 16px; }
.link-btn:active { border-radius: var(--md-sys-shape-corner-large); transform: scale(.98); }
@media (hover: hover) { .link-btn:hover { transform: translateY(-2px); } }

.link-btn__leading {
  display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}
.link-btn__leading .brand-icon { width: 22px; height: 22px; }
.link-btn__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.link-btn__text .body-medium { color: var(--md-sys-color-on-surface-variant); }
.link-btn__trailing { color: var(--md-sys-color-on-surface-variant); }

/* Featured link: filled primary */
.link-btn--featured { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.link-btn--featured .link-btn__leading { background: var(--md-sys-color-on-primary); color: var(--md-sys-color-primary); }
.link-btn--featured .link-btn__text .body-medium,
.link-btn--featured .link-btn__trailing { color: inherit; opacity: .85; }

.links__share { margin-top: 8px; }

/* ── Footer ── */
.links__footer {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 12px;
  padding: 0 var(--gutter) calc(32px + env(safe-area-inset-bottom));
  color: var(--md-sys-color-on-surface-variant);
}
.links__footer a:hover { color: var(--md-sys-color-primary); }

.links-page .snackbar { bottom: calc(24px + env(safe-area-inset-bottom)); }
@media (min-width: 840px) { .links-page .snackbar { inset-inline: 16px; margin-inline: auto; } }

/* Entrance */
.js .links > * { animation: rise var(--md-sys-motion-duration-extra-long2) var(--md-sys-motion-easing-emphasized-decelerate) backwards; }
.js .links__list > li { animation: rise var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized-decelerate) backwards; animation-delay: calc(var(--i, 0) * 50ms + 120ms); }
@media (prefers-reduced-motion: reduce) { .links__avatar-bg { animation: none; } }