/**
 * Der Aufstiegs-Moment — Design-Update E2b (Wahlzettel X3, 15.10.2026).
 *
 * Die Sprache der Sendung spricht nur bei Ereignissen (Mischung „Ein Saal,
 * drei Lautstärken") — ein neuer Rang ist eins. Der Saal wird dunkel, der
 * Kegel des Kronleuchters geht auf, das Wappen kommt groß ins Licht, der Rang
 * fährt als Bauchbinde ein (.jt-binde aus bausteine.css, dieselbe wie überall),
 * die Stunden rollen im Zählwerk. Rund 2,5 Sekunden, dann steht alles still.
 * Keine Konfetti, keine Medaille — ein Wappen und Licht.
 *
 * Markup: views/partials/aufstieg_moment.ejs; Ablauf und Merker:
 * public/js/aufstieg.js (setzt .is-ein beim Öffnen, --ein an der Binde nach
 * 0,95 s). Geladen auf der Startseite und im Profil.
 */

/* Der Dialog füllt den Bildschirm; abgedunkelt wird über ::backdrop. Er liegt
   in der obersten Ebene des Browsers (showModal) — kein z-index-Wettlauf mit
   der Kopfzeile, und die Seite dahinter nimmt keine Eingaben an. */
.aufstieg {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: transparent;
    color: var(--jt-text);
    font-family: var(--jt-schrift-text);
}

.aufstieg[open] {
    display: grid;
    place-items: center;
}

.aufstieg::backdrop {
    background: rgba(6, 5, 4, 0.86);
}

/* Der Kegel des Kronleuchters — von oben, wie im Hallenfoto. */
.aufstieg__licht {
    position: absolute;
    inset: 0;
    background: radial-gradient(30% 62% at 50% -6%, rgba(255, 222, 160, 0.34), rgba(255, 214, 140, 0.08) 60%, transparent 78%);
    transform-origin: 50% 0;
    pointer-events: none;
}

.aufstieg__buehne {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 20px;
    width: min(480px, calc(100% - 32px));
    text-align: center;
}

/* Das Wappen im Medaillon der Leiter: Ring in der Discord-Rollenfarbe (K6). */
.aufstieg__medaillon {
    display: grid;
    place-items: center;
    width: 176px;
    height: 176px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #2b241c, #0d0a08 75%);
    box-shadow:
        0 0 0 4px #0d0a08,
        0 0 0 7px var(--rang-farbe, var(--jt-messing)),
        0 0 60px color-mix(in srgb, var(--rang-farbe, var(--jt-messing)) 45%, transparent),
        0 24px 40px rgba(0, 0, 0, 0.7);
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .aufstieg__medaillon {
        box-shadow: 0 0 0 4px #0d0a08, 0 0 0 7px var(--rang-farbe, var(--jt-messing)), 0 24px 40px rgba(0, 0, 0, 0.7);
    }
}

.aufstieg__wappen {
    display: block;
    width: 130px;
    height: 130px;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 30px rgba(255, 214, 140, 0.35));
}

/* Die Binde: der Ereignis-Baustein, der Rang in der Inschrift der Plaketten
   (Cinzel im Messingverlauf). Bis sie einfährt, ist sie zugeklappt — die
   Wischblende (jt-naht-wisch) öffnet sie von links. */
.aufstieg .aufstieg__binde {
    min-width: min(360px, 100%);
    text-align: left;
}

.aufstieg .aufstieg__binde .jt-binde__titel {
    font-family: var(--jt-schrift-rang);
    font-size: clamp(1.5rem, 5vw, 2.1rem);
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--jt-creme);
    background: var(--jt-titel-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.aufstieg__stunden {
    color: var(--jt-text);
    font-family: var(--jt-schrift-wert);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.aufstieg.is-ein .aufstieg__binde:not(.jt-binde--ein) {
    clip-path: inset(0 100% 0 0);
}

.aufstieg__weiter {
    min-width: 150px;
}

/* ── Der Ablauf ─────────────────────────────────────────────────────────── */
.aufstieg.is-ein::backdrop { animation: aufstiegDunkel 0.45s ease-out both; }
.aufstieg.is-ein .aufstieg__licht { animation: aufstiegKegel 0.9s 0.2s var(--jt-kurve) both; }
.aufstieg.is-ein .aufstieg__medaillon { animation: aufstiegWappen 0.9s 0.45s var(--jt-kurve) both; }
.aufstieg.is-ein .aufstieg__weiter { animation: aufstiegEin 0.5s 1.5s ease-out both; }

@keyframes aufstiegDunkel {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes aufstiegKegel {
    from { transform: scaleX(0.15); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes aufstiegWappen {
    0% { transform: translateY(26px) scale(0.7); opacity: 0; filter: brightness(2.2); }
    60% { opacity: 1; }
    100% { transform: none; opacity: 1; filter: none; }
}

@keyframes aufstiegEin {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
    .aufstieg__medaillon { width: 140px; height: 140px; }
    .aufstieg__wappen { width: 104px; height: 104px; }
}

/* Ohne Bewegung steht der Moment sofort fertig da (das Skript setzt die Binde
   dann gleich offen; ihr eigenes Reduce steht in bausteine.css). */
@media (prefers-reduced-motion: reduce) {
    .aufstieg.is-ein::backdrop,
    .aufstieg.is-ein .aufstieg__licht,
    .aufstieg.is-ein .aufstieg__medaillon,
    .aufstieg.is-ein .aufstieg__weiter {
        animation: none;
    }
}