/* ---------- Variáveis de tema ---------- */
:root{
  --card-bg:#1e1e1e;
  --text-main:#ffffff;
  --text-sub:#d1d1d1;
}
body.light{
  --card-bg:#f1f1f1;
  --text-main:#111;
  --text-sub:#555;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ---------- Spline background ---------- */
iframe{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:-2;border:none;pointer-events:none;
}

/* ---------- Corpo ---------- */
body{
  display:flex;justify-content:center;align-items:center;
  min-height:100vh;overflow-x:hidden;
  font-family:'Poppins',sans-serif;color:var(--text-main);
  background:#0d0d0d;
}

/* ---------- Botão de tema ---------- */
#theme-toggle{
  position:fixed;top:1rem;right:1rem;z-index:10;
  width:40px;height:40px;border:none;border-radius:50%;
  background:#0008;backdrop-filter:blur(6px);cursor:pointer;
  display:flex;justify-content:center;align-items:center;
  font-size:1.2rem;color:#ffd93b;transition:transform .3s;
}
#theme-toggle:hover{transform:scale(1.1)}
body.light #theme-toggle{color:#222;background:#fff8}

/* ---------- Cartão ---------- */
.card{
  width:90vw;max-width:380px;
  padding:2.5rem 2rem;background:var(--card-bg);
  border-radius:1.5rem;text-align:center;
  box-shadow:0 0 35px rgba(0,0,0,.6);
  animation:fadeInUp 1s both;
  transform-style:preserve-3d;            /* para efeito parallax */
}

/* ---------- Avatar ---------- */
.avatar{
  width:160px;height:160px;border-radius:50%;object-fit:cover;
  border:4px solid #4ade80;
  box-shadow: 0 0 20px #4ade80;
  margin-bottom:1rem;
  opacity:1;
  animation: glow 2.5s ease-in-out infinite alternate, fadeInUp 0.8s ease forwards;
  animation-delay: 0.2s, 0.2s;
}

@keyframes glow {
  from {
    box-shadow: 0 0 10px #4ade80;
    opacity: 0.8;
  }
  to {
    box-shadow: 0 0 30px #4ade80;
    opacity: 1;
  }
}

/* ---------- Texto ---------- */
h1 {
  font-size:2rem;font-weight:700;margin:.2rem 0 .4rem;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.4s;
}
.tagline {
  font-weight:300;color:var(--text-sub);margin-bottom:1.8rem;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.6s;
}
.bio {
  font-size:.80rem;color:var(--text-sub);margin-top:2.6rem;line-height:1.4;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 1.4s;
}

/* ---------- Links ---------- */
.links{display:flex;flex-direction:column;gap:1rem}

.btn{
  --clr:#999;
  display:flex;justify-content:center;align-items:center;gap:.6rem;
  background:var(--clr);color:#000;
  padding:.9rem 1rem;border-radius:.9rem;
  text-decoration:none;font-weight:500;letter-spacing:.4px;
  position:relative;overflow:hidden;cursor:pointer;
  transform:translateY(20px);opacity:0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn:hover {
  transform: translateY(10px) scale(1.05);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
}
.btn i{font-size:1.1rem}

/* Cores individuais */
.github {--clr:#facc15}
.insta  {--clr:#f43f5e}
.twitter{--clr:#0ea5e9}
.linkedin { --clr:#0a66c2; } 
.mail   {--clr:#a855f7}


/* ---------- Tooltips ---------- */
.btn::after{
  content:attr(data-label);
  position:absolute;bottom:-1.9rem;left:50%;transform:translateX(-50%);
  background:#222;color:#fff;font-size:.7rem;padding:.3rem .6rem;
  border-radius:.5rem;white-space:nowrap;opacity:0;pointer-events:none;
  transition:.2s;
}
body.light .btn::after{background:#000}
.btn:hover::after{opacity:1;bottom:-2.3rem}

/* ---------- QR & Visits ---------- */
.qr{margin-top:2rem;border-radius:.5rem}
.visits{margin-top:.8rem;opacity:.8}

/* ---------- Animações ---------- */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeSlide{to{opacity:1;transform:translateY(0)}}
.links .btn:nth-child(1){animation:fadeSlide .6s .4s forwards}
.links .btn:nth-child(2){animation:fadeSlide .6s .55s forwards}
.links .btn:nth-child(3){animation:fadeSlide .6s .7s forwards}
.links .btn:nth-child(4){animation:fadeSlide .6s .85s forwards}
.links .btn:nth-child(5){animation:fadeSlide .6s .95s forwards;
}


/* ---------- Mobile ---------- */
@media(max-width:460px){
  .card{padding:1.8rem 1.2rem}
  .avatar{width:120px;height:120px}
}

#particles {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;
}