/*
  card-stack.css
  Six wide site photographs. They start in a horizontal row.
  Hover (or tap) gathers them into a small rotated pile.

  Tweak size, gap, rotation, stagger, and timing with the variables on .stack.
  Motion is transform only, driven by a typed --spread number.
  WCAG 2.3.3: prefers-reduced-motion snaps the move and fades the pile.
*/

@property --spread {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.stack {
  /* Slightly larger than before, but never wider than the viewport. */
  --card-width: clamp(176px, min(18vw, calc((100vw - 3rem) / 6 - 6px)), 280px);
  --card-collapsed: min(168px, calc(var(--card-width) * 0.72));
  --card-ratio: 3 / 2;
  --card-radius: 3px;
  --row-gap: 8px;
  --rot-min: -6deg;
  --rot-max: 6deg;
  --stagger: 40ms;
  --duration: 600ms;
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --stack-count: 6;
  --scale-closed: calc(var(--card-collapsed) / var(--card-width));

  position: relative;
  z-index: 2;
  align-self: flex-start;
  width: calc(var(--card-width) * var(--stack-count) + var(--row-gap) * (var(--stack-count) - 1));
  height: calc(var(--card-width) * 2 / 3);
  /* Wider than the page column, so center on the column rather than packing to its left edge. */
  margin-left: 50%;
  transform: translateX(-50%);
  transition: opacity 180ms linear;
}

.stack-stage {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.stack-card {
  --spread: 1;
  --slot: calc((var(--i) - (var(--stack-count) - 1) / 2) * (var(--card-width) + var(--row-gap)));
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-width);
  aspect-ratio: var(--card-ratio);
  margin: 0;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.38);
  pointer-events: none;
  z-index: calc(var(--stack-count) - var(--i));
  transform: translate(-50%, -50%)
    translate3d(
      calc(var(--tx) * (1 - var(--spread)) + var(--slot) * var(--spread)),
      calc(var(--ty) * (1 - var(--spread))),
      0
    )
    rotate(calc(var(--rot) * (1 - var(--spread)) + var(--rest) * var(--spread)))
    scale(calc(var(--scale-closed) + (1 - var(--scale-closed)) * var(--spread)));
  transition: --spread var(--duration) var(--ease);
  transition-delay: calc(var(--i) * var(--stagger));
  will-change: transform;
}

.stack.is-collapsed .stack-card {
  --spread: 0;
  transition-delay: calc((var(--stack-count) - 1 - var(--i)) * var(--stagger));
}

.stack-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 640px) {
  .stack {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stack-card {
    transition: none;
  }
}