/* =====================================================
   RALKERIE METEORS
   LONG TRAILS
   FASTER MOVEMENT
   HEAD → DOWN RIGHT
   TRAIL → UP LEFT
===================================================== */

#meteors {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    pointer-events: none;

    z-index: 2;
}


/* =====================================================
   HITBOX
===================================================== */

.meteor-hitbox {
    position: absolute;

    width: 220px;
    height: 150px;

    pointer-events: auto;

    cursor: pointer;

    z-index: 2;
}


/* =====================================================
   METEOR HEAD
===================================================== */

.meteor {
    position: absolute;

    left: 0;
    top: 0;

    width: 9px;
    height: 9px;

    background: #ffffff;

    border-radius: 1px;

    transform-origin: center;

    box-shadow:
        0 0 4px #ffffff,
        0 0 8px #ffffff,
        0 0 14px #ff9be2,
        0 0 22px #ff63ca;

    pointer-events: none;

    animation:
        meteor-fly
        4.2s
        linear
        forwards;
}


/* =====================================================
   LONG MAIN TRAIL
===================================================== */

.meteor::after {
    content: "";

    position: absolute;

    right: 4px;
    top: 50%;

    width: 210px;
    height: 5px;

    transform:
        translateY(-50%)
        rotate(46deg);

    transform-origin: right center;

    background:
        linear-gradient(
            to left,

            #ffffff 0%,

            #ffffff 5%,

            #ffd6f3 13%,

            #ff9be2 25%,

            #ff63ca 48%,

            rgba(
                255,
                99,
                202,
                0.45
            ) 72%,

            rgba(
                255,
                99,
                202,
                0
            ) 100%
        );

    box-shadow:
        0 0 4px #ffffff,
        0 0 8px #ff9be2,
        0 0 15px #ff63ca,
        0 0 25px rgba(
            255,
            99,
            202,
            0.45
        );

    pointer-events: none;
}


/* =====================================================
   SOFT LONG GLOW
===================================================== */

.meteor::before {
    content: "";

    position: absolute;

    right: 6px;
    top: 50%;

    width: 205px;
    height: 13px;

    transform:
        translateY(-50%)
        rotate(46deg);

    transform-origin: right center;

    background:
        linear-gradient(
            to left,

            rgba(
                255,
                255,
                255,
                0.35
            ),

            rgba(
                255,
                155,
                226,
                0.28
            ),

            rgba(
                255,
                99,
                202,
                0.14
            ),

            transparent
        );

    filter: blur(4px);

    pointer-events: none;
}


/* =====================================================
   FASTER MOVEMENT
===================================================== */

@keyframes meteor-fly {

    0% {
        transform:
            translate(
                0,
                0
            );

        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        transform:
            translate(
                1400px,
                1400px
            );

        opacity: 0;
    }
}


/* =====================================================
   POPUP
===================================================== */

.meteor-popup {
    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        rgba(
            0,
            0,
            0,
            0.75
        );

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 5000;

    transition:
        opacity 0.15s ease;
}


.meteor-popup.visible {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =====================================================
   POPUP BOX
===================================================== */

.meteor-popup-box {
    position: relative;

    padding: 12px;

    background: #050505;

    border:
        2px solid #ffffff;

    box-shadow:
        6px 6px 0 #000000,
        0 0 20px rgba(
            255,
            99,
            202,
            0.5
        );
}


/* =====================================================
   POPUP GIF
===================================================== */

.meteor-popup-gif {
    display: block;

    width: 320px;

    height: auto;

    max-width: 80vw;

    max-height: 70vh;

    image-rendering: pixelated;
}


/* =====================================================
   CLOSE BUTTON
===================================================== */

.meteor-popup-close {
    position: absolute;

    top: -14px;
    right: -14px;

    width: 32px;
    height: 32px;

    padding: 0;

    border:
        2px solid #ffffff;

    background: #000000;

    color: #ffffff;

    font-family:
        "AndyB",
        Arial,
        sans-serif;

    font-size: 22px;

    line-height: 26px;

    cursor: pointer;

    z-index: 2;
}


.meteor-popup-close:hover {
    background: #ff63ca;

    color: #000000;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .meteor-hitbox {
        width: 180px;
        height: 120px;
    }

    .meteor {
        width: 7px;
        height: 7px;
    }

    .meteor::after {
        width: 150px;
        height: 4px;
    }

    .meteor::before {
        width: 145px;
        height: 10px;
    }

    .meteor-popup-gif {
        width: 260px;
    }
}