/* ===== Einladung - Portal im Himmel ======================================
   Vorher komplett unsichtbar (opacity:0, keine Partikel) - erscheint erst,
   wenn js/himmel-portal.js die Klasse .himmel-portal--aktiv setzt. Das
   passiert ausschließlich über window.HimmelPortal.freischalten(), das
   js/verlorene-seele.js im fertigCallback von STORY_JA aufruft (nach
   "Natürlich helfe ich dir!", sobald dieser Dialog komplett abgeschlossen
   ist) - siehe dort. Am bestehenden Dialog selbst ändert das nichts.

   Position: fest im oberen Bereich von #scene-himmel (siehe index.php),
   mittig, oberhalb des Mondes (.level1-mond sitzt bei top:88vh, deutlich
   tiefer) und unabhängig von ihm.

   Drei Ebenen, von hinten nach vorne:
     1. .himmel-portal-glow  - weicher, großflächiger Schein (Blur)
     2. .himmel-portal-kern  - schwarze Fläche + scharfe, helle Kontur
     3. .himmel-portal-partikel - Bühne für die JS-generierten Partikel
   Kontur/Glow sind reine CSS-Animationen (performant, nur opacity/
   transform/box-shadow) - nur die Partikel selbst werden von JS erzeugt
   und wieder entfernt. */

.himmel-portal {
    position: absolute;
    top: calc(22 * var(--uh));
    left: 50%;
    width: min(calc(13 * var(--uw)), 220px);
    aspect-ratio: 2 / 1; /* oval statt kreisrund - breiter, flacher */
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.6s ease;
}

.himmel-portal--aktiv {
    opacity: 1;
}

/* ----- weicher, deutlich sichtbarer Schein nach außen ----- */
.himmel-portal-glow {
    position: absolute;
    inset: -75%;
    border-radius: 50%;
    background: radial-gradient(ellipse, var(--accent-bright) 0%, var(--accent) 38%, transparent 70%);
    filter: blur(20px);
    opacity: 0.45;
    transition: background var(--theme-transition);
}

.himmel-portal--aktiv .himmel-portal-glow {
    animation: portal-glow-pulsieren 6.5s ease-in-out infinite;
}

/* Langsam, organisch: nur opacity + eine sehr leichte Skalierung - kein
   hektisches Blinken, kein aufwendiges Repaint (Blur/Gradient bleiben
   unverändert, nur Compositing-Eigenschaften animieren). */
@keyframes portal-glow-pulsieren {
    0%, 100% { opacity: 0.35; transform: scale(0.95); }
    50%      { opacity: 0.7;  transform: scale(1.06); }
}

/* ----- schwarzer Kern mit scharfer, heller Kontur ----- */
.himmel-portal-kern {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #000;
    border: 2px solid var(--accent-bright);
    box-shadow:
        0 0 5px 1px var(--accent-bright),
        0 0 20px 3px var(--accent);
    transition: border-color var(--theme-transition), box-shadow var(--theme-transition);
}

.himmel-portal--aktiv .himmel-portal-kern {
    animation: portal-kontur-pulsieren 5s ease-in-out infinite;
}

/* Kontur bleibt jederzeit deutlich schärfer/heller als der äußere Schein -
   nur die Leuchtstärke (box-shadow-Ausdehnung) pulsiert leicht, die Kante
   selbst (border) bleibt immer scharf. */
@keyframes portal-kontur-pulsieren {
    0%, 100% {
        box-shadow: 0 0 5px 1px var(--accent-bright), 0 0 16px 2px var(--accent);
    }
    50% {
        box-shadow: 0 0 9px 2px var(--accent-bright), 0 0 28px 5px var(--accent);
    }
}

/* ----- Partikel-Bühne: 1x1px-Anker in der Portalmitte, Kinder werden per
   JS ein-/ausgehängt (siehe js/himmel-portal.js) ----- */
.himmel-portal-partikel {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
}

/* Einzelner Partikel: kleine, längliche Ellipse. Start-/Zielposition,
   Drehwinkel (Bewegungsrichtung), Dauer, Farbe und Deckkraft kommen als
   Custom Properties von JS (jeder Partikel individuell, siehe dort) -
   die Werte hier sind nur Fallbacks. */
.portal-partikel {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: var(--partikel-farbe, var(--accent-bright));
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--partikel-winkel, 0deg));
    animation: portal-partikel-fliessen var(--partikel-dauer, 3s) ease-in-out var(--partikel-verzoegerung, 0s) forwards;
    will-change: transform, opacity;
}

@keyframes portal-partikel-fliessen {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--partikel-start-x, 0px), var(--partikel-start-y, 0px)) rotate(var(--partikel-winkel, 0deg)) scale(0.55);
    }
    14% {
        opacity: var(--partikel-opazitaet, 0.7);
    }
    72% {
        opacity: var(--partikel-opazitaet, 0.7);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--partikel-end-x, 0px), var(--partikel-end-y, 0px)) rotate(var(--partikel-winkel, 0deg)) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .himmel-portal--aktiv .himmel-portal-glow,
    .himmel-portal--aktiv .himmel-portal-kern {
        animation: none;
        opacity: 0.6;
    }
    .portal-partikel {
        display: none;
    }
}