/* Vollbild-Startanimation für "Über mich" */
.about-loader {
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    pointer-events: none;
    opacity: 1;
    /* kürzeres Fade-Out im Outro */
    transition: opacity 350ms ease, background-color 350ms ease;
}

/* kein eigenes Intro mehr für den Hintergrund */
.about-loader-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    /* sanftes Einblenden/hochsliden beim Start */
    opacity: 0;
    transform: translateY(10px);
    animation: about-loader-inner-in 600ms cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* Das Logo im About-Loader */
.about-loader-logo {
    max-width: 840px;
    width: 100%;
    height: auto;
    object-fit: contain;
    /* Logo mit leichtem, dezentem Puls-Effekt statt starkem Zoom */
    opacity: 1;
    transform-origin: center center;
    animation: about-loader-logo-pulse 1200ms ease-in-out infinite alternate;
}

@keyframes about-loader-inner-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes about-loader-logo-pulse {
    from {
        transform: scale(0.97);
    }

    to {
        transform: scale(1.03);
    }
}

/* Klasse zum Ausblenden des About-Loaders:
   -> nach der Zoom-Animation: Hintergrund schwarz + schnelleres Fade-out */
.about-loader--hidden {
    opacity: 0;
    pointer-events: none;
    background-color: #000000;
}

/* Logo-Outro: leichtes, glattes Ausfaden */
.about-loader--hidden .about-loader-logo {
    opacity: 0;
    transition: opacity 350ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .about-loader {
        display: none;
    }

    .about-loader-logo {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .about-loader-inner {
        animation: none;
        opacity: 1;
        transform: none;
    }
}