/* New Team Page Revamp */
.home-link { position:fixed; top:1rem; left:1rem; z-index:30; background:rgba(22,25,30,.7); border:1px solid #2d3239; color:#dce3ec; padding:.55rem .9rem; border-radius:.7rem; font-size:.65rem; letter-spacing:.5px; cursor:pointer; backdrop-filter:blur(6px); }
.home-link:hover { color:#fff; background:rgba(34,40,48,.85); }

.team-hero { position:relative; min-height:52vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:4rem 1rem 2.5rem; overflow:hidden; }
.team-hero::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:260px; background:linear-gradient(to bottom, rgba(18,22,29,.55) 0%, rgba(18,22,29,.38) 35%, rgba(18,22,29,.18) 70%, rgba(18,22,29,0) 100%); pointer-events:none; z-index:2; }
.team-hero .hero-inner { position:relative; z-index:2; width:min(1000px,90%); display:flex; flex-direction:column; gap:1.4rem; }
.team-title { font-size:clamp(2.8rem,8vw,5.2rem); margin:0; line-height:.9; font-weight:900; letter-spacing:1px; }
.team-title .grad { background:linear-gradient(110deg,#5ea8ff,#9d6bff,#ff75c8); -webkit-background-clip:text; background-clip:text; color:transparent; }
.team-title .outline { color:#111; -webkit-text-stroke:1px #9aa4b2; text-shadow:0 2px 18px #000; }
.team-tag { margin:0 auto; max-width:760px; font-size:clamp(.85rem,1.55vw,1.05rem); line-height:1.55; color:#b0bac5; }

#team-bg { position:absolute; inset:0; width:100%; height:100%; z-index:1; filter:blur(70px) saturate(1.4) brightness(.9); opacity:.55; }

.team-filters { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin-top:.5rem; }
.filter-btn { background:rgba(20,24,30,.6); color:#cfd5dd; border:1px solid #2c333c; padding:.55rem .95rem; border-radius:.65rem; font-size:.6rem; font-weight:600; letter-spacing:.8px; cursor:pointer; transition:.35s; text-transform:uppercase; }
.filter-btn:hover { background:rgba(255,255,255,.07); color:#fff; }
.filter-btn[aria-pressed="true"] { background:linear-gradient(120deg,#3453ff,#7d34ff,#1fa2ff); color:#fff; border-color:#3b4dff; box-shadow:0 4px 26px -12px #000; }

.team-grid { --card-min:300px; --card-max:340px; display:grid; gap:2.6rem 3.2rem; width:min(1180px,94%); margin:-6rem auto 4.5rem; position:relative; z-index:5; grid-template-columns:repeat(auto-fit,minmax(var(--card-min),1fr)); justify-content:center; }
.team-card { width:100%; max-width:var(--card-max); justify-self:center; }

.team-card { perspective:1400px; position:relative; height:440px; }
.team-card .card-inner { position:relative; width:100%; height:100%; border-radius:1.4rem; background:linear-gradient(160deg,#12151a,#0c0f12); border:1px solid #222a32; box-shadow:0 10px 40px -18px #000; transition: box-shadow .6s; transform-style:preserve-3d; cursor:pointer; }
.team-card .card-inner:focus-visible { outline:2px solid #6aa8ff; outline-offset:4px; }
.team-card:hover .card-inner { box-shadow:0 10px 58px -16px #000; }
.team-card.flipped .card-inner { outline-offset:0; /* marker rule to satisfy linter; transform applied inline */ }

/* Combined transform managed via inline styles: rotateY for flip + tilt */
.team-card.filter-anim { animation:cardIn .65s cubic-bezier(.25,.9,.35,1) both; animation-delay:calc(var(--stagger-index)*60ms); }
@keyframes cardIn { 0%{ opacity:0; transform:translateY(34px) scale(.9);} 60%{opacity:1;} 100%{ opacity:1; transform:translateY(0) scale(1);} }
.card-face { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:1.6rem 1.4rem 1.2rem; backface-visibility:hidden; }
.card-face.back { transform:rotateY(180deg); justify-content:space-between; gap:1.2rem; }

.avatar-wrap { width:160px; height:160px; border-radius:50%; position:relative; overflow:hidden; margin-bottom:1rem; box-shadow:0 0 0 4px #1f242a, 0 0 0 1px #2b3139, 0 4px 28px -10px #000; }
.avatar-wrap img { width:100%; height:100%; object-fit:cover; filter:grayscale(.12) contrast(1.05); transition:.8s; }
.team-card:hover .avatar-wrap img { filter:grayscale(0); }

.name { margin:0 0 .35rem; font-size:1.05rem; letter-spacing:.7px; font-weight:700; color:#e7edf5; }
.roles { margin:0 0 1rem; font-size:.68rem; color:#aeb6c1; letter-spacing:.6px; line-height:1.5; text-align:center; }

.chips { list-style:none; padding:0; margin:0; display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center; }
.chip { font-size:.55rem; font-weight:600; padding:.35rem .55rem .4rem; border-radius:.6rem; letter-spacing:1px; text-transform:uppercase; background:rgba(255,255,255,.05); border:1px solid #2a3139; color:#cdd4de; position:relative; overflow:hidden; }
.chip.dev { --c:#4db3ff; }
.chip.schema { --c:#4dff88; }
.chip.test { --c:#ff5d9c; }
.chip::before { content:""; position:absolute; inset:0; background:linear-gradient(140deg,var(--c)11%,transparent 65%); opacity:.16; mix-blend-mode:plus-lighter; }

.card-face.back .bio { font-size:.68rem; line-height:1.5; color:#c0c8d2; margin:0; letter-spacing:.4px; }
.social-links { display:flex; gap:.6rem; }
.social-links a { font-size:.6rem; letter-spacing:1px; font-weight:600; text-transform:uppercase; padding:.55rem .7rem .5rem; border-radius:.55rem; background:rgba(255,255,255,.06); border:1px solid #2a3133; color:#d5dde6; text-decoration:none; transition:.4s; }
.social-links a:hover { background:linear-gradient(120deg,#3453ff,#7d34ff,#1fa2ff); color:#fff; border-color:#3c4dff; }

/* Filter fade */
.team-card.filtered-out { pointer-events:none; opacity:0; transform:scale(.82); transition:.35s; display:none; }

/* Footer */
.team-footer { text-align:center; font-size:.7rem; opacity:.7; margin:4rem 0 2rem; }
.team-footer a { color:#bcd3ff; text-decoration:none; }
.team-footer a:hover { text-decoration:underline; }

/* Responsive */
@media (max-width:900px){ .team-card{height:420px;} }
@media (max-width:640px){ .team-card{height:400px;} .team-hero{min-height:50vh;padding:4rem 1rem 2rem;} }

/* Subtle background animation (canvas painted via JS) */
body.team-page { background:linear-gradient(to bottom,#0d1015 0%, #0c0f14 12%, #0b0e13 28%, #0a0d12 46%, #090c11 64%, #080a0f 78%, #07090e 88%, #06080d 100%); background-attachment:fixed; position:relative; }
body.team-page::before { content:""; position:fixed; inset:0; pointer-events:none; background:repeating-linear-gradient(45deg,rgba(255,255,255,.015) 0 2px,transparent 2px 7px); mix-blend-mode:overlay; opacity:.12; z-index:0; }