.gallery-wrapper {
  border-top:4px solid white;
  border-bottom:4px solid white;
  overflow: hidden; /* para que la foto sobresalga */
  box-shadow:0 0 10px rgba(0,0,0,0.05)
}

.gallery-track {
  display: flex;
  width: max-content;
  animation: scroll 60s linear infinite;
}


/* animación infinita real */
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.gallery {
  display: flex;
  align-items: flex-end;
}

.photo {
  position: relative; /* necesario para que sobresalga */
    border:4px solid white;
}

.photo .photo-inner {
transition: width 0.4s ease-in-out, filter 0.4s ease-in-out; /* suaviza tamaño y brillo */
  position: relative;

  width:240px;
  height:240px;
  border-radius:8px;
  background-position:center center;
  background-size: cover;

}

/* Hover: sobresale sobre los demás */
.photo.hovered .photo-inner {
  width: 400px;

  transition-delay: 0.15s; /* retraso antes de expandir */
  transition: width 0.4s ease-in-out, z-index 0s; 

}
.gallery:has(.photo.hovered) .photo:not(.hovered) .photo-inner {
  filter: brightness(0.5);
  width: 190px;
  transition: width 0.4s ease-in-out, filter 0.4s ease-in-out;
}

.gallery-track:has(.photo.hovered) {
  animation-play-state: paused;
}