/* Line Array Speaker 3D styles - ONLY for linearray device */

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

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

/* Optimize Line Array 3D rendering for smooth dragging */
.linearray-positioner-app:active .linearray-3d-wrapper,
.linearray-positioner-app:active .array-group,
.linearray-positioner-app:active .array-box,
.linearray-positioner-app:active .box-face {
  transition: none !important;
}

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

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

.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;
}

/* 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);
}

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

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

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