/* SPECTRE Splashscreen - EINE gemeinsame Quelle fuer specr.eu und
   catchit.specr.eu. Nicht je Seite kopieren: beide laden diese Datei.

   Rot: #a21301 - aus dem Kraken im eigenen Logo ausgezaehlt (ueber die Haelfte der
   roten Flaeche traegt genau diesen Ton).

   Aufbau (seit v12): Punktglobus mit einem Kranz roter Teilstriche als
   Ladeanzeige (Canvas, siehe splash-globe.js), das Wort CONNECTING darunter.
   Der Globus ist bewusst gross (bis 680 px, begrenzt durch Breite und Hoehe
   des Fensters) und laesst sich anfassen. Ein blasses Logo als Wasserzeichen
   stand bis v14 dahinter und ist auf Wunsch wieder raus, nur hier im Splash.

   Der Hintergrund ist schlicht schwarz. Eine Schattenaura (ein breites Band in
   einem etwas anderen Dunkelton) war hier zwischenzeitlich drin und ist wieder
   raus - sie las sich im Bild als schraeg durchlaufender roter Schleier. */

.splash-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Ueber allem: die Seite bringt Leisten mit z-index 99999 mit (Cookie-Hinweis,
     Performance-Warnung). Die lagen sonst auf dem Ladeschirm und haben ihn
     zerschnitten. Nach dem Laden sind sie wieder ganz normal bedienbar. */
  z-index: 100000;
  overflow: hidden;
  pointer-events: all;
}

.splash-stage {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
  animation: splash-in 0.8s ease both;
  /* Der Globus laesst sich drehen (splash.js). touch-action: none, sonst
     nimmt der Browser das Ziehen auf dem Handy als Scrollen oder Zoomen. */
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.splash-stage.is-grabbing {
  cursor: grabbing;
}

/* Die Groesse setzt splash.js passend zur Pixeldichte, das hier ist nur der
   Stand, falls das Canvas nichts zeichnen kann. */
.splash-globe {
  display: block;
  width: min(680px, 62vw, 72vh);
  height: min(680px, 62vw, 72vh);
}

.splash-loader {
  position: relative;
  z-index: 1;
  width: min(357px, 59vw);
  animation: splash-in 0.6s 0.2s ease both;
}

/* ── DAS WORT STATT DES BALKENS ──────────────────────────────────────
   Jeder Buchstabe steht fuer ein Siebtel des Ladewegs. Noch nicht erreichte
   flackern rot durch Symbole, erreichte stehen weiss und still.

   FESTE ZEICHENBREITE IST PFLICHT. Ohne sie zappelt die Zeile bei jedem
   Wechsel in der Breite, und aus der ruhigen Entschluesselung wird ein
   Flimmern. */
/* DER SCHRIFTZUG IST DER ALTE, nur dass er sich jetzt entschluesselt.

   Er stand frueher als ruhiges, weit gesperrtes Rot unter dem gemalten
   Balken und sah dort gut aus. Ich hatte ihn durch ein grosses weisses Wort
   ersetzt: das war lauter, aber es war nicht mehr dieser Schriftzug. Also
   zurueck zu Inter, 0.63rem, 600, weit gesperrt, im Rot der Marke - und die
   Bewegung liegt obendrauf statt an seiner Stelle.

   Die Sperrung kommt als gap und nicht als letter-spacing: jeder Buchstabe
   ist eine eigene Zelle, und zwischen Zellen wirkt letter-spacing nicht. */
.splash-word {
  display: flex;
  justify-content: center;
  gap: 0.35em;
  margin-top: 15px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
}

/* FESTE ZELLENBREITE IST PFLICHT. Ohne sie zappelt die Zeile bei jedem
   Zeichenwechsel in der Breite, und aus der Entschluesselung wird ein
   Flimmern. Ein Zehntel Luft, damit auch das breiteste Symbol hineinpasst. */
.splash-word b {
  display: inline-block;
  width: 1.05em;
  text-align: center;
  font-weight: inherit;
  /* Noch nicht erreicht: dasselbe Rot, nur zurueckgenommen. Kein zweiter
     Farbton - der fertige Zustand soll haargenau der alte Schriftzug sein. */
  color: rgba(162, 19, 1, 0.38);
  transition: color .2s ease;
}

/* HIER WACKELTEN DIE OFFENEN STELLEN, und das war der Fehler.

   Sie trugen eine eigene Animation: alle 0,18 s gedreht, verschoben und in der
   Deckkraft gepulst - und zusaetzlich wechselte das JS 18-mal in der Sekunde
   das Zeichen. Zwei Bewegungen uebereinander auf derselben Stelle ergeben kein
   Entschluesseln, sondern Zappeln.

   Der Zeichenwechsel IST die Bewegung. Die Zelle steht dabei vollkommen still,
   nur ihr Inhalt springt, und genau das liest sich als schnell und fluessig.
   Der Unterschied zwischen offen und gesetzt laeuft allein ueber die Farbe,
   und weil `color` weiter unten eine Transition hat, wird jeder Buchstabe beim
   Festwerden weich heller. */
.splash-word b.is-set {
  color: rgba(162, 19, 1, 0.85);
}

@keyframes splash-in { from { opacity: 0; } to { opacity: 1; } }

/* DER ABGANG BLENDET AUS, statt zu schneiden.

   Vorher war das `display: none`, und splash.js setzte die Klasse in demselben
   Moment, in dem es das Overlay aus dem DOM nahm: die Klasse konnte nie
   wirken, der Ladeschirm verschwand hart. Jetzt blendet er in
   SPLASH_FADE_MS aus (die Dauer steht in splash.js und muss zu dieser
   Transition passen), erst danach wird er entfernt.

   `pointer-events: none` ab dem ersten Moment des Ausblendens, damit ein Klick
   in die Seite waehrend des Abgangs nicht am Ladeschirm haengen bleibt. */
.splash-overlay {
  transition: opacity 180ms ease;
}

.splash-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 700px) {
  .splash-globe {
    width: min(92vw, 62vh);
    height: min(92vw, 62vh);
  }
  .splash-loader { width: 62vw; }
  .splash-word { font-size: 0.64rem; }
}

/* Wer Bewegung abbestellt hat, bekommt den Namen sofort lesbar. Die Auskunft
   war nie das Flackern, sondern der Name und die Zeile darunter. */
/* Wer Bewegung abbestellt hat, bekommt den Namen sofort lesbar. Die Auskunft
   war nie das Flackern, sondern der Name und die Zeile darunter. Das JS
   schreibt in diesem Fall gar keine Symbole mehr (siehe `ruhig` in
   splash.js); hier stehen nur noch die Farben, damit das Wort auch ohne die
   Klasse `is-set` voll lesbar ist. */
@media (prefers-reduced-motion: reduce) {
  .splash-word b { color: rgba(162, 19, 1, 0.85); }
  .splash-overlay { transition: none; }
}