/* ---------- MEET OUR AGENTS ---------- */
.agents{
  position:relative;
  background:var(--bg-dark);
  padding:clamp(4rem, 9vw, 7rem) 0 clamp(4.5rem, 9vw, 7.5rem);
  overflow:hidden;
  border-top:1px solid var(--line);
}

.agents-head{
  max-width:1500px;
  margin:0 auto clamp(2.5rem, 6vw, 4rem);
  padding:0 clamp(2rem, 9vw, 11rem);
}
.agents-head h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2rem, 4.5vw, 3rem);
  color:var(--white);
}
.agents-head h2 em{
  font-style:italic;
  color:var(--accent-light);
}
.agents-head p{
  margin-top:1rem;
  max-width:640px;
  color:var(--text-muted);
  font-size:0.98rem;
  line-height:1.75;
}

/* Horizontally auto-scrolling track. Overflow is scrollable (so scrollIntoView
   can center a card) but the scrollbar itself is hidden — scrolling is driven
   by JS (the marquee) or by the browser's smooth-scroll when a card is opened. */
.agents-track-wrap{
  position:relative;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:0 clamp(2rem, 9vw, 11rem);
}
.agents-track-wrap::-webkit-scrollbar{display:none;}
.agents-track-wrap{cursor:grab;}
.agents-track-wrap.is-dragging{cursor:grabbing;user-select:none;}

/* Fade cards out at the left/right edges instead of hard-clipping them —
   without this, a card exiting the scroll area just vanishes abruptly the
   instant it crosses the container boundary, which reads as a glitch. The
   mask fades it out over a short distance first so it feels like it's
   sliding away rather than disappearing. */
.agents-track-wrap{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 clamp(2rem, 9vw, 11rem), #000 calc(100% - clamp(2rem, 9vw, 11rem)), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 clamp(2rem, 9vw, 11rem), #000 calc(100% - clamp(2rem, 9vw, 11rem)), transparent 100%);
}

.agents-track{
  display:flex;
  gap:1rem;
  width:max-content;
}

.agent-card{
  position:relative;
  flex:0 0 190px;
  height:360px;
  border-radius:8px;
  overflow:hidden;
  cursor:pointer;
  background:#141414;
  transition:flex-basis 0.55s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease;
}

/* Siblings shrink slightly and fade back while one card is expanded, so the
   expanded card visibly "pushes" the row apart rather than just growing
   in place. */
.agent-card.dimmed{
  flex-basis:150px;
  opacity:0.5;
}

.agent-card.expanded{
  flex-basis:320px;
  cursor:default;
}

.agent-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.agent-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0) 55%);
  pointer-events:none;
}

.agent-info{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:1.5rem;
  z-index:1;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
}
.agent-card.expanded .agent-info{
  opacity:1;
  transform:translateY(0);
}
.agent-name{
  font-family:var(--font-display);
  font-size:1.4rem;
  color:var(--white);
}
.agent-position{
  margin-top:0.25rem;
  font-size:0.88rem;
  color:var(--accent-light);
  letter-spacing:0.3px;
}

@media(max-width:700px){
  .agent-card{flex-basis:150px;height:290px;}
  .agent-card.expanded{flex-basis:230px;}
  .agent-card.dimmed{flex-basis:110px;}
}

@media(prefers-reduced-motion: reduce){
  .agent-card,
  .agent-photo,
  .agent-info{transition:none;}
}