/* ------------------------------
   GRID OF TOUCHING IMAGES
--------------------------------*/

/* Start invisible */
.design-grid.hidden {
  opacity: 0;
}

/* Fade-in animation */
@keyframes gridFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.design-grid.fade-in {
  animation: gridFadeIn 0.8s ease forwards;
}

.design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  padding-top: 100px;

  
  padding-top: 140px;   /* prevents overlap with MUSIC/DESIGN */
  padding-left: 120px;  /* prevents overlap with left nav */
  padding-right: 80px;  /* prevents overlap with ABOUT link */
}
@media (max-width: 800px) {
  .design-grid {
    padding-top: 100px;   /* still leave room for nav */
    padding-left: 70px;   /* reduce but keep safe zone */
    padding-right: 150px;  /* ABOUT link stays clear */
  }
}

/* Wrapper prevents flicker on hover */
.design-item {
  position: relative;
  overflow: hidden;
}

.design-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
  cursor: pointer;
}

/* Hover: scale slightly + darken */
.design-img:hover {
  transform: scale(1.05);
  filter: brightness(70%);
}

/* ------------------------------
 FULLSCREEN POPUP
--------------------------------*/

#popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(3px);
}

#popup-overlay.show {
  display: flex;
  animation: fadeIn 0.25s ease forwards;
}

#popup-img {
  max-width: 90%;
  max-height: 90%;
  opacity: 0;
  transform: scale(0.95);
  animation: zoomIn 0.25s ease forwards;
}

/* ------------------------------
 OPEN ANIMATIONS
--------------------------------*/

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes zoomIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ------------------------------
 CLOSE ANIMATIONS
--------------------------------*/

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes zoomOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

#popup-overlay.closing {
  animation: fadeOut 0.25s ease forwards;
}

#popup-img.closing {
  animation: zoomOut 0.25s ease forwards;
}