@import "./theme.css";

/* Gallery Section */
#gallery {
  background: var(--background-gallery);
  color: white;
}

/* Keyframe elástico com estiramento e encolhimento suaves */
@keyframes elasticFromTop {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }
  50% {
    transform: translateY(8px); /* overshoot para estirar */
    opacity: 1;
  }
  75% {
    transform: translateY(-2px); /* encolhe com rebote */
  }
  90% {
    transform: translateY(1px); /* pequeno rebote adicional */
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Estado inicial */
#gallery .reveal {
  opacity: 0;
  transform: translateY(-100px); /* inicia acima, como no original */
}

/* Animação quando visível */
#gallery .reveal.visible {
  animation: elasticFromTop 2.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Stagger (mantendo os delays originais) */
#gallery .about-text .reveal:nth-child(1) { animation-delay: 0.1s; }
#gallery .about-text .reveal:nth-child(2) { animation-delay: 0.3s; }
#gallery img.reveal { animation-delay: 0.5s; }

/* Outros estilos */
#gallery h3 {
  font-size: 22px;
  margin: 0 0 20px;
}

#gallery h2 {
  position: relative;
  margin-bottom: 15px;
  padding-bottom: 15px;
  text-transform: none;
  color: var(--white-color);
  font-family: "Montserrat", Sans-serif;
  font-size: 50px;
  font-weight: 100;
  line-height: 53px;
}

#gallery h2::after {
  position: absolute;
  content: "";
  height: 4px;
  width: 60px;
  bottom: 0;
  left: 0;
}

#gallery img {
  margin-top: -30%;
  border-right: 0;
}

/* Para telas menores que 768px */
@media (max-width: 768px) {
  #gallery img {
    margin-top: 40px !important; /* sobrescreve o margin-top negativo */
  }
}