@import "./theme.css";

/* Gallery Section — fundo em layers está em style.css */
#gallery {
  position: relative;
  z-index: 2;
  overflow: visible;
  padding-top: clamp(2rem, 6vw, 5rem);
}

#gallery .row {
  overflow: visible;
}

#gallery .gallery-phone-wrap {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* revealUpFade em theme.css */

/* Estado inicial */
#gallery .reveal {
  opacity: 0;
  transform: translate3d(0, 56px, 0);
}

/* Animação quando visível */
#gallery .reveal.visible {
  animation: revealUpFade var(--dur-reveal) var(--ease-reveal) forwards;
}

/* Stagger */
#gallery .about-text .reveal:nth-child(1) {
  animation-delay: 0.08s;
}
#gallery .about-text .reveal:nth-child(2) {
  animation-delay: 0.22s;
}
#gallery img.reveal {
  animation-delay: 0.38s;
}

/* 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: -32%;
  max-width: 100%;
  height: auto;
  border-right: 0;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 24px 48px rgba(13, 31, 45, 0.35));
}

/* Para telas menores que 768px */
@media (max-width: 768px) {
  #gallery {
    padding-top: 2rem;
  }

  #gallery img {
    margin-top: 32px !important;
    filter: drop-shadow(0 12px 24px rgba(13, 31, 45, 0.25));
  }
}