/* Client list — V0.1 Home black band (62:1228): names Ekstra 50/130% -5% from x50. Active
   state = the comp's "QuickBooks": stepped in by four spaces, with the clip (square
   corners) beside it, centred on the line. Review 2026-09-24 (H9): the "Client Partners"
   pill sits left over the first name with more room under it (not the comp's x640); the
   active name turns white, not blue; the chartreuse dot is gone; clips are 7% larger. */
.block--client-list .client-list__eyebrow { margin-bottom: var(--space-64); }
.block--client-list .client-list { line-height: 1.3; letter-spacing: -0.05em; }
.block--client-list .client-list__item { position: relative; }
.block--client-list .client-list__item.is-active { z-index: 2; }

.block--client-list .client-list__name {
  /* Room for the step on the right, always: only the text steps, so the box that takes the
     hover holds still and a pointer at a name's left end stays on it (no hover flicker). */
  position: relative; display: inline-block; padding-right: 1.04em;
  overflow-wrap: anywhere; /* a name wider than the screen at a large text size breaks rather than clips */
}
.block--client-list .client-list__base {
  display: inline-block; opacity: 0.38;
  transition: opacity 450ms var(--ease-out), transform 700ms var(--ease-out);
}
/* The clip floats just right of the name, pushed further only as far as it takes to clear
   a longer name above or below it (--reach, client-list.js). */
.block--client-list .client-list__media {
  position: absolute; left: calc(100% + 0.78em + max(0px, var(--reach, 0px) - 1.04em)); top: 50%;
  width: 290px; aspect-ratio: 271 / 171; /* V0.1's 271×171, 7% up */
  overflow: hidden; pointer-events: none;
  background: var(--surface-raised);
  opacity: 0;
  transform: translateY(-50%);
  clip-path: inset(50% 0 50% 0);
  transition: clip-path 600ms var(--ease-in-out), opacity 300ms var(--ease-out);
}
.block--client-list .client-list__media > img,
.block--client-list .client-list__media > video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.1);
  transition: transform 900ms var(--ease-out);
}

/* Placeholder until a client's clip is delivered (Nick #2), or when one fails to load:
   a slow drift of brand blue and pink on the raised grey, labelled so it reads as
   "coming", not broken. */
.block--client-list .client-list__media--placeholder {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(60% 90% at 25% 30%, color-mix(in srgb, var(--color-blue) 45%, transparent), transparent 70%),
    radial-gradient(60% 90% at 80% 75%, color-mix(in srgb, var(--color-pink) 45%, transparent), transparent 70%),
    var(--color-gray-850);
  background-size: 200% 200%, 200% 200%, auto;
  animation: client-placeholder 9s var(--ease-in-out) infinite alternate;
}
.block--client-list .client-list__media--placeholder::after {
  content: 'Work coming soon';
  padding: 5px 12px 6px;
  border: 1px solid color-mix(in srgb, var(--color-white) 40%, transparent); border-radius: var(--radius-pill);
  font-family: var(--font-ui); font-size: var(--fs-label-xs); line-height: 1; letter-spacing: -0.05em;
  color: var(--color-white);
}
@keyframes client-placeholder {
  to { background-position: 100% 60%, 0% 30%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .block--client-list .client-list__media--placeholder { animation: none; }
}

/* Current (scroll or hover): white and stepped in. Everything else stays grey. */
.no-js .block--client-list .client-list__base { opacity: 1; }
.block--client-list .is-active .client-list__base { transform: translateX(1.04em); }
.block--client-list .is-active .client-list__base { opacity: 1; }
.block--client-list .is-active .client-list__media { opacity: 1; clip-path: inset(0 0 0 0); }
.block--client-list .is-active .client-list__media > * { transform: none; }
.block--client-list a.client-list__name:focus-visible { outline-offset: 6px; }

@media (max-width: 767px) {
  /* The reel (mobile experience, 2026-09-30): there's no room beside a name on a phone, so
     every clip lives in one full-bleed window that sticks under the top of the screen (the
     viewfinder primitive, base.css) while the names scroll beneath it, big. client-list.js
     moves the clips in here and shows the current one; the step stays on the name's text
     (a transform on the link would make it the clip's containing block again). */
  .block--client-list .client-list__eyebrow { margin-bottom: var(--space-24); }
  .block--client-list .client-list__reel { --vf-ratio: 16 / 10; display: none; background: var(--surface-raised); }
  .js .block--client-list .client-list__reel { display: block; }
  /* The gap under the window belongs to the list, not the window (a sticky element's own
     margin counts against its container). And the window lets go one name early, so the last
     name is read under it rather than cut by it when the page runs out: the list's negative
     bottom margin pulls the sticky range up by a row, the container's padding gives the row
     its room back. */
  .js .block--client-list .client-list { margin-top: var(--space-32); margin-bottom: calc(-1.3em - var(--space-12)); }
  .js .block--client-list .container { padding-bottom: calc(1.3 * clamp(32px, 9.6vw, 40px) + var(--space-12)); }
  .block--client-list .client-list { font-size: clamp(32px, 9.6vw, 40px); } /* the hero scale, like every page heading (Tucker's Home rule) */
  .block--client-list .client-list__name { position: static; padding-right: 0; }
  .block--client-list .is-active .client-list__base { transform: translateX(0.52em); }
  /* In the reel each clip is a full layer: the current one shows over the last. */
  .block--client-list .client-list__reel > .client-list__media {
    left: 0; right: 0; top: 0; bottom: 0; width: auto; aspect-ratio: auto;
    transform: none; clip-path: none;
    opacity: 0; transition: opacity 450ms var(--ease-out);
  }
  .block--client-list .client-list__reel > .client-list__media.is-on { opacity: 1; z-index: 1; }
  .block--client-list .client-list__reel > .client-list__media > * { transform: none; }
  .block--client-list .client-list__media--placeholder::after { padding: 4px 8px 5px; }
}