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

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

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

/* Optimize PAR LED 3D rendering for smooth dragging */
.parled-positioner-app:active .parled-3d-wrapper,
.parled-positioner-app:active .par-fixture,
.parled-positioner-app:active .par-body,
.parled-positioner-app:active .par-light-container,
.parled-positioner-app:active .par-light-cone {
  transition: none !important;
}

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

/* PAR fixture body */
.par-fixture {
  position: absolute;
  left: -35px;
  width: 70px;
  height: 70px;
  transform-style: preserve-3d;
  transition: top 0.3s ease;
}

/* Mount positions */
.par-fixture.mount-top {
  top: -140px;
}
.par-fixture.mount-top .par-bracket {
  top: -25px;
}
.par-fixture.mount-top .par-light-cone {
  top: 0;
  background: linear-gradient(180deg, 
    rgba(var(--par-color-rgb), calc(var(--par-dimmer) * 0.85)) 0%, 
    rgba(var(--par-color-rgb), calc(var(--par-dimmer) * 0.2)) 50%, 
    rgba(var(--par-color-rgb), 0) 100%
  );
  clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
  transform-origin: 50% 0%;
}

.par-fixture.mount-bottom {
  top: 140px;
}
.par-fixture.mount-bottom .par-bracket {
  bottom: -25px;
}
.par-fixture.mount-bottom .par-light-cone {
  top: -550px;
  background: linear-gradient(0deg, 
    rgba(var(--par-color-rgb), calc(var(--par-dimmer) * 0.85)) 0%, 
    rgba(var(--par-color-rgb), calc(var(--par-dimmer) * 0.2)) 50%, 
    rgba(var(--par-color-rgb), 0) 100%
  );
  clip-path: polygon(0% 0%, 100% 0%, 70% 100%, 30% 100%);
  transform-origin: 50% 100%;
}

/* Bracket/Yoke */
.par-bracket {
  position: absolute;
  left: -10px;
  width: 90px;
  height: 35px;
  border: 3px solid #555;
  border-radius: 6px;
  box-shadow: 0 0 5px #000;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* PAR body - aluminum cast */
.par-body {
  position: absolute;
  width: 70px;
  height: 70px;
  background: radial-gradient(circle, #333 0%, #111 80%);
  border: 2px solid #555;
  border-radius: 50%;
  transform-style: preserve-3d;
  box-shadow: inset 0 0 12px #000, 0 0 10px rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.05s ease-out;
}

/* LED matrix */
.led-matrix {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #0a0a0a;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 5px;
  border: 1px solid #222;
  pointer-events: none;
}

.led-node {
  background: rgb(var(--par-color-rgb));
  border-radius: 50%;
  box-shadow: 0 0 6px rgb(var(--par-color-rgb));
  opacity: calc(0.2 + var(--par-dimmer) * 0.8);
}

/* Light beam container */
.par-light-container {
  position: absolute;
  left: 33px;
  transform-style: preserve-3d;
  pointer-events: none;
}

.par-light-cone {
  position: absolute;
  left: -125px;
  width: 250px;
  height: 550px;
  filter: blur(8px);
  mix-blend-mode: screen;
}

.par-light-cross {
  transform: rotateY(90deg);
}