/* Radius of the cursor-tracked colour pool on a portrait. Registered so it has
   a type and can therefore animate; an unregistered custom property is an
   untyped token string, and the bloom below would snap instead of opening.

   initial-value must be computationally independent, which rules out rem — it
   depends on the root font size. A rem here does not degrade, it invalidates
   the whole rule, leaving --leader-spot unregistered and taking the gradient
   that reads it down with it. Hence px. */
@property --leader-spot {
  syntax: "<length>";
  inherits: false;
  initial-value: 352px;
}

/* About page: founder selector — portrait row + crossfading bio panel.
   Colors come from the site tokens so light and dark both follow the theme. */
.leaders {
  /* Portrait tint: Stratos Blue in both themes (non-text, no contrast floor). */
  --leader-tint: #417ced;
  /* Text accent: Stratos Blue itself fails AA as text (3.3:1 light, 3.8:1 dark),
     so each theme uses a shifted blue from the same family. */
  --leader-accent: #1e4fb8;
  /* Cursor-tracking edge glow. Decoration, never text, so no contrast floor. */
  --leader-glow: #417ced;
}
.dark .leaders {
  --leader-accent: #7aa5f5; /* 5.6:1 on Carbon Black */
  --leader-glow: #7aa5f5;   /* lifted, so the ring still reads on Carbon Black */
}

.leaders__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .leaders__row { gap: 2.5rem; }
}

.leader {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.leader:focus-visible {
  outline: 2px solid var(--leader-accent);
  outline-offset: 6px;
  border-radius: 0.75rem;
}

.leader__portrait {
  display: block; /* span default is inline, which ignores aspect-ratio */
  position: relative;
  isolation: isolate; /* confines the accent blend to this portrait */
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem; /* matches the site's rounded-xl cards */
  background: var(--color-card);
}
.leader__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.65;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Edge glow that follows the cursor. A radial gradient fills the whole box, then
   a two-layer mask subtracts the content box so only the border ring survives —
   which is what lets the highlight travel around the perimeter rather than sit
   as a blob. --leader-mx/--leader-my are written by site.js on pointermove. */
.leader__portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2; /* above the image and the tint blend below */
  border-radius: inherit;
  padding: 1.5px; /* ring thickness = the gap the mask leaves */
  background: radial-gradient(
    circle 15rem at var(--leader-mx, 50%) var(--leader-my, 0%),
    var(--leader-glow) 0%,
    color-mix(in oklab, var(--leader-glow) 45%, transparent) 28%,
    transparent 62%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.leader:hover .leader__portrait::before,
.leader:focus-visible .leader__portrait::before,
.leader[aria-expanded="true"] .leader__portrait::before { opacity: 1; }

/* Outer bloom. A box-shadow is not clipped by the portrait's own overflow, so
   the glow can spill past the card the way the reference does. */
.leader__portrait {
  transition: box-shadow 0.3s ease;
}
.leader:hover .leader__portrait,
.leader[aria-expanded="true"] .leader__portrait {
  box-shadow: 0 0 30px -12px var(--leader-glow);
}

/* `color` blend over a grayscale photo gives a clean monotone tint — but as a
   pool that travels with the cursor rather than a flat wash. It reads the same
   --leader-mx/my the edge ring does, so one pointermove drives both and the
   ring and the colour stay locked together.

   The falloff does the work: where the gradient reaches transparent the blend
   contributes nothing and the grayscale photo shows through untouched, which is
   what makes the colour feel like a light being carried across the portrait
   instead of a filter being switched on. */
.leader__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle var(--leader-spot, 352px) at var(--leader-mx, 50%) var(--leader-my, 50%),
    var(--leader-tint) 0%,
    color-mix(in oklab, var(--leader-tint) 60%, transparent) 42%,
    transparent 78%
  );
  mix-blend-mode: color;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, --leader-spot 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Once a founder is chosen and the cursor has left, the pool opens out well past
   the card. Without this the selected portrait would keep a spotlight parked
   wherever the cursor happened to exit, which reads as a stale artifact rather
   than as the selected state. The radius is large enough that the card sits
   entirely inside the gradient's innermost stop, so the tint is genuinely flat
   rather than merely wide. */
.leader[aria-expanded="true"]:not(:hover) .leader__portrait::after {
  --leader-spot: 1440px;
}
/* No cursor to follow on touch, and site.js does not write the coordinates
   there either, so the tint stays the flat wash it has always been. */
@media (hover: none) {
  .leader__portrait::after { --leader-spot: 1440px; }
}
/* Once someone is open, the others recede. */
.leaders[data-open] .leader:not([aria-expanded="true"]):not(:hover) .leader__portrait img { opacity: 0.3; }
.leader:hover .leader__portrait img,
.leader[aria-expanded="true"] .leader__portrait img {
  opacity: 1;
  transform: scale(1.04);
}
/* Kept below full strength so three tinted portraits do not out-shout the CTAs. */
.leader:hover .leader__portrait::after { opacity: 0.45; }
.leader[aria-expanded="true"] .leader__portrait::after { opacity: 0.85; }

.leader__name {
  display: block;
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em; /* matches the site's eyebrow tracking */
  text-transform: uppercase;
  color: var(--color-muted-foreground);
  transition: color 0.3s ease;
}
.leader:hover .leader__name { color: var(--color-foreground); }
.leader[aria-expanded="true"] .leader__name { color: var(--leader-accent); }

.leader__role {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-muted-foreground);
}

/* Collapsed until a founder is chosen. grid-template-rows is the one height
   animation that does not thrash layout the way animating height does. */
.leaders__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.leaders[data-open] .leaders__reveal { grid-template-rows: 1fr; }
.leaders__reveal-inner { overflow: hidden; min-height: 0; }

/* Card matches the site's rounded-xl / border / bg-card panels. Every bio shares
   one grid cell, so switching never shifts the page. */
.leaders__bios {
  display: grid;
  margin-top: 3rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  background: var(--color-card);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease 0.08s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}
.leaders[data-open] .leaders__bios { opacity: 1; transform: none; }
@media (min-width: 768px) {
  .leaders__bios { padding: 2rem; }
}
.leaders__bio {
  grid-area: 1 / 1;
  max-width: 46rem; /* keeps bio line length readable inside the full-width card */
  margin-inline: auto;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.35s;
}
.leaders__bio[data-active] {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.leaders__bio-name {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--leader-accent);
}
.leaders__bio-role {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
}

@media (prefers-reduced-motion: reduce) {
  .leader__portrait,
  .leader__portrait img,
  .leader__portrait::before,
  .leader__portrait::after,
  .leader__name,
  .leaders__reveal,
  .leaders__bios,
  .leaders__bio { transition-duration: 0.01ms; }
  .leader:hover .leader__portrait img,
  .leader[aria-expanded="true"] .leader__portrait img { transform: none; }
}

/* Profile links. Same icon button as the footer's LinkedIn mark. */
.leaders__bio-links {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.leaders__bio-link {
  display: flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-background);
  color: color-mix(in oklab, var(--color-foreground) 70%, transparent);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.leaders__bio-link:hover {
  color: var(--color-foreground);
  border-color: color-mix(in oklab, var(--leader-accent) 45%, var(--color-border));
}
.leaders__bio-link:focus-visible {
  outline: 2px solid var(--leader-accent);
  outline-offset: 2px;
}
.leaders__bio-link svg {
  width: 1rem;
  height: 1rem;
}