/* ===== Einladung - Glut/Hitze-Sichtbehinderung im Höllentor ============
   Legt sich über die GESAMTE Höllentor-Szene (Deko: Tor/Lava/Brücke/
   Seelen UND #hades-inhalt: Rückblick/Wann&Wo/Wir-sind-dabei) - z-index
   60. AUSGENOMMEN: BackgroundLeft/Right.svg (.bg-corner) und Ebene5.svg
   (.e5-top) sollen laut Auftrag klar sichtbar/unbedeckt bleiben - siehe
   ".bg-corner--vorne-kopie"/".e5-top--vorne-kopie" weiter unten für die
   Umsetzung. Referenz laut Vorgabe: ein beschlagenes/hitzeflirrendes
   Visier (Metroid-Prime-artig) - die Sicht ist dadurch bewusst spürbar
   erschwert, nicht nur dezent eingefärbt.

   Drei Teile, bewusst als eigenständige Ebenen (Element + zwei Pseudo-
   Elemente) statt alles auf ein einzelnes opacity/Blend zu packen - eine
   frühere Version des Nebel-Effekts in der Oberwelt hatte genau dieses
   Problem: opacity auf dem Eltern-Element blendet ALLE Nachfahren
   gemeinsam ab, auch Teile, die eigentlich voll sichtbar bleiben sollten.
     1. Hauptelement: NUR backdrop-filter:blur() - die eigentliche
        "Sicht erschwert"-Wirkung, wirkt gleichmäßig auf ALLES dahinter
        (Tor, Lava, Seelen, Text). Bewusst ohne eigene opacity/Animation,
        damit die Unschärfe konstant bleibt statt zwischendurch wieder
        klar zu werden.
     2. ::before: orange-gelber Glut-Schein (screen-Blend, pulsiert leicht
        - "blendet vor Glut und Hitze").
     3. ::after: Kondenswasser-Tropfen (Radial-Verläufe, als Kachel
        wiederholt) - unabhängig von der stark variablen Höhe der Szene
        (#hades-inhalt wächst mit dem Textinhalt), da background-repeat
        die Höhe nicht kennen muss - robuster als eine Positions-Berechnung
        in JS. */
.hoellentor-glut {
    position: absolute;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.hoellentor-glut::before {
    content: '';
    position: absolute;
    inset: 0;
    mix-blend-mode: screen;
    background:
        radial-gradient(ellipse 95% 80% at 50% 45%, rgba(255, 158, 48, 0.55) 0%, rgba(255, 120, 24, 0.32) 40%, transparent 75%),
        radial-gradient(ellipse 70% 50% at 20% 15%, rgba(255, 200, 90, 0.4) 0%, transparent 70%),
        radial-gradient(ellipse 70% 50% at 82% 20%, rgba(255, 140, 40, 0.4) 0%, transparent 70%);
    animation: glut-flackern 4.5s ease-in-out infinite alternate;
}

@keyframes glut-flackern {
    0%   { opacity: 0.75; }
    45%  { opacity: 0.95; }
    100% { opacity: 0.85; }
}

.hoellentor-glut::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.4;
    background-repeat: repeat;
    background-size: 340px 340px;
    background-image:
        radial-gradient(circle 16px at 40px 60px, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.14) 55%, transparent 68%),
        radial-gradient(circle 9px at 95px 30px, rgba(255, 255, 255, 0.32) 0%, transparent 62%),
        radial-gradient(circle 24px at 150px 90px, rgba(255, 210, 150, 0.3) 0%, rgba(255, 210, 150, 0.1) 55%, transparent 70%),
        radial-gradient(circle 12px at 210px 50px, rgba(255, 255, 255, 0.36) 0%, transparent 64%),
        radial-gradient(circle 30px at 270px 130px, rgba(255, 180, 100, 0.26) 0%, rgba(255, 180, 100, 0.08) 55%, transparent 72%),
        radial-gradient(circle 8px at 60px 170px, rgba(255, 255, 255, 0.3) 0%, transparent 60%),
        radial-gradient(circle 18px at 130px 210px, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.1) 55%, transparent 68%),
        radial-gradient(circle 14px at 200px 250px, rgba(255, 220, 170, 0.3) 0%, transparent 66%),
        radial-gradient(circle 26px at 290px 260px, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 55%, transparent 72%),
        radial-gradient(circle 10px at 20px 290px, rgba(255, 255, 255, 0.34) 0%, transparent 62%),
        radial-gradient(circle 20px at 100px 300px, rgba(255, 190, 120, 0.28) 0%, transparent 68%),
        radial-gradient(circle 13px at 250px 20px, rgba(255, 255, 255, 0.32) 0%, transparent 64%);
}

@media (prefers-reduced-motion: reduce) {
    .hoellentor-glut::before {
        animation: none;
        opacity: 0.85;
    }
}

/* ===== Lavaschein am Boden =====
   Extrem helles, pulsierendes Ellipsen-Leuchten, das vom unteren Rand her
   ins Bild kommt und Tor/Lava/Brücke/Text überstrahlt - eigenes Element
   statt eines weiteren Pseudo-Elements auf .hoellentor-glut (::before/
   ::after sind dort schon belegt). Bewusst NUR opacity animiert (kein
   transform/Bewegung) - deutlich günstiger fürs Compositing als
   durchgehende Bewegung, siehe Auftrag ("Bewegung frisst Performance").

   z-index 45: über Tor/Lava/Brücke/Text (bis 40), aber UNTER Ebene5.svg
   (.e5-top, z-index:50, siehe css/level3.css) - die soll wie gefordert
   unbedeckt bleiben. BackgroundLeft/Right.svg (.bg-corner, z-index:1)
   sind überraschend groß (laut Messung ~87% der Szenenhöhe von oben) und
   bereits jetzt größtenteils hinter Tor/Lava/Brücke/Text (z-index 5-40)
   verborgen - der Lavaschein reicht deshalb bewusst nur bis knapp unter
   ein Viertel der Szenenhöhe hoch (radial-gradient ist ab dort komplett
   transparent), damit er nicht zusätzlich in den Bereich hineinwäscht, in
   dem .bg-corner noch sichtbar ist. */
.hoellentor-lavaschein {
    position: absolute;
    inset: 0;
    z-index: 45;
    pointer-events: none;
    mix-blend-mode: screen;
    background: radial-gradient(
        ellipse 90% 80% at 50% 105%,
        rgba(255, 244, 214, 0.95) 0%,
        rgba(255, 200, 100, 0.7) 25%,
        rgba(255, 140, 40, 0.45) 50%,
        rgba(255, 90, 20, 0.2) 75%,
        transparent 100%
    );
    animation: lavaschein-pulsieren 3.2s ease-in-out infinite;
}

@keyframes lavaschein-pulsieren {
    0%, 100% { opacity: 0.8; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hoellentor-lavaschein {
        animation: none;
        opacity: 0.9;
    }
}

/* ===== Sichtbarkeits-Ausnahme: BackgroundLeft/Right.svg + Ebene5.svg =====
   Sollen laut Auftrag ÜBER BEIDEN Effekt-Ebenen (Lavaschein UND Glut/
   Kondenswasser/Unschärfe) liegen und klar sichtbar bleiben - nicht nur
   über dem Lavaschein, siehe Feedback.

   Das geht NICHT einfach per z-index-Anpassung der Originale: .bg-corner
   deckt laut Messung ~87% der Szenenhöhe ab und überschneidet sich damit
   zwangsläufig mit Tor/Lava/Brücke/Text, die weiterhin überstrahlt/
   unscharf werden sollen - ein einzelner z-index kann nicht gleichzeitig
   "unter .bg-corner" UND "über Tor/Lava/Text" sein. Die Originale bleiben
   deshalb unverändert an ihrer bisherigen Stelle (Teil der normalen Tor/
   Lava-Komposition, sitzen absichtlich hinter Tor/Lava/Brücke) - hier
   kommt jeweils eine ZWEITE, rein optische Kopie hinzu (dieselben Klassen,
   dieselbe Position/Größe/Filter, nur mit höherem z-index), die über
   .hoellentor-glut (60) liegt. Siehe index.php für die zusätzlichen
   Markup-Kopien. */
.bg-corner--vorne-kopie,
.e5-top--vorne-kopie {
    z-index: 65;
}

/* ===== Fluch gebrochen (siehe js/fluch-status.js) =====
   Glut/Lavaschein verschwinden komplett - die Vorne-Kopien von
   BackgroundLeft/Right.svg/Ebene5.svg dürfen einfach mit anzeigen wie
   gehabt (identisch mit den bereits sichtbaren Originalen, kein
   Unterschied für den Betrachter). Die Button-Sperre selbst steckt in
   js/fluchwarnung.js (fragt denselben Status separat ab). */
html.fluch-gebrochen:not(.erloesung-laeuft) .hoellentor-glut,
html.fluch-gebrochen:not(.erloesung-laeuft) .hoellentor-lavaschein {
    display: none;
}

/* ===== Erlösungssequenz (?state=free) =====
   Bis zum Nebel-Satz gilt die Welt als verflucht - das Höllentor glüht also
   ganz normal weiter (vorher war es schon beim ERSTEN Satz der Sequenz frei,
   siehe js/fluch-status.js). Am Nebel-Satz kommt .erloesung-ausblenden dazu
   und Glut/Lavaschein blenden weich aus, gemeinsam mit Oberwelt-Nebel
   (css/verfluchung.css) und Unterwelt-Effekten (css/level2.css) - gleiche
   Dauer, damit alles als EIN Vorgang wirkt. Die harte display:none-Regel
   oben ist solange ausgesetzt, weil display nicht transitionieren kann. */
html.erloesung-laeuft .hoellentor-glut,
html.erloesung-laeuft .hoellentor-lavaschein {
    transition: opacity 2.5s ease;
}

/* Der Lavaschein pulsiert per @keyframes auf DERSELBEN Eigenschaft
   (lavaschein-pulsieren, opacity 0.8<->1). Eine laufende Animation schlägt
   jede Transition - ohne dieses animation:none bliebe er beim Ausblenden
   einfach weiterpulsierend stehen. Nur waehrend der Sequenz noetig; im
   Normalfall verschwindet er ohnehin per display:none. */
html.erloesung-laeuft.erloesung-ausblenden .hoellentor-lavaschein {
    animation: none;
}

html.erloesung-laeuft.erloesung-ausblenden .hoellentor-glut,
html.erloesung-laeuft.erloesung-ausblenden .hoellentor-lavaschein {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    html.erloesung-laeuft .hoellentor-glut,
    html.erloesung-laeuft .hoellentor-lavaschein {
        transition: opacity 0.4s ease;
    }
}