/* Ladebildschirm: Das BMAcloud-Logo wird animiert aufgebaut.
   Die Wolke wird per Maske einmal im Kreis entlang der Kontur gezeichnet,
   die Flamme erscheint mit Ueberschwung und flackert danach dezent,
   ein Lichtimpuls wandert dauerhaft um den Wolkenring. */

body {
    margin: 0;
}

.loader-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    min-height: 100vh;
    background: radial-gradient(ellipse 120% 90% at 50% 38%, #1e1e22 0%, #18181b 55%, #121215 100%);
    animation: loaderFadeIn 0.35s ease-out both;
}

.loader {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loader-logo {
    width: 10rem;
    height: auto;
    overflow: visible;
}

/* Maskenstrich legt den Wolkenring entlang der Kontur frei ("im Kreis ausgemalt"). */
.bmac-reveal-stroke {
    stroke-dashoffset: 0;
    animation: bmacDraw 1.35s cubic-bezier(0.65, 0.05, 0.35, 1) 0.15s both;
}

/* Nach dem Zeichnen blendet die Vollflaeche der Maske Restkanten und Glow komplett frei. */
.bmac-reveal-fill {
    opacity: 1;
    animation: bmacFillIn 0.45s ease-out 1.4s both;
}

/* Weicher roter Schein hinter dem Ring pulsiert im Ruhezustand. */
.bmac-glow {
    filter: blur(9px);
    opacity: 0.35;
    animation: bmacGlowPulse 2.6s ease-in-out 1.5s infinite;
}

/* Heller Lichtimpuls laeuft nach dem Aufbau dauerhaft um die Wolke. */
.bmac-comet {
    opacity: 0;
    filter: blur(2px);
    animation:
        bmacCometIn 0.5s ease-out 2.1s forwards,
        bmacCometMove 2.8s linear 2.1s infinite;
}

/* Einmaliges Aufploppen der Flamme mit Ueberschwung nach dem Ringaufbau. */
.bmac-flame-pop {
    transform-box: view-box;
    transform-origin: 169px 191px;
    animation: bmacFlamePop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 1.05s both;
}

/* Dauerhaftes, dezentes Flackern der Flamme auf einer eigenen Gruppe,
   damit es nicht mit der Pop-Transformation kollidiert. */
.bmac-flame {
    transform-box: view-box;
    transform-origin: 169px 191px;
    animation: bmacFlameFlicker 2.1s ease-in-out 1.9s infinite;
}

/* Markenschriftzug faehrt mit Tracking-Effekt ein und erhaelt danach einen leichten Schimmer. */
.loader-wordmark {
    margin-top: 1.25rem;
    font-family: 'Archivo', 'Segoe UI', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: transparent;
    background: linear-gradient(100deg, #fafafa 42%, #ffb4a8 50%, #fafafa 58%);
    background-size: 260% 100%;
    background-position: -20% 0;
    -webkit-background-clip: text;
    background-clip: text;
    animation:
        bmacWordIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.5s both,
        bmacWordShimmer 3.2s ease-in-out 2.6s infinite;
}

@keyframes loaderFadeIn {
    from {
        opacity: 0;
    }
}

@keyframes bmacDraw {
    from {
        stroke-dashoffset: 101.5;
    }
}

@keyframes bmacFillIn {
    from {
        opacity: 0;
    }
}

@keyframes bmacGlowPulse {
    0%,
    100% {
        opacity: 0.22;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes bmacCometIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.5;
    }
}

@keyframes bmacCometMove {
    from {
        stroke-dashoffset: 100;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes bmacFlamePop {
    from {
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes bmacFlameFlicker {
    0%,
    100% {
        transform: none;
    }
    25% {
        transform: scaleY(1.03) scaleX(0.985) skewX(-0.7deg);
    }
    50% {
        transform: scaleY(0.975) scaleX(1.012);
    }
    75% {
        transform: scaleY(1.02) scaleX(0.99) skewX(0.7deg);
    }
}

@keyframes bmacWordIn {
    from {
        opacity: 0;
        transform: translateY(10px);
        letter-spacing: 0.3em;
    }
}

@keyframes bmacWordShimmer {
    0% {
        background-position: 120% 0;
    }
    45% {
        background-position: -20% 0;
    }
    100% {
        background-position: -20% 0;
    }
}

/* Barrierefreiheit: Ohne Bewegungswunsch wird das fertige Logo sofort statisch angezeigt. */
@media (prefers-reduced-motion: reduce) {
    .loader-container,
    .loader-container * {
        animation: none !important;
    }
}