/* styles.css — LinkHub-style bio link. Dark monochrome + blueprint grid. */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-feature-settings: 'ss01', 'cv11';
  color: rgba(255,255,255,0.72);
  background: #050506;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

#root { min-height: 100%; }

/* ─── Stage ───────────────────────────────────────────────────────────── */
.root {
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: var(--pad-y, 60px) 24px;
  isolation: isolate;
  overflow-x: hidden;
}

.stage {
  position: relative;
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  z-index: 1;
}

/* ─── Background layers ──────────────────────────────────────────────── */
.bg-grid {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 25%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 25%, transparent 85%);
}
.root[data-grid="blueprint"] .bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
}
.root[data-grid="dots"] .bg-grid {
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.root[data-grid="none"] .bg-grid { display: none; }

.bg-vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,255,255,0.02), transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(0,0,0,0.6) 100%);
  z-index: 0;
}

.bg-glow {
  position: fixed;
  top: -10vh;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 720px;
  pointer-events: none;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 55%);
  opacity: var(--glow-strength, 0);
  filter: blur(40px);
  z-index: 0;
}

/* ─── Header ─────────────────────────────────────────────────────────── */
.head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  animation: fadeUp .8s cubic-bezier(.2,.7,.2,1) both;
}

.profile {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}
.profile-img {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  display: block;
}
.profile-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,0.14);
  pointer-events: none;
  z-index: 2;
}
.profile-glow {
  position: absolute;
  inset: -14px;
  border-radius: inherit;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 65%);
  filter: blur(18px);
  opacity: calc(var(--glow-strength, 0) * 1.1);
  z-index: -1;
}

.name {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
}
.bio {
  margin: -6px 0 0;
  max-width: 420px;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.55);
  text-wrap: pretty;
}

/* ─── Socials ────────────────────────────────────────────────────────── */
.socials {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}
.social:hover {
  color: var(--accent);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-1px);
}

/* ─── Links ──────────────────────────────────────────────────────────── */
.links {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap, 10px);
}

.link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 12px;
  color: #ffffff;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1),
              border-color .3s ease,
              background .3s ease,
              box-shadow .4s ease;
  animation: fadeUp .7s cubic-bezier(.2,.7,.2,1) both;
}

.link::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 2.5px;
  border-radius: 2px;
  background: var(--accent, #fff);
  transform: scaleY(0);
  opacity: 0;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.link:hover::before {
  transform: scaleY(1);
  opacity: 0.55;
}

.root[data-style="solid"] .link {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
}
.root[data-style="glass"] .link {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.3);
}
.root[data-style="outline"] .link {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
}

.link:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-5px) scale(1.018);
  box-shadow: 0 14px 36px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
}

.link-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.link-title {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.005em;
  line-height: 1.3;
  display: inline-block;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1),
              letter-spacing .45s cubic-bezier(.34,1.56,.64,1),
              color .3s ease;
}
.link:hover .link-title {
  transform: translateY(-2px);
  letter-spacing: .02em;
  color: #fff;
}

.link-meta {
  font-size: 13px;
  color: rgba(255,255,255,0.48);
  line-height: 1.35;
  display: inline-block;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1) .04s,
              color .3s ease .04s;
}
.link:hover .link-meta {
  transform: translateY(-2px);
  color: rgba(255,255,255,0.65);
}

.link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(255,255,255,0.05);
  flex-shrink: 0;
  color: rgba(255,255,255,0.6);
  transition: transform .5s cubic-bezier(.34,1.2,.64,1),
              background .3s ease,
              color .3s ease;
}
.link:hover .link-icon {
  transform: scale(1.12) rotate(-4deg);
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.4);
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), color .3s ease;
}
.link:hover .link-arrow {
  transform: translate(3px, -3px) scale(1.1);
  color: var(--accent);
}

.link-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 50%),
              rgba(255,255,255,0.05), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
  z-index: -1;
}
.link[data-sheen="1"]:hover .link-sheen { opacity: 1; }

/* ─── Subscribe ──────────────────────────────────────────────────────── */
.subscribe {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  animation: fadeUp .8s cubic-bezier(.2,.7,.2,1) .6s both;
}
.subscribe-input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .25s ease, background .25s ease;
}
.subscribe-input::placeholder { color: rgba(255,255,255,0.35); }
.subscribe-input:focus {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
}

.subscribe-btn {
  position: relative;
  height: 46px;
  padding: 0 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .15s ease;
  overflow: hidden;
}
.subscribe-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.18);
}
.subscribe-btn:active { transform: scale(.98); }
.sub-label {
  display: inline-block;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.sub-label-sent {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(60%);
  opacity: 0;
}
.subscribe-btn[data-state="sent"] .sub-label-idle {
  transform: translateY(-180%);
  opacity: 0;
}
.subscribe-btn[data-state="sent"] .sub-label-sent {
  transform: translateY(-50%);
  opacity: 1;
}

/* ─── Scroll top ─────────────────────────────────────────────────────── */
.scroll-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  animation: fadeUp .8s cubic-bezier(.2,.7,.2,1) .7s both;
  transition:
    background .3s ease,
    border-color .3s ease,
    color .3s ease,
    transform .5s cubic-bezier(.34,1.2,.64,1),
    box-shadow .4s ease;
}
.scroll-top:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.9);
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.scroll-top:active {
  transform: scale(0.9) !important;
  transition: transform .1s ease !important;
}
.scroll-top-arrow {
  display: inline-flex;
  transition: transform .5s cubic-bezier(.34,1.2,.64,1);
}
.scroll-top:hover .scroll-top-arrow {
  transform: translateY(-3px);
}

/* ─── Footer ─────────────────────────────────────────────────────────── */
.foot {
  margin-top: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.32);
  animation: fadeUp .9s cubic-bezier(.2,.7,.2,1) .8s both;
}
.foot-link {
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  font-weight: 500;
  transition: color .2s ease;
}
.foot-link:hover { color: #fff; }
.foot-sep { opacity: 0.35; }

.foot-brand {
  text-decoration: none;
  color: rgba(255,255,255,0.32);
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.foot-name {
  font-weight: 600;
  letter-spacing: .01em;
  display: inline-block;
  transition: color .22s ease, letter-spacing .4s cubic-bezier(.34,1.56,.64,1), transform .4s cubic-bezier(.34,1.56,.64,1);
}
.foot-brand:hover .foot-name {
  color: rgba(255,255,255,0.85);
  letter-spacing: .08em;
  transform: scale(1.1);
}
.foot-brand:active .foot-name {
  transform: scale(0.92);
  transition: transform .1s ease;
}

/* ─── Animations ─────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Mobile tighten ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .root { padding: 40px 18px; }
  .stage { gap: 28px; }
  .profile { width: 64px; height: 64px; }
  .name { font-size: 24px; }
  .bio { font-size: 13.5px; }
  .subscribe { flex-direction: column; }
  .subscribe-btn { width: 100%; }
  .foot { font-size: 11.5px; }
}