/* Stacking project cards (replaces the old pinned horizontal track).
   Each card sticks just under the sticky nav; the next card slides up and covers it.
   Only transform + opacity animate; the plain sticky stack stands without JS. */

/* Sticky needs no scroll/clip ancestor on the block axis. The old rule set
   overflow:hidden here (which creates a scroll container and kills sticky), so
   we release Y and clip only X to still contain any horizontal bleed. */
.work-section{overflow:visible;overflow-x:clip}

.work-stack{
  /* Nav is 78px tall and sticky; keep cards clear of it. Everything fluid via clamp.
     svh (not vh) so the mobile address bar collapsing can't shift the stack. */
  --stack-top:calc(78px + clamp(12px,2.2vh,26px));
  --stack-top:calc(78px + clamp(12px,2.2svh,26px));
  --stack-offset:clamp(12px,1.7vh,22px);
  --stack-offset:clamp(12px,1.7svh,22px);
  position:relative;
  display:block;
  /* Room after the last card so it sits fully before the section releases. */
  padding-bottom:clamp(24px,8vh,90px);
}

.project{
  position:sticky;
  top:calc(var(--stack-top) + var(--i) * var(--stack-offset));
  /* Opaque paper surface so a covering card fully occludes the one beneath. */
  background:var(--paper);
  padding:0 var(--pad) clamp(20px,3vh,34px);
  transform-origin:top center;
  /* --p (0..1) = how far the next card has covered this one. 0 without JS. */
  transform:scale(calc(1 - .06 * var(--p,0)));
  will-change:transform;
}

/* Dim overlay — opacity only (never filter). Sits above the card content but
   lets every link stay clickable. */
.project::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  background:var(--paper);
  opacity:calc(.55 * var(--p,0));
  pointer-events:none;
}

.project-top{border:0;border-top:1px solid #b9baad;padding:clamp(12px,1.6vh,20px) 0 clamp(8px,1.2vh,14px);font-size:11px}
.project-visual{aspect-ratio:16/9;border-radius:3px}
.project-visual>img,.project-visual>video{padding:0;object-fit:contain}
.project-copy{padding-top:clamp(12px,1.8vh,22px)}
.project-copy h3{font-size:clamp(24px,3.4vw,38px);letter-spacing:-.045em}
/* Card description — 24px at EVERY width (Rathin's call: bigger everywhere, not
   just phone). The small label/link overrides live in the desktop block below. */
.project-copy p{font-size:24px;line-height:1.5;margin-top:clamp(8px,1.2vh,14px);max-width:60ch}
.project-copy .text-link{margin-top:clamp(6px,1vh,12px);font-size:14px}

@media(min-width:768px){
  .work-stack{--stack-top:calc(78px + clamp(16px,2.4vh,30px))}
  .work-stack{--stack-top:calc(78px + clamp(16px,2.4svh,30px))}
  .project{padding-bottom:clamp(24px,3.2vh,40px)}
  /* Sensible max width on desktop, centred to match the card column.
     Also capped by viewport HEIGHT: on short laptop windows the card shrinks so
     its whole height stays visible while stuck, instead of clipping its bottom.
     (Constant raised to 440px for the larger 24px description.) */
  .work-stack{
    max-width:min(1120px, calc((100vh - 440px) * 16 / 9 + 2 * var(--pad)));
    max-width:min(1120px, calc((100svh - 440px) * 16 / 9 + 2 * var(--pad)));
    /* Centre the card column on desktop (no-op on phone, where it is full width). */
    margin-inline:auto;
  }
  /* Small labels keep their previous desktop sizes (description stays 24px). */
  .project-top{font-size:10px}
  .project-copy .text-link{font-size:13px}
}

/* Reduced motion: no scale, no dim — layout stays fully usable. */
@media(prefers-reduced-motion:reduce){
  .project{transform:none}
  .project::after{opacity:0}
}