/* Non-critical styles - loaded asynchronously after initial render */
/* Animations and motion-only utilities that do not affect layout */

@keyframes product-spin {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes shadow-pulse {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) scaleX(1); }
  25% { opacity: 0.2; transform: translateX(-50%) scaleX(0.85); }
  50% { opacity: 0.5; transform: translateX(-50%) scaleX(1.05); }
  75% { opacity: 0.25; transform: translateX(-50%) scaleX(0.9); }
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-12px) rotate(0.5deg); }
  66% { transform: translateY(-6px) rotate(-0.3deg); }
}

.hero-float {
  animation: hero-float 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero-float {
    animation: none;
  }
}

.product-spin-container {
  width: 560px;
  height: 420px;
}

.product-spin-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: product-spin 12s linear infinite;
}

.product-spin-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-spin-back {
  transform: rotateY(180deg);
}

.product-shadow-pulse {
  animation: shadow-pulse 12s linear infinite;
}

.product-spin-container:hover .product-spin-card {
  animation-play-state: paused;
}