/* LED 3D styles - ONLY for LED device */

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

.led-positioner:active {
  cursor: grabbing;
}

/* Optimize LED rendering for smooth dragging - disable transitions during drag */
.led-positioner:active .led-box-3d,
.led-positioner:active .led-face,
.led-positioner:active .led-media-container,
.led-positioner:active .led-grid-overlay,
.led-positioner:active .led-pixel-overlay,
.led-positioner:active .led-support-structure,
.led-positioner:active .led-stand-base,
.led-positioner:active .black-skirting-drape {
  transition: none !important;
}

/* Optimize nested elements for better performance */
.led-media-container img, .led-media-container video {
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.led-grid-overlay, .led-pixel-overlay {
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.led-border { position: absolute; box-shadow: 0 0 12px var(--led-color), 0 0 24px var(--led-color); z-index: 10; display: block; }
.led-border.front { top: 0; left: 0; width: 100%; height: 4px; }
.led-border.left { top: 0; left: 0; width: 4px; height: 100%; }
.led-border.right { top: 0; right: 0; width: 4px; height: 100%; }
.led-border.is-off { display: none; }
.led-3d-wrapper { display: flex; flex-direction: column; align-items: center; transform-style: preserve-3d; }
.led-box-3d { position: relative; transform-style: preserve-3d; transition: transform 0.05s ease-out; z-index: 10; }
.led-face { position: absolute; box-sizing: border-box; border: 1px solid #222; }
.led-face-front { background: #000; transform: translateZ(calc(var(--led-depth) / 2)); box-shadow: 0 0 40px var(--accent-glow); display: flex; flex-direction: column; overflow: hidden; transform-style: preserve-3d; justify-content: center; align-items: center; }
.led-face-back { background: #0a0a0d; border: 1px solid #1a1a24; transform: rotateY(180deg) translateZ(calc(var(--led-depth) / 2)); background-image: repeating-linear-gradient(0deg, #111 0px, #111 20px, #1a1a1a 21px); }
.led-face-left { background: #15151c; border: 1px solid #252530; transform: rotateY(-90deg) translateZ(calc(var(--led-depth) / 2)); }
.led-face-right { background: #111118; border: 1px solid #252530; transform: rotateY(90deg) translateZ(calc(var(--led-w) - (var(--led-depth) / 2))); }
.led-face-top { background: #1a1a24; border: 1px solid #252530; transform: rotateX(90deg) translateZ(calc(var(--led-depth) / 2)); }
.led-face-bottom { background: #08080c; border: 1px solid #252530; transform: rotateX(-90deg) translateZ(calc(var(--led-h) - (var(--led-depth) / 2))); }
.led-grid-overlay { position: absolute; top: 0; left: 0; display: grid; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
.cabinet-cell { border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 2px rgba(0,0,0,0.8); }
.led-pixel-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 5px 5px; pointer-events: none; z-index: 11; opacity: 0.75; }
.led-media-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #050505; }
.led-media-container img, .led-media-container video { width: 100%; height: 100%; object-fit: var(--fit-mode, contain); }
.stand-container { position: relative; width: 100%; height: calc(var(--stand-h) + 20px); display: flex; flex-direction: column; align-items: center; transform-style: preserve-3d; }
.led-support-structure { width: 100%; height: var(--stand-h); position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 10%; transform-style: preserve-3d; z-index: 1; }
.support-pole { width: 14px; height: 100%; background: linear-gradient(90deg, #050505 0%, #2a2a2a 50%, #000 100%); border-left: 1px solid #333; border-right: 1px solid #111; }
.led-stand-base { width: 100%; height: 20px; background: linear-gradient(180deg, #1c1c1c 0%, #0a0a0a 100%); border: 1px solid #2a2a2a; border-radius: 2px; box-shadow: 0 10px 25px rgba(0,0,0,0.9); position: relative; z-index: 2; }
.black-skirting-drape { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(90deg, #050507 0px, #18181c 8px, #0a0a0d 16px, #000000 24px); border-top: 2px solid #222; box-shadow: inset 0 15px 20px rgba(0,0,0,0.9); z-index: 5; display: block; border-bottom: 2px solid #111; }