/* ND5 — Anmelde-Animation „Acceleration“ wird zu „AccelNexus“
   (Entscheidung Vahid 24.10.2026, Variante 3 „Marke verwandelt“).

   Der Ablauf steht in js/anmelde-animation.js; hier nur das Aussehen der
   Teile, die das Skript während der rund 5 Sekunden in die Zeile setzt. Der
   Endzustand ist wieder genau der Schriftzug aus login.html
   (<span class="nd-accel">Accel</span><span class="nd-nexus">Nexus</span>),
   gestaltet von css/nachtglas.css §8 — diese Datei ändert daran nichts.

   Regeln (Vahid): läuft nur im dunklen Design (html.nacht), bei jedem
   Aufruf der Anmeldeseite und bei jeder Sperre; blockiert nichts (keine
   Regel hier fängt Klicks ab — die Impulse sind pointer-events: none);
   prefers-reduced-motion → das Skript startet gar nicht, der fertige
   Schriftzug steht sofort da (Block „Ruhe“ unten als zweite Sicherung).
   css/nachtglas.css ist eingefroren und bleibt unberührt. */

/* Vor dem ersten Bild: das Skript im <head> setzt html.nd5-vorbereitet
   (nur dunkel, nur ohne reduzierte Bewegung). Bis die Buchstaben gebaut
   sind, ist der fertige Schriftzug unsichtbar — kein kurzes Aufblitzen von
   „AccelNexus“ vor „Acceleration“. Der Platz bleibt belegt (visibility),
   die Karte darunter steht also schon im ersten Bild an ihrer Stelle. */
html.nacht.nd5-vorbereitet .login-body .nd-marke-zeile .nd-schriftzug,
html.nacht.nd5-vorbereitet .login-body .nd-marke-zeile .nd-marke {
  visibility: hidden;
}

/* Während des Ablaufs: Höhe und Breite der Zeile sind fest (inline am
   Element, gemessen am Endzustand bzw. an „Acceleration“), die Einheit
   steht in der Mitte — so liegt der fertige Schriftzug am Ende Pixel für
   Pixel dort, wo er ohne Animation stünde. */
html.edel .nd-marke-zeile.nd5-laeuft .nd-einheit {
  position: relative;
  justify-content: center;
}

/* Ein Buchstabe = ein Kästchen mit fester Breite (Tinos-Metrik, im Skript
   gemessen). Breite und Deckkraft gleiten; die Breite wechselt beim Ersetzen
   auf die des neuen Zeichens, bei „o“ und „n“ auf 0. */
html.edel .nd5-b {
  display: inline-block;
  white-space: pre;
  text-align: left;
  overflow: visible;
  transition: width 0.28s ease;
}

/* Der Lichtimpuls: eine schmale Linie in der Farbe eines Rings der Marke,
   hell an der Spitze (links, sie läuft nach links), zum Ende hin
   ausgeblendet; leiser Schein in derselben Farbe. */
html.edel .nd5-impuls {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--nd5-farbe) 0%, var(--nd5-farbe) 35%,
                              color-mix(in srgb, var(--nd5-farbe) 0%, transparent) 100%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--nd5-farbe) 70%, transparent);
  opacity: 0;
}

/* Sperrfenster (B2): dieselbe Zeile über dem Titel, eine Stufe kleiner,
   damit sie im schmalen Fenster auch bei 390 px Breite Luft behält. */
html.edel .nd5-sperre-kopf {
  display: flex;
  justify-content: center;
  padding: 18px 20px 2px;
  min-height: 62px;
}
html.edel .nd5-sperre-kopf .nd-schriftzug { font-size: calc(var(--fs-marke) * 0.8); }
html.edel .nd5-sperre-kopf .nd-einheit { gap: 12px; }
html.edel .nd5-sperre-kopf .nd-marke { width: 62px; height: 62px; }

/* Ruhe: zweite Sicherung neben der Weiche im Skript. */
@media (prefers-reduced-motion: reduce) {
  html.nacht.nd5-vorbereitet .login-body .nd-marke-zeile .nd-schriftzug,
  html.nacht.nd5-vorbereitet .login-body .nd-marke-zeile .nd-marke { visibility: visible; }
  html.edel .nd5-b { transition: none !important; }
  html.edel .nd5-impuls { display: none; }
}