/* Marzex Technologies, edition 4.4: Featured work on Home (index.html #work) is two product showcases.
   The cards stack on scroll (marzex-featured-stack.css: .fs-stack, .fs-item) and slide in with the clip reveal
   (data-clip, marzex-scale.js). Each card's film is its launch film's poster until the card is on screen; then the film
   plays (one card at a time, marzex-showcase.js) inside the brand's gradient border. The product's logo and name sit at
   the top left, in a square-cornered frosted label. */

.show { list-style: none; }
.show__card {
  position: relative; isolation: isolate; overflow: hidden; margin: 0; height: 100%;
  border-radius: var(--r-3xl); background: var(--gunmetal); color: var(--paper);
}
.show__film { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* The poster: over the film while it is paused. It fades in at once on pause, and fades out 1 s after the film starts
   playing (the transition delay sits on the playing state only, so the fade back in has none) */
.show__still {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 1; transition: opacity .6s var(--s-power2-out);
}
.show__card.is-playing .show__still { opacity: 0; transition-delay: 1s; }

/* The brand gradient border, shown only while the film plays */
.show__card::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; padding: 2px;
  background: linear-gradient(135deg, var(--flare), var(--iris));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s var(--s-power2-out);
}
.show__card.is-playing::after { opacity: 1; }

/* The logo and name, top left, in a square-cornered frosted label */
.show__brand {
  position: absolute; z-index: 2; top: 1.25rem; left: 1.25rem;
  display: inline-flex; align-items: center; gap: 1rem; padding: .375rem 1.5rem .375rem .375rem; white-space: nowrap;
  border-radius: var(--r-media); color: var(--paper);
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.show__mark { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-lg); overflow: hidden; }
.show__mark svg { display: block; width: 100%; height: 100%; }
.show__mark--sermo { background: var(--ink); color: var(--paper); }
.show__mark--sermo svg { width: 62%; height: 62%; }
.show__name { font: 400 1.25rem/1 var(--sans); letter-spacing: -.013rem; }

/* The slide: the frame opens from a 5% inset to full, the film and poster settle from 1.1 to 1 (marzex-scale.js sets --clip-p) */
.clip-ready .fs-item[data-clip] .show__card { clip-path: inset(calc((1 - var(--clip-p, 1)) * 5%) round var(--r-3xl)); }
.clip-ready .fs-item[data-clip] .show__film,
.clip-ready .fs-item[data-clip] .show__still { scale: calc(1.1 - .1 * var(--clip-p, 1)); }

/* Featured work's section background: black */
#work { background-color: var(--ink); }

@media (max-width: 768px) {
  .show__card { border-radius: var(--r-2xl); }
  .clip-ready .fs-item[data-clip] .show__card { clip-path: inset(calc((1 - var(--clip-p, 1)) * 5%) round var(--r-2xl)); }
  .show__brand { top: 1rem; left: 1rem; gap: .75rem; padding-right: 1.125rem; }
  .show__mark { width: 2.5rem; height: 2.5rem; }
  .show__name { font-size: 1.0625rem; }
  /* Phones: each card takes its poster's own 16:9, so nothing is cropped, and the cards flow instead of stacking */
  .show.fs-item { position: relative; top: auto; height: auto; }
  .show__card { height: auto; aspect-ratio: 16 / 9; }
  /* Uncropped, each poster shows its own logo in the corner, so the label would print the name twice */
  .show__brand { display: none; }
}