/* ==========================================================================
   Screen Stack — a fanned trio of real /sample dashboard screenshots that
   settles into an overlapping row once staged. Self-contained: works on the
   dark home page (assets/home/home.css tokens) and on interior dark pages
   (styles.css tokens) via var() fallback chains, so it can be dropped into
   either without extra wiring.

   MARKUP CONTRACT — paste exactly this shape. `data-stage` is the hook
   app.js uses to add `.is-staged` once ~25% visible (or immediately under
   reduced motion / no-JS — see app.js's initStageOnScroll). `--n` on each
   `.screen-stack__item` drives the entrance stagger (0, 1, 2 — left to
   right); the href should point at the real /sample/ view the screenshot
   is from so the card doubles as a live link.

   <figure class="screen-stack" data-stage aria-label="Sample AuthorityMap dashboard preview">
     <a class="screen-stack__item" href="/sample/#/snapshot" style="--n:0">
       <img src="/media/sample-screens/snapshot-1200.webp"
            srcset="/media/sample-screens/snapshot-1200.webp 1x, /media/sample-screens/snapshot-2400.webp 2x"
            width="1200" height="900" alt="Snapshot view of the sample AuthorityMap dashboard" loading="lazy" decoding="async" />
       <span class="screen-stack__cap">Snapshot</span>
     </a>
     <a class="screen-stack__item" href="/sample/#/leaderboard" style="--n:1">
       <img src="/media/sample-screens/leaderboard-1200.webp"
            srcset="/media/sample-screens/leaderboard-1200.webp 1x, /media/sample-screens/leaderboard-2400.webp 2x"
            width="1200" height="900" alt="Leaderboard view of the sample AuthorityMap dashboard" loading="lazy" decoding="async" />
       <span class="screen-stack__cap">Leaderboard</span>
     </a>
     <a class="screen-stack__item" href="/sample/#/action-plan" style="--n:2">
       <img src="/media/sample-screens/action-plan-1200.webp"
            srcset="/media/sample-screens/action-plan-1200.webp 1x, /media/sample-screens/action-plan-2400.webp 2x"
            width="1200" height="900" alt="Action Plan view of the sample AuthorityMap dashboard" loading="lazy" decoding="async" />
       <span class="screen-stack__cap">Action Plan</span>
     </a>
     <figcaption class="screen-stack__note">Sample dashboard &middot; fictional persona</figcaption>
   </figure>

   Behaviour:
   - No-JS / reduced-motion / after staging → a clean overlapping row of 3
     equal cards (the only state these viewers ever see).
   - JS + motion, before ~25% visible → fanned: outer cards rotated ∓7° and
     pulled in/down, middle card raised.
   - On `.is-staged` → animates to the row over ~900ms, 80ms per-item stagger.
   - Hover / focus-visible on a card → lifts 6px, border brightens, caption
     turns accent. The whole card is the link.
   - ≤720px → horizontal scroll-snap strip, ~78%-width cards peeking at the
     edges, no fan (the strip scrolls inside itself; never the page).
   ========================================================================== */

.screen-stack {
  --ss-accent: var(--copper-bright, var(--color-primary, #e7a184));
  --ss-border: var(--hairline, var(--color-border, rgba(255, 255, 255, 0.14)));
  --ss-border-hover: var(--ss-accent);
  --ss-surface: var(--surface, var(--color-surface, #14181e));
  --ss-radius: var(--r-card, var(--radius-card, 14px));
  --ss-shadow: 0 20px 50px -26px rgba(0, 0, 0, 0.6);
  --ss-shadow-hover: 0 30px 64px -22px rgba(0, 0, 0, 0.65);
  --ss-cap-bg: rgba(10, 13, 18, 0.74);
  --ss-cap-fg: var(--text-2, var(--color-text-on-surface-2, #b7bec8));
  --ss-note-fg: var(--text-3, var(--color-text-on-surface-2, #888f99));
  --ss-overlap: 30px;
  --ss-dur: 900ms;
  --ss-stagger: 80ms;
  --ss-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  position: relative;
  margin: 0;
  padding: 0 0 44px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

.screen-stack__item {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  max-width: 380px;
  border-radius: var(--ss-radius);
  overflow: hidden;
  border: 1px solid var(--ss-border);
  box-shadow: var(--ss-shadow);
  background: var(--ss-surface);
  line-height: 0;
  text-decoration: none;
  transform: none;
  transition:
    transform 220ms var(--ss-ease),
    border-color 220ms var(--ss-ease),
    box-shadow 220ms var(--ss-ease);
}
.screen-stack__item:not(:first-child) {
  margin-left: calc(-1 * var(--ss-overlap));
}
.screen-stack__item img {
  display: block;
  width: 100%;
  height: auto;
}
.screen-stack__item:hover,
.screen-stack__item:focus-visible {
  z-index: 5;
  transform: translateY(-6px);
  border-color: var(--ss-border-hover);
  box-shadow: var(--ss-shadow-hover);
}
.screen-stack__item:focus-visible {
  outline: 2px solid var(--ss-accent);
  outline-offset: 3px;
}

.screen-stack__cap {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: var(--r-pill, var(--radius-pill, 999px));
  background: var(--ss-cap-bg);
  color: var(--ss-cap-fg);
  font: 600 0.72rem/1 var(--font-mono, ui-monospace, "SFMono-Regular", monospace);
  letter-spacing: 0.02em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: color 220ms var(--ss-ease);
}
.screen-stack__item:hover .screen-stack__cap,
.screen-stack__item:focus-visible .screen-stack__cap {
  color: var(--ss-accent);
}

.screen-stack__note {
  /* Absolutely positioned (not a flex participant) so it never fights the
     row's flex-basis math and never joins the mobile scroll strip's
     horizontal overflow — it just sits pinned under the visible row. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ss-note-fg);
}

/* ---------- Fan → row entrance (JS + motion only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .screen-stack[data-stage]:not(.is-staged) .screen-stack__item {
    transition: none;
  }
  html.js .screen-stack[data-stage]:not(.is-staged) .screen-stack__item:nth-child(1) {
    transform: rotate(-7deg) translate(20px, 24px);
    z-index: 1;
  }
  html.js .screen-stack[data-stage]:not(.is-staged) .screen-stack__item:nth-child(2) {
    transform: translateY(-14px);
    z-index: 2;
  }
  html.js .screen-stack[data-stage]:not(.is-staged) .screen-stack__item:nth-child(3) {
    transform: rotate(7deg) translate(-20px, 24px);
    z-index: 1;
  }
  html.js .screen-stack.is-staged .screen-stack__item {
    transition:
      transform var(--ss-dur) var(--ss-ease) calc(var(--n, 0) * var(--ss-stagger)),
      border-color 220ms var(--ss-ease),
      box-shadow 220ms var(--ss-ease);
  }
}

/* ---------- ≤720px: horizontal scroll-snap strip, no fan ---------- */
@media (max-width: 720px) {
  .screen-stack {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    /* Keep the base 44px bottom padding — that's the reserved slot for the
       absolutely positioned caption (.screen-stack__note); shrinking it here
       would let the strip's cards overlap the caption text. */
  }
  .screen-stack__item {
    flex: 0 0 78%;
    max-width: none;
    scroll-snap-align: start;
    margin-left: 0 !important;
  }
  html.js .screen-stack[data-stage]:not(.is-staged) .screen-stack__item,
  html.js .screen-stack.is-staged .screen-stack__item {
    transform: none !important;
    transition:
      border-color 220ms var(--ss-ease),
      box-shadow 220ms var(--ss-ease);
  }
}