/* ==========================================================================
   Carrossel de polaroids — usado em Experiência (Ambientação/Empório) e
   em Eventos. Mesmo comportamento da seção Favoritos: uma foto por vez,
   autoloop de 3s e pausa ao passar o mouse (script genérico js/carousel.js,
   que já opera em qualquer [data-carousel]).
   Cada polaroid tem sua própria inclinação fixa (--rot em cada <img>,
   ver HTML) — só rotate, nunca flip, pra nunca inverter a imagem. No
   hover, a polaroid ativa aumenta de escala como um todo, mantendo a
   inclinação.
   ========================================================================== */
.polaroid-carousel {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin-inline: auto;
  aspect-ratio: 4501 / 6251;
}

/* Quando o carrossel mistura fotos horizontais (ex: eventos), a proporção
   fica um pouco mais larga/curta pra não encolher demais a foto deitada,
   e o carrossel inteiro fica um pouco maior */
.polaroid-carousel--wide {
  max-width: 570px;
  aspect-ratio: 4 / 3.5;
}

.polaroid-carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: rotate(var(--rot, 0deg)) scale(1);
  filter: drop-shadow(0 10px 18px rgba(42, 27, 18, 0.18));
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.4s var(--ease-out);
}

.polaroid-carousel img.is-active {
  opacity: 1;
}

/* Só em dispositivos com hover de verdade (mouse) — em touch, o toque
   não deve "prender" a polaroid ampliada até tocar de novo */
@media (hover: hover) and (pointer: fine) {
  .polaroid-carousel:hover img.is-active {
    transform: rotate(var(--rot, 0deg)) scale(1.08);
  }
}

/* Variante com giro 3D no próprio eixo ao trocar de foto (Experiência): a
   polaroid ativa vira de lado, revelando a próxima como se girasse no ar
   — sem encolher nem sair voando, só a rotação em profundidade. As
   classes is-leaving/is-entering são transitórias, aplicadas e removidas
   pelo js/carousel.js a cada troca; em repouso é só a polaroid ativa,
   com sua inclinação e o zoom no hover de sempre. */
.polaroid-carousel--wheel3d {
  perspective: 1200px;
}

.polaroid-carousel--wheel3d img {
  backface-visibility: hidden;
  transform: rotate(var(--rot, 0deg)) rotateY(0deg) scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .polaroid-carousel--wheel3d:hover img.is-active {
    transition: transform 0.4s var(--ease-out);
    transform: rotate(var(--rot, 0deg)) rotateY(0deg) scale(1.16);
  }
}

.polaroid-carousel--wheel3d img.is-leaving {
  animation: polaroid-flip-out 0.7s var(--ease-out) forwards;
}

.polaroid-carousel--wheel3d img.is-entering {
  animation: polaroid-flip-in 0.7s var(--ease-out) forwards;
}

@keyframes polaroid-flip-out {
  0% {
    transform: rotate(var(--rot, 0deg)) rotateY(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(var(--rot, 0deg)) rotateY(92deg) scale(0.96);
    opacity: 0;
  }
}

@keyframes polaroid-flip-in {
  0% {
    transform: rotate(var(--rot, 0deg)) rotateY(-92deg) scale(0.96);
    opacity: 0;
  }
  100% {
    transform: rotate(var(--rot, 0deg)) rotateY(0deg) scale(1);
    opacity: 1;
  }
}