/* ═══════════════════════════════════════════════════════
   team-cards.css  |  About-Me.php — صفحة بطاقات الفريق
   ═══════════════════════════════════════════════════════ */

/* ── Hero ── */
.tc-page-hero{
  position:relative;min-height:52vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;overflow:hidden;
  padding:130px 24px 70px;text-align:center;
}
.tc-hero-inner{position:relative;z-index:2;}
.tc-hero-title{
  font-family:'Orbitron',sans-serif;font-size:clamp(2.2rem,6vw,4.5rem);
  font-weight:900;letter-spacing:-.02em;line-height:1.1;
  color:#fff;margin:12px 0 14px;
}
.tc-hero-title em{
  font-style:normal;
  background:linear-gradient(135deg,#2a7dd8 0%,#1F7A8C 50%,#5fc8e8 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.tc-hero-sub{
  font-family:'Exo 2',sans-serif;font-size:clamp(.95rem,2vw,1.15rem);
  color:rgba(255,255,255,.55);max-width:520px;margin:0 auto 28px;line-height:1.6;
}
.tc-hero-count{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(42,125,216,.12);border:1px solid rgba(42,125,216,.3);
  border-radius:50px;padding:8px 22px;
}
.tc-count-num{
  font-family:'Orbitron',sans-serif;font-size:1.5rem;font-weight:700;color:#5fc8e8;
}
.tc-count-lbl{font-family:'Exo 2',sans-serif;font-size:.85rem;color:rgba(255,255,255,.55);letter-spacing:.05em;}

/* ── Section ── */
.tc-section{padding:70px 0 100px;}
.tc-inner{max-width:1280px;margin:0 auto;padding:0 28px;}

/* ── Grid ── */
.tc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:28px;
}

/* ── Card ── */
.tc-card{
  position:relative;
  background:rgba(8,15,30,.7);
  border:1px solid rgba(42,125,216,.18);
  border-radius:20px;padding:32px 24px 28px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-decoration:none;color:inherit;
  overflow:hidden;
  transition:transform .32s cubic-bezier(.34,1.4,.64,1),
              border-color .28s,box-shadow .28s;
  cursor:pointer;
  --mx:50%;--my:50%;
}
.tc-card-glow{
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle 180px at var(--mx) var(--my),rgba(42,125,216,.13),transparent 70%);
  opacity:0;transition:opacity .3s;
}
.tc-card:hover{
  transform:translateY(-8px) scale(1.015);
  border-color:rgba(42,125,216,.45);
  box-shadow:0 20px 60px rgba(0,0,0,.45),0 0 0 1px rgba(42,125,216,.22);
}
.tc-card:hover .tc-card-glow{opacity:1;}

/* Avatar */
.tc-avatar-wrap{position:relative;width:96px;height:96px;margin-bottom:4px;}
.tc-spin-ring{
  position:absolute;inset:-4px;border-radius:50%;
  border:2px solid transparent;
  border-top-color:#2a7dd8;border-right-color:#1F7A8C;
  animation:spin 3s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.tc-avatar{
  width:100%;height:100%;border-radius:50%;overflow:hidden;
  border:2px solid rgba(42,125,216,.25);
}
.tc-avatar-img{width:100%;height:100%;object-fit:cover;}
.tc-online-dot{
  position:absolute;bottom:4px;right:4px;
  width:12px;height:12px;border-radius:50%;
  background:#22d35e;border:2px solid rgba(8,15,30,.9);
  box-shadow:0 0 6px #22d35e;
}

/* Text */
.tc-name{
  font-family:'Orbitron',sans-serif;font-size:1rem;font-weight:700;
  color:#fff;text-align:center;letter-spacing:.03em;
}
.tc-role{
  font-family:'Exo 2',sans-serif;font-size:.82rem;font-weight:600;
  color:#5fc8e8;letter-spacing:.08em;text-transform:uppercase;text-align:center;
}
.tc-location{
  font-family:'Exo 2',sans-serif;font-size:.78rem;color:rgba(255,255,255,.4);
  display:flex;align-items:center;gap:5px;
}
.tc-location i{color:#2a7dd8;font-size:.7rem;}

/* Stats */
.tc-stats{
  display:flex;gap:16px;margin:6px 0 2px;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:10px 0;width:100%;justify-content:center;
}
.tc-stat{display:flex;flex-direction:column;align-items:center;gap:2px;}
.tc-stat-val{font-family:'Orbitron',sans-serif;font-size:.9rem;font-weight:700;color:#2a7dd8;}
.tc-stat-lbl{font-family:'Exo 2',sans-serif;font-size:.68rem;color:rgba(255,255,255,.4);letter-spacing:.04em;}

/* Skills preview */
.tc-skills-preview{width:100%;display:flex;flex-direction:column;gap:6px;margin:4px 0;}
.tc-skill-mini{display:flex;align-items:center;gap:8px;}
.tc-skill-mini-name{font-family:'Exo 2',sans-serif;font-size:.72rem;color:rgba(255,255,255,.6);min-width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tc-skill-mini-bar{flex:1;height:4px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;}
.tc-skill-mini-fill{height:100%;background:linear-gradient(90deg,#2a7dd8,#5fc8e8);border-radius:4px;}
.tc-skill-mini-pct{font-family:'Orbitron',sans-serif;font-size:.65rem;color:#5fc8e8;min-width:28px;text-align:right;}

/* Social icons */
.tc-socials{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:2px;}
.tc-soc{
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;color:rgba(255,255,255,.55);
  transition:background .22s,color .22s,transform .22s;
}
.tc-card:hover .tc-soc:hover{background:rgba(42,125,216,.2);color:#5fc8e8;transform:scale(1.15);}

/* CTA */
.tc-view-btn{
  margin-top:auto;padding-top:14px;
  display:flex;align-items:center;gap:8px;
  font-family:'Exo 2',sans-serif;font-size:.82rem;font-weight:600;
  color:#2a7dd8;letter-spacing:.06em;text-transform:uppercase;
  transition:gap .25s,color .25s;
}
.tc-card:hover .tc-view-btn{gap:14px;color:#5fc8e8;}
.tc-view-btn i{transition:transform .25s;}
.tc-card:hover .tc-view-btn i{transform:translateX(4px);}

/* Empty */
.tc-empty{
  text-align:center;padding:80px 24px;
  background:rgba(8,15,30,.5);border:1px dashed rgba(42,125,216,.2);border-radius:20px;
}
.tc-empty-icon{font-size:3rem;color:rgba(42,125,216,.3);margin-bottom:20px;}
.tc-empty h3{font-family:'Orbitron',sans-serif;color:rgba(255,255,255,.5);font-size:1.1rem;margin-bottom:10px;}
.tc-empty p{font-family:'Exo 2',sans-serif;color:rgba(255,255,255,.3);font-size:.9rem;margin-bottom:24px;}
.tc-empty-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(42,125,216,.15);border:1px solid rgba(42,125,216,.35);
  border-radius:12px;padding:12px 24px;
  font-family:'Exo 2',sans-serif;font-weight:600;font-size:.9rem;
  color:#5fc8e8;text-decoration:none;transition:all .25s;
}
.tc-empty-cta:hover{background:rgba(42,125,216,.28);transform:translateY(-2px);}

/* Reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .55s ease,transform .55s ease;}
.reveal.rd2{transition-delay:.12s;}
.reveal.rd3{transition-delay:.22s;}
.reveal.rd4{transition-delay:.32s;}
.reveal.visible{opacity:1;transform:none;}

/* ── Responsive ── */
@media(max-width:600px){
  .tc-grid{grid-template-columns:1fr;}
  .tc-hero-title{font-size:2rem;}
}