/* ============================================================
   Printer-System — globale, wiederverwendbare Drucker-Komponente
   Liegt direkt im body. JS-gesteuert (x-y) via printer.js.

   Z-Stack:
     .printer-rail  z=120  vor Druck-Maske, kittig auf Druckkopf
     .printer-head  z=120  vor Druck-Maske
   Beide auf demselben z-Level damit Drucker-System als Einheit
   ueber der "gedruckten" Flaeche schwebt (realistisch).
   .printer-system selbst ist KEIN stacking-context.
   ============================================================ */

/* Globaler Wrapper im body. Body bekommt position: relative,
   damit dieser Stage-Wrapper als Containing Block den Body
   referenziert (= document-relative Y-Coords beim Scrollen). */
.printer-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0; /* children sind absolute, eigene Hoehe egal */
  pointer-events: none;
  z-index: 120;
}

.printer-system {
  /* leerer DOM-Wrapper, kein stacking-context */
  pointer-events: none;
}

.printer-system .printer-rail,
.printer-system .printer-head {
  visibility: hidden;
}

.printer-system.is-ready .printer-rail,
.printer-system.is-ready .printer-head {
  visibility: visible;
}

/* Schiene: das echte schiene.png Asset.
   Hoehe fest auf 28px begrenzt damit sie nicht zu fett wirkt;
   object-fit: cover croppt mittigen horizontalen Streifen.
   Position: absolute relativ zum Hero (.hero-4 ist position: relative),
   damit der Drucker mit dem Hero scrollt statt im Viewport zu kleben. */
.printer-rail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 28px;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 120;
  pointer-events: none;
  transform: translate3d(0, -240%, 0);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
  will-change: transform;
}

/* Druckkopf: echtes 3D-Drucker-Asset (Stepper-Motor + Hot-End).
   z=120 -> vor der Druck-Maske und vor dem Text.
   Hoehe steuert die Skalierung; Breite folgt Aspect-Ratio des PNG. */
.printer-head {
  position: absolute;
  top: 0;
  left: 0;
  height: 130px;
  width: auto;
  display: block;
  z-index: 120;
  pointer-events: none;
  transform: translate3d(-200px, 0, 0);
  opacity: 0;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .printer-system { display: none; }
}

/* ================================================================
   Print-Marker: generisch via [data-print="highlight"]
   Sichtbare Druck-Flaeche wird durch clip-path-Polygon definiert,
   das vom printer.js pro Frame neu berechnet wird (zigzag/single).

   Pro Element konfigurierbar:
     data-print-color    Druck-Farbe (z.B. "#024802", "tomato")
                         -> setzt --print-color via JS
     data-print-glow     Glow-Farbe (z.B. "rgba(255,100,0,0.4)")
                         -> setzt --print-glow via JS

   Direkt via CSS-Variablen einstellbar (Override / Inline-Style):
     --print-color  Farbe der Druck-Flaeche (Default: #024802)
     --print-glow   box-shadow Color (Default: rgba(2,72,2,0.45))
     --print-inset  Inset relativ zum Element (Default: 0.05em -0.18em)
   ================================================================ */
[data-print="highlight"] {
  position: relative;
  isolation: isolate;
}

[data-print="highlight"]::before {
  content: '';
  position: absolute;
  inset: var(--print-inset, 0.05em -0.18em);
  background: var(--print-color, #024802);
  z-index: -1;
  clip-path: var(--print-clip, inset(0 100% 0 0));
  /* Outer Glow + leichtes Inset-Highlight oben (frisch-gedruckt-Optik) */
  box-shadow:
    0 0 24px var(--print-glow, rgba(2, 72, 2, 0.45)),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 4px rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  [data-print="highlight"]::before {
    clip-path: inset(0);
  }
}

/* Custom Cursor auf Print-Targets — kleiner Crosshair (nur Desktop) */
@media (hover: hover) and (pointer: fine) {
  [data-print="highlight"] {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><circle cx='14' cy='14' r='10' fill='none' stroke='%23024802' stroke-width='1.5'/><line x1='14' y1='2' x2='14' y2='8' stroke='%23024802' stroke-width='1.5'/><line x1='14' y1='20' x2='14' y2='26' stroke='%23024802' stroke-width='1.5'/><line x1='2' y1='14' x2='8' y2='14' stroke='%23024802' stroke-width='1.5'/><line x1='20' y1='14' x2='26' y2='14' stroke='%23024802' stroke-width='1.5'/><circle cx='14' cy='14' r='1.5' fill='%23024802'/></svg>") 14 14, crosshair;
  }
}