/* Speaker Pole 3D styles - ONLY for speakerpole device */

/* Positioner styles for speakerpole */
.speakerpole-positioner-app {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: grab;
  will-change: transform, left, top;
}

.speakerpole-positioner-app:active {
  cursor: grabbing;
}

/* Optimize Speaker Pole 3D rendering for smooth dragging */
.speakerpole-positioner-app:active .speakerpole-3d-wrapper,
.speakerpole-positioner-app:active .speakerpole-system,
.speakerpole-positioner-app:active .array-group,
.speakerpole-positioner-app:active .array-box,
.speakerpole-positioner-app:active .sub-speaker,
.speakerpole-positioner-app:active .pole-container,
.speakerpole-positioner-app:active .pole-face,
.speakerpole-positioner-app:active .box-face {
  transition: none !important;
}

.speakerpole-3d-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-style: preserve-3d;
  transition: transform 0.05s ease-out;
}

.speakerpole-system {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-style: preserve-3d;
}

.array-group {
  display: flex;
  flex-direction: column;
  gap: -1px;
  transform-style: preserve-3d;
  margin-bottom: 0;
}

.array-box {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.05s ease-out;
}

.box-face {
  position: absolute;
  border: 1px solid #444;
  transform-origin: center center;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Array front face with speaker grill */
.array-face-front {
  background: linear-gradient(135deg, #2b2b2b 0%, #111 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.array-face-front::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: 
    radial-gradient(circle, #1a1a1a 30%, transparent 31%),
    repeating-linear-gradient(45deg, #111, #111 2px, #050505 2px, #050505 4px);
  background-size: 6px 6px, 100% 100%;
  border: 1px solid #333;
  border-radius: 2px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.9);
}

/* Pole container - 3D cylindrical pole using truss-style 4-face method */
.pole-container {
  width: 10px;
  position: relative;
  transform-style: preserve-3d;
  margin: 0 auto;
  pointer-events: none;
}

.pole-face {
  position: absolute;
  width: 10px;
  height: 100%;
  background: linear-gradient(90deg, #222, #555, #222);
  border: 1px solid #000;
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Create circular effect using 4 faces like truss */
.pole-face:nth-child(1) { transform: rotateY(0deg) translateZ(5px); }
.pole-face:nth-child(2) { transform: rotateY(90deg) translateZ(5px); }
.pole-face:nth-child(3) { transform: rotateY(180deg) translateZ(5px); }
.pole-face:nth-child(4) { transform: rotateY(270deg) translateZ(5px); }

/* Subwoofer */
.sub-speaker {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.05s ease-out;
}

.sub-face-front {
  background: linear-gradient(135deg, #222 0%, #0c0c0c 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}

.sub-grill-top {
  width: 100%;
  height: 50px;
  background: 
    radial-gradient(circle, #1a1a1a 30%, transparent 31%),
    repeating-linear-gradient(45deg, #111, #111 2px, #050505 2px, #050505 4px);
  background-size: 6px 6px, 100% 100%;
  border: 1px solid #333;
  border-radius: 3px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.9);
  pointer-events: none;
}

.sub-center-panel {
  width: 100%;
  height: 160px;
  background: #181818;
  border: 2px solid #2c2c2c;
  border-radius: 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
  pointer-events: none;
}

.sub-center-panel::before {
  content: '';
  width: 70%;
  height: 80%;
  background: linear-gradient(135deg, #202020, #121212);
  border: 2px solid #383838;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.sub-grill-bottom {
  width: 100%;
  height: 50px;
  background: 
    radial-gradient(circle, #1a1a1a 30%, transparent 31%),
    repeating-linear-gradient(45deg, #111, #111 2px, #050505 2px, #050505 4px);
  background-size: 6px 6px, 100% 100%;
  border: 1px solid #333;
  border-radius: 3px;
  position: relative;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.9);
  pointer-events: none;
}

/* Other faces */
.face-back { 
  background: #111; 
  border-color: #222; 
}

.face-top, .face-bottom { 
  background: #1a1a1a; 
}

.face-left, .face-right { 
  background: #151515; 
}