/*
 * Chrome Neon – Überschrift im Retro-/Outrun-Stil
 * Gewachsen am OpenRA-Dashboard (tigerserver.bpunktm.de), hier als
 * eigenständige Datei zum Wiederverwenden.
 *
 * Verwendung: EIN Element, Text zusätzlich in data-text und aria-label.
 *
 *   <link rel="stylesheet" href="chrome-neon.css">
 *   <h1 class="chrome-neon" data-text="TITEL" aria-label="TITEL">TITEL</h1>
 *
 * Das aria-label ist nicht optional. Der sichtbare Effekt besteht aus zwei
 * Pseudo-Ebenen, die denselben Text tragen; Chrome zählt deren Inhalt zum
 * Namen der Überschrift und liest sie sonst DREIMAL vor (nachgemessen über
 * den Accessibility-Baum). Mit aria-label bleibt es bei einmal.
 *
 * Schrift: eine Versalschrift wie Russo One mitliefern und --cn-schrift
 * setzen. Ohne sie greift die System-Schrift, der Effekt wirkt dann flacher.
 *
 * Farben über die Variablen unten, entweder global in :root oder am Element:
 *   <h1 class="chrome-neon" style="--cn-himmel: #5BB8F5" …>
 */

:root {
  --cn-schrift: "Russo One", system-ui, sans-serif;
  --cn-groesse: clamp(24px, 5vw + 8px, 34px);
  --cn-zeile: 1.08;              /* Zeilenhöhe; der Verlauf richtet sich danach */
  --cn-neigung: -8deg;           /* 0deg = gerade */

  /* Oberer Teil: Spiegelung des Himmels. Das Weiß an der Oberkante ist der
     Glanzpunkt – ohne ihn sieht die Schrift flach gedruckt aus. */
  --cn-glanz: #ffffff;
  --cn-himmel-hell: #bfe4ff;
  --cn-himmel: #5BB8F5;
  /* Die harte Kante in der Mitte. Sie macht aus einem Verlauf eine
     Spiegelung – poliertes Metall zeigt oben Himmel, unten Boden. */
  --cn-horizont: #1b1446;
  --cn-horizont-2: #3b1570;
  /* Unterer Teil: Sonnenuntergang */
  --cn-boden: #ff4fb8;
  --cn-boden-hell: #ffd6f1;

  --cn-schein: #ff2aad;          /* Neonschein rundherum */
  --cn-schein-hell: #ff6fe0;
  --cn-kern: #ff4fb8;            /* Farbe der Leuchtebene unter der Schrift */
  --cn-tiefe-1: #d11d93;         /* gestapelte Schatten = Prägung */
  --cn-tiefe-2: #9c1782;
  --cn-tiefe-3: #6a1270;
  --cn-tiefe-4: #34094f;
}

.chrome-neon {
  position: relative;
  margin: 0;
  font-family: var(--cn-schrift);
  font-size: var(--cn-groesse);
  font-weight: 400;
  /* Versalien sind Pflicht, nicht Geschmack: Der Horizont sitzt bei 50 % der
     Zeilenhöhe. Mit Unterlängen (g, p, y) läge er bei jedem Buchstaben
     woanders und die Spiegelung fiele auseinander. */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* Eng, weil eine Versalzeile keinen Unterlängenraum braucht */
  line-height: var(--cn-zeile);
  transform: skewX(var(--cn-neigung));
  transform-origin: left bottom;
  /* Der echte Text bleibt stehen – markierbar, durchsuchbar, vorlesbar –,
     wird aber unsichtbar. Sichtbar sind allein die beiden Pseudo-Ebenen. */
  color: transparent;
}

/* Beide Ebenen liegen deckungsgleich über dem echten Text. `inset: 0` gibt
   ihnen denselben Kasten, also bricht der Text an denselben Stellen um. */
.chrome-neon::before,
.chrome-neon::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Unten: der Schein. Fünf Schatten mit wachsendem Radius und fallender
   Deckkraft – ein einzelner großer sähe aus wie Nebel, gestapelt ergibt sich
   der Abfall einer Leuchtröhre. */
.chrome-neon::before {
  color: var(--cn-kern);
  text-shadow:
    0 0 2px var(--cn-schein-hell),
    0 0 6px var(--cn-schein),
    0 0 14px var(--cn-schein),
    0 0 28px var(--cn-schein),
    0 0 46px color-mix(in srgb, var(--cn-schein) 70%, transparent);
}

/* Oben: das Chrom. Der Verlauf wird auf die Buchstaben zugeschnitten – die
   Schrift ist nur die Schablone, gemalt wird der Verlauf.
   WARUM ZWEI PSEUDO-EBENEN und nicht text-shadow am selben Element: Der
   Browser malt erst den Hintergrund (hier: das zugeschnittene Chrom), dann
   die Textschatten. Ein Schatten am selben Element läge also ÜBER dem
   Verlauf und würde ihn zudecken. ::before wird vor ::after gemalt, deshalb
   liegt der Schein zuverlässig darunter. */
.chrome-neon::after {
  background: linear-gradient(180deg,
    var(--cn-glanz) 0%,
    var(--cn-himmel-hell) 26%,
    var(--cn-himmel) 47%,
    var(--cn-horizont) 50%,
    var(--cn-horizont-2) 54%,
    var(--cn-boden) 72%,
    var(--cn-boden-hell) 100%);
  /* Genau eine Zeile hoch und senkrecht wiederholt: Bei einem mehrzeiligen
     Titel bekommt so JEDE Zeile ihren eigenen Horizont. Über den ganzen Block
     gezogen hätte die zweite Zeile nur noch den Sonnenuntergang. Einzeilig
     ändert es nichts – da ist eine Zeile der ganze Kasten. */
  background-size: 100% calc(var(--cn-zeile) * 1em);
  background-repeat: repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Gestapelte harte Schatten (ohne Weichzeichnung) = Prägung. filter
     arbeitet auf dem fertigen Bild, also inklusive Verlauf, und jeder
     Schatten wirft den vorigen weiter – daraus entsteht die Tiefe. */
  filter:
    drop-shadow(0 1px 0 var(--cn-tiefe-1))
    drop-shadow(0 1px 0 var(--cn-tiefe-2))
    drop-shadow(0 1px 0 var(--cn-tiefe-3))
    drop-shadow(0 2px 0 var(--cn-tiefe-4));
}

/* Ohne Neigung, falls die Schräge nicht passt */
.chrome-neon--gerade { --cn-neigung: 0deg; }

@media (prefers-reduced-motion: reduce) {
  /* nichts zu tun – der Effekt ist absichtlich statisch. Eine Animation
     darauf kostet bei jedem Scrollschritt einen neuen Malvorgang. */
}