/* ============================================
   GEOVANNA · v2 — redesign premium
   ============================================ */

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

:root{
  --bg:#060410;
  --surface: rgba(255,255,255,0.05);
  --surface-2: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.10);
  --border-2: rgba(255,255,255,0.22);
  --text:#f4f2fa;
  --text-dim: rgba(255,255,255,0.72);
  --text-dim-2: rgba(255,255,255,0.55);
  --brand:#a855f7;
  --brand-2:#ec4899;
  --brand-3:#6366f1;
  --shadow: 0 20px 60px -20px rgba(0,0,0,.6);
}

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
  overflow-x:hidden;
  min-height:100vh; min-height:100dvh;
}

/* ---- background layers ---- */
.bg-image{
  position:fixed; inset:-6%;
  background-size:cover;
  background-position:center;
  filter: blur(40px) saturate(1.15);
  transform: scale(1.2);
  z-index:0;
  opacity:.8;
}
.bg-overlay{
  position:fixed; inset:0;
  background:
    radial-gradient(1200px circle at 50% -10%, rgba(168,85,247,0.45), transparent 55%),
    radial-gradient(900px circle at 90% 110%, rgba(236,72,153,0.35), transparent 55%),
    linear-gradient(180deg, rgba(6,4,16,0.35) 0%, rgba(6,4,16,0.85) 55%, rgba(6,4,16,0.98) 100%);
  z-index:1;
}
.bg-mesh{
  position:fixed; inset:0;
  background-image:
    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:40px 40px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
  z-index:1; pointer-events:none;
}
.bg-glow{
  position:fixed;
  width:600px; height:600px;
  border-radius:50%;
  filter:blur(140px);
  opacity:.45;
  z-index:1;
  pointer-events:none;
  animation: float 10s ease-in-out infinite;
}
.glow-a{ background:#a855f7; top:-180px; left:-180px; }
.glow-b{ background:#ec4899; bottom:-180px; right:-180px; opacity:.32; animation-delay:-5s; }
@keyframes float{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(40px,20px) scale(1.05); }
}

/* ---- layout ---- */
.wrap{
  position:relative;
  z-index:2;
  max-width: 540px;
  margin:0 auto;
  padding: 64px 22px 56px;
  padding-bottom: calc(56px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ---- profile ---- */
.profile{
  text-align:center;
  margin-bottom: 36px;
  animation: fadeDown .9s cubic-bezier(.22,1,.36,1) both;
}
@keyframes fadeDown{
  from{ opacity:0; transform: translateY(-16px); }
}
.avatar-ring{
  position:relative;
  width: 132px; height: 132px;
  margin: 0 auto 20px;
  border-radius: 50%;
  padding: 4px;
  background: conic-gradient(from 180deg at 50% 50%, #a855f7, #ec4899, #6366f1, #a855f7);
  box-shadow:
    0 14px 44px -10px rgba(168,85,247,.55),
    0 0 40px rgba(236,72,153,.25);
  animation: ringSpin 14s linear infinite;
}
@keyframes ringSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
.avatar-ring::before{
  content:'';
  position:absolute; inset:-8px;
  border-radius:50%;
  background: radial-gradient(closest-side, rgba(168,85,247,.35), transparent 70%);
  filter: blur(18px);
  z-index:-1;
  animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:.7; transform: scale(1); }
  50%{ opacity:1; transform: scale(1.08); }
}
.avatar{
  width:100%; height:100%;
  border-radius:50%;
  display:block;
  object-fit:cover;
  border: 3px solid var(--bg);
  background: #1a1231;
  /* o avatar-ring pai gira — isso mantém a foto firme */
  animation: ringSpin 14s linear infinite reverse;
}

.verified{
  position:absolute;
  right:3px; bottom:6px;
  width: 32px; height: 32px;
  border-radius:50%;
  background: linear-gradient(135deg, #3b82f6, #a855f7);
  border: 3px solid var(--bg);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 18px -3px rgba(59,130,246,.6);
  /* contraanima pra ficar firme */
  animation: ringSpin 14s linear infinite reverse;
}
.verified svg{ width:16px; height:16px; }

.name{
  font-size: clamp(24px, 6vw, 30px);
  font-weight: 800;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, #ffffff 0%, #f0e6ff 50%, #ffcae4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 4px;
  /* tiny shimmer */
  background-size: 200% 200%;
  animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}
.name-wrap{ display:inline-flex; align-items:center; gap:8px; justify-content:center; }
.name-wrap svg{ width:18px; height:18px; }

.bio{
  color: var(--text-dim);
  font-size: 14.5px;
  max-width: 360px;
  margin: 8px auto 0;
  line-height:1.5;
}

/* ---- links ---- */
.links{
  width:100%;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.btn-link{
  position:relative;
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  color: var(--text);
  text-decoration:none;
  font-weight: 600;
  font-size: 15.5px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    transform .2s cubic-bezier(.2,1.2,.4,1),
    background .2s,
    border-color .2s,
    box-shadow .25s;
  overflow:hidden;
  isolation:isolate;
  animation: slideUp .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i) * 60ms + 120ms);
}
@keyframes slideUp{
  from{ opacity:0; transform: translateY(14px); }
}

/* gradient shine on hover */
.btn-link::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s;
  z-index:-1;
}
.btn-link:hover::before{ transform: translateX(120%); }

/* soft brand glow on hover */
.btn-link::after{
  content:'';
  position:absolute; inset:0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(168,85,247,.18), rgba(236,72,153,.12));
  opacity:0;
  transition: opacity .25s;
  z-index:-2;
}
.btn-link:hover::after{ opacity:1; }

.btn-link:hover{
  background: var(--surface-2);
  border-color: var(--border-2);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -12px rgba(0,0,0,.55);
}
.btn-link:active{ transform: translateY(0); }

.btn-icon{
  position:relative;
  width: 42px; height: 42px;
  min-width: 42px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.btn-icon img{
  width: 100%; height: 100%;
  object-fit: cover;
  /* sem filter — mantém cores oficiais das marcas */
}
.btn-icon .fallback{
  color: var(--text-dim);
  font-size: 20px;
  font-weight: 700;
}
.btn-icon .shine{
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 60%);
  pointer-events:none;
}

.btn-title{
  flex:1;
  text-align:center;
  /* gera espaço pro arrow do lado direito */
  padding-right: 24px;
  letter-spacing: -0.005em;
}

.btn-arrow{
  position:absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width:20px; height:20px;
  color: var(--text-dim-2);
  transition: transform .25s cubic-bezier(.2,1.2,.4,1), color .2s, opacity .2s;
  opacity:.6;
}
.btn-arrow svg{ width:100%; height:100%; }
.btn-link:hover .btn-arrow{
  transform: translateY(-50%) translate(3px,-3px);
  color: #fff;
  opacity:1;
}

/* ---- footer ---- */
.foot{
  margin-top: 42px;
  text-align:center;
}
.backlink{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: var(--text-dim-2);
  text-decoration:none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all .2s;
}
.backlink strong{
  background: linear-gradient(135deg, #a855f7, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}
.backlink:hover{
  background: rgba(168,85,247,.1);
  border-color: rgba(168,85,247,.35);
  color:#fff;
  transform: translateY(-1px);
}

/* ---- mobile tweaks ---- */
@media (max-width: 480px){
  .wrap{ padding: 48px 18px 40px; }
  .avatar-ring{ width: 120px; height: 120px; }
  .btn-link{ padding: 13px 16px; font-size: 14.5px; gap:12px; }
  .btn-icon{ width: 38px; height: 38px; min-width: 38px; border-radius:11px; }
  .btn-title{ padding-right: 20px; }
  .btn-arrow{ width:18px; height:18px; right:14px; }
  .name{ font-size: 26px; }
  .bio{ font-size: 14px; }
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* modo "tap feedback" pra mobile que não tem hover */
@media (hover: none){
  .btn-link:active{
    background: var(--surface-2);
    transform: scale(.98);
  }
}