/* Reset & base (compiled from _reset.scss + variables effect) */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Poppins",sans-serif;
  background-color:#0d1117;
  color:#c9d1d9;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
  min-height:100vh;
}

/* Canvas stars behind everything */
#stars{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  display:block;
}

/* Header */
.header{
  text-align:center;
  padding:28px 20px;
  background:transparent;
  position:relative;
  z-index:2;
}
.header .title{
  font-size:2rem;
  margin-bottom:12px;
  color:#58a6ff;
  text-shadow:0 6px 18px rgba(88,166,255,0.06);
}
.search-box{
  display:flex;
  justify-content:center;
  gap:10px;
  align-items:center;
}
.search-box input{
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  outline:none;
  width:300px;
  background:rgba(255,255,255,0.02);
  color:inherit;
  transition:box-shadow .3s ease, transform .2s ease;
}
.search-box input:focus{
  box-shadow:0 6px 20px rgba(88,166,255,0.08);
  transform:translateY(-2px);
}
.search-box button{
  padding:11px 16px;
  border:none;
  border-radius:10px;
  background:#58a6ff;
  color:#fff;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
  box-shadow:0 6px 18px rgba(88,166,255,0.12);
}
.search-box button:hover{
  transform:translateY(-3px) scale(1.02);
  background:#76b9ff;
}

/* Container */
.container{
  width:90%;
  max-width:1000px;
  margin:40px auto;
  display:flex;
  justify-content:center;
  position:relative;
  z-index:2;
}

/* Profile card */
.profile-card{
  background:#161b22;
  border-radius:16px;
  padding:30px;
  text-align:center;
  width:100%;
  box-shadow:0 10px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  transition:transform .3s ease, box-shadow .3s ease, opacity .6s ease;
  transform:translateY(0);
}
.profile-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 48px rgba(88,166,255,0.08);
}
.profile-card .avatar{
  width:120px;
  height:120px;
  border-radius:50%;
  margin:0 auto 14px;
  display:block;
  object-fit:cover;
  border:3px solid rgba(255,255,255,0.03);
  box-shadow:0 6px 20px rgba(0,0,0,0.6);
}
.profile-card h2{ color:#58a6ff; margin-bottom:6px; }
.profile-card .bio{
  margin:10px 0 18px;
  opacity:.85;
  color:#c9d1d9;
  line-height:1.4;
}

/* Stats */
.stats{
  display:flex;
  justify-content:center;
  gap:28px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.stats li{
  font-size:0.95rem;
  color:#c9d1d9;
  opacity:.95;
}

/* Social links & location */
.social-links{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:12px;
  align-items:center;
  flex-wrap:wrap;
}
.social-links a{
  color:#c9d1d9;
  font-size:1.45rem;
  transition:transform .28s ease, color .28s ease, text-shadow .28s ease;
  display:inline-flex;
  align-items:center;
}
.social-links a:hover{
  color:#58a6ff;
  transform:scale(1.15) translateY(-3px);
  text-shadow:0 6px 18px rgba(88,166,255,0.07);
}
.social-links .location{
  font-size:0.95rem;
  opacity:.85;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#c9d1d9;
}

/* Footer */
.footer{
  text-align:center;
  padding:22px 10px;
  font-size:0.9rem;
  opacity:0.75;
  position:relative;
  z-index:2;
  margin-top:24px;
}

/* Error message */
.error{
  color:#ff7b7b;
  text-align:center;
  padding:18px;
  background:rgba(255,123,123,0.04);
  border-radius:10px;
}

/* Intersection Observer helper classes */
.observe-hidden{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.observe-visible{
  opacity:1;
  transform:translateY(0);
}

/* Soft glow for cards and subtle border */
.profile-card::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:0;
  width:92%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.02),transparent);
  border-radius:8px;
}

/* Scrollbar animation - modern browsers */
:root{
  --scrollbar-track: rgba(255,255,255,0.02);
  --scrollbar-thumb: rgba(88,166,255,0.14);
  --scrollbar-thumb-hover: rgba(88,166,255,0.28);
}
/* WebKit */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:12px}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--scrollbar-thumb),rgba(255,255,255,0.02));
  border-radius:12px;
  border:2px solid transparent;
  background-clip:padding-box;
  transition:background .25s ease, transform .15s ease;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,var(--scrollbar-thumb-hover),rgba(255,255,255,0.04));
  transform:scale(1.02);
}
/* Firefox */
*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}

/* Small finishing touches */
a{color:inherit}
button:focus,input:focus{outline:none;}

/* Responsive: mini-computer (<=1280px) */
@media (max-width:1280px){
  .profile-card{ padding:22px; }
  .search-box input{ width:260px; }
}

/* Tablet */
@media (max-width:1024px){
  .container{ width:95%; }
  .header .title{ font-size:1.8rem; }
}

/* Mobile (<=480px) */
@media (max-width:480px){
  .search-box{ flex-direction:column; gap:8px; }
  .search-box input{ width:100%; padding:12px; }
  .profile-card{ padding:18px; border-radius:12px; }
  .profile-card .avatar{ width:110px; height:110px; }
  .stats{ gap:12px; }
  .social-links a{ font-size:1.2rem; }
}

/* Small mobile 300-450 */
@media (max-width:450px){
  .header .title{ font-size:1.5rem; }
  .profile-card .avatar{ width:88px; height:88px; }
  .search-box button{ width:100%; }
}

/* subtle appear animation keyframes (if needed) */
@keyframes floaty{
  0%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}