/* #region GLOBAL */

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

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    font-family: 'Oxanium', sans-serif;
    font-weight: 400;
    color: #fff;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
}

button,
input,
textarea,
select {
    font-family: 'Oxanium', sans-serif;
}

:root {
    --popup-width: 1100px;
    --popup-height: 550px;
    --popup-opacity: 0.9;
    --popup-corner: 25px;
}

/* #endregion GLOBAL */

/* #region LANDING PAGE */

.landing-page {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;

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

    background: #000;
}

/* #endregion LANDING PAGE */

/* #region RIBBON SIZE AND POSITION */

.ribbon-1 {
    position: absolute;

    width: clamp(480px, 56vw, 1100px);
    height: auto;

    top: 20px;
    left: -100px;

    opacity: 0.55;
    z-index: 2;
    pointer-events: none;
    transform-origin: 35% 40%;
    will-change: transform;

    animation: ribbonFloat1 78s ease-in-out infinite alternate;
}

.ribbon-2 {
    position: absolute;

    width: clamp(480px, 56vw, 1100px);
    height: auto;

    top: 15%;
    left: 70%;

    opacity: 0.55;
    z-index: 2;
    pointer-events: none;
    transform-origin: 35% 40%;
    will-change: transform;

    animation: ribbonFloat2 63s ease-in-out infinite alternate;
}

.ribbon-3 {
    position: absolute;

    width: clamp(480px, 56vw, 1100px);
    height: auto;

    top: -20px;
    left: -40px;

    opacity: 0.55;
    z-index: 2;
    pointer-events: none;
    transform-origin: 35% 40%;
    will-change: transform;

    animation: ribbonFloat3 58s ease-in-out infinite alternate;
}

.ribbon-4 {
    position: absolute;

    width: clamp(480px, 56vw, 1100px);
    height: auto;

    top: 20%;
    left: 80%;

    opacity: 0.55;
    z-index: 2;
    pointer-events: none;
    transform-origin: 35% 40%;
    will-change: transform;

    animation: ribbonFloat4 66s ease-in-out infinite alternate;
}

/* #endregion LANDING PAGE */

/* #region RIBBON ANIMATIONS */

@keyframes ribbonFloat1 {
    0% {
        transform:
            translate(0, 0)
            rotate(-59deg)
            skewX(0deg)
            skewY(0deg);
    }

    50% {
        transform:
            translate(25px, 15px)
            rotate(-49deg)
            skewX(9deg)
            skewY(-2deg);
    }

    100% {
        transform:
            translate(-15px, 35px)
            rotate(-55deg)
            skewX(-3deg)
            skewY(3deg);
    }
}

@keyframes ribbonFloat2 {
    0% {
        transform:
            translate(0, 0)
            rotate(42deg)
            skewX(0deg)
            skewY(0deg);
    }

    50% {
        transform:
            translate(-25px, -20px)
            rotate(48deg)
            skewX(-8deg)
            skewY(3deg);
    }

    100% {
        transform:
            translate(15px, 25px)
            rotate(39deg)
            skewX(4deg)
            skewY(-3deg);
    }
}

@keyframes ribbonFloat3 {
    0% {
        transform:
            translate(0, 0)
            rotate(-33deg)
            skewX(0deg)
            skewY(0deg);
    }

    50% {
        transform:
            translate(-30px, 20px)
            rotate(-38deg)
            skewX(-6deg)
            skewY(3deg);
    }

    100% {
        transform:
            translate(20px, -15px)
            rotate(-30deg)
            skewX(4deg)
            skewY(-3deg);
    }
}

@keyframes ribbonFloat4 {
    0% {
        transform:
            translate(0, 0)
            rotate(40deg)
            skewX(0deg)
            skewY(0deg);
    }

    50% {
        transform:
            translate(30px, -15px)
            rotate(54deg)
            skewX(7deg)
            skewY(8deg);
    }

    100% {
        transform:
            translate(-20px, 20px)
            rotate(56deg)
            skewX(-5deg)
            skewY(6deg);
    }
}

/* #endregion RIBBON ANIMATIONS */

/* #region MAIN CONTENT */

.landing-content {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    padding:
        clamp(20px, 8.9vh, 80px)
        20px
        clamp(40px, 20vh, 180px);
}

/* #endregion */

/* #region LOGO */

.main-logo {
    display: block;

    width: clamp(450px, 78vw, 1300px);
    max-width: 100%;
    height: auto;

    margin-left: auto;
    margin-right: auto;

}

/* #endregion */

.ribbon-1 {
    position: absolute;

    top: -200px;
    left: -150px;

    width: clamp(600px, 65vw, 1100px);
    height: auto;

    transform: rotate(-5deg);
    transform-origin: center;

    z-index: 1;
    pointer-events: none;
}

.ribbon-2 {
    position: absolute;

    bottom: -800px;
    right: -100px;

    width: clamp(600px, 65vw, 1100px);
    height: auto;

    transform: rotate(-5deg);
    transform-origin: center;

    z-index: 1;
    pointer-events: none;
}

.ribbon-3 {
    position: absolute;

    top: -20px;
    right: -1000px;

    width: clamp(600px, 65vw, 1100px);
    height: auto;

    transform: rotate(-100deg);
    transform-origin: center;

    z-index: 1;
    pointer-events: none;
}

/* #region ACCOUNT ICON */

.account-icon {
    position: absolute;
    top: 40px;
    right: 50px;

    width: clamp(28px, 3vw, 42px);
    height: auto;

    z-index: 20;
    cursor: pointer;

    transition: transform 0.3s ease;
}

.account-icon img {
    display: block;
    width: 100%;
    height: auto;
}

.account-icon:hover {
    transform: scale(1.1);
}

/* #endregion */

/* #region LANDING ICONS */

.landing-icons {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: clamp(30px, 15.6vh, 140px);
    gap: clamp(35px, 5vw, 90px);

    position: relative;
    left: -8px;
    top: 40px;
}

.icon-link {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    width: clamp(30px, 4vw, 53px);
    height: auto;

    text-decoration: none;
    cursor: pointer;
}

.icon-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;

    filter: drop-shadow(
        0 0 6px rgba(255, 255, 255, 0.15)
    );
}



/* #region ICON LIGHT EFFECT */

/* HIDE ICON LABELS */
.icon-label {
    display: none;
}

/* ICON GLOW */
.icon-link::before {
    content: "";
    position: absolute;

    bottom: 18px;
    left: 50%;

    width: clamp(65px, 6.6vw, 95px);
    height: clamp(45px, 4.5vw, 65px);

    transform: translateX(-50%);

    background: radial-gradient(
        ellipse at 50% 100%,
        rgba(220, 235, 255, 0.38) 0%,
        rgba(180, 205, 245, 0.20) 25%,
        rgba(150, 180, 225, 0.08) 55%,
        transparent 80%
    );

    filter: blur(10px);

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.4s ease;
}

/* GLOW ON HOVER AND WHEN POPUP IS OPEN */
.icon-link:hover::before,
.icon-link:focus-visible::before,
.icon-link.selected::before,
.icon-link[aria-expanded="true"]::before {
    opacity: 1;
}

/* #endregion */


/* #endregion */


/* #region POPUP WINDOWS */


.popup-window {
    position: fixed;
    top: calc(51% - 80px);
    left: 50%;

    transform: translate(-50%, -47%) scale(0.97);

    /* CHANGE WINDOW SIZE HERE */
    width: min(1050px, 94vw);
    height: min(650px, 92dvh);

    padding: 1px;

    /* TRANSPARENT METALLIC BORDER */
    background: transparent;
    border: 1px solid rgba(192, 192, 192, 0.7);

    clip-path: polygon(
        25px 0,
        100% 0,
        100% calc(100% - 25px),
        calc(100% - 25px) 100%,
        0 100%,
        0 25px
    );

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 20;

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



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

.popup-window.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

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


/* =========================================
   POPUP INNER CONTENT
   ========================================= */


.popup-inner {
    position: relative;
    width: 100%;
    height: 100%;

    padding: clamp(20px, 3.125vw, 45px);

    /* CHANGE TRANSPARENCY HERE */
    background: rgba(8, 10, 15, 0.98);

    clip-path: polygon(
        24px 0,
        100% 0,
        100% calc(100% - 24px),
        calc(100% - 24px) 100%,
        0 100%,
        0 24px
    );

    overflow-y: auto;
}


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

.popup-inner h2 {
    color: #e0e0e0;
    font-size: clamp(14px, 1.25vw, 18px);
    font-weight: 400;
    letter-spacing: clamp(2px, 0.28vw, 4px);
    text-align: center;
}


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

.popup-divider {
    width: 80px;
    height: 1px;
    margin: 20px auto;

    background: linear-gradient(
        to right,
        transparent,
        #c0c0c0,
        transparent
    );
}


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

.popup-close {
    position: absolute;
    top: 18px;
    right: 22px;

    border: none;
    background: transparent;

    color: #999;
    font-size: 26px;
    cursor: pointer;

    transition: color 0.3s ease;
}

.popup-close:hover {
    color: #fff;
}

/* #endregion */



/* #region SELECTED ICON */

.icon-link.selected .icon-label {
    opacity: 1;
    visibility: visible;

    transform: translate(-50%, 0);

    color: #f0f5ff;

    text-shadow:
        0 0 4px rgba(255, 255, 255, 0.9),
        0 0 10px rgba(210, 230, 255, 0.7),
        0 0 22px rgba(170, 200, 255, 0.4);
}

.icon-link.selected::before {
    opacity: 1;
}

/* #endregion */

/* #endregion */

/* #region EARTH BORDER */

.earth-border {
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: clamp(80px, 20vh, 180px);
    object-fit: fill;

    opacity: 0.55;

    z-index: 1;
    pointer-events: none;
}

/* #endregion */

/* #region TABLET */

@media (max-width: 1024px) {

    .top-ribbon {
        width: clamp(280px, 43.95vw, 450px);
    }

    .main-logo {
        width: clamp(280px, 68.36vw, 700px);
    }

    .tagline {
        font-size: clamp(10px, 1.27vw, 13px);
        letter-spacing: clamp(2px, 0.29vw, 3px);
    }

    .landing-icons {
        gap: clamp(35px, 4.4vw, 45px);
        margin-top: clamp(30px, 4.4vh, 45px);
    }

}

/* #endregion */

/* #region MOBILE */

@media (max-width: 600px) {

    .top-ribbon {
        width: 280px;
    }

    .landing-content {
        padding:
            clamp(20px, 7vh, 60px)
            15px
            clamp(30px, 15vh, 130px);
    }

    .main-logo {
        max-width: 100%;
    }

    .tagline {
        font-size: 10px;
        letter-spacing: 2px;
        line-height: 1.8;
    }

    .landing-icons {
        gap: 35px;
        margin-top: clamp(20px, 5vh, 40px);
    }

    .icon-link {
        width: 26px;
        height: 26px;
    }

    .icon-link img {
        width: 100%;
        height: 100%;
    }

}

/* #endregion */

/* #region SHORT SCREENS */

@media (max-height: 650px) {

    .landing-content {
        padding-top: 15px;
        padding-bottom: 25px;
    }

    .landing-icons {
        margin-top: clamp(15px, 4vh, 35px);
    }

    .earth-border {
        height: clamp(60px, 15vh, 100px);
    }

}

/* #endregion */

/* #region REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    .top-ribbon {
        animation: none;
    }

}

/* #endregion */

.main-logo,
.tagline {
    transform: translateY(35px);
}