/* SKYTAG product 3D rotation — works with SVG via CSS transform.
   Single image rotating around Y-axis with perspective for 3D feel.
   Pauses on hover for inspection. Respects prefers-reduced-motion. */

.skytag-3d-wrap {
  perspective: 1200px;
  -webkit-perspective: 1200px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

.skytag-3d {
  width: 100%;
  max-width: 360px;
  height: auto;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  animation: skytag-rotate-y 8s linear infinite;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.12));
  will-change: transform;
}

@keyframes skytag-rotate-y {
  0%   { transform: perspective(1200px) rotateY(0deg); }
  100% { transform: perspective(1200px) rotateY(360deg); }
}

.skytag-3d:hover {
  animation-play-state: paused;
  cursor: grab;
}

@media (prefers-reduced-motion: reduce) {
  .skytag-3d {
    animation: none;
    transform: perspective(1200px) rotateY(-12deg);
  }
}

/* Product hero container — tighter sizing on dedicated product pages */
.product-img .skytag-3d {
  max-width: 460px;
  max-height: 460px;
}
.product-img .skytag-3d-wrap {
  width: 100%;
  height: 100%;
}

/* Smaller preview cards on homepage / products page */
.product-preview-img .skytag-3d {
  max-width: 220px;
}