/* Start-Animation der Login-Seite (Ablauf und Zeitplan: js/login_intro.js).
   Foto, Flicken (leeres Brett) und freigestellte Teile liegen in .li-buehne genau so wie das
   Hintergrundbild von style.css.php (fest, zentriert, "cover"), damit jedes Teil auf seinem
   Platz im Foto landet und am Ende nahtlos der normale Seitenhintergrund übernimmt.
   Die Klasse "login-intro" setzt login_intro.js schon im <head>. */

/* Seitenhintergrund verdecken, solange die Intro-Ebene läuft */
html.login-intro body {
    background: #14110e;
}

html.login-intro .container,
html.login-intro-kasten .container {
    z-index: 1;
}

/* Login-Kasten und Logo erst, wenn alle Teile liegen */
html.login-intro:not(.login-intro-kasten) .glass-panel {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
}

html.login-intro:not(.login-intro-kasten) .logo {
    opacity: 0;
    transform: translateX(-50%) translateY(-90px) rotate(-8deg) scale(1.25);
}

html.login-intro-kasten .glass-panel {
    transition: opacity 600ms ease, transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.login-intro-kasten .logo {
    transition: opacity 400ms ease 250ms, transform 700ms cubic-bezier(0.34, 1.5, 0.6, 1) 250ms;
}

.li-buehne {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #14110e;
    container-type: size; /* Brett in cqw/cqh = tatsächliche Fenstergröße */
    pointer-events: none;
}

.li-buehne.li-weg {
    opacity: 0;
    transition: opacity 800ms ease;
}

.li-kamera {
    position: absolute;
    inset: 0;
}

/* Wie background-size: cover; background-position: center */
.li-brett {
    --b: max(100vw, calc(100vh * 2362 / 1440));
    --h: max(100vh, calc(100vw * 1440 / 2362));
    --b: max(100cqw, calc(100cqh * 2362 / 1440));
    --h: max(100cqh, calc(100cqw * 1440 / 2362));
    position: absolute;
    left: calc((100% - var(--b)) / 2);
    top: calc((100% - var(--h)) / 2);
    width: var(--b);
    height: var(--h);
}

.li-buehne:not(.li-start) .li-brett {
    opacity: 0;
}

.li-brett-bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.li-flicken,
.li-teil,
.li-schatten {
    position: absolute;
    display: block;
    max-width: none;
    will-change: transform, opacity;
}

/* Schatten = Umriss des Teils, schwarz und weich (Länge in Bildpixeln umgerechnet) */
.li-schatten {
    filter: brightness(0) blur(calc(var(--b) * 9 / 2362));
    opacity: 0.55;
}

.li-staub {
    position: absolute;
    opacity: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(226, 214, 192, 0.7), rgba(226, 214, 192, 0.3) 60%, rgba(226, 214, 192, 0));
}

/* Dunkler Rand am Anfang, verschwindet mit dem Login-Kasten */
.li-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(10, 8, 6, 0) 45%, rgba(10, 8, 6, 0.6) 100%);
    transition: opacity 1000ms ease;
}

html.login-intro-kasten .li-vignette {
    opacity: 0;
}