/* Meldungen am Globus (js/globus-meldung.js).
 *
 * Zwei Plaetze fuer dieselbe Meldung, je nach Breite nur einer sichtbar:
 *
 *   --rand   am Rechner: rechts unten in der Buehne, neben dem Globus.
 *            Links stehen Ueberschrift und Feld, rechts unten ist frei.
 *   --unter  auf dem Handy: rechts neben "I search / I offer". Gemessen
 *            bei 390 px: dort sind 195 px frei, und die ganze Zeile liegt
 *            UNTER der Kugel (sie endet bei 468, der Schalter beginnt bei
 *            469). Die erste Fassung stand mittig ueber dem Feld, also auf
 *            der Kugel -- Louis: "zu mittig ... nicht im Globus verdeckt,
 *            das ist wichtig".
 *
 * Die Grenze ist dieselbe wie in kugelmasse(): unter 700 Pixeln ist der
 * Globus klein und tief. Zwei Plaetze statt einem, weil die Meldung auf
 * dem Handy am Feld haengen muss -- nur so bleibt sie ueber ihm, egal wie
 * lang Ueberschrift oder Hinweise werden.
 *
 * Farben aus den Werten der Buehne, die mit dem Modus umschalten
 * (intl.css dunkel, einheit.css hell). Gold nur fuer das eine Wort.
 * Eigene Datei, damit intl.css und einheit.css unberuehrt bleiben.
 */

.globus-meldung {
  display: none;
  pointer-events: none;
  color: var(--intl-hero-ink);
  /* Ein Hof in der Farbe der Buehne. Auf dem Handy reicht die Kugel bis
     an das Feld, die Meldung liegt also auf den Punkten -- ohne Hof
     liefen sie durch die Buchstaben. Den Globus dafuer hoeher zu setzen
     haette seinen Platz veraendert, und der war richtig. */
  text-shadow:
    0 0 3px var(--intl-hero),
    0 0 8px var(--intl-hero),
    0 0 16px var(--intl-hero);
}
.globus-meldung[hidden] { display: none !important; }

@media (min-width: 700px) {
  .globus-meldung--rand {
    display: block;
    position: absolute;
    z-index: 2;
    right: clamp(24px, 5vw, 88px);
    bottom: clamp(36px, 10%, 110px);
    width: min(260px, 22vw);
    text-align: right;
  }
}

@media (max-width: 699px) {
  .intl-post { position: relative; }
  .globus-meldung--unter {
    display: block;
    position: absolute;
    top: 2px;
    right: 0;
    width: 50%;
    text-align: right;
  }
}

/* Einlaufen, stehen, gehen -- in einer Bewegung, so lang wie SICHTBAR in
   js/globus-meldung.js (6 s). Danach bleibt die Zeile unsichtbar stehen,
   bis die naechste kommt; die Pause dazwischen ist Absicht. */
.globus-meldung__zeile {
  display: block;
  animation: globus-meldung-takt 6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.globus-meldung__kopf {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--intl-hero-muted);
}

.globus-meldung__art { color: var(--intl-gold); }

.globus-meldung__satz {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.28;
}

/* Auf dem Handy kleiner: zwei Zeilen muessen in die Hoehe des Schalters
   neben ihr passen (47 px). */
@media (max-width: 699px) {
  .globus-meldung__kopf { font-size: 8.5px; margin-bottom: 3px; }
  .globus-meldung__satz { font-size: 12.5px; line-height: 1.25; }
}

@keyframes globus-meldung-takt {
  0%   { opacity: 0; transform: translateY(8px); }
  10%  { opacity: 1; transform: none; }
  90%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .globus-meldung__zeile { animation: none; }
}