/* ============================================================
   Minji baby — link-in-bio landing page
   Dark theme. Drop your own images into assets/ to replace
   the placeholders (see app.js / the .featured-media + .thumb rules).
   ============================================================ */
:root {
  --bg:        #0a0a0c;
  --bg2:       #121116;
  --card:      #18171d;
  --line:      #262531;
  --text:      #f5f4f8;
  --muted:     #9b98a8;
  --pink:      #ff4f93;
  --pink2:     #ff7eb6;
  --purple:    #a44bff;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background:
    radial-gradient(900px 500px at 50% -5%, rgba(164,75,255,.18), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(255,79,147,.16), transparent 60%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img, svg { display: block; }

/* sticky top bar */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(12,11,15,.72); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 600px; margin: 0 auto; padding: 12px 18px;
  display: flex; align-items: center; gap: 12px;
}
.topbar-avatar { width: 34px; height: 34px; border-radius: 50%; }
.topbar-name { font-weight: 700; font-size: 1rem; }

/* page column */
.page { max-width: 600px; margin: 0 auto; padding: 40px 18px 60px; }

/* hero */
.hero { text-align: center; }
.hero-avatar {
  width: 116px; height: 116px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 16px; border: 3px solid rgba(255,255,255,.9);
  box-shadow: 0 10px 30px rgba(255,79,147,.35), 0 0 0 4px rgba(164,75,255,.18);
}
.name {
  margin: 0; font-size: clamp(2rem, 7vw, 2.7rem); font-weight: 900; letter-spacing: -.5px;
}
.handle { margin: 4px 0 0; color: var(--muted); font-weight: 500; }

.socials { display: flex; justify-content: center; gap: 12px; margin: 16px 0 0; }
.social {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #feda75, #d62976 45%, #962fbf 80%, #4f5bd5);
  transition: transform .12s, filter .12s;
}
.social-fv { background: linear-gradient(135deg, var(--pink), var(--purple)); }
.social-copy { background: linear-gradient(135deg, var(--pink), var(--purple)); position: relative; }
.social-copy::after {
  content: "Link copied!";
  position: absolute; bottom: calc(100% + 9px); left: 50%;
  transform: translateX(-50%) translateY(5px);
  background: #18171d; color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .01em;
  padding: 6px 10px; border-radius: 9px; white-space: nowrap;
  border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(0,0,0,.4);
  opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s;
}
.social-copy.copied::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.social:hover { transform: translateY(-2px); filter: brightness(1.08); }

.bio { margin: 18px 0 0; color: #e9e7f0; font-size: 1.02rem; }

/* featured card */
.featured {
  display: block; position: relative; margin: 28px 0 0;
  border-radius: 18px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  transition: transform .15s, box-shadow .15s;
}
.featured:hover { transform: translateY(-3px); box-shadow: 0 24px 60px rgba(255,79,147,.20); }
.featured-media {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3; width: 100%;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255,126,182,.30), transparent 55%),
    radial-gradient(120% 100% at 80% 90%, rgba(164,75,255,.34), transparent 55%),
    linear-gradient(135deg, #211a2c, #311f3d 55%, #3c2147);
  background-size: cover; background-position: center;
}
.featured-cta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 18px 18px; text-align: center;
  font-weight: 800; font-size: 1.25rem; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.78), transparent);
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
  transition: opacity .2s;
}
.featured { cursor: pointer; }
.featured-media { transition: filter .25s, transform .25s; }

/* 18+ mature-content gate (revealed on click) */
.featured.gated .featured-media { filter: blur(13px) brightness(.65); transform: scale(1.06); }
.featured.gated .featured-cta { opacity: 0; pointer-events: none; }
.featured-gate[hidden] { display: none; }
.featured-gate {
  position: absolute; inset: 0; z-index: 2;
  display: grid; align-content: center; justify-items: center; gap: 11px;
  text-align: center; padding: 26px 24px;
  background: rgba(18,10,8,.5);
}
.gate-eye { width: 38px; height: 38px; color: #fff; opacity: .92; }
.gate-title { font-weight: 800; font-size: 1.18rem; color: #fff; }
.gate-text { font-size: .92rem; color: rgba(255,255,255,.82); max-width: 300px; line-height: 1.45; }
.gate-btn {
  margin-top: 8px; background: #fff; color: #15131a; font-weight: 800; font-size: 1rem;
  padding: 14px 30px; border-radius: 999px; min-width: 230px;
  box-shadow: 0 10px 26px rgba(0,0,0,.35); transition: filter .12s, transform .06s;
}
.gate-btn:hover { filter: brightness(.94); }
.gate-btn:active { transform: translateY(1px); }

/* gallery */
.gallery {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 0;
}
.thumb {
  aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  display: grid; place-items: center; background-size: cover; background-position: center;
  transition: transform .12s, filter .12s;
}
.thumb:hover { transform: scale(1.03); filter: brightness(1.08); }
.t1 { background-image: linear-gradient(135deg,#33263d,#5a2a4d); }
.t2 { background-image: linear-gradient(135deg,#2a2740,#3a2a5a); }
.t3 { background-image: linear-gradient(135deg,#3a2533,#5a2a44); }
.t4 { background-image: linear-gradient(135deg,#262a40,#34284f); }

/* placeholder visuals — a tasteful "locked content" look until real photos are added */
.ph-hint { display: grid; justify-items: center; gap: 10px; }
.ph-lock { width: 46px; height: 46px; color: #fff; opacity: .92; filter: drop-shadow(0 4px 14px rgba(255,79,147,.55)); }
.ph-label {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,.78);
}
.ph-mini { color: rgba(255,255,255,.7); filter: drop-shadow(0 2px 8px rgba(164,75,255,.5)); }
.ph-mini svg { width: 22px; height: 22px; }

/* big CTA button */
.cta-btn {
  display: block; margin: 22px 0 0; text-align: center;
  padding: 16px 20px; border-radius: 14px; font-weight: 800; font-size: 1.05rem; color: #fff;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  box-shadow: 0 12px 28px rgba(255,79,147,.30);
  transition: filter .12s, transform .06s;
}
.cta-btn:hover { filter: brightness(1.05); }
.cta-btn:active { transform: translateY(1px); }

.foot { margin: 34px 0 0; text-align: center; color: var(--muted); font-size: .85rem; }