/* Layer 5: Logo (z-index 5) */

.logo-layer {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
}

/* Logo container with animated movement */
.logo {
    position: absolute;
    top: 50%;
    left: 120vw;
    /* Start further outside */
    height: 33vh;
    aspect-ratio: 520 / 175;
    background-image: url("../../images/free-planet-earth-logo-light-background.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transform: translateY(-50%);
    animation-name: logo-fly-in-out;
    animation-duration: 5s;
    animation-delay: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

/* Glowing oval border via pseudo-element */
.logo::before {
    content: "";
    position: absolute;
    inset: -10%;
    border-radius: 50% / 35%;
    background: radial-gradient(ellipse at center,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0.2) 35%,
            rgba(255, 255, 255, 0.1) 60%,
            rgba(255, 255, 255, 0) 100%);
    z-index: -1;
}