/* Photo Stack — draggable pile of cards with hover captions */

/* "save layout" button, only shown when editing locally */
.photo-stack__save {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10000;
  padding: 6px 12px;
  border: 1px solid rgba(17, 17, 17, .2);
  border-radius: 999px;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.photo-stack {
  position: relative;
  width: 760px;
  height: 600px;
}

.photo-stack__signpost {
  position: absolute;
  top: calc(100% - 26px);
  left: 50%;
  margin-top: 0;
  transform: translateX(-50%);
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
  /* Darkest point of the breathing wave: never more than 50% black */
  color: rgba(17, 17, 17, 0.5);
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  transition: opacity 3s ease;
}

.photo-stack__signpost--update {
  top: 0;
}

.photo-stack__signpost--instruction {
  position: fixed;
  top: auto;
  bottom: calc(var(--pad) + 24px);
  left: 50%;
  z-index: 1001;
  transform: translateX(-50%);
}

@media (min-width: 901px) {
  body:has(.index) .photo-stack__signpost--instruction {
    left: 75vw;
  }
}

/* Letters stay inline (not inline-block) so the font's own spacing and
   kerning hold; the wave therefore fades rather than lifts */
.photo-stack__signpost span {
  animation: signpost-breathe 1.8s infinite ease-in-out;
}

@keyframes signpost-breathe {
  0%, 60%, 100% { opacity: 1; }
  30% { opacity: .35; }
}

.photo-stack__signpost.is-dismissed {
  opacity: 0;
}

.photo-stack__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--card-w, 226px);
  height: var(--card-h, 300px);
  border-radius: var(--radius, 20px);
  /* Negative spread = offset - blur, so each layer fades out before it
     reaches the top edge: shadow only on the bottom and sides. */
  box-shadow: 0 3px 4px -1px rgba(0, 0, 0, .10), 0 12px 20px -8px rgba(0, 0, 0, .14);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transform: translate(-50%, -50%) translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg)) scale(calc(var(--scale, 1) * var(--zoom, 1) * var(--layout-scale, 1)));
  transition: transform 520ms cubic-bezier(.17, .67, .3, 1.35), box-shadow 200ms ease;
  will-change: transform;
}

.photo-stack__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid #fff;
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
}

.photo-stack__card--video::after {
  border-color: #fff;
}

.photo-stack__card--video::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e53935;
  pointer-events: none;
}

.photo-stack__card img,
.photo-stack__card video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  pointer-events: none;
  transform: scale(var(--media-scale, 1));
}

.photo-stack__card video {
  background: #000;
  transform: scale(var(--media-scale, 1));
}

/* Once its picture has loaded, each card rises a few pixels into place while
   fading in, one shortly after another (--enter-delay is set per card).
   "translate" is separate from "transform", so the card's position, tilt and
   hover lift are untouched. */
.photo-stack__card {
  opacity: 0;
}

.photo-stack__card.is-loaded {
  animation: photo-stack-enter 1200ms cubic-bezier(.2, .7, .2, 1) var(--enter-delay, 0ms) both;
}

@keyframes photo-stack-enter {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes photo-stack-enter {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

.photo-stack__media-clip {
  position: absolute;
  inset: 2px;
  overflow: hidden;
  border-radius: max(0px, calc(var(--radius, 20px) - 2px));
}

.photo-stack__media-clip--video {
  background: transparent;
}

/* caption + zoom hint live inside the card so they inherit its rotation and
   move/rotate with it */
.photo-stack__caption,
.photo-stack__zoom-hint {
  position: absolute;
  top: calc(100% + 8px);
  left: 3px;
  right: 3px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 1.4;
  color: #666;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.photo-stack__caption:has(.photo-stack__date) {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.photo-stack__date {
  flex: none;
  white-space: nowrap;
}

/* Above the card's top-right corner, clear of the caption underneath */
.photo-stack__zoom-hint {
  top: auto;
  bottom: calc(100% + 8px);
  text-align: right;
}

.photo-stack.has-zoomed .photo-stack__zoom-hint {
  opacity: 0 !important;
}

.photo-stack__card:hover:not(.is-dragging) .photo-stack__caption,
.photo-stack__card.is-dragging .photo-stack__caption {
  opacity: 1;
}

.photo-stack__card:hover:not(.is-dragging) .photo-stack__zoom-hint,
.photo-stack__card.is-dragging .photo-stack__zoom-hint {
  opacity: 0.25;
}

/* hover = small lift only; z-order is untouched so the card stays in the pile */
.photo-stack__card:hover:not(.is-dragging):not(.is-settled) {
  transform: translate(-50%, -50%) translate(var(--tx), calc(var(--ty) - 10px)) rotate(var(--rot)) scale(calc(var(--scale, 1) * var(--zoom, 1) * var(--layout-scale, 1)));
  box-shadow: 0 5px 8px -3px rgba(0, 0, 0, .11), 0 18px 28px -10px rgba(0, 0, 0, .16);
}

.photo-stack__card.is-dragging {
  cursor: grabbing;
  transition: box-shadow 150ms ease;
  box-shadow: 0 14px 20px -6px rgba(0, 0, 0, .16), 0 28px 44px -16px rgba(0, 0, 0, .17);
}

@media (max-width: 900px) {
  .photo-stack {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 28px 16px 48px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
  }

  .photo-stack::-webkit-scrollbar { display: none; }

  .photo-stack__signpost--update { display: none; }

  .photo-stack__signpost--instruction {
    bottom: 10px;
  }

  .photo-stack__card {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 min(calc(60vw * var(--mobile-card-scale, 1)), calc(360px * var(--mobile-card-scale, 1)));
    width: min(calc(60vw * var(--mobile-card-scale, 1)), calc(360px * var(--mobile-card-scale, 1)));
    height: auto;
    aspect-ratio: var(--card-aspect, 0.75);
    transform: none;
    touch-action: pan-x;
    scroll-snap-align: center;
    cursor: default;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    transition: flex-basis 260ms ease, width 260ms ease, box-shadow 180ms ease;
  }

  .photo-stack__card:hover:not(.is-dragging):not(.is-settled) {
    transform: none;
  }

  .photo-stack__caption {
    top: calc(100% + 6px);
    opacity: 1;
  }

  .photo-stack__zoom-hint { display: none; }

  .photo-stack__card.is-zoomed {
    flex-basis: min(88vw, 520px);
    width: min(88vw, 520px);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .14);
  }

  .photo-stack__card:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
  }
}