/*
 * ============================================================
 * SVARTLIND NEXTGEN · VAKTEN DEMO
 * SCHIEBETOR_STANDARD + SCHIEBETOR_FAA
 *
 * Quelle:
 * /home/www/vakten/ui/css/vakten-renderers.css
 *
 * 2026-09-17
 * ============================================================
 */

/* ==========================================================
   SCHIEBETOR_STANDARD
   Ein massiver Torflügel fährt von links nach rechts zu.
   OPEN   = links außerhalb der Öffnung
   CLOSED = Öffnung vollständig geschlossen
   ========================================================== */

.live-unit-renderer[data-renderer-key="SCHIEBETOR_STANDARD"]
.live-door-scene,

.live-unit-renderer[data-renderer-key="SCHIEBETOR_STANDARD"]
.live-fridge-scene {
  display: none;
}


.live-sliding-gate-scene {
  position: relative;

  width: min(92%, 720px);
  aspect-ratio: 1.28 / 1;

  display: none;

  overflow: hidden;
}


.live-unit-renderer[data-renderer-key="SCHIEBETOR_STANDARD"]
.live-sliding-gate-scene {
  display: block;
}


.live-sliding-gate-wall {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.035),
      rgba(255,255,255,0.01)
    );

  border-radius: 6px;
}


.live-sliding-gate-opening {
  position: absolute;

  left: 18%;
  right: 8%;
  top: 14%;
  bottom: 10%;

  background:
    radial-gradient(
      ellipse at 50% 70%,
      rgba(36, 42, 39, 0.7),
      rgba(5, 7, 6, 0.98) 72%
    );

  border:
    5px solid
    rgba(91, 98, 94, 0.82);

  box-shadow:
    inset 0 0 28px rgba(0,0,0,0.72),
    0 18px 36px rgba(0,0,0,0.38);

  overflow: hidden;
}


.live-sliding-gate-rail {
  position: absolute;

  left: 5%;
  right: 5%;
  top: 9%;

  height: 4.5%;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      #3f4542 0%,
      #171a18 46%,
      #050606 100%
    );

  box-shadow:
    0 4px 9px rgba(0,0,0,0.65);
}


.live-sliding-gate-leaf {
  position: absolute;

  top: 14%;
  bottom: 10%;

  width: 74%;

  /*
   * CLOSED = 18%
   * OPEN   = -58%
   */
  left:
    var(
      --sliding-gate-left,
      18%
    );

  background:
    linear-gradient(
      90deg,
      #b7bab8 0%,
      #e1e2e1 8%,
      #c8cac9 48%,
      #eff0ef 86%,
      #aeb2b0 100%
    );

  border:
    2px solid
    rgba(80, 84, 82, 0.9);

  box-shadow:
    8px 10px 22px rgba(0,0,0,0.48);

  transition:
    left 1.15s
    cubic-bezier(.45,.05,.25,1);
}


.live-sliding-gate-leaf::before,
.live-sliding-gate-leaf::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  height: 1px;

  background:
    rgba(86, 89, 87, 0.65);
}


.live-sliding-gate-leaf::before {
  top: 34%;
}


.live-sliding-gate-leaf::after {
  top: 67%;
}


.live-sliding-gate-handle {
  position: absolute;

  right: 4.5%;
  top: 47%;

  width: 3.4%;
  height: 13%;

  min-width: 11px;

  border-radius: 3px;

  background:
    linear-gradient(
      90deg,
      #161817,
      #3c403e,
      #111312
    );

  box-shadow:
    1px 2px 6px rgba(0,0,0,0.48);
}


.live-sliding-gate-floor {
  position: absolute;

  left: 8%;
  right: 4%;
  bottom: 6%;

  height: 4%;

  border-radius: 50%;

  background:
    rgba(0,0,0,0.32);

  filter: blur(7px);
}


.live-unit-renderer[data-renderer-key="SCHIEBETOR_STANDARD"]
.live-sliding-gate-scene[data-state="OPEN"]
.live-sliding-gate-leaf,

.live-unit-renderer[data-renderer-key="SCHIEBETOR_FAA"]
.live-sliding-gate-scene[data-state="OPEN"]
.live-sliding-gate-leaf {
  --sliding-gate-left: -58%;
}


.live-unit-renderer[data-renderer-key="SCHIEBETOR_STANDARD"]
.live-sliding-gate-scene[data-state="CLOSED"]
.live-sliding-gate-leaf,

.live-unit-renderer[data-renderer-key="SCHIEBETOR_FAA"]
.live-sliding-gate-scene[data-state="CLOSED"]
.live-sliding-gate-leaf {
  --sliding-gate-left: 18%;
}


.live-unit-renderer[data-renderer-key="SCHIEBETOR_STANDARD"]
.live-sliding-gate-scene[data-state="UNKNOWN"] {
  filter: grayscale(0.75);
  opacity: 0.62;
}


/* ==========================================================
   SCHIEBETOR_FAA
   Schiebetor + Fördertechnik + Lichtschranke
   ========================================================== */

.live-unit-renderer[data-renderer-key="SCHIEBETOR_FAA"]
.live-door-scene,

.live-unit-renderer[data-renderer-key="SCHIEBETOR_FAA"]
.live-fridge-scene {
  display: none;
}


.live-unit-renderer[data-renderer-key="SCHIEBETOR_FAA"]
.live-sliding-gate-scene {
  display: block;
}


/*
 * Fördertechnik liegt HINTER dem beweglichen Tor.
 */
.live-sliding-gate-conveyor {
  position: absolute;

  left: 50%;
  bottom: 0;

  height: 100%;
  width: auto;
  max-width: none;

  z-index: 3;

  display: none;

  object-fit: contain;

  transform:
    translateX(-50%);

  pointer-events: none;
}


.live-unit-renderer[data-renderer-key="SCHIEBETOR_FAA"]
.live-sliding-gate-conveyor {
  display: block;
}


/*
 * Vorderer Teil der Fördertechnik.
 *
 * Dieser Layer liegt VOR dem Schiebetor.
 * Hintergrund und Vordergrund benutzen dieselbe
 * Bildfläche und sind dadurch deckungsgleich.
 */
.live-sliding-gate-conveyor-front {
  position: absolute;

  left: 50%;
  bottom: 0;

  height: 100%;
  width: auto;
  max-width: none;

  z-index: 7;

  display: none;

  object-fit: contain;

  transform:
    translateX(-50%);

  pointer-events: none;
}


.live-unit-renderer[data-renderer-key="SCHIEBETOR_FAA"]
.live-sliding-gate-conveyor-front {
  display: block;
}


/*
 * Öffnungsrahmen liegt vor Fördertechnik,
 * aber hinter Laser und Torblatt.
 */
.live-unit-renderer[data-renderer-key="SCHIEBETOR_FAA"]
.live-sliding-gate-opening {
  z-index: 2;
}


/*
 * Lichtschranke.
 *
 * OPEN   = grün
 * CLOSED = aus
 *
 * ROT kommt später über ein reales Belegt-Signal.
 */
.live-sliding-gate-laser {
  position: absolute;

  /*
   * Von linker bis rechter Wandlaibung.
   * FT_Vorn liegt darüber und verdeckt den Strahl
   * dort, wo Fördergut / Vordergrund davor liegt.
   */
  left: 18%;
  right: 8%;
  top: calc(61% - 38px);

  height: 2px;

  z-index: 4;

  display: none;

  border-radius: 999px;

  background:
    rgba(39, 255, 102, 0.88);

  box-shadow:
    0 0 5px rgba(39,255,102,0.95),
    0 0 12px rgba(39,255,102,0.72),
    0 0 22px rgba(39,255,102,0.42);

  pointer-events: none;
}


/*
 * Wandernder Lichtpunkt.
 * Rein visuelle LIVE-Animation – keine Messgröße.
 */
.live-sliding-gate-laser::after {
  content: "";

  position: absolute;

  left: 0;
  top: 50%;

  width: 12px;
  height: 12px;

  border-radius: 50%;

  background:
    rgb(106, 255, 152);

  box-shadow:
    0 0 6px rgba(106,255,152,1),
    0 0 14px rgba(39,255,102,0.95),
    0 0 28px rgba(39,255,102,0.62);

  transform:
    translate(-50%, -50%);

  animation:
    vaktenFaaLaserPulse 3.4s
    linear
    infinite;
}


@keyframes vaktenFaaLaserPulse {
  0% {
    left: 0%;
  }

  100% {
    left: 100%;
  }
}


.live-unit-renderer[data-renderer-key="SCHIEBETOR_FAA"]
.live-sliding-gate-scene[data-state="OPEN"]
.live-sliding-gate-laser {
  display: block;
}


/*
 * Torblatt liegt als Action-Layer ganz oben.
 */
.live-unit-renderer[data-renderer-key="SCHIEBETOR_FAA"]
.live-sliding-gate-leaf {
  z-index: 6;
}


.live-unit-renderer[data-renderer-key="SCHIEBETOR_FAA"]
.live-sliding-gate-rail {
  z-index: 9;
}


/* ==========================================================
   SCHIEBETOR_FAA · FÖRDERGUT / BELEGUNG
   FREE      = Kiste vorn
   OCCUPIED  = Kiste im Schließbereich
   ========================================================== */

.live-sliding-gate-crate {
  position: absolute;

  left: 50%;
  bottom: -2%;

  width: 48%;
  height: auto;

  z-index: 8;

  transform:
    translateX(-50%)
    scale(1);

  transform-origin:
    center bottom;

  transition:
    bottom 1.8s cubic-bezier(.45,.05,.25,1),
    transform 1.8s cubic-bezier(.45,.05,.25,1);

  pointer-events: none;
}


/*
 * Fördergut fährt perspektivisch nach hinten
 * in den überwachten Schließbereich.
 */
.live-unit-renderer[data-renderer-key="SCHIEBETOR_FAA"]
.live-sliding-gate-scene[data-occupancy="OCCUPIED"]
.live-sliding-gate-crate {
  bottom: 24%;

  transform:
    translateX(-50%)
    scale(0.62);
}


/* ----------------------------------------------------------
   Laser FREE
   ---------------------------------------------------------- */

.live-unit-renderer[data-renderer-key="SCHIEBETOR_FAA"]
.live-sliding-gate-scene[data-occupancy="FREE"]
.live-sliding-gate-laser {
  background:
    rgba(39, 255, 102, 0.88);

  box-shadow:
    0 0 5px rgba(39,255,102,0.95),
    0 0 12px rgba(39,255,102,0.72),
    0 0 22px rgba(39,255,102,0.42);
}


.live-unit-renderer[data-renderer-key="SCHIEBETOR_FAA"]
.live-sliding-gate-scene[data-occupancy="FREE"]
.live-sliding-gate-laser::after {
  background:
    rgb(106,255,152);

  box-shadow:
    0 0 6px rgba(106,255,152,1),
    0 0 14px rgba(39,255,102,0.95),
    0 0 28px rgba(39,255,102,0.62);
}


/* ----------------------------------------------------------
   Laser OCCUPIED
   ---------------------------------------------------------- */

.live-unit-renderer[data-renderer-key="SCHIEBETOR_FAA"]
.live-sliding-gate-scene[data-occupancy="OCCUPIED"]
.live-sliding-gate-laser {
  background:
    rgba(239,68,68,0.96);

  box-shadow:
    0 0 6px rgba(239,68,68,0.96),
    0 0 14px rgba(239,68,68,0.76),
    0 0 26px rgba(239,68,68,0.48);
}


.live-unit-renderer[data-renderer-key="SCHIEBETOR_FAA"]
.live-sliding-gate-scene[data-occupancy="OCCUPIED"]
.live-sliding-gate-laser::after {
  background:
    rgb(255,92,92);

  box-shadow:
    0 0 7px rgba(255,92,92,1),
    0 0 16px rgba(239,68,68,0.96),
    0 0 30px rgba(239,68,68,0.68);
}