/* ==========================================================================
   Playground page — title + masonry grid
   ========================================================================== */

.view-playground { padding: calc(var(--header-h) + 24px) 24px 24px; }

.pg-title {
  max-width: 540px;
  margin-bottom: 24px;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.16px;
}

.masonry { display: flex; gap: 12px; align-items: flex-start; }
.masonry-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shot {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--fill-05);
  cursor: pointer;
}
.shot .media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out), scale 0.8s var(--ease-out);
}
.shot .media.is-loaded { opacity: 1; }
.shot.in:hover .media { scale: 1.02; }
.shot.is-source .media { visibility: hidden; } /* while shown in the lightbox */

/* ---------- Entrance: unveils top → bottom and settles, staggered via --d ---------- */
.shot {
  clip-path: inset(0 0 100% 0);
  translate: 0 -32px;
  transition:
    clip-path 1s var(--ease-out) var(--d, 0ms),
    translate 1s var(--ease-out) var(--d, 0ms);
}
.shot .media { transform: scale(1.18); }
.shot.in { clip-path: inset(0 0 0 0); translate: 0 0; }
.shot.in .media {
  transform: none;
  transition:
    opacity 0.6s var(--ease-out),
    scale 0.8s var(--ease-out),
    transform 1.3s var(--ease-out) var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .shot { clip-path: none; translate: none; }
  .shot .media { transform: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .view-playground { padding: calc(var(--header-h) + 8px) 16px 62px; } /* clock below */
  .pg-title { margin-bottom: 16px; }
  .masonry,
  .masonry-col { gap: 8px; }
}