/* ============================================================
   Hero "Logo Trace" — nur Startseite (.where-home)
   Das Firmenlogo wird beim Scrollen als technische Zeichnung
   aufgebaut und loest sich vor Ende des Hero wieder auf.

   Stacking (bewusst OHNE Eingriff ins Bestehende):
   Der Layer ist direktes body-Kind, NACH .grid-bg und VOR dem Hero.
   Die vorhandene Regel aus grid.css
       .where-home > *:not(.grid-bg) { position:relative; z-index:1 }
   gibt ihm z-index 1 wie dem Hero — durch die DOM-Reihenfolge wird er
   aber darunter gemalt:
       body(--bg) -> .grid-bg(z0) -> .logo-trace(z1) -> .hero(z1)
   Body-Background bleibt unangetastet (siehe Aurora-Fehlschlag).
   ============================================================ */

.where-home .logo-trace {
  /* --- Stellschrauben --- */
  --lt-w:  105%;    /* Breite des SVG relativ zum Viewport (>100% = angeschnitten).
                       Nicht groesser: darueber laeuft die Wortmarke aus dem Bild
                       und man liest nur noch die Subline. */
  --lt-x:  0%;      /* horizontaler Versatz */
  --lt-y:  50%;     /* vertikal mittig im Viewport */
  --lt-op: 0.62;    /* Grundintensitaet der Zeichnung */

  /* fixed, damit die Zeichnung waehrend der gesamten Hero-Passage im Blick
     bleibt — sie verschwindet ueber die Deckkraft, nicht durch Wegscrollen.
     WICHTIG: logo-trace.css muss NACH grid.css geladen werden, sonst
     ueberschreibt deren `position:relative` diese Regel (gleiche Spezifitaet). */
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* --lt-fade wird vom JS gesetzt (1 -> 0 am Ende des Hero) */
  opacity: calc(var(--lt-op) * var(--lt-fade, 1));
  will-change: opacity;
}

/* Das ganze Logo dreht und zieht sich langsam ueber den Scroll auf
   (--lt-rot/--lt-scale vom JS). translateY(-50%) zentriert es auf --lt-y,
   rotate/scale wirken danach um die eigene Mitte. */
.where-home .logo-trace .lt-svg {
  position: absolute;
  left: var(--lt-x);
  top: var(--lt-y);
  width: var(--lt-w);
  height: auto;
  transform: translateY(-50%)
             rotate(var(--lt-rot, 0deg))
             scale(var(--lt-scale, 1));
  overflow: visible;
  will-change: transform;
}

/* --- Die Zeichnung selbst -------------------------------------------------
   pathLength="1" an jeder Form: dasharray/dashoffset rechnen dadurch in
   0..1 statt in echten Pfadlaengen — unabhaengig von Glyphengroesse.
   non-scaling-stroke haelt die Linie duenn, obwohl das SVG stark
   hochskaliert wird. Startzustand: ungezeichnet (dashoffset 1). */
.where-home .logo-trace path {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1.1px;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  /* Jede Form dreht/skaliert um ihre EIGENE Mitte, nicht um den SVG-Ursprung —
     ohne fill-box waere transform-origin der viewBox-Nullpunkt und die
     Facetten wuerden quer durchs Bild schleudern statt sich zu drehen. */
  transform-box: fill-box;
  transform-origin: center;
}

/* Nur die Dreiecks-Marke bekommt eine Fuellung — sie blendet spaeter ein
   (--lt-fill 0 -> 1 vom JS). Die Wortmarke bleibt reiner Umriss. */
.where-home .logo-trace .lt-mark {
  fill: var(--accent);
  fill-opacity: calc(0.09 * var(--lt-fill, 0));
}

/* Die kleine Subline "medienagentur" etwas zurueckhaltender als die Wortmarke */
.where-home .logo-trace .lt-sub {
  stroke: var(--line);
}

/* ---------------- Barrierefreiheit / Performance ---------------- */

/* Reduzierte Bewegung: fertig gezeichnet, statisch, noch dezenter.
   Die Klasse setzt das JS und beendet sich danach (keine Scroll-Bindung). */
.where-home .logo-trace.lt-static {
  --lt-op: 0.3;
}
.where-home .logo-trace.lt-static path { stroke-dashoffset: 0; transform: none; }
.where-home .logo-trace.lt-static .lt-svg { transform: translateY(-50%); }
.where-home .logo-trace.lt-static .lt-mark { fill-opacity: 0.09; }

@media (prefers-reduced-motion: reduce) {
  .where-home .logo-trace { transition: none !important; }
}

/* Schmale Screens: der Hero ist dort einspaltig und eng — ein
   angeschnittenes Logo wuerde nur stoeren. Komplett aus. */
@media (max-width: 720px) {
  .where-home .logo-trace { display: none; }
}