/* product-mockup.css - interaktiver 3D-USB-Stick (Three.js) im Hero */

.stick-glow {
  position: absolute;
  width: 300px; height: 340px;
  background: radial-gradient(circle, rgba(246,163,0,0.3), transparent 70%);
  filter: blur(24px);
  animation: pulse-glow 3s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

#usb-3d-container {
  position: relative;
  z-index: 1;
  width: min(420px, 90vw);
  height: 460px;
  user-select: none;
  -webkit-user-select: none;
}
#usb-3d-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.usb-3d-hint {
  position: relative;
  z-index: 1;
  margin-top: -6px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  text-align: center;
  pointer-events: none;
}

@media (max-width: 960px) {
  #usb-3d-container { height: 360px; }
  .stick-glow { width: 220px; height: 250px; }
}