.shooting-star {
    --star-length: 160px;
    --star-duration: 7000ms;
    --star-angle: -35deg;
    --star-travel-x: -1000px;
    --star-travel-y: 700px;
    --star-opacity: 1;
    --star-thickness: 1.5px;
    --star-head-size: 4px;
    --star-glow: 8px;

    position: fixed;
    width: var(--star-length);
    height: var(--star-thickness);
    pointer-events: none;
    z-index: 999999;
    opacity: 0;
    transform-origin: left center;

    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 1) 0%,
        rgba(240, 248, 255, 0.95) 5%,
        rgba(215, 235, 255, 0.68) 20%,
        rgba(185, 215, 255, 0.30) 50%,
        rgba(255, 255, 255, 0) 100%
    );

    border-radius: 999px;

    filter: drop-shadow(
        0 0
        var(--star-glow)
        rgba(190, 220, 255, 0.65)
    );

    animation:
        shooting-star-flight
        var(--star-duration)
        linear
        forwards;

    will-change:
        transform,
        opacity;
}

.shooting-star::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--star-head-size);
    height: var(--star-head-size);

    transform:
        translate(
            -40%,
            -50%
        );

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            1
        );

    box-shadow:
        0 0 4px
        rgba(
            255,
            255,
            255,
            1
        ),

        0 0 9px
        rgba(
            225,
            240,
            255,
            0.95
        ),

        0 0 18px
        rgba(
            185,
            220,
            255,
            0.75
        ),

        0 0 28px
        rgba(
            150,
            200,
            255,
            0.35
        );
}

.shooting-star::after {
    content: "";
    position: absolute;
    left: 1px;
    top: 50%;
    width: 35%;

    height:
        calc(
            var(--star-thickness) * 2.5
        );

    transform:
        translateY(-50%);

    border-radius: 999px;

    background:
        linear-gradient(
            to right,
            rgba(
                255,
                255,
                255,
                0.50
            ),
            rgba(
                200,
                225,
                255,
                0
            )
        );

    filter:
        blur(2px);

    opacity: 0.65;
}

@keyframes shooting-star-flight {
    0% {
        opacity: 0;

        transform:
            translate3d(
                0,
                0,
                0
            )
            rotate(
                var(--star-angle)
            );
    }

    5% {
        opacity:
            calc(
                var(--star-opacity) * 0.7
            );
    }

    12% {
        opacity:
            var(--star-opacity);
    }

    72% {
        opacity:
            var(--star-opacity);
    }

    88% {
        opacity:
            calc(
                var(--star-opacity) * 0.55
            );
    }

    100% {
        opacity: 0;

        transform:
            translate3d(
                var(--star-travel-x),
                var(--star-travel-y),
                0
            )
            rotate(
                var(--star-angle)
            );
    }
}

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