/* Marzex Technologies, edition 4.3: Featured work, stacked (featured-work-stack.html, and Home's Selected work in
   index.html). On featured-work-stack.html it loads after marzex-featured.css, which keeps the head and the title's
   scramble.
   The cards stack on scroll like the Case studies V3 take (cases-value-faq-variations.css, .ca3): each sticks a little
   lower than the one before, so the stack shows its edges. In the middle of each card, a frosted pill holds the
   platform's mark and its name. Each card opens like Home's Vision film (data-clip, marzex-scale.js): from a 5% inset
   to full, the picture settling from 1.1 to 1, until it sticks. marzex-featured.js finds no .fw-card here and leaves
   the cards alone. */

.fs { --stick: calc(var(--header-h) + 1rem); }

/* ---------- Stack ---------- */
.fs-stack { display: block; list-style: none; }
.fs-item {
  /* per card, inline: --i, its place in the stack; --px / --py, where the picture is cropped (0 to 1) */
  position: sticky; top: calc(var(--stick) + var(--i, 0) * .75rem);
  height: min(calc(100vh - var(--stick) - 3rem), 46rem);
}
.fs-item + .fs-item { margin-top: 2rem; }

.fs-card {
  position: relative; isolation: isolate; overflow: hidden; display: block; height: 100%;
  border-radius: var(--r-3xl); background: var(--gunmetal); color: var(--paper); text-decoration: none;
  scroll-margin-top: var(--stick);
}
.fs-card > .media {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border-radius: 0; object-fit: cover;
  object-position: calc(var(--px, .5) * 100%) calc(var(--py, .5) * 100%);
  transition: transform .7s var(--s-power2-out);
}
.fs-card:hover > .media { transform: scale(1.02); }
/* The Vision film's clip-scroll (marzex-site.css, [data-clip]) on the card itself, which has no .frame */
.clip-ready .fs-item[data-clip] .fs-card { clip-path: inset(calc((1 - var(--clip-p, 1)) * 5%) round var(--r-3xl)); }
.clip-ready .fs-item[data-clip] .fs-card > .media { scale: calc(1.1 - .1 * var(--clip-p, 1)); }
.fs-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

/* ---------- The pill ---------- */
.fs__pill {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; max-width: calc(100% - 2rem);
  display: flex; align-items: center; gap: 1rem; padding: .5rem 1.5rem .5rem .5rem;
  border-radius: var(--r-2xl);
  background: color-mix(in srgb, var(--ink) 48%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  transition: background-color var(--t-hover, .2s);
}
.fs-card:hover .fs__pill { background: color-mix(in srgb, var(--ink) 62%, transparent); }
/* The mark: a square crop of the platform picture until each platform's logo comes in (--lx / --ly place the crop) */
.fs__logo { flex: none; width: 3.5rem; height: 3.5rem; overflow: hidden; border-radius: var(--r-lg); background: var(--gunmetal); }
.fs__logo img {
  width: 100%; height: 100%; max-width: none; border-radius: 0; object-fit: cover;
  object-position: calc(var(--lx, .5) * 100%) calc(var(--ly, .5) * 100%);
}
.fs__name {
  min-width: 0; font: 500 1.375rem/1.2 var(--sans); letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Narrower ---------- */
@media (max-width: 768px) {
  .fs { --stick: calc(var(--header-h) + .5rem); }
  .fs-item { height: min(calc(100vh - var(--stick) - 2rem), 34rem); }
  .fs-item + .fs-item { margin-top: 1rem; }
  .fs-card { border-radius: var(--r-2xl); }
  .clip-ready .fs-item[data-clip] .fs-card { clip-path: inset(calc((1 - var(--clip-p, 1)) * 5%) round var(--r-2xl)); }
  .fs__pill { gap: .75rem; padding: .375rem 1.125rem .375rem .375rem; }
  .fs__logo { width: 2.75rem; height: 2.75rem; }
  .fs__name { font-size: 1.125rem; }
}