/* ==========================================================================
   NEXXO — Lista de equipe cinética
   Port em JS puro do padrão "kinetic team": no desktop a foto flutua presa
   ao cursor com física de mola; no mobile vira acordeão inline.
   Usa a linguagem do site: glass, glow neon alternado laranja/verde.
   ========================================================================== */

.nxt{
  --nxt-orange:#F06A29;
  --nxt-teal:#1BA892;
  --nxt-line:rgba(255,255,255,0.09);
  --nxt-text:#FFFFFF;
  --nxt-muted:rgba(255,255,255,0.72);
  --nxt-faint:rgba(255,255,255,0.48);
  --nxt-ease:cubic-bezier(0.16,1,0.3,1);
  margin-top:26px;
}

.nxt-list{display:flex; flex-direction:column;}

/* ---------- Linha ---------- */
.nxt-row{
  position:relative; display:block; width:100%; text-align:left;
  border:0; background:transparent; color:inherit; font:inherit;
  border-top:1px solid var(--nxt-line);
  transition:opacity .45s var(--nxt-ease), background-color .45s var(--nxt-ease);
  cursor:default;
}
.nxt-row:last-child{border-bottom:1px solid var(--nxt-line);}
.nxt-row.is-dimmed{opacity:0.32;}
.nxt-row:focus-visible{outline:2px solid var(--nxt-orange); outline-offset:-2px;}

.nxt-row-inner{
  position:relative; z-index:1; display:flex; flex-direction:column;
  padding:22px 0;
}

/* nome + índice */
.nxt-head{
  display:flex; align-items:baseline; gap:18px;
  transition:transform .5s var(--nxt-ease);
}
.nxt-row.is-active .nxt-head{transform:translateX(14px);}
.nxt-idx{
  font-family:var(--font-body,'Inter',sans-serif); font-size:11px; font-weight:600;
  color:var(--nxt-faint); letter-spacing:0.08em; flex-shrink:0;
}
.nxt-name{
  font-family:var(--font-display,'Poppins',sans-serif); font-weight:600;
  font-size:clamp(22px,4.4vw,40px); line-height:1.1; letter-spacing:-0.01em;
  color:var(--nxt-muted); transition:color .35s var(--nxt-ease);
}
.nxt-row.is-active .nxt-name{color:var(--nxt-text);}

/* cargo + ícone */
.nxt-meta{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:10px; padding-left:29px;
}
.nxt-role{
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.18em;
  color:var(--nxt-faint); transition:color .35s var(--nxt-ease);
}
.nxt-row.is-active .nxt-role{color:var(--nxt-muted);}
.nxt-desc{
  display:block; margin-top:6px; font-size:13.5px; line-height:1.5;
  color:var(--nxt-faint); text-transform:none; letter-spacing:0; font-weight:400;
}

.nxt-toggle{display:flex; color:var(--nxt-faint); flex-shrink:0;}
.nxt-arrow{display:none; color:var(--nxt-text); flex-shrink:0;
  opacity:0; transform:translateX(-10px);
  transition:opacity .4s var(--nxt-ease), transform .4s var(--nxt-ease);}
.nxt-row.is-active .nxt-arrow{opacity:1; transform:translateX(0);}

/* ---------- Acordeão (mobile) ---------- */
.nxt-panel{
  overflow:hidden; height:0;
  transition:height .38s var(--nxt-ease);
}
.nxt-panel-inner{padding:0 0 20px;}
.nxt-panel .nxt-figure{
  position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
}

/* ---------- Foto / fallback ---------- */
.nxt-figure img{width:100%; height:100%; object-fit:cover; display:block;}
.nxt-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display,'Poppins',sans-serif); font-weight:700;
  font-size:clamp(28px,7vw,44px); letter-spacing:0.04em; color:rgba(255,255,255,0.9);
  background:linear-gradient(135deg, rgba(240,106,41,0.85), rgba(27,168,146,0.85));
}
.nxt-figure::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,0.65), transparent 55%);
}
.nxt-cap{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font-size:10.5px; text-transform:uppercase; letter-spacing:0.18em; color:rgba(255,255,255,0.9);
}

/* ---------- Cartão flutuante (desktop) ---------- */
/* camada externa: só posição (o JS escreve transform aqui) */
.nxt-float{
  position:fixed; left:0; top:0; z-index:60; pointer-events:none;
  width:320px; height:250px; display:none;
  will-change:transform;
}
/* camada interna: só entrada/saída (escala, opacidade, blur) */
.nxt-float-inner{
  width:100%; height:100%;
  opacity:0; transform:scale(0.86); filter:blur(8px);
  transition:opacity .28s var(--nxt-ease), transform .28s var(--nxt-ease), filter .28s var(--nxt-ease);
}
.nxt-float.is-visible .nxt-float-inner{opacity:1; transform:scale(1); filter:blur(0);}
.nxt-float .nxt-figure{
  position:relative; width:100%; height:100%; overflow:hidden; border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 24px 70px -20px rgba(0,0,0,0.85);
}
.nxt-live{
  position:absolute; left:14px; bottom:12px; z-index:2;
  display:flex; align-items:center; gap:7px;
  font-size:10px; text-transform:uppercase; letter-spacing:0.18em; color:rgba(255,255,255,0.85);
}
.nxt-dot{width:6px; height:6px; border-radius:50%; background:var(--nxt-teal); animation:nxt-pulse 1.8s infinite;}
@keyframes nxt-pulse{0%,100%{opacity:1;} 50%{opacity:0.25;}}

/* ---------- Glow neon alternado, na linguagem do site ---------- */
.nxt-row::before{
  content:''; position:absolute; inset:6px -10px; z-index:0; border-radius:14px;
  opacity:0; filter:blur(34px); transition:opacity .55s var(--nxt-ease);
  pointer-events:none;
}
.nxt-row:nth-child(odd)::before{background:linear-gradient(115deg, rgba(240,106,41,0.85), rgba(240,106,41,0.08) 65%);}
.nxt-row:nth-child(even)::before{background:linear-gradient(245deg, rgba(27,168,146,0.85), rgba(27,168,146,0.08) 65%);}
.nxt-row.is-active::before{opacity:0.4;}

/* ---------- Desktop ---------- */
@media (min-width:768px){
  .nxt-row-inner{
    flex-direction:row; align-items:center; justify-content:space-between;
    padding:26px 0; gap:28px;
  }
  .nxt-head{gap:28px;}
  .nxt-meta{
    margin-top:0; padding-left:0; justify-content:flex-end; gap:28px;
    text-align:right; flex-shrink:0;
  }
  .nxt-toggle{display:none;}
  .nxt-arrow{display:flex;}
  .nxt-panel{display:none;}
  .nxt-float{display:block;}
  .nxt-desc{max-width:260px; margin-left:auto;}
}

@media (prefers-reduced-motion:reduce){
  .nxt-row, .nxt-head, .nxt-name, .nxt-role, .nxt-arrow, .nxt-float, .nxt-panel, .nxt-row::before{
    transition:none !important;
  }
  .nxt-dot{animation:none;}
  .nxt-float{display:none !important;}
}