/* Truss 3D styles - ONLY for truss device */

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

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

/* Optimize Truss 3D rendering for smooth dragging */
.truss-positioner-app:active .truss-box-3d,
.truss-positioner-app:active .truss-module,
.truss-positioner-app:active .truss-face {
  transition: none !important;
}
.truss-box-3d { position: relative; display: flex; flex-direction: column; transform-style: preserve-3d; transition: transform 0.05s ease-out; }
.truss-module { position: relative; width: var(--box-w); height: var(--cell-len); transform-style: preserve-3d; }
.truss-face { position: absolute; width: var(--box-w); height: var(--cell-len); box-sizing: border-box; overflow: hidden; filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5)); }
.truss-face-inner { position: relative; width: 100%; height: 100%; }
.truss-face-front  { transform: translateZ(calc(var(--box-w) / 2)); }
.truss-face-back   { transform: rotateY(180deg) translateZ(calc(var(--box-w) / 2)); }
.truss-face-left   { transform: rotateY(-90deg) translateZ(calc(var(--box-w) / 2)); }
.truss-face-right  { transform: rotateY(90deg) translateZ(calc(var(--box-w) / 2)); }
.truss-face::before, .truss-face::after { content: ''; position: absolute; background: var(--aluminum-shine-v); z-index: 10; }
.truss-face::before { top: 0; bottom: 0; left: 0; width: var(--pipe-thick); }
.truss-face::after  { top: 0; bottom: 0; right: 0; width: var(--pipe-thick); }
.pipe-horiz-top, .pipe-horiz-bottom { position: absolute; left: 0; right: 0; height: var(--pipe-thick); background: var(--aluminum-shine-h); z-index: 10; }
.pipe-horiz-top { top: 0; }
.pipe-horiz-bottom { bottom: 0; }
.diag-1 { position: absolute; top: 0; left: 0; width: var(--diag-length, 160%); height: var(--pipe-thick); background: var(--aluminum-shine-h); transform-origin: 0 0; transform: rotate(var(--diag-angle, 51.34deg)) translateY(calc(-0.5 * var(--pipe-thick))); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); z-index: 3; }
.diag-2 { position: absolute; bottom: 0; left: 0; width: var(--diag-length, 160%); height: var(--pipe-thick); background: var(--aluminum-shine-h); transform-origin: 0 100%; transform: rotate(calc(-1 * var(--diag-angle, 51.34deg))) translateY(calc(0.5 * var(--pipe-thick))); filter: brightness(0.65) contrast(1.1); z-index: 1; }