/* =========================================================
   EARTH EXPLORER
   COMPLETE HOMEPAGE CSS
========================================================= */

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


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


body {
    width: 100%;
    min-height: 100vh;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(10, 72, 120, 0.4),
            transparent 34%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(7, 42, 76, 0.3),
            transparent 31%
        ),
        #020711;

    color: #ffffff;

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


/* =========================================================
   STARS
========================================================= */

.stars {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    z-index: -10;
}


.star {
    position: absolute;

    width: 2px;
    height: 2px;

    background: white;

    border-radius: 50%;

    opacity: 0.7;
}


/* =========================================================
   NAVBAR
========================================================= */

.topbar {
    width: 100%;

    height: 76px;

    padding:
        0 42px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        rgba(1, 7, 17, 0.94);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);

    position: relative;

    z-index: 50;
}


.brand {
    color: white;

    text-decoration: none;

    font-size: 17px;

    font-weight: 800;

    letter-spacing: 3px;

    white-space: nowrap;
}


.brand span {
    color: #43d9ff;
}


.brand-globe {
    margin-right: 7px;
}


.navigation {
    display: flex;

    gap: 10px;
}


.nav-link {
    padding:
        10px 14px;

    color: #748c9d;

    text-decoration: none;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

    border:
        1px solid
        transparent;
}


.nav-link:hover {
    color: #53dcff;
}


.nav-link.active {
    color: #53dcff;

    border-color:
        rgba(70, 215, 255, 0.3);

    background:
        rgba(70, 215, 255, 0.05);
}


/* =========================================================
   MAIN
========================================================= */

.homepage {
    width: 100%;

    min-height:
        calc(100vh - 76px);

    display: grid;

    grid-template-columns:
        44% 56%;

    align-items: center;
}


/* =========================================================
   HERO
========================================================= */

.hero-text {
    padding:
        45px 25px 45px 8%;

    position: relative;

    z-index: 5;
}


.small-label {
    color: #4edcff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 3px;
}


.hero-text h1 {
    margin-top: 15px;

    font-size:
        clamp(
            48px,
            5.7vw,
            82px
        );

    line-height: 0.95;

    letter-spacing: -2px;

    font-weight: 900;
}


.hero-text h1 span {
    color: #42d8ff;
}


.hero-description {
    max-width: 540px;

    margin-top: 25px;

    color: #8195a3;

    font-size: 13px;

    line-height: 1.9;
}


/* =========================================================
   SEARCH
========================================================= */

.hero-search {
    width:
        min(
            530px,
            100%
        );

    height: 52px;

    margin-top: 27px;

    display: flex;

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

    border:
        1px solid
        rgba(72,215,255,0.35);
}


.hero-search input {
    flex: 1;

    width: 100%;

    height: 50px;

    padding:
        0 16px;

    border: none;

    outline: none;

    background:
        transparent;

    color: white;

    font-size: 12px;
}


.hero-search input::placeholder {
    color: #61798a;
}


.hero-search button {
    width: 105px;

    height: 50px;

    border: none;

    border-left:
        1px solid
        rgba(72,215,255,0.22);

    background:
        rgba(70,215,255,0.08);

    color: #4edcff;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

    cursor: pointer;
}


.hero-search button:hover {
    background:
        rgba(70,215,255,0.15);
}


.search-message {
    min-height: 18px;

    margin-top: 7px;

    color: #71899b;

    font-size: 10px;
}


/* =========================================================
   BUTTONS
========================================================= */

.hero-buttons {
    margin-top: 12px;

    display: flex;

    align-items: center;

    gap: 20px;

    flex-wrap: wrap;
}


.primary-button {
    display: inline-block;

    padding:
        15px 20px;

    color: white;

    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            #0a86b9,
            #07457e
        );

    border:
        1px solid
        rgba(70,215,255,0.18);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}


.instruction {
    color: #637d8e;

    font-size: 9px;
}


.instruction span {
    color: #4edcff;

    margin-right: 5px;

    font-size: 17px;
}


/* =========================================================
   STATS
========================================================= */

.homepage-stats {
    display: flex;

    gap: 45px;

    margin-top: 42px;
}


.homepage-stats div {
    display: flex;

    flex-direction: column;
}


.homepage-stats strong {
    color: #e0ebf1;

    font-size: 25px;
}


.homepage-stats small {
    margin-top: 4px;

    color: #60798a;

    font-size: 7px;

    letter-spacing: 2px;
}


/* =========================================================
   EARTH SECTION
========================================================= */

.earth-section {
    width: 100%;

    height:
        calc(100vh - 76px);

    min-height: 560px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   EARTH CONTAINER
========================================================= */

.earth-container {
    width:
        min(
            760px,
            56vw
        );

    height:
        min(
            760px,
            88vh
        );

    min-height: 520px;

    position: relative;

    overflow: visible;
}


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

.earth-container canvas {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;

    height: 100% !important;

    display: block;

    outline: none;

    cursor: grab;
}


.earth-container canvas:active {
    cursor: grabbing;
}


/* =========================================================
   LOADING
========================================================= */

.earth-loading {
    position: absolute;

    inset: 0;

    z-index: 20;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 14px;

    color: #668293;

    font-size: 9px;

    letter-spacing: 3px;

    pointer-events: none;
}


.loading-globe {
    font-size: 65px;

    filter:
        drop-shadow(
            0 0 25px
            rgba(65,215,255,0.55)
        );
}


/* =========================================================
   EARTH LABEL
========================================================= */

.earth-label {
    position: absolute;

    right: 9%;

    bottom: 7%;

    color: #658091;

    font-size: 8px;

    letter-spacing: 2px;
}


.earth-label span {
    display: inline-block;

    width: 6px;

    height: 6px;

    margin-right: 8px;

    border-radius: 50%;

    background: #45dcff;

    box-shadow:
        0 0 12px
        #45dcff;
}


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

.country-popup {
    position: fixed;

    left: 50%;

    bottom: 28px;

    transform:
        translateX(-50%);

    width:
        min(
            430px,
            calc(100vw - 30px)
        );

    padding: 24px;

    background:
        rgba(3,13,25,0.97);

    border:
        1px solid
        rgba(70,215,255,0.35);

    box-shadow:
        0 20px 60px
        rgba(0,0,0,0.55);

    backdrop-filter:
        blur(18px);

    z-index: 100;
}


.hidden {
    display: none !important;
}


.popup-label {
    color: #50d9ff;

    font-size: 8px;

    letter-spacing: 3px;
}


.country-popup h2 {
    margin-top: 7px;

    color: white;

    font-size: 28px;
}


.country-popup p {
    margin-top: 7px;

    color: #78909f;

    font-size: 11px;

    line-height: 1.6;
}


.popup-button {
    display: inline-block;

    margin-top: 15px;

    padding:
        11px 15px;

    color: white;

    background:
        #08739f;

    text-decoration: none;

    font-size: 9px;

    letter-spacing: 2px;
}


.close-popup {
    position: absolute;

    top: 8px;

    right: 10px;

    width: 30px;

    height: 30px;

    border: none;

    background: transparent;

    color: #71899a;

    font-size: 23px;

    cursor: pointer;
}


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

@media (max-width: 1050px) {

    .homepage {
        grid-template-columns:
            1fr;
    }


    .hero-text {
        padding:
            40px 25px 10px;

        text-align: center;
    }


    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }


    .hero-search {
        margin-left: auto;
        margin-right: auto;
    }


    .hero-buttons {
        justify-content: center;
    }


    .homepage-stats {
        justify-content: center;
    }


    .earth-section {
        height: 600px;
    }


    .earth-container {
        width: 680px;
        height: 580px;
    }


    .earth-label {
        right: 50%;

        transform:
            translateX(50%);

        bottom: 15px;
    }

}


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

@media (max-width: 650px) {

    .topbar {
        height: 68px;

        padding:
            0 16px;
    }


    .brand {
        font-size: 13px;

        letter-spacing: 2px;
    }


    .nav-link {
        padding:
            8px 9px;

        font-size: 8px;
    }


    .hero-text {
        padding:
            35px 17px 0;
    }


    .hero-text h1 {
        font-size: 46px;
    }


    .hero-description {
        font-size: 12px;
    }


    .hero-search {
        height: 48px;
    }


    .hero-search button {
        width: 95px;
    }


    .homepage-stats {
        gap: 25px;
    }


    .earth-section {
        height: 470px;

        min-height: 430px;
    }


    .earth-container {
        width: 100vw;

        height: 470px;

        min-height: 430px;
    }

}