/* ============================================================
   Scroll-stacking cards  ·  "sticky deck on scroll"
   Imperial Craft Studio — additive enhancement only.

   Applied by ASSETS/js/stack-cards.js to the single-column card
   list in the homepage Portfolio (#portfolioGrid). It is purely
   a visual layering pass: DOM
   order, links, filters, the project dialog and the existing
   editorial design are all untouched.

   Mechanics mirror the Framer Motion reference build:
     · each card pins with position: sticky
     · the sticky top steps down per index  -> calc(6rem + i * 1.5rem)
       (6rem == the site's existing sticky-header clearance)
     · cards lower in the pile scale down    -> depth
     · transform-origin: top                 -> they shrink toward
                                                the pinned top edge

   The .stack-card class is only added by JS when motion is allowed,
   so with prefers-reduced-motion (or JS disabled) the markup renders
   exactly as it did before.
   ============================================================ */

.stack-card {
  /* pin near the top; each card a touch lower than the previous one
     so the stacked headers peek out as a layered deck. */
  position: sticky;
  top: var(--stack-top, 6rem);

  /* scroll-driven depth scale, fed live by stack-cards.js. */
  transform: scale(var(--stack-scale, 1));
  transform-origin: top;

  /* opaque backing (= the page colour at these sections) so a pinned
     card cleanly covers the one beneath it instead of letting its
     text/image bleed through. Invisible while cards are not overlapping. */
  background: var(--bg);

  /* later cards paint above earlier ones. DOM order already guarantees
     this (each scaled card forms its own stacking context); the z-index
     is a defensive reinforcement. */
  z-index: calc(var(--stack-index, 0) + 1);

  will-change: transform;
}

/* Accessibility: anyone who prefers reduced motion gets the original,
   un-pinned, un-scaled list. (stack-cards.js also skips applying the
   effect in this case — this is a belt-and-braces fallback.) */
@media (prefers-reduced-motion: reduce) {
  .stack-card {
    position: relative;
    top: auto;
    transform: none;
    z-index: auto;
  }
}

@media (max-width: 767px) {
  .stack-card {
    position: relative;
    top: auto;
    min-height: 0;
    transform: none;
    z-index: auto;
    border-radius: 8px;
  }
}