/* 27 Productions - Nachtrag zur horizontalen Story.
   Das Aussehen der Desktop-Fassung liegt in den globalen Breakdance-Selektoren
   (Sammlung "Horizontale Story"). Hier steht, was der Breakdance-Import nicht
   abbilden kann, plus die komplette Handy-Inszenierung.

   Achtung: selectors.css wird SPAETER ausgeliefert als diese Datei. Deshalb
   gewinnt hier nur, was hoeher gewichtet ist als eine einzelne Klasse. Alle
   Regeln sind darum ueber .hstage bzw. .waves zweistufig geschrieben. */

/* Breakdance schreibt jedes scaleX als scale(x,y) und setzt transform-origin
   auf 50% 50%. Die orange Linie und der Fortschrittsbalken muessen aber von
   links nach rechts wachsen, nicht aus der Mitte heraus. */
.wave .wave-line  { transform-origin: left center; transform: scaleX(0); }
.hprogress .hp-bar { transform-origin: left center; transform: scaleX(0); }

/* ============================================================
   HANDY (bis 1023 px): eigene Inszenierung statt Abruestung.
   Die Querfahrt kann hier nicht laufen, der Zeitstrahl schon —
   nur eben senkrecht. Eine Schiene laeuft links durch alle vier
   Wellen, die orange Fuellung waechst beim Scrollen nach unten,
   die Punkte zuenden nacheinander, der KI-Punkt pulst.
   ============================================================ */
@media (max-width: 1023px) {

  /* Die Wellen ruecken nach rechts, links bleibt Platz fuer die Schiene.
     Die waagerechten Haarlinien entfallen, sonst wird es unruhig. */
  .hstage .waves { position: relative; padding-left: 34px; gap: 26px; }
  .hstage .waves .wave { border-top: 0 none; padding-top: 0; }
  .hstage .waves .wave-dot { top: 4px; left: -33.5px; }
  .hstage .waves .wave-line { display: none; }

  /* Die Schiene selbst. Sie wird vom Skript eingehaengt. */
  .hstage .waves-rail {
    position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px;
    background: rgba(255,255,255,.10); display: block; pointer-events: none;
  }
  .hstage .waves-rail-fill {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: #FFA847; display: block;
    box-shadow: 0 0 10px rgba(255,168,71,.55);
    transform: scaleY(0); transform-origin: top center;
  }

  /* Das Logo bleibt auf dem Handy sichtbar, aber als ruhiges Motiv hinter
     Panel 1. Es malt sich einmal aus, danach steht es. Keine Maus, also
     auch keine Glow-Ebene: die zweite SVG-Kopie waere nur Ballast. */
  .hstage .logo-scrub {
    display: block; top: 24px; right: -70px; left: auto; width: 300px;
  }
  .hstage .ls-float { width: 300px; }
  .hstage .ls-base  { width: 300px; opacity: .30; }
  .hstage .ls-bright { display: none; }

  /* Panel 3 hatte 22 Textbloecke. Auf dem Handy tragen die Titel die
     Aussage; die Einzeiler stehen ausfuehrlicher auf den Leistungsseiten. */
  .hstage .blocks .block-p { display: none; }
  .hstage .blocks .block { padding: 14px 4px; gap: 14px; grid-template-columns: 44px minmax(0, 1fr); }
}

/* Reduced Motion: kein Pin, keine Querfahrt, keine Schiene, alles untereinander.
   Breakdance kennt nur Breitenbreakpoints, deshalb steht dieser Block hier. */
@media (prefers-reduced-motion: reduce) {
  .htrack { flex-direction: column !important; width: auto !important; }
  .panel, .panel-last { width: auto !important; min-height: 0 !important; flex-shrink: 1 !important; padding: 12vh 8vw 10vh !important; }
  .ghost { display: none !important; }
  .wave .wave-line { display: none !important; }
  .hprogress { display: none !important; }
  .logo-scrub { display: none !important; }
  .hglow { display: none !important; }
  .waves-rail { display: none !important; }
}