/* ============================================================================
   links.css — standalone mobile "link in bio" funnel page (Instagram etc).
   Not part of the main site chrome (no header/nav) — its own plain-green,
   logo-watermark, futuristic/rock layout. Loaded only by links.html, after
   styles.css (reuses its color tokens from :root, but uses its own display
   font — Orbitron — instead of the main site's Sora).
   ============================================================================ */

.links-page {
  position: relative;
  min-height: 100vh;
  min-height: var(--real-100vh, 100vh);
  overflow-x: hidden;
  background:
    radial-gradient(130% 70% at 50% 0%, #214733 0%, var(--green-bg) 55%, var(--green-dark) 100%);
  display: flex; align-items: center; justify-content: center;
}

/* Big centered logo watermark, sitting BEHIND all content — fixed so it stays
   put even if the button list grows taller than one screen. */
.links-bg-logo {
  position: fixed; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.links-bg-logo img {
  width: min(115vw, 115vh); max-width: 1100px; height: auto;
  opacity: 0.16;
  filter: drop-shadow(0 0 60px rgba(212, 175, 55, 0.25));
}

.links-wrap {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
  margin: 0 auto; padding: 64px 24px 40px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

.links-tagline {
  font-family: 'Orbitron', var(--font-head), sans-serif;
  font-weight: 700; text-transform: uppercase;
  font-size: 0.9rem; color: var(--gold-bright);
  letter-spacing: 0.16em; margin-bottom: 40px;
  filter: drop-shadow(0 0 14px rgba(232, 199, 102, 0.35));
}

.links-list {
  width: 100%;
  display: flex; flex-direction: column; gap: 16px;
}

/* Futuristic angular buttons: clipped corners (top-left + bottom-right cut),
   a thin glowing edge, a scanline sheen on hover, and a faint diagonal
   accent line borrowed from HUD/cyberpunk UI. */
.links-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 18px 22px;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  font-family: 'Orbitron', var(--font-head), sans-serif;
  font-weight: 600; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--cream); background: rgba(20, 42, 30, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.45);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.links-btn::before {
  /* Sweeping light bar — sits under the label, animates across on hover */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(232, 199, 102, 0.16) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .5s ease;
}
.links-btn:hover::before, .links-btn:focus-visible::before { transform: translateX(120%); }
.links-btn i { width: 18px; height: 18px; flex-shrink: 0; color: var(--gold-bright); }
.links-btn:hover, .links-btn:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 1px rgba(232, 199, 102, 0.25), 0 10px 26px rgba(0, 0, 0, 0.35), 0 0 22px rgba(212, 175, 55, 0.22);
}

.links-btn-primary {
  background: var(--grad-gold-glass);
  color: var(--btn-text); text-shadow: var(--btn-text-shadow);
  border: 1.5px solid var(--gold-bright);
  box-shadow: var(--btn-gold-shadow);
}
.links-btn-primary i { color: var(--btn-text); }
.links-btn-primary::before { background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); }
.links-btn-primary:hover, .links-btn-primary:focus-visible {
  box-shadow: var(--btn-gold-shadow-hover);
}

.links-footer {
  position: relative; z-index: 1;
  margin-top: 44px; font-size: 0.75rem; color: var(--cream-dim);
  font-family: 'Orbitron', var(--font-head), sans-serif; letter-spacing: 0.04em;
}

@media (min-width: 600px) {
  .links-wrap { padding-top: 80px; }
}