/* ===== Einladung - aufsteigende Seelen mit Sprechblasen ==================
   Zwei Dinge in einer Datei, weil beide dieselbe Sprechblase benutzen:

   1. .seele-aufstieg - die fuenf Seelen, die zum Dialogsatz "Und die
      verlorenen Seelen sind wieder frei!" aus dem Friedhof aufsteigen
      (js/seelen-aufstieg.js). Optik/Technik 1:1 aus SoulKeeper uebernommen
      (sk/css/level3-gameplay.css: .soul-aufstieg, sk/js/level3-outro.js) -
      dort steigen die Seelen am Ende des Spiels genauso auf. Bewusst eigene
      Klassennamen (seele- statt soul-), damit sie nicht mit den DAUERHAFT
      aufsteigenden .soul aus css/level3.css kollidieren, die einen ganz
      anderen Mechanismus haben (CSS-Endlosanimation ueber die gesamte
      Welthoehe).

   2. .seelen-blase - die Sprechblase selbst. Haengt entweder an einer
      .seele-aufstieg (Punkt 1) oder an einer der dauerhaft aufsteigenden
      .soul (css/level3.css), die js/seelen-aufstieg.js gelegentlich und
      zufaellig mit einem Dankeswort versieht. In beiden Faellen ist sie ein
      KIND des Seelen-Elements und macht dessen Bewegung dadurch automatisch
      mit - kein zweiter Bewegungsmechanismus noetig. */

.seele-aufstieg {
    /* top/left setzt js/seelen-aufstieg.js pro Instanz (Position des
       jeweiligen Grabsteins) - hier nur die gemeinsame Basis. Bezugsrahmen
       ist #welt-track (siehe dort), damit die Seelen ueber Szenengrenzen
       hinweg fliegen koennen. */
    position: absolute;
    width: calc(27px / 1.5 * var(--stage-scale));
    height: calc(43px / 1.5 * var(--stage-scale));
    margin-left: calc(-13.5px / 1.5 * var(--stage-scale));
    pointer-events: none;
    opacity: 0;
    /* Hinter der vorderen Friedhofsebene (css/level1.css:
       .level1-ebene--vorne, z-index:2) - die Seelen ziehen dadurch HINTER
       Grabsteinen/Baeumen vorbei, genau wie die dauerhaft aufsteigenden
       .soul (siehe index.php, Begruendung an .level1-ebene--vorne). */
    z-index: 1;
    animation: seele-aufstieg-kf 14s linear forwards;
    will-change: transform, opacity;
}

.seele-aufstieg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../../sh/img/Soul/DeadSoul_pixel.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
}

/* Seelen MIT Sprechblase sind deutlich groesser und liegen vorn - sonst
   waere der Text weder lesbar noch vollstaendig sichtbar (er verschwaende
   sonst hinter Grabsteinen/Baeumen). Gleiche Ueberlegung wie in SoulKeeper
   (sk/css/level3-gameplay.css: .soul-aufstieg--gross). */
.seele-aufstieg--gross {
    width: calc(46px / 1.5 * var(--stage-scale));
    height: calc(74px / 1.5 * var(--stage-scale));
    margin-left: calc(-23px / 1.5 * var(--stage-scale));
    z-index: 6;
}

@keyframes seele-aufstieg-kf {
    0%   { transform: translateY(0) scale(0.6); opacity: 0; }
    8%   { opacity: 0.95; }
    100% { transform: translateY(calc(-170 * var(--uh))) scale(1.05); opacity: 0.95; }
}

/* ===== Sprechblase =======================================================
   Optik 1:1 aus SoulKeeper (sk/css/level3-gameplay.css: .soul-aufstieg-text),
   inklusive Schriftgroesse, Zeilenhoehe und Maximalbreite.

   Bewusst KEINE eigene font-family: geerbt wird - genau wie im Spiel - die
   Pixelschrift 'Press Start 2P' von <body> (css/base.css). Sie ist pro
   Zeichen deutlich breiter als eine normale Schrift, deshalb passen
   Maximalbreite und Schriftgroesse hier auch nur zu ihr: mit einer
   schmaleren Schrift saehe die Blase halb leer aus, mit einer breiteren
   Zeile bricht der Text an unpassenden Stellen um.

   Groesse bewusst NICHT an die Seele gekoppelt: die dauerhaft aufsteigenden
   .soul (css/level3.css) sind winzig, ihre Blase soll trotzdem genauso
   lesbar sein wie die der grossen Erloesungs-Seelen. */
.seelen-blase {
    position: absolute;
    left: 50%;
    bottom: 100%;
    margin-bottom: 0.8em;
    transform: translateX(-50%);
    width: max-content;
    max-width: clamp(12rem, calc(32 * var(--uw)), 19rem);
    padding: 0.75em 1em;
    font-size: clamp(0.75rem, calc(2.1 * var(--uw)), 1.05rem);
    line-height: 1.6;
    text-align: center;
    color: #eaf9ff;
    background: rgba(10, 22, 32, 0.78);
    border: 1px solid rgba(127, 208, 242, 0.55);
    border-radius: 8px;
    box-shadow: 0 0 16px rgba(127, 208, 242, 0.4);
    pointer-events: none;
    /* Die Blase an den dauerhaften .soul wird ein- und wieder ausgeblendet
       (js/seelen-aufstieg.js setzt .seelen-blase--sichtbar), die an den
       Erloesungs-Seelen bekommt die Klasse sofort mit - beide nutzen
       denselben Weg, damit es nur einen Zustand gibt. */
    opacity: 0;
    transition: opacity 0.6s ease;
}

.seelen-blase--sichtbar {
    opacity: 1;
}

.seelen-blase::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -7px;
    background: rgba(10, 22, 32, 0.78);
    border-right: 1px solid rgba(127, 208, 242, 0.55);
    border-bottom: 1px solid rgba(127, 208, 242, 0.55);
    transform: rotate(45deg);
}

/* Die Blasen an den dauerhaft aufsteigenden .soul (css/level3.css): deren
   Element ist nur wenige Pixel breit und traegt selbst opacity-Keyframes
   (soul-rise) - die Blase erbt diese Deckkraft als Kind automatisch mit,
   was gewollt ist (verschwindet die Seele, verschwindet auch ihr Text).
   Der Abstand nach oben faellt hier groesser aus, damit die Blase nicht auf
   dem Seelenkopf klebt. */
.soul > .seelen-blase {
    margin-bottom: 1.4em;
}

@media (prefers-reduced-motion: reduce) {
    .seele-aufstieg {
        animation-duration: 6s;
    }
    .seelen-blase {
        transition: none;
    }
}