/* Garrafa 3D girando no topo (js/hero3d.js) */
.zera-spin {
  position: relative;
  width: 150px;
  aspect-ratio: 1 / 3.5;
  height: auto;
  margin: 60px 40px 0 30px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none; /* nada de "puxar a imagem" do navegador */
}
.zera-spin img, .zera-spin canvas { -webkit-user-drag: none; user-select: none; }
.zera-spin.is-dragging { cursor: grabbing; }

/* área de controle maior que a garrafa (mesmo tamanho do palco 3D) */
.zera-spin::before {
  content: "";
  position: absolute;
  inset: -8% -30%;
  z-index: 3;
}

.zera-spin__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: opacity .6s ease;
}
.zera-spin.is-ready .zera-spin__fallback { opacity: 0; }

/* palco maior que a garrafa, para a inclinação e a flutuação não cortarem */
.zera-spin__stage {
  position: absolute;
  inset: -12% -40%;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s ease;
}
.zera-spin__stage canvas { display: block; width: 100%; height: 100%; }
.zera-spin.is-ready .zera-spin__stage { opacity: 1; }

/* "fantasma" desfocado girando atrás, deslocado para o alto e para a esquerda */
.zera-spin__ghost {
  position: absolute;
  z-index: 1;
  inset: -12% -40%;
  width: 180%;
  height: 124%;
  transform: translate(-22%, -10%) rotate(-10deg) scale(1.2);
  filter: blur(12px) saturate(1.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
}
.zera-spin.is-ready .zera-spin__ghost { opacity: .35; }

/* sombra suave no "chão" acompanhando a flutuação */
.zera-spin::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -9%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 50, 70, .35), rgba(0, 50, 70, 0));
  /* --bob vem do JS (-1 embaixo, 1 no alto): quanto mais alto, menor a sombra */
  transform: scaleX(calc(.91 - var(--bob, 0) * .09));
  opacity: calc(.72 - var(--bob, 0) * .18);
  z-index: 0;
}

@media screen and (max-width: 991px) {
  .zera-spin { width: 140px; margin: 10px 0 40px; }
}
@media screen and (max-width: 479px) {
  .zera-spin { width: 110px; margin: 0 0 30px; }
}