/* =====================================================
   REPTILE INTERACTIVE CURSOR
   STYLE.CSS
===================================================== */


/* =========================
   RESET
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    min-height: 100vh;
    overflow-x: hidden;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #ffffff;

    background: #030609;
}


/* =========================
   BACKGROUND
========================= */

.background {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: -10;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            #09213a 0%,
            #07121e 30%,
            #03080e 60%,
            #010305 100%
        );
}


/* =========================
   BACKGROUND GLOW
========================= */

.bg-glow {
    position: absolute;

    width: 700px;
    height: 500px;

    left: 50%;
    top: 45%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(0, 130, 255, 0.13),
            rgba(0, 255, 180, 0.035) 45%,
            transparent 70%
        );

    filter: blur(50px);

    animation:
        glowMove
        7s
        ease-in-out
        infinite alternate;
}


@keyframes glowMove {

    from {
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    to {
        transform:
            translate(-50%, -52%)
            scale(1.12);
    }

}


/* =========================
   SUBTLE NOISE
========================= */

.bg-noise {
    position: absolute;
    inset: 0;

    opacity: 0.025;

    pointer-events: none;

    background-image:
        radial-gradient(
            rgba(255,255,255,0.9) 0.5px,
            transparent 0.7px
        );

    background-size:
        8px 8px;
}


/* =========================
   HEADER
========================= */

.header {
    position: relative;

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    padding:
        22px
        20px
        16px;

    text-align: center;
}


/* =========================
   LIVE STATUS
========================= */

.live-status {
    position: absolute;

    right: 22px;
    top: 18px;

    display: flex;
    align-items: center;

    gap: 6px;

    color: #7e948d;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.live-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #00ff9d;

    box-shadow:
        0 0 5px #00ff9d,
        0 0 12px rgba(0,255,157,0.7);

    animation:
        livePulse
        1.5s
        infinite;
}


@keyframes livePulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

}


/* =========================
   TITLE
========================= */

.header h1 {
    font-size:
        clamp(
            26px,
            4vw,
            44px
        );

    font-weight: 800;

    letter-spacing: -1.8px;

    line-height: 1.05;

    color: #f4f7fa;
}


.header h1 span {
    color: #69ffc5;

    text-shadow:
        0 0 20px
        rgba(0,255,157,0.18);
}


.header p {
    margin-top: 8px;

    color: #667889;

    font-size: 11px;

    line-height: 1.5;
}


/* =========================
   MAIN REPTILE AREA
========================= */

.reptile-area {
    position: relative;

    width:
        calc(100% - 30px);

    max-width: 1100px;

    height:
        clamp(
            480px,
            68vh,
            720px
        );

    margin:
        5px
        auto
        0;

    overflow: hidden;

    border:
        1px solid
        rgba(115,255,210,0.16);

    border-radius: 8px;

    background:

        radial-gradient(
            circle at center,
            rgba(0, 105, 255, 0.075),
            transparent 48%
        ),

        linear-gradient(
            180deg,
            rgba(3,10,17,0.96),
            rgba(1,5,9,0.99)
        );

    box-shadow:

        0 25px 80px
        rgba(0,0,0,0.65),

        0 0 50px
        rgba(0,150,255,0.035),

        inset 0 0 80px
        rgba(0,0,0,0.4);

    cursor: crosshair;

    touch-action: none;
}


/* =========================
   INNER SUBTLE GRID
========================= */

.reptile-area::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: 0.35;

    background-image:

        linear-gradient(
            rgba(80,220,255,0.018) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(80,220,255,0.018) 1px,
            transparent 1px
        );

    background-size:
        40px 40px;

    mask-image:
        radial-gradient(
            circle,
            black,
            transparent 78%
        );

    -webkit-mask-image:
        radial-gradient(
            circle,
            black,
            transparent 78%
        );
}


/* =========================
   CENTER GLOW
========================= */

.reptile-area::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 600px;
    height: 400px;

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

    z-index: 0;

    pointer-events: none;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(0,160,255,0.055),
            rgba(0,255,170,0.02) 45%,
            transparent 70%
        );

    filter: blur(25px);
}


/* =========================
   CANVAS
========================= */

#reptileCanvas {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    z-index: 5;

    touch-action: none;
}


/* =========================
   DECORATIVE CORNERS
========================= */

.corner {
    position: absolute;

    width: 24px;
    height: 24px;

    z-index: 8;

    pointer-events: none;

    opacity: 0.5;
}


.top-left {
    top: 12px;
    left: 12px;

    border-top:
        1px solid #64ffc3;

    border-left:
        1px solid #64ffc3;
}


.top-right {
    top: 12px;
    right: 12px;

    border-top:
        1px solid #64ffc3;

    border-right:
        1px solid #64ffc3;
}


.bottom-left {
    bottom: 12px;
    left: 12px;

    border-bottom:
        1px solid #64ffc3;

    border-left:
        1px solid #64ffc3;
}


.bottom-right {
    bottom: 12px;
    right: 12px;

    border-bottom:
        1px solid #64ffc3;

    border-right:
        1px solid #64ffc3;
}


/* =========================
   MOVE MESSAGE
========================= */

.move-message {
    position: absolute;

    left: 50%;
    top: 50%;

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

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        12px
        17px;

    border:
        1px solid
        rgba(0,255,157,0.12);

    border-radius: 10px;

    background:
        rgba(1,8,13,0.72);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,0.3);

    pointer-events: none;

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}


/* =========================
   MOUSE ICON
========================= */

.mouse-icon {
    position: relative;

    width: 20px;
    height: 31px;

    flex-shrink: 0;

    border:
        1.5px solid
        #61ffc1;

    border-radius: 13px;

    box-shadow:
        0 0 12px
        rgba(0,255,157,0.15);
}


.mouse-icon span {
    position: absolute;

    left: 50%;
    top: 6px;

    width: 2px;
    height: 6px;

    transform:
        translateX(-50%);

    border-radius: 5px;

    background: #00ff9d;

    box-shadow:
        0 0 5px
        #00ff9d;

    animation:
        mouseScroll
        1.4s
        infinite;
}


@keyframes mouseScroll {

    0% {
        opacity: 0;

        transform:
            translate(-50%,0);
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%,9px);
    }

}


/* =========================
   MESSAGE TEXT
========================= */

.message-text {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.message-text strong {
    color: #c9fbe7;

    font-size: 11px;

    font-weight: 600;
}


.message-text small {
    color: #536878;

    font-size: 8px;
}


/* =========================
   TRACKING STATUS
========================= */

.tracking-status {
    position: absolute;

    left: 18px;
    bottom: 17px;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 7px;

    color: #52675f;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.5px;

    pointer-events: none;
}


.tracking-status span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #00ff9d;

    box-shadow:
        0 0 7px
        #00ff9d;
}


/* =========================
   COORDINATES
========================= */

.coordinates {
    position: absolute;

    right: 18px;
    bottom: 16px;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 6px;

    padding:
        6px
        9px;

    border:
        1px solid
        rgba(255,255,255,0.05);

    border-radius: 5px;

    color: #435969;

    background:
        rgba(0,5,9,0.55);

    font-family: monospace;

    font-size: 7px;

    pointer-events: none;
}


.coordinates strong {
    min-width: 24px;

    color: #6f8b99;

    font-weight: 500;
}


.coordinates > span {
    width: 1px;
    height: 9px;

    margin:
        0 3px;

    background:
        rgba(255,255,255,0.08);
}


/* =========================
   FOOTER
========================= */

.footer {
    width:
        calc(100% - 30px);

    max-width: 1100px;

    min-height: 65px;

    margin:
        0 auto
        25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(115,255,210,0.08);

    border-top: 0;

    border-radius:
        0 0 10px 10px;

    background:
        rgba(4,11,18,0.7);
}


/* =========================
   FEATURES
========================= */

.feature {
    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;
}


.feature > span {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 7px;

    color: #55ffc0;

    font-size: 11px;

    border:
        1px solid
        rgba(0,255,157,0.1);

    background:
        rgba(0,255,157,0.035);
}


.feature div {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.feature strong {
    color: #91a6b2;

    font-size: 9px;

    font-weight: 600;
}


.feature small {
    color: #415361;

    font-size: 7px;
}


.divider {
    width: 1px;
    height: 27px;

    background:
        rgba(255,255,255,0.055);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 768px) {

    .header {
        padding:
            20px
            15px
            14px;
    }


    .reptile-area {
        width:
            calc(100% - 20px);

        height:
            65vh;

        min-height:
            450px;
    }


    .footer {
        width:
            calc(100% - 20px);
    }

}


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

@media (max-width: 550px) {

    body {
        min-height:
            100dvh;
    }


    /* HEADER */

    .header {
        padding:
            18px
            12px
            12px;
    }


    .header h1 {
        padding:
            0 45px;

        font-size:
            26px;

        letter-spacing:
            -1px;
    }


    .header p {
        margin-top:
            6px;

        font-size:
            9px;
    }


    .live-status {
        right:
            12px;

        top:
            12px;

        font-size:
            6px;
    }


    /* MAIN AREA */

    .reptile-area {
        width:
            calc(100% - 14px);

        height:
            68vh;

        min-height:
            470px;

        max-height:
            650px;

        margin-top:
            4px;

        border-radius:
            5px;
    }


    /* FOOTER */

    .footer {
        width:
            calc(100% - 14px);

        min-height:
            58px;

        margin-bottom:
            15px;
    }


    .feature {
        gap:
            4px;
    }


    .feature > span {
        width:
            23px;

        height:
            23px;

        font-size:
            9px;
    }


    .feature strong {
        font-size:
            7px;
    }


    .feature small {
        display: none;
    }


    .divider {
        height:
            22px;
    }


    /* MOVE MESSAGE */

    .move-message {
        padding:
            10px
            13px;
    }


    .message-text strong {
        font-size:
            9px;
    }


    .message-text small {
        font-size:
            7px;
    }


    /* STATUS */

    .tracking-status {
        left:
            10px;

        bottom:
            11px;

        font-size:
            5px;

        letter-spacing:
            0.8px;
    }


    .coordinates {
        right:
            10px;

        bottom:
            9px;

        font-size:
            6px;
    }

}


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

@media (max-width: 380px) {

    .header h1 {
        padding:
            0 35px;

        font-size:
            23px;
    }


    .reptile-area {
        height:
            65vh;

        min-height:
            430px;
    }


    .feature > span {
        display: none;
    }

}