/* --- Floating drift animation --- */
.gallery img {
  opacity: 0;
  transform: translateY(50px) rotate(0deg) scale(0.9);
  animation: floatIn 5s ease-out forwards;
}

/* --- Keyframes for floating in --- */
@keyframes floatIn {
  0% {
    opacity: 0;
    transform: translateY(50px) rotate(var(--rotate-start)) scale(var(--scale-start));
  }
  40% {
    opacity: var(--flicker1);
    transform: translateY(20px) rotate(calc(var(--rotate-start) + 3deg)) scale(calc(var(--scale-start) + 0.05));
  }
  70% {
    opacity: var(--flicker2);
    transform: translateY(5px) rotate(calc(var(--rotate-start) - 2deg)) scale(calc(var(--scale-start) + 0.02));
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

/* --- Row-based delays (4 images per row) --- */
.wp-image-51, .wp-image-52, .wp-image-53, .wp-image-54 { animation-delay: 0s; }
.wp-image-55, .wp-image-56, .wp-image-57, .wp-image-58 { animation-delay: 1.5s; }
.wp-image-59, .wp-image-60, .wp-image-61, .wp-image-62 { animation-delay: 3s; }
.wp-image-63, .wp-image-64, .wp-image-65, .wp-image-66 { animation-delay: 4.5s; }

/* --- Individual randomness per image --- */
.wp-image-51  { --rotate-start: -5deg; --scale-start:0.92; --flicker1:0.7; --flicker2:0.85; }
.wp-image-52  { --rotate-start: 3deg;  --scale-start:0.9;  --flicker1:0.75; --flicker2:0.88; }
.wp-image-53  { --rotate-start: -2deg; --scale-start:0.95; --flicker1:0.72; --flicker2:0.86; }
.wp-image-54  { --rotate-start: 4deg;  --scale-start:0.91; --flicker1:0.7;  --flicker2:0.87; }

.wp-image-55  { --rotate-start: -3deg; --scale-start:0.93; --flicker1:0.71; --flicker2:0.86; }
.wp-image-56  { --rotate-start: 2deg;  --scale-start:0.9;  --flicker1:0.73; --flicker2:0.88; }
.wp-image-57  { --rotate-start: -1deg; --scale-start:0.94; --flicker1:0.7;  --flicker2:0.85; }
.wp-image-58  { --rotate-start: 5deg;  --scale-start:0.92; --flicker1:0.72; --flicker2:0.87; }

.wp-image-59  { --rotate-start: -4deg; --scale-start:0.91; --flicker1:0.71; --flicker2:0.86; }
.wp-image-60  { --rotate-start: 3deg;  --scale-start:0.93; --flicker1:0.73; --flicker2:0.88; }
.wp-image-61  { --rotate-start: -2deg; --scale-start:0.92; --flicker1:0.7;  --flicker2:0.85; }
.wp-image-62  { --rotate-start: 4deg;  --scale-start:0.94; --flicker1:0.72; --flicker2:0.87; }

.wp-image-63  { --rotate-start: -3deg; --scale-start:0.9;  --flicker1:0.71; --flicker2:0.86; }
.wp-image-64  { --rotate-start: 2deg;  --scale-start:0.91; --flicker1:0.73; --flicker2:0.88; }
.wp-image-65  { --rotate-start: -1deg; --scale-start:0.92; --flicker1:0.7;  --flicker2:0.85; }
.wp-image-66  { --rotate-start: 3deg;  --scale-start:0.93; --flicker1:0.72; --flicker2:0.87; }

/* --- Universal fade-up animations --- */
.home .fade-up-1,
.fade-up-2,
.fade-up-3,
.fade-up-4,
.fade-up-5 {
  opacity: 0;
  transform: translateY(30px); /* start below */
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

/* --- Individual timings --- */
.fade-up-1 { animation-name: fadeUpCustom; animation-duration: 3s; animation-delay: 0.3s; }
.fade-up-2 { animation-name: fadeUpCustom; animation-duration: 3.5s; animation-delay: 0.6s; }
.fade-up-3 { animation-name: fadeUpCustom; animation-duration: 4s; animation-delay: 0.9s; }
.fade-up-4 { animation-name: fadeUpCustom; animation-duration: 4.5s; animation-delay: 1.2s; }
.fade-up-5 { animation-name: fadeUpCustom; animation-duration: 5s; animation-delay: 1.5s; }

/* --- Keyframes --- */
@keyframes fadeUpCustom {
  0%   { opacity: 0; transform: translateY(30px); }
  60%  { opacity: 1; transform: translateY(-5px); }
  100% { opacity: 1; transform: translateY(0); }
}


/* Gallery grid */
.selectable-img {
  width: 100%;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 3px solid transparent;
  border-radius: 6px;
}

.selectable-img:hover {
  transform: scale(1.02);
}

.selectable-img.selected {
  border: 3px solid #3a8ef6; /* site blue color */
  box-shadow: 0 0 8px rgba(58, 142, 246, 0.6);
}

/* Selected thumbnails preview */
#selected-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

#selected-thumbs img.thumb-preview {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid #3a8ef6;
}