/* Your existing grid (unchanged) */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 10px;
  gap: 15px;
  padding: 20px;
}

.gallery-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 5px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.gallery-image:hover {
  transform: scale(1.02);
  opacity: 0.9;
}

/* =============================================
   SHUTTER GROUP CONTAINER (reusable)
   ============================================= */
/* Your existing .gallery-grid and .gallery-image unchanged */

.shutter-group {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3; /* adjust to match your photos — portrait=2/3, landscape=3/2 */
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  background: #000;
}

.shutter-group .shutter-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: shutterFade 3.6s infinite;
  will-change: opacity, transform, filter;
}

.shutter-group .shutter-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Duration = number of images × delay step (10 × 0.3 = 3.0), add buffer */
  animation: shutterFade 3.0s infinite;
  will-change: opacity, transform, filter;
}

@keyframes shutterFade {
  0%   { opacity: 0; transform: scale(1.01); filter: brightness(0.9) contrast(1.05); }
  8%   { opacity: 1; }                          /* quick fade in */
  25%  { opacity: 1; }                          /* hold visible */
  35%  { opacity: 0.2; filter: brightness(1.1) contrast(1.15); } /* shutter flash */
  45%  { opacity: 0; transform: scale(1.02); } /* fade out */
  100% { opacity: 0; }                          /* stay hidden until next turn */
}