/* ==========================================================================
   LOOKITSGRAPHIC 3D — visuels d'état vide (cube filaire + plan de coupe)
   Inspiré de empty_state_3d_studio_merged_wireframe_slicer.html
   ========================================================================== */

.lig-3d-scene,
.lig-3d-mini {
  --lig-ink: var(--ink, #11110f);
  --lig-acc: var(--coral, #ff6038);
  --lig-gs: rgba(17, 17, 15, 0.2);
}

/* --- Scène pleine (zone de prévisualisation vide) ----------------------- */

.lig-3d-scene {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 340px;
  min-height: 0;
  padding: 0;
  overflow: visible;
}

.lig-3d-scene .lig-3d-stage {
  perspective: 680px;
  width: 170px;
  height: 148px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  animation: lig-float 7s ease-in-out infinite;
}

.lig-3d-scene .lig-tag {
  position: relative;
  z-index: 4;
  margin-top: 12px;
  padding: 9px 14px;
  font: 700 12px/1.35 "Courier New", ui-monospace, monospace;
  letter-spacing: 0.05em;
  font-style: normal;
  transform: none;
  color: var(--lig-ink);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  background: var(--lig-acc);
  border: 2px solid var(--lig-ink);
  pointer-events: none;
}

/* --- Version mini (icône de la dropzone) -------------------------------- */

.lig-3d-mini {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lig-3d-mini .lig-3d-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 680px;
  animation: lig-float 7s ease-in-out infinite;
}

.lig-3d-mini .lig-3d-cube {
  width: 58px;
  height: 58px;
}

.lig-3d-mini .lig-f1 { transform: translateZ(29px); }
.lig-3d-mini .lig-f2 { transform: rotateY(180deg) translateZ(29px); }
.lig-3d-mini .lig-f3 { transform: rotateY(90deg) translateZ(29px); }
.lig-3d-mini .lig-f4 { transform: rotateY(-90deg) translateZ(29px); }
.lig-3d-mini .lig-f5 { transform: rotateX(90deg) translateZ(29px); }
.lig-3d-mini .lig-f6 { transform: rotateX(-90deg) translateZ(29px); }

.lig-3d-mini .lig-slice {
  left: -14px;
  top: -14px;
  width: 86px;
  height: 86px;
}

@keyframes lig-float {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(4px); }
}

/* --- Cube filaire partagé --------------------------------------------- */

.lig-3d-cube {
  width: 92px;
  height: 92px;
  position: relative;
  transform-style: preserve-3d;
  animation: lig-spin 16s linear infinite;
}

.lig-3d-cube > i {
  position: absolute;
  inset: 0;
  border: 2px solid var(--lig-ink);
}

.lig-f1 { transform: translateZ(46px); }
.lig-f2 { transform: rotateY(180deg) translateZ(46px); }
.lig-f3 { transform: rotateY(90deg) translateZ(46px); }
.lig-f4 { transform: rotateY(-90deg) translateZ(46px); }
.lig-f5 { transform: rotateX(90deg) translateZ(46px); }
.lig-f6 { transform: rotateX(-90deg) translateZ(46px); }

.lig-str {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(transparent 0 5px, var(--lig-gs) 5px 6px);
  clip-path: inset(100% 0 0 0);
  animation: lig-fillup 5.2s ease-in-out infinite;
}

.lig-vx {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--lig-acc);
  border: 2px solid var(--lig-ink);
  top: -4px;
  left: -4px;
}

.lig-vx.lig-r { left: auto; right: -4px; }
.lig-vx.lig-d { top: auto; bottom: -4px; }

.lig-slice {
  position: absolute;
  left: -22px;
  top: -22px;
  width: 136px;
  height: 136px;
  border: 2px solid var(--lig-ink);
  background: var(--lig-acc);
  opacity: 0.86;
  animation: lig-cut 5.2s ease-in-out infinite;
}

@keyframes lig-spin {
  0% { transform: rotateX(-22deg) rotateY(0deg); }
  100% { transform: rotateX(-22deg) rotateY(360deg); }
}

@keyframes lig-fillup {
  0%, 100% { clip-path: inset(100% 0 0 0); }
  50% { clip-path: inset(0 0 0 0); }
}

@keyframes lig-cut {
  0%, 100% { transform: rotateX(90deg) translateZ(-50px); }
  50% { transform: rotateX(90deg) translateZ(50px); }
}

/* --- Conteneurs existants — on retire l'ancien cube violet « 3D » ------- */

.drop-icon {
  width: 68px;
  height: 68px;
  margin-bottom: 14px;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
  display: block;
}

.drop-icon span {
  display: none;
}

.empty-cube {
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
  display: block;
  overflow: visible;
}

.empty-cube span:not(.lig-str):not(.lig-vx):not(.lig-slice):not(.lig-tag) {
  display: none;
}

.empty-state {
  min-width: min(100%, 340px);
}

.empty-state > strong {
  display: block;
  max-width: 28ch;
  margin-top: 18px;
  font-family: Arial Black, Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .lig-3d-scene *,
  .lig-3d-mini * {
    animation: none !important;
  }

  .lig-str {
    clip-path: inset(40% 0 0 0);
  }

  .lig-slice {
    transform: rotateX(90deg) translateZ(0);
  }
}