:root {
    color-scheme: dark;
    font-family: "Poppins", sans-serif;
    background: #03040b;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    min-width: 320px;
    overflow-x: hidden;
    background: #03040b;
}

.space {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 115%,
            rgba(42, 54, 122, 0.16),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #020308 0%,
            #050611 48%,
            #020308 100%
        );
    isolation: isolate;
}

.space__stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.space__nebula {
    position: absolute;
    width: min(72vw, 980px);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(72px);
    opacity: 0.2;
    mix-blend-mode: screen;
    animation: nebula-drift 18s ease-in-out infinite alternate;
}

.space__nebula--violet {
    top: -44%;
    left: -20%;
    background:
        radial-gradient(
            circle,
            rgba(107, 67, 190, 0.55) 0%,
            rgba(75, 39, 145, 0.16) 42%,
            transparent 70%
        );
}

.space__nebula--blue {
    right: -28%;
    bottom: -52%;
    background:
        radial-gradient(
            circle,
            rgba(40, 104, 183, 0.52) 0%,
            rgba(32, 73, 148, 0.14) 43%,
            transparent 70%
        );
    animation-delay: -9s;
}

.space__vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at center,
            transparent 32%,
            rgba(0, 0, 0, 0.38) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(1, 2, 7, 0.05),
            rgba(1, 2, 7, 0.24)
        );
    pointer-events: none;
}

.rocket-flight {
    position: absolute;
    top: 73%;
    left: -140px;
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    color: #d8dcff;
    filter:
        drop-shadow(
            0 0 14px rgba(125, 104, 255, 0.42)
        );
    animation:
        rocket-crossing
        16s
        cubic-bezier(0.37, 0, 0.63, 1)
        infinite;
    will-change: transform;
}

.rocket-flight__icon {
    position: relative;
    z-index: 1;
    display: block;
    width: 56px;
    height: 56px;
    transform: rotate(48deg);
}

.rocket-flight__trail {
    position: absolute;
    right: 60%;
    bottom: 58%;
    width: 112px;
    height: 4px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(75, 114, 255, 0.08),
            rgba(157, 122, 255, 0.76)
        );
    filter: blur(3px);
    transform: rotate(48deg);
    transform-origin: right center;
    animation:
        trail-pulse
        0.9s
        ease-in-out
        infinite
        alternate;
}

.cover {
    position: relative;
    z-index: 1;
    min-height: 100svh;
}

@keyframes nebula-drift {
    from {
        transform:
            translate3d(-2%, -1%, 0)
            scale(0.96);
    }

    to {
        transform:
            translate3d(5%, 4%, 0)
            scale(1.08);
    }
}

@keyframes rocket-crossing {
    0%,
    10% {
        transform:
            translate3d(-12vw, 8vh, 0)
            rotate(-5deg)
            scale(0.76);
        opacity: 0;
    }

    16% {
        opacity: 1;
    }

    48% {
        transform:
            translate3d(49vw, -27vh, 0)
            rotate(2deg)
            scale(1);
        opacity: 1;
    }

    84% {
        opacity: 1;
    }

    92%,
    100% {
        transform:
            translate3d(
                calc(100vw + 180px),
                -72vh,
                0
            )
            rotate(-4deg)
            scale(0.74);
        opacity: 0;
    }
}

@keyframes trail-pulse {
    from {
        opacity: 0.52;
        transform:
            rotate(48deg)
            scaleX(0.76);
    }

    to {
        opacity: 1;
        transform:
            rotate(48deg)
            scaleX(1.08);
    }
}

@media (max-width: 720px) {
    .space__nebula {
        width: 115vw;
        filter: blur(54px);
    }

    .rocket-flight {
        animation-duration: 13s;
    }

    .rocket-flight__icon {
        width: 46px;
        height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .space__nebula,
    .rocket-flight,
    .rocket-flight__trail {
        animation: none;
    }

    .rocket-flight {
        top: 16%;
        right: 9%;
        left: auto;
        opacity: 0.8;
        transform: rotate(-8deg);
    }
}