/* Adamas Digital — the team carousel.
   Portraits on a dark stage: one square to the viewer inside a blue frame,
   the rest turned away and dimmed either side. Heading sits behind them at
   the left, arrows below, a rail of dots down the right edge.

   site.js places the cards by writing a transform onto each according to how
   far it sits from the front. Everything here is the look of a card and the
   furniture around it. Without the script the cards fall back to a readable
   row, so nothing in the layout depends on a class the script adds. */

.team-showcase {
  position: relative;
  display: block;
  overflow: hidden;
}

/* site.css styles this section's direct <div> children as a bordered list and
   its <article>s as a four-column row. Both were written for the stacked
   profile list this replaces, and both reach the carousel: the rules put a
   rule above the stage and squeezed every portrait into a 0.4fr column.
   Undone here rather than edited there, since the about page is not the only
   thing that file serves. */
.team-showcase > div {
  border-top: 0;
  margin-top: 0;
}

.team-showcase .team-card {
  display: block;
  grid-template-columns: none;
  gap: 0;
  padding: 0;
  border-bottom: 0;
  align-items: stretch;
}

/* ---- Heading ------------------------------------------------------------
   Sits to the left of the portraits, in the clear rather than behind them.

   It was a near-invisible ghost at first, which matched the reference but
   left the section with no readable heading at all. The sizing below is what
   keeps it legible without it running under the front portrait: the stage is
   centred, so the space to its left is (100% - card width) / 2, and the type
   is scaled to stay inside that at every desktop width. */
.team-title {
  position: absolute;
  top: clamp(70px, 9vw, 150px);
  left: clamp(24px, 6vw, 96px);
  /* Above the stage, not behind it. The two outermost portraits reach a long
     way to the left - further than the front one - and at 40% opacity over
     dark they were washing the tail of the heading out to grey, which read as
     a rendering fault rather than depth.

     It has to clear the whole deck rather than slot between the cards: the
     deck is a stacking context of its own, so a z-index here is measured
     against the deck, not against the cards inside it. That is safe because
     the heading never reaches the front portrait at any width this rule
     applies to - below 820px it stops floating altogether. */
  z-index: 3;
  /* Wide enough that "Senior thinking." stays on one line. Narrower than the
     line, and the <br> in the markup never gets to do its job: the phrase
     wraps early and the heading reads as three ragged lines. */
  max-width: min(46%, 560px);
  pointer-events: none;
}

.team-title h2 {
  color: #ffffffd6;
  font-size: clamp(30px, 3.2vw, 54px);
  line-height: .95;
  text-wrap: balance;
}

.team-title .eyebrow {
  color: #ffffff8a;
  margin-bottom: 14px;
}

/* ---- The stage ---------------------------------------------------------- */
.team-deck {
  position: relative;
  z-index: 2;
  height: clamp(360px, 42vw, 480px);
  perspective: 1600px;
  perspective-origin: 50% 46%;
}

.team-showcase .team-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(200px, 20vw, 290px);
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .6s ease;
}

/* Before the script runs, and if it never does, the cards simply sit in a row. */
.team-deck:not(.is-placed) {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.team-deck:not(.is-placed) .team-card {
  position: relative;
  left: auto;
  flex: 0 0 auto;
}

/* The frame is drawn on the card, so the card has to be the box the portrait
   fills rather than a grid row that happens to contain one. */
.team-showcase .team-portrait { width: 100%; }

/* ---- Portrait ----------------------------------------------------------- */
.team-portrait {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #141418;
}

.team-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* The faces either side are meant to recede into the dark, so they are
     drained of light until their card comes to the front. */
  filter: grayscale(1) brightness(.42);
  transition: filter .7s ease;
}

.is-front .team-portrait img { filter: grayscale(1) brightness(1); }

/* A card with no photograph yet: its number, set in the frame, so an unfilled
   slot still reads as a deliberate placeholder rather than a failure. */
.team-slot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff1f;
  font-family: var(--display);
  font-size: clamp(50px, 6vw, 86px);
  font-weight: 600;
  letter-spacing: -.04em;
}

/* ---- The blue frame -----------------------------------------------------
   Drawn as a ring on the front card only. Outside the overflow of the
   portrait so it sits over the picture rather than being clipped by it. */
.team-card:after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--blue);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}

.team-card.is-front:after { opacity: 1; }

/* ---- Name plate ---------------------------------------------------------
   Across the foot of the portrait, revealed with the card it belongs to. */
.team-plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 22px 20px 20px;
  background: linear-gradient(0deg, #000000c9, #0000008f 48%, #0000);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}

.team-card.is-front .team-plate { opacity: 1; transform: none; }

.team-plate h3 {
  margin: 0;
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(19px, 1.7vw, 26px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.team-plate p {
  margin: 5px 0 0;
  color: #ffffff8a;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-family: var(--display);
}

/* ---- Social row ---------------------------------------------------------- */
.team-social {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
  opacity: 0;
  transition: opacity .5s ease;
}

.team-card.is-front .team-social { opacity: 1; }

.team-social a {
  color: #ffffff70;
  transition: color .2s ease;
}

.team-social a:hover,
.team-social a:focus-visible { color: var(--paper); }

/* ---- Arrows -------------------------------------------------------------- */
.team-nav {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 1px;
  margin-top: 34px;
}

.team-arrow {
  display: grid;
  place-items: center;
  width: 56px;
  height: 46px;
  padding: 0;
  border: 1px solid #ffffff26;
  background: none;
  color: var(--paper);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

.team-arrow:hover,
.team-arrow:focus-visible { background: #ffffff14; border-color: #ffffff5e; }

/* ---- Dot rail -----------------------------------------------------------
   Down the right edge, as in the reference. Decorative position, real
   controls: each one moves to its member. */
.team-dots {
  position: absolute;
  top: 50%;
  right: clamp(14px, 2.4vw, 34px);
  z-index: 3;
  display: grid;
  gap: 9px;
  transform: translateY(-50%);
}

.team-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff38;
  cursor: pointer;
  transition: background-color .3s ease, transform .3s ease;
}

.team-dots button[aria-selected="true"] {
  background: var(--paper);
  transform: scale(1.5);
}

@media (max-width: 900px) {
  .team-deck { height: clamp(340px, 62vw, 430px); margin-top: -10px; }
  .team-card { width: clamp(185px, 46vw, 250px); }
}

/* Below this there is no clear space beside the portraits to put a heading
   in: left where it was, it breaks into four lines and the stage covers it.
   So it stops floating and takes its own place above them, which is also the
   only arrangement where it can be read at full strength. */
@media (max-width: 820px) {
  .team-title {
    position: static;
    max-width: 34ch;
    margin-bottom: clamp(22px, 5vw, 34px);
  }

  .team-title h2 { color: var(--paper); }

  /* The pull-up existed only to tuck the stage under the floating heading. */
  .team-deck { margin-top: 0; }
}

@media (max-width: 560px) {
  .team-dots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .team-card,
  .team-plate,
  .team-social,
  .team-portrait img,
  .team-card:after { transition: none; }
}