/* Estilos da Galeria 3D (Mobile-First) */

/* Base (Celular / Telas menores) */
.galeria-3d {
  padding: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

.galeria-header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 0 1rem;
}

.galeria-header h2 {
  font-family: var(--font-title);
  font-size: var(--font-size-h1);
  font-weight: 700;
  color: var(--color-primary); /* Título em tom escuro */
  line-height: var(--lh-title);
  margin-bottom: 0.5rem;
}

.galeria-header p {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  color: var(--color-text-medium);
  max-width: 400px;
  margin: 0 auto;
  line-height: var(--lh-body);
}

.scene,
.a3d {
  display: grid;
}

.scene {
  margin: -6em 0;
  width: 100%;
  height: 52vh; /* Altura da cena no mobile ajustada para a nova escala de imagem */
  overflow: hidden;
  perspective: 20em; /* Perspectiva mais baixa (20em) para aumentar a profundidade e curvatura 3D no mobile */
  place-content: center; /* Centraliza a cena horizontalmente e verticalmente */
  -webkit-mask: linear-gradient(90deg, transparent, #000 20% 80%, transparent);
  mask: linear-gradient(90deg, transparent, #000 20% 80%, transparent);
}

.a3d {
  place-self: center;
  transform-style: preserve-3d;
  animation: ry 32s linear infinite;
}

@keyframes ry {
  to {
    transform: rotateY(1turn); /* Rotação 3D horizontal */
  }
}

.card {
  --w: 19em; /* Aumentado de 10em para 13em no mobile para dar mais destaque às fotos */
  --ba: calc(1turn / var(--n));
  grid-area: 1 / 1;
  width: var(--w);
  aspect-ratio: 7 / 10;
  object-fit: cover;
  border-radius: 1em; /* Cantos proporcionais ao tamanho menor */
  backface-visibility: hidden;
  transform: rotateY(calc(var(--i) * var(--ba)))
    translateZ(calc(-1 * (0.5 * var(--w) + 0.5em) / tan(0.5 * var(--ba))));
}

/* Media Queries para Telas Maiores (Desktop / Tablets) */
@media (min-width: 769px) {
  .galeria-3d {
    padding: 10rem 0 8rem 0;
  }

  .galeria-header {
    margin-bottom: 3rem;
  }

  .galeria-header p {
    max-width: 400px;
  }

  .scene {
    margin: -13em 0;
    height: 100vh; /* Altura ampliada no desktop */
    perspective: 32em; /* Perspectiva mais suave para telas maiores */
  }

  .card {
    --w: 17.5em; /* Largura ampliada para desktop */
    border-radius: 1.5em;
  }
}