/* interplanetary.quest -- cinematic astrogation */
/* Palette: #06060F (absolute void), #0B0F1A (deep indigo), #00FFD1 (astrogation teal), #4DA8FF (transit blue), #FFB347 (solar amber), #C8D6E5 (pale steel), #5A6E82 (nebula gray), #1A2A3A (instrument slate), #0D2137 (midnight cobalt) */

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

html{
    font-size:16px;
    scroll-behavior:smooth;
}

body{
    background:#06060F;
    color:#C8D6E5;
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.1vw,1.15rem);
    line-height:1.75;
    overflow-x:hidden;
}

/* Starfield background */
body::before{
    content:'';
    position:fixed;
    inset:0;
    background:
        radial-gradient(1px 1px at 10% 20%,rgba(200,214,229,0.4),transparent),
        radial-gradient(1px 1px at 30% 60%,rgba(200,214,229,0.3),transparent),
        radial-gradient(1px 1px at 55% 15%,rgba(200,214,229,0.5),transparent),
        radial-gradient(1px 1px at 70% 75%,rgba(200,214,229,0.2),transparent),
        radial-gradient(1px 1px at 85% 35%,rgba(200,214,229,0.4),transparent),
        radial-gradient(1px 1px at 15% 80%,rgba(200,214,229,0.3),transparent),
        radial-gradient(1px 1px at 45% 45%,rgba(200,214,229,0.2),transparent),
        radial-gradient(1px 1px at 92% 88%,rgba(200,214,229,0.5),transparent),
        radial-gradient(1px 1px at 25% 30%,rgba(200,214,229,0.3),transparent),
        radial-gradient(1px 1px at 60% 5%,rgba(200,214,229,0.4),transparent),
        radial-gradient(1px 1px at 78% 50%,rgba(200,214,229,0.2),transparent),
        radial-gradient(1px 1px at 5% 55%,rgba(200,214,229,0.3),transparent);
    pointer-events:none;
    z-index:0;
}

/* HUD frame */
.hud-frame{
    position:fixed;
    inset:24px;
    border:1px solid rgba(0,255,209,0.15);
    pointer-events:none;
    z-index:999;
}

.hud-corner{
    position:absolute;
    width:24px;
    height:24px;
}

.hud-tl{top:-1px;left:-1px;border-top:2px solid rgba(0,255,209,0.4);border-left:2px solid rgba(0,255,209,0.4)}
.hud-tr{top:-1px;right:-1px;border-top:2px solid rgba(0,255,209,0.4);border-right:2px solid rgba(0,255,209,0.4)}
.hud-bl{bottom:-1px;left:-1px;border-bottom:2px solid rgba(0,255,209,0.4);border-left:2px solid rgba(0,255,209,0.4)}
.hud-br{bottom:-1px;right:-1px;border-bottom:2px solid rgba(0,255,209,0.4);border-right:2px solid rgba(0,255,209,0.4)}

.hud-status{
    position:absolute;
    top:8px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:2rem;
}

.hud-label,.hud-timer{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.6rem,0.7vw,0.7rem);
    letter-spacing:0.08em;
    color:#00FFD1;
    opacity:0.7;
}

/* Mission ID */
.mission-id{
    position:fixed;
    top:40px;
    left:40px;
    font-family:'Space Grotesk',sans-serif;
    font-weight:500;
    font-size:clamp(0.65rem,0.8vw,0.75rem);
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#5A6E82;
    z-index:998;
}

/* Trajectory column */
.trajectory-col{
    position:fixed;
    right:40px;
    top:50%;
    transform:translateY(-50%);
    z-index:998;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0;
}

.traj-line{
    width:1px;
    height:200px;
    background:#1A2A3A;
    position:relative;
}

.traj-cursor{
    position:absolute;
    top:0;
    left:-3px;
    width:7px;
    height:7px;
    background:#00FFD1;
    transform:rotate(45deg);
    transition:top 0.3s ease;
}

.traj-node{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.6rem;
    letter-spacing:0.08em;
    color:#5A6E82;
    margin:0.5rem 0;
    transition:color 0.3s ease;
}

.traj-node.active{
    color:#00FFD1;
}

/* Waypoints */
.waypoint{
    min-height:100svh;
    display:flex;
    align-items:center;
    padding:clamp(3rem,6vw,6rem);
    padding-right:22%;
    position:relative;
    z-index:1;
}

.wp-content{
    max-width:640px;
    opacity:0;
    transform:translateY(16px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.wp-content.revealed{
    opacity:1;
    transform:translateY(0);
}

.wp-label{
    font-family:'Space Grotesk',sans-serif;
    font-weight:500;
    font-size:clamp(0.65rem,0.8vw,0.75rem);
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#00FFD1;
    opacity:0.7;
    display:block;
    margin-bottom:1.5rem;
}

.wp-heading{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(2rem,5vw,4.5rem);
    letter-spacing:0.06em;
    color:#C8D6E5;
    line-height:1.1;
    margin-bottom:1.5rem;
}

.wp-text{
    color:#C8D6E5;
    max-width:580px;
}

.wp-domain{
    font-family:'Space Grotesk',sans-serif;
    font-weight:500;
    font-size:clamp(1.2rem,2vw,2rem);
    color:#00FFD1;
    letter-spacing:0.06em;
    margin-top:2rem;
}

/* Responsive */
@media(max-width:768px){
    .waypoint{
        padding-right:clamp(2rem,4vw,3rem);
    }
    .trajectory-col{
        display:none;
    }
    .hud-frame{
        inset:12px;
    }
    .mission-id{
        top:24px;
        left:24px;
    }
}

@media(prefers-reduced-motion:reduce){
    .wp-content{opacity:1;transform:none;transition:none}
}