/* ---------- TEAM PAGE (modern + animated) ---------- */
#page-team{padding-bottom:40px;}
.tm-hero{text-align:center; padding:30px 0 10px; position:relative;}
.tm-title{font-size:clamp(40px,8vw,76px); line-height:1.05; font-weight:800; letter-spacing:-1px; margin:18px 0 14px; display:flex; flex-wrap:wrap; justify-content:center; gap:0 .28em;}
.tm-title span{display:inline-block;}
.tm-sub{max-width:560px; margin:0 auto 26px; color:var(--cream-dim); font-size:16px;}
.tm-stats{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.tm-stat{padding:12px 22px; border-radius:14px; display:flex; flex-direction:column; align-items:center; min-width:104px;}
.tm-stat b{font-size:26px; font-weight:800; line-height:1.1; background:linear-gradient(90deg,var(--blue-bright),var(--gold-bright)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.tm-stat span{font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--cream-dim);}

.tm-tier-label{display:flex; align-items:center; gap:16px; max-width:760px; margin:46px auto 22px; font-size:12px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; color:var(--cream-dim);}
.tm-tier-label i{flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent);}
.tm-tier-label span{white-space:nowrap;}

.tm-row{display:flex; flex-wrap:wrap; justify-content:center; gap:22px; perspective:1100px;}
.tm-card{flex:0 1 300px; min-width:0; position:relative; border-radius:20px; padding:2px; isolation:isolate; transform-style:preserve-3d;
  background:linear-gradient(160deg,rgba(var(--accent-rgb),.55),rgba(255,255,255,.06) 40%,rgba(var(--accent-rgb),.25));
  transition:transform .25s ease, box-shadow .3s ease;
  box-shadow:0 14px 40px rgba(0,0,0,.35);}
.tm-card:hover{box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 44px rgba(var(--accent-rgb),.28);}
.tm-body{position:relative; z-index:1; border-radius:18px; padding:34px 24px 26px; text-align:center; height:100%;
  background:linear-gradient(160deg,rgba(22,40,68,.97),rgba(10,20,38,.98));}
.tm-glow{position:absolute; inset:0; border-radius:20px; z-index:2; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%), rgba(var(--accent-rgb),.22), transparent 70%); mix-blend-mode:screen;}
.tm-card:hover .tm-glow{opacity:1;}
.tm-feature{flex-basis:360px;}
.tm-feature .tm-body{padding:42px 28px 32px;}
.tm-feature .tm-avatar{width:120px; height:120px;}
.tm-feature .tm-name{font-size:26px;}

.tm-avatar{position:relative; width:96px; height:96px; margin:0 auto 20px; animation:tmFloat 5s ease-in-out infinite;}
.tm-avatar img{position:absolute; inset:5px; width:calc(100% - 10px); height:calc(100% - 10px); border-radius:50%; object-fit:cover; z-index:1; border:3px solid #0a1426;}
.tm-ring{position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg,var(--accent),transparent 30%,var(--accent) 55%,transparent 80%,var(--accent)); animation:tmSpin 4s linear infinite; filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),.7));}
.tm-card:nth-child(2) .tm-avatar{animation-delay:-1.6s;}
@keyframes tmSpin{to{transform:rotate(360deg);}}
@keyframes tmFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}

.tm-badge{display:inline-block; padding:5px 14px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--accent);
  background:rgba(var(--accent-rgb),.12); border:1px solid rgba(var(--accent-rgb),.4); margin-bottom:12px;}
.tm-name{font-size:21px; font-weight:700; color:var(--cream); margin-bottom:8px;}
.tm-bio{color:var(--cream-dim); font-size:13.5px; line-height:1.6; margin:0 auto 20px; max-width:30ch;}
.tm-socials{display:flex; justify-content:center; gap:10px; flex-wrap:wrap;}
.tm-link{display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; font-size:13px; font-weight:600; color:var(--cream);
  background:rgba(255,255,255,.05); border:1px solid rgba(243,238,224,.16); transition:transform .2s, background .2s, border-color .2s, box-shadow .2s;}
a.tm-link:hover{transform:translateY(-2px); background:rgba(var(--accent-rgb),.18); border-color:var(--accent); box-shadow:0 6px 18px rgba(var(--accent-rgb),.25);}
.tm-link.static{color:var(--cream-dim);}
.tm-cta{padding-top:70px;}

/* ---- entrance animation (replays each time the page opens) ---- */
.tm-pop,.tm-card,.tm-title span{opacity:0;}
#page-team.tm-in .tm-pop{animation:tmUp .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--d,0) * 1ms);}
#page-team.tm-in .tm-title span{animation:tmWord .8s cubic-bezier(.2,.9,.2,1) forwards; animation-delay:calc(120ms + var(--i,0) * 120ms);}
#page-team.tm-in .tm-card{animation:tmCard .8s cubic-bezier(.2,.9,.2,1) forwards; animation-delay:calc(var(--d,0) * 1ms);}
@keyframes tmUp{from{opacity:0; transform:translateY(24px);}to{opacity:1; transform:none;}}
@keyframes tmWord{from{opacity:0; transform:translateY(40px) rotateX(-60deg); filter:blur(8px);}to{opacity:1; transform:none; filter:none;}}
@keyframes tmCard{from{opacity:0; transform:translateY(50px) scale(.92) rotateX(12deg);}to{opacity:1; transform:none;}}
/* once entrance is done, the card is driven by the tilt script (inline transform) */
.tm-card.tm-done{opacity:1; animation:none !important;}

@media(max-width:700px){.tm-feature{flex-basis:100%;} .tm-card{flex-basis:100%; max-width:380px;} .tm-tier-label{margin-top:36px;}}
@media (prefers-reduced-motion: reduce){
  .tm-pop,.tm-card,.tm-title span{opacity:1 !important; animation:none !important;}
  .tm-ring,.tm-avatar{animation:none !important;}
}

.tm-title{background:none !important; -webkit-text-fill-color:initial !important; color:var(--cream);}
.tm-title span:not(.grad-text){color:var(--cream); -webkit-text-fill-color:var(--cream); background:none;}