/* ==========================================================================
   HUD-Chrome — helles Labor
   --------------------------------------------------------------------------
   Zurueckhaltend: eine Kopfzeile, eine Fusszeile, zwei Haarlinien. Kein
   Rahmen, keine Ecken, keine Leuchtkanten. Was auffaellt, soll der Inhalt
   sein, nicht das Interface.
   ========================================================================== */

#backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--bg-0);
}

#app {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(1920 * var(--u));
  height: calc(1080 * var(--u));
}

/* Kurzes Aufhellen beim Erkennen einer Probe — ein Lichtwisch, kein Blitz. */
.bloom {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 95;
  background: radial-gradient(60% 60% at 50% 45%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  transition: opacity 620ms var(--ease-out);
}
.bloom.is-on {
  opacity: 0.75;
  transition-duration: 140ms;
}

/* --- Haarlinien ----------------------------------------------------------- */

.hud-rule {
  position: absolute;
  left: calc(64 * var(--u));
  right: calc(64 * var(--u));
  height: 1px;
  background: var(--line);
  z-index: 25;
}
.hud-rule--top { top: calc(96 * var(--u)); }
.hud-rule--bottom { bottom: calc(96 * var(--u)); }

/* --- Kopfzeile ------------------------------------------------------------ */

.hud-top {
  position: absolute;
  left: calc(64 * var(--u));
  right: calc(64 * var(--u));
  top: calc(30 * var(--u));
  height: calc(48 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 30;
}

.hud-top__brand {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
}
.hud-top__logo {
  height: calc(40 * var(--u));
  width: auto;
}
.hud-top__company {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(30 * var(--u));
  letter-spacing: -0.01em;
  color: var(--text);
}
.hud-top__divider {
  width: 1px;
  height: calc(24 * var(--u));
  background: var(--line-strong);
}
.hud-top__claim {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(20 * var(--u));
  letter-spacing: 0.02em;
  color: var(--text-3);
}

/* Rubrik in der Mitte: Text mit rotem Unterstrich statt Chip mit Schraegen */
.hud-top__chip {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(19 * var(--u));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  padding-bottom: calc(9 * var(--u));
  white-space: nowrap;
}
.hud-top__chip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(38 * var(--u));
  height: calc(2 * var(--u));
  margin-left: calc(-19 * var(--u));
  background: var(--accent);
}

.hud-top__status {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
}
.hud-top__uid {
  font-size: calc(15 * var(--u));
  color: var(--text-4);
}
.hud-top__status .mono {
  font-size: calc(15 * var(--u));
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text-3);
}

.statuslamp {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  border-radius: 50%;
  background: var(--text-4);
}
.statuslamp[data-state='idle']   { background: var(--text-4); }
.statuslamp[data-state='ready']  { background: var(--ok); }
.statuslamp[data-state='active'] { background: var(--accent); animation: lamp-pulse 2s ease-in-out infinite; }
.statuslamp[data-state='error']  { background: var(--warn); animation: lamp-pulse 1.2s ease-in-out infinite; }

@keyframes lamp-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* --- Fusszeile / Kapitel-Fortschritt -------------------------------------- */

.hud-bottom {
  position: absolute;
  left: calc(64 * var(--u));
  right: calc(64 * var(--u));
  bottom: calc(30 * var(--u));
  height: calc(48 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(30 * var(--u));
  z-index: 30;
}
.hud-bottom__label {
  min-width: calc(210 * var(--u));
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(17 * var(--u));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.hud-bottom__label.is-paused { color: var(--accent); }
.hud-bottom__booth {
  min-width: calc(250 * var(--u));
  text-align: right;
  font-size: calc(15 * var(--u));
  color: var(--text-4);
}

.rail {
  flex: 1;
  display: flex;
  gap: calc(6 * var(--u));
  height: calc(4 * var(--u));
}
.rail__seg {
  position: relative;
  flex: 1;
  background: var(--line);
  border-radius: calc(2 * var(--u));
  overflow: hidden;
}
.rail__seg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(var(--fill, 0));
  transform-origin: left;
}
.rail__seg[data-state='done']::after { --fill: 1; }

/* --- Produktebene ---------------------------------------------------------
   Bleibt ueber alle Kapitel bestehen und wandert nur. Dadurch "geht" die
   Probe zwischen den Kapiteln, statt hart zu schneiden.
   -------------------------------------------------------------------------- */

.product-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(700 * var(--u));
  height: calc(700 * var(--u));
  margin-left: calc(-350 * var(--u));
  margin-top: calc(-350 * var(--u));
  z-index: 15;
  /* --px/--py kommen vom Layout, --pdx/--pdy von der Szene (feines Nachruecken).
     Getrennt gehalten, damit eine Szene das Grundlayout nicht ueberschreibt. */
  transform:
    translate(calc(var(--px, 0px) + var(--pdx, 0px)), calc(var(--py, 0px) + var(--pdy, 0px)))
    scale(var(--ps, 1));
  opacity: var(--po, 1);
  transition:
    transform 1000ms var(--ease-soft),
    opacity 600ms var(--ease-out);
  will-change: transform, opacity;
}
.product-layer__inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.product-layer[data-layout='hidden'] { --px: 0px; --py: calc(30 * var(--u)); --ps: 0.9; --po: 0; }
.product-layer[data-layout='hero']   { --px: calc(-430 * var(--u)); --py: 0px; --ps: 1.08; --po: 1; }
.product-layer[data-layout='left']   { --px: calc(-560 * var(--u)); --py: 0px; --ps: 0.84; --po: 1; }
/* 'center' steht bewusst etwas rechts der Mitte: links sitzt die Kapitel-
   ueberschrift, rechts die Erklaerkarte. */
.product-layer[data-layout='center'] { --px: calc(-40 * var(--u)); --py: 0px; --ps: 1.12; --po: 1; }
.product-layer[data-layout='small']  { --px: calc(-600 * var(--u)); --py: calc(16 * var(--u)); --ps: 0.64; --po: 1; }

/* Traegt die gemeinsame Schwebebewegung von Bild und Markierungspunkten */
.product-float {
  position: absolute;
  inset: 0;
  animation: product-float 10s ease-in-out infinite;
}

.product-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Weicher Schlagschatten statt Leuchten — die Probe steht auf der Bank. */
  filter: drop-shadow(0 calc(24 * var(--u)) calc(34 * var(--u)) rgba(22, 32, 42, 0.18));
}

@keyframes product-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(-10 * var(--u))); }
}

/* Aufstandsschatten auf der Bank */
.product-shadow {
  position: absolute;
  left: 50%;
  bottom: calc(56 * var(--u));
  width: calc(420 * var(--u));
  height: calc(46 * var(--u));
  margin-left: calc(-210 * var(--u));
  background: radial-gradient(closest-side, rgba(22, 32, 42, 0.22), rgba(22, 32, 42, 0));
  animation: shadow-breathe 10s ease-in-out infinite;
}
@keyframes shadow-breathe {
  0%, 100% { transform: scale(1);      opacity: 0.9; }
  50%      { transform: scale(1.06);   opacity: 0.7; }
}

/* Einblenden beim Kapitelstart: sanft aufziehen, kein Materialisieren */
.product-layer.is-materialising .product-img {
  animation: product-arrive 900ms var(--ease-out) both;
}
@keyframes product-arrive {
  0%   { opacity: 0; transform: translateY(calc(26 * var(--u))) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Abbau, wenn die Probe vom Podest genommen wird */
.product-layer.is-ejecting .product-img {
  animation: product-leave 700ms var(--ease-in) both;
}
@keyframes product-leave {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(calc(-22 * var(--u))) scale(1.03); }
}

/* Markierungspunkte auf der Probe.
   Groesse und Lage werden per JS auf den sichtbaren Bildausschnitt gesetzt
   (object-fit: contain laesst Raender frei). Nur so bedeuten die x/y-Prozente
   aus dem Produkt-JSON wirklich "Prozent des Produktbildes". */
.product-pinlayer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pin {
  position: absolute;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  margin: calc(-11 * var(--u)) 0 0 calc(-11 * var(--u));
  border-radius: 50%;
  background: var(--surface);
  border: calc(2 * var(--u)) solid var(--line-strong);
  box-shadow: var(--shadow-1);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-soft),
              border-color 260ms, background-color 260ms;
}
.pin.is-visible { opacity: 1; transform: scale(1); }
.pin.is-active {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 calc(5 * var(--u)) rgb(var(--accent-rgb) / 0.16), var(--shadow-1);
}
.pin.is-active::before {
  content: '';
  position: absolute;
  inset: calc(-6 * var(--u));
  border-radius: 50%;
  border: calc(1.5 * var(--u)) solid rgb(var(--accent-rgb) / 0.5);
  animation: pin-ping 2.2s ease-out infinite;
}
@keyframes pin-ping {
  0%   { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* --- Verbindungslinien zwischen Punkt und Karte --------------------------- */

.leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 18;
}
.leader {
  stroke: #9db0bf;
  stroke-width: 1.4;
  fill: none;
  transition: opacity 400ms var(--ease-out);
}

/* --- Buehne / Szenen-Host ------------------------------------------------- */

.stage {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(96 * var(--u));
  height: calc(888 * var(--u));
  z-index: 10;
}
.scene-host {
  position: absolute;
  inset: 0;
  z-index: 16;
}
.scene {
  position: absolute;
  inset: 0;
}

/* --- Diagnose-Overlay ----------------------------------------------------- */

.diag {
  position: absolute;
  right: calc(64 * var(--u));
  top: calc(120 * var(--u));
  width: calc(540 * var(--u));
  padding: calc(28 * var(--u)) calc(32 * var(--u));
  box-shadow: var(--shadow-3);
  z-index: 200;
}
.diag__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(21 * var(--u));
  color: var(--text);
  margin-bottom: calc(18 * var(--u));
}
.diag__list {
  display: grid;
  grid-template-columns: calc(190 * var(--u)) 1fr;
  gap: calc(10 * var(--u)) calc(16 * var(--u));
  font-family: var(--font-mono);
  font-size: calc(15 * var(--u));
}
.diag__list dt { color: var(--text-3); }
.diag__list dd { color: var(--text); word-break: break-all; }
.diag__hint {
  margin-top: calc(22 * var(--u));
  padding-top: calc(16 * var(--u));
  border-top: 1px solid var(--line-soft);
  font-size: calc(14 * var(--u));
  line-height: 1.7;
  color: var(--text-3);
}

/* --- Verbindungswarnung --------------------------------------------------- */

.linklost {
  position: absolute;
  left: 50%;
  bottom: calc(126 * var(--u));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(12 * var(--u)) calc(24 * var(--u));
  font-size: calc(16 * var(--u));
  color: var(--text-2);
  box-shadow: var(--shadow-2);
  z-index: 150;
}
.linklost__dot {
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border-radius: 50%;
  background: var(--warn);
  animation: lamp-pulse 1.2s ease-in-out infinite;
}

[hidden] { display: none !important; }