/* Beam 3D styles - ONLY for beam device */

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

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

/* Optimize Beam 3D rendering for smooth dragging */
.beam-positioner-app:active .beam-fixture-3d,
.beam-positioner-app:active .fixture-yoke,
.beam-positioner-app:active .fixture-base {
  transition: none !important;
}
.beam-fixture-3d { position: relative; width: 50px; height: 60px; transform-style: preserve-3d; transition: transform 0.05s ease-out; }

.beam-fixture-3d.mount-top { top: -40px; }
.beam-fixture-3d.mount-top .fixture-base { top: -12px; }
.beam-fixture-3d.mount-top .fixture-yoke { top: -14px; }
.beam-fixture-3d.mount-top .fixture-head { top: 18px; border-radius: 10px 10px 20px 20px; }
.beam-fixture-3d.mount-top .fixture-lens { bottom: 2px; }
.beam-fixture-3d.mount-top .light-beam-container { top: 34px; left: -50px; }
.beam-fixture-3d.mount-top .light-beam {
  top: 0;
  background: linear-gradient(180deg,
    rgba(var(--beam-color-rgb), calc(var(--beam-intensity) * 0.9)) 0%,
    rgba(var(--beam-color-rgb), calc(var(--beam-intensity) * 0.3)) 40%,
    rgba(var(--beam-color-rgb), 0) 100%
  );
  clip-path: polygon(45% 0%, 55% 0%, 100% 100%, 0% 100%);
  transform-origin: 50% 0%;
}
.beam-fixture-3d.mount-bottom { top: -20px; }
.beam-fixture-3d.mount-bottom .fixture-base { bottom: -12px; top: auto; }
.beam-fixture-3d.mount-bottom .fixture-yoke { bottom: -14px; top: auto; }
.beam-fixture-3d.mount-bottom .fixture-head { top: 6px; border-radius: 20px 20px 10px 10px; }
.beam-fixture-3d.mount-bottom .fixture-lens { top: 2px; bottom: auto; }
.beam-fixture-3d.mount-bottom .light-beam-container { bottom: 48px; top: auto; left: -50px; }
.beam-fixture-3d.mount-bottom .light-beam {
  bottom: -14px;
  top: auto;
  background: linear-gradient(0deg,
    rgba(var(--beam-color-rgb), calc(var(--beam-intensity) * 0.9)) 0%,
    rgba(var(--beam-color-rgb), calc(var(--beam-intensity) * 0.3)) 40%,
    rgba(var(--beam-color-rgb), 0) 100%
  );
  clip-path: polygon(45% 100%, 55% 100%, 100% 0%, 0% 0%);
  transform-origin: 50% 100%;
}
.fixture-base { position: absolute; left: 8px; width: 34px; height: 16px; background: linear-gradient(135deg, #2b3036 0%, #111 100%); border: 1px solid #444; border-radius: 3px; z-index: 5; }
.fixture-yoke { position: absolute; left: 5px; width: 40px; height: 36px; border: 3px solid #333; border-radius: 8px; background: transparent; z-index: 6; }
.fixture-head { position: absolute; left: 10px; width: 30px; height: 36px; background: linear-gradient(135deg, #1f232a 0%, #0d0f12 100%); border: 1px solid #555; z-index: 7; transform-style: preserve-3d; }
.fixture-lens { position: absolute; left: 5px; width: 18px; height: 18px; background: radial-gradient(circle, #fff 0%, var(--beam-color) 60%, #000 100%); border-radius: 50%; box-shadow: 0 0 10px var(--beam-color); z-index: 8; }
.light-beam-container { position: absolute; width: 150px; height: var(--beam-length, 350px); pointer-events: none; z-index: 4; transform-style: preserve-3d; }
.light-beam { position: absolute; left: -11px; width: 150px; height: 100%; filter: blur(2px); mix-blend-mode: screen; pointer-events: none; }
.light-beam-cross { transform: rotateY(90deg); }