/* Michal Kašpar — Selected Clients ticker
   ──────────────────────────────────────────────────────────
   Continuous right-to-left marquee. Two identical logo sets
   sit side-by-side in a track that translates by -50% for a
   seamless loop.

   Sits as a thin band immediately under the hero — small,
   compact, only a bottom hairline (no top border, no big
   vertical gap). */

.reel.clients {
  /* Taller band — gives the marquee real vertical presence
     between the hero and the services section. */
  height: 40vh;
  min-height: 220px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
  padding: 0;
  /* Bottom hairline lives on the section itself so it sits at the
     true bottom edge, not in the middle where the centred strip ends. */
  border-bottom: 1px solid color-mix(in srgb, var(--color-text-primary) 14%, transparent);
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}

.clients-head {
  padding: 0 var(--edge-x) clamp(20px, 2.6vh, 32px);
}
.clients-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-primary) 55%, transparent);
}

/* ── Marquee strip ──────────────────────────────────────── */
.clients-strip {
  position: relative;
  overflow: hidden;
  /* Only the bottom hairline — top edge sits flush against the
     hero with no divider. */
  border-top: 0;
  border-bottom: 0;
  /* Strip itself stays a thin marquee — the section's 40vh
     height + flex centering does the heavy lifting. */
  padding: 12px 0 12px;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, var(--color-pure-black) 60px, var(--color-pure-black) calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, var(--color-pure-black) 60px, var(--color-pure-black) calc(100% - 60px), transparent 100%);
}

.clients-track {
  display: flex;
  width: max-content;
  /* Move the track by one set's width (= 50% of total since we
     render two identical sets) for a seamless loop. */
  animation: clients-marquee 48s linear infinite;
  will-change: transform;
}

@keyframes clients-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.clients-set {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Wordmark text fallback (kept for legacy/fallback use). */
.client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: clamp(40px, 5.6vh, 64px);
  min-width: clamp(160px, 16vw, 240px);
  padding: 0 clamp(28px, 3.6vw, 64px);
  margin: 0 clamp(16px, 2vw, 32px);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--color-text-primary) 78%, transparent);
  white-space: nowrap;
}

/* ── Real-SVG variant — masked so the silhouette picks up the
   light text colour on dark. Each logo gets its own --ratio
   (intrinsic w/h) and --scale (optical-balance multiplier on top
   of the base height) so wide wordmarks and square monograms
   feel like the same visual weight in the row. */
.client-logo.client-logo-img {
  /* Base optical height — tune the row size here in one place. */
  --base-h: 25.5px;
  /* Strip placeholder chrome */
  border: 0;
  background: color-mix(in srgb, var(--color-text-primary) 85%, transparent);
  height: calc(var(--base-h) * var(--scale, 1));
  min-width: 0;
  width: calc(var(--base-h) * var(--scale, 1) * var(--ratio, 3));
  padding: 0;
  margin: 0 clamp(44px, 5.2vw, 80px);
  -webkit-mask: var(--logo) center / contain no-repeat;
          mask: var(--logo) center / contain no-repeat;
  color: transparent;
  font-size: 0;
  transition: background-color 220ms ease, opacity 220ms ease;
  opacity: 0.92;
}
.client-logo.client-logo-img:hover {
  background: var(--color-pure-white);
  opacity: 1;
}

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  .clients-strip {
    padding: 10px 0 10px;
  }
  .client-logo.client-logo-img {
    --base-h: 19px;
    margin: 0 36px;
  }
  .client-logo {
    height: 36px;
    min-width: 130px;
    padding: 0 18px;
    margin: 0 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients-track {
    animation: none;
    /* Keep first set centered so something still shows. */
    transform: translate3d(0, 0, 0);
  }
}

/* ─────────────────────────────────────────────────────────
   SELECTED CLIENTS — vertical list (separate from the marquee
   above). Sits between the Vision claim and the horizontal
   showreel. Each row stays quiet until hover: the client name
   reads italic in accent yellow, the project year-range fades
   in on the far left, the services list fades in on the far
   right, and a big arrow-in-circle resolves at the row's
   right edge — answering "what did Michal do for them?" with
   a single look at the row.
   ───────────────────────────────────────────────────────── */
.reel.selected-clients {
  height: auto;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
  padding: 0;
  display: flex;
  flex-direction: column;
  scroll-snap-align: none;
  scroll-snap-stop: normal;
  /* No top border — the section reads as a continuation of the
     yellow Vision plate above with only the kicker row to introduce
     itself. The first inter-row hairline is set on .sc-list. */
}

.sc-head {
  padding: clamp(28px, 4vh, 48px) var(--edge-x) clamp(18px, 2.6vh, 28px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
}
.sc-head-spacer { display: block; }
.sc-kicker {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: 0.02em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--fg);
  text-align: center;
}

.sc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.sc-row {
  position: relative;
  flex: 1 1 0;
  min-height: clamp(96px, 14vh, 168px);
  display: grid;
  /* Three columns: years (left meta) · name (centred) · services
     (right meta). Symmetric horizontal padding so the centred name
     lands true-centred in the viewport — the standalone arrow that
     used to live on the right is now drawn by the custom cursor, so
     no extra right padding is needed. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
  padding: 0 var(--edge-x);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  color: var(--color-text-primary);
  transition: background-color 280ms ease, color 220ms ease,
              opacity 460ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* On devices with the custom cursor, hide the native pointer over
   client rows so only the green arrow-disc shows (not the OS
   arrow on top of it). */
@media (hover: hover) and (pointer: fine) {
  .sc-row, .sc-row * { cursor: none; }
}
.sc-row:last-child { border-bottom: 1px solid var(--line); }

.sc-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  /* No tracking on small mono copy — readability beats the printed-
     wide look at these sizes. Applies to the years (left) + the
     services list (right) on every Selected-clients row. */
  letter-spacing: 0;
  /* Source text is already Title Case ("Brand, Web", "Prints,
     Packaging") — drop the uppercase transform so the casing reads
     as the user typed it. */
  text-transform: none;
  color: color-mix(in srgb, var(--color-text-primary) 60%, transparent);
  /* Tight stack — multiple services per row should read as a
     compact group, not an airy list. */
  line-height: 1.18;
  /* Top-align with the row — meta sits at the top of the cell, not
     centred next to the name. Padding mirrors the rhythm of the
     name's baseline-style breathing room. */
  align-self: start;
  padding-top: clamp(20px, 3vh, 36px);
  opacity: 0;
  transition: opacity 320ms ease, transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.sc-years {
  grid-column: 1;
  justify-self: start;
  transform: translateX(-14px);
}
.sc-services {
  grid-column: 3;
  justify-self: end;
  text-align: right;
  transform: translateX(14px);
  display: flex;
  flex-direction: column;
  /* No gap — `.sc-meta`'s line-height handles the rhythm so the lines
     stack as tight as a wrapped paragraph would. */
  gap: 0;
}

.sc-name {
  grid-column: 2;
  justify-self: center;
  display: inline-block;
  font-family: var(--font-sans);
  font-size: clamp(48px, 8.4vw, 144px);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 0.95;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  /* Geometric (ss01) — keep the same Bauhaus alt set used on the
     other display sizes so the rhythm with the section titles stays
     consistent. */
  font-feature-settings: "ss01";
  /* Hover state is mechanical: a skewX(-10deg) eased over ~540ms
     fakes the lean of a true italic without the swap-glyph jolt of
     toggling font-style on a non-variable font. transform-origin is
     centred so the skew radiates from the centre baseline. */
  transform-origin: 50% 60%;
  transition: color 540ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 540ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* The standalone arrow-in-circle element is no longer used — the
   custom cursor takes over that affordance via the `.cursor.arrow`
   state (see shared.css). Style is kept as a defensive guard for any
   legacy markup that might still ship the span. */
.sc-arrow { display: none; }

/* ── Hover state — single source for the reveal ─────────── */
.sc-row:hover .sc-years,
.sc-row:focus-visible .sc-years,
.sc-row:hover .sc-services,
.sc-row:focus-visible .sc-services {
  opacity: 1;
  transform: translateX(0);
}
/* Hover — the name decodes (scramble block, see .sweep-link) and
   settles in accent yellow; no skew. The years / services meta
   still fade in on row hover. */
.sc-row:hover .sc-name,
.sc-row:focus-visible .sc-name {
  transform: none;
}

/* ── Spotlight — hovering one row quiets the rest ─────────
   The row under the cursor keeps full presence while its
   neighbours drop back, so attention reads as a single beam
   sliding down the list. Pure-CSS sibling dimming, pointer
   devices only (touch never has a resting hover). */
@media (hover: hover) and (pointer: fine) {
  .sc-list:hover .sc-row:not(:hover):not(:focus-visible) {
    opacity: 0.3;
  }
}

/* ── Mobile (≤760px) ────────────────────────────────────── */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  .reel.selected-clients {
    /* Natural height — drop the flex 1-1-0 row distribution that
       squeezed every client into one viewport and overlapped the
       names. The list just flows. */
    height: auto;
    min-height: 0;
    display: block;
  }
  .sc-head {
    grid-template-columns: 1fr;
    padding-top: calc(var(--nav-h, 80px) + 12px);
  }
  .sc-kicker { grid-column: auto; text-align: left; }
  .sc-list { display: block; }
  .sc-row {
    display: block;
    flex: none;
    min-height: 0;
    /* Tighter vertical rhythm — the 32px cap left the names floating
       far apart on wider (tablet-portrait) viewports. */
    padding: clamp(18px, 3vw, 24px) var(--edge-x);
  }
  /* Mobile shows just the client names — no year-range, no services
     meta (those are a hover affordance that doesn't exist on touch). */
  .sc-years,
  .sc-services { display: none; }
  .sc-name {
    grid-column: 1;
    justify-self: start;
    text-align: left;
    font-size: clamp(34px, 10vw, 60px);
    line-height: 1.0;
    white-space: normal;
  }
  .sc-arrow { display: none; }
}