/* Layer 4: Earth image (z-index 4) */

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

/* Earth image as CSS background */
.earth {
    position: absolute;
    top: 50dvh;
    left: 50dvw;
    /* Zentrierung */
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    background-image: url("../../images/earth_1920.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    aspect-ratio: 1 / 1;
    opacity: 0;

    animation-name: earth-zoom-in;
    animation-duration: 4s;
    animation-delay: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}