/* "See it in action" as a pile of glass cards: each feature card pins below the header as you
   scroll, and the next one slides up over it. The cards are the nav bar's glass (.glass), all the
   same height so each one fully covers the one below. video.js plays only the card on top. */

.stack { --card-h: min(60vh, 500px); --card-pad: var(--s4); }
/* Spacer inside the stack's content box: sticky cards stay pinned until it has scrolled by, so
   the last card sits on top of the whole pile for a moment before the pile leaves together. */
.stack::after { content: ""; display: block; height: 35vh; }

.stack-card {
  position: sticky; top: calc(var(--stack-top, 96px) + var(--i) * 14px); /* --stack-top: below the header, set by video.js */
  display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: center;
  height: var(--card-h); margin-bottom: 8vh; padding: var(--card-pad);
  border-radius: 32px;
  /* The nav bar's blur, without its saturation boost: piled up, 170% saturation per card
     compounds into neon colour */
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 -8px 24px var(--glass-cast), 0 12px 32px var(--glass-cast);
  transform-origin: 50% 0;
  transition: transform 300ms ease, filter 300ms ease;
}
/* Cards underneath settle back a little */
.stack-card.is-covered { transform: scale(0.97); filter: saturate(0.8); }
/* A covered card's (paused) video fades out, so it doesn't glow through the glass on top */
.stack-video { transition: opacity 300ms ease; }
.stack-card.is-covered .stack-video { opacity: 0; }

.stack-text { max-width: 46ch; }
.stack-text h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.375rem, 2.6vw, 2rem); line-height: 1.2; margin-bottom: var(--s2);
}
.stack-text p { color: var(--muted); font-size: 1.0625rem; margin: 0; }

/* The video box fills the card's height, so its gaps to the card's top, bottom and right are all
   --card-pad. Its 9:16 screen is the box height less 48px (12px padding top and bottom, the 14px
   status band and its 10px gap), and the box is 24px wider than the screen (12px each side). */
.stack-video { width: calc((var(--card-h) - 2 * var(--card-pad) - 48px) * 9 / 16 + 24px); }
.stack-video .yt-screen { aspect-ratio: 9 / 16; border-radius: 8cqw; } /* 8% of the short side */

@media (max-width: 640px) {
  /* Phones: the full-height video would leave no room for text, so the card takes its height from
     the video instead (shorter, never taller). Every card is the same height and the gap is
     equal on top, bottom and right. */
  .stack { --card-pad: var(--s2); }
  .stack-card {
    top: calc(var(--stack-top, 120px) + var(--i) * 10px);
    height: auto; align-items: stretch; gap: 12px; border-radius: 24px; overflow: hidden;
  }
  .stack-video { width: 42vw; }
  .stack-text { display: grid; grid-template-columns: auto 1fr; align-content: center; column-gap: var(--s1); row-gap: var(--s1); }
  .stack-text .icon-chip { width: 32px; height: 32px; margin: 0; border-radius: 10px; }
  .stack-text .icon-chip .icon { width: 18px; height: 18px; }
  .stack-text h3 { font-size: 0.9375rem; margin: 0; align-self: center; }
  .stack-text p { grid-column: 1 / -1; font-size: 0.8125rem; line-height: 1.45; }
}

@media (prefers-reduced-motion: reduce) {
  .stack-card, .stack-card.is-covered { transform: none; filter: none; transition: none; }
}