/* =========================================
   SPCX // PORTAL
   STYLE.CSS
========================================= */

:root{

--bg:#020403;
--panel:#08100d;
--border:rgba(57,255,136,.15);
--green:#39FF88;
--green2:#7BFFC0;
--text:#F6F7F7;
--muted:#94A39B;

}

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

html{
scroll-behavior:smooth;
overflow-x:hidden;
width:100%;
}

body{

font-family:"Space Grotesk",sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
line-height:1.6;

}

/* Background */

#starfield{

position:fixed;
inset:0;
width:100%;
height:100%;
z-index:-3;

}

.noise{

position:fixed;
inset:0;
background:url("assets/noise.png");
opacity:.05;
pointer-events:none;
mix-blend-mode:screen;
z-index:-1;

}

/* Cursor Glow */

.cursorGlow{

position:fixed;
width:320px;
height:320px;
background:radial-gradient(circle,
rgba(57,255,136,.14),
transparent 70%);
border-radius:50%;
pointer-events:none;
filter:blur(30px);
transform:translate(-50%,-50%);
z-index:-2;

}

/* NAVBAR */

.navbar{

position:fixed;
top:0;
left:0;
width:100%;
padding:26px 7vw;
display:flex;
align-items:center;
justify-content:space-between;
backdrop-filter:blur(18px);
background:linear-gradient(
180deg,
rgba(0,0,0,.65),
rgba(0,0,0,.15)
);
border-bottom:1px solid rgba(255,255,255,.04);
z-index:999;

}

.navLogo{

display:flex;
align-items:center;
gap:14px;

}

.navLogo img{

width:36px;
height:36px;

}

.navLogo span{

color:var(--green);
letter-spacing:.28em;
font-size:13px;
font-weight:700;

}

.navLinks{

display:flex;
gap:36px;

}

.navLinks a{

text-decoration:none;
color:#9BA8A1;
font-size:14px;
transition:.3s;

}

.navLinks a:hover{

color:white;

}

.liveStatus{

display:flex;
align-items:center;
gap:10px;
color:var(--green);
font-size:12px;
letter-spacing:.22em;

}

.liveDot{

width:8px;
height:8px;
background:var(--green);
border-radius:50%;
box-shadow:0 0 12px var(--green);

}

/* HERO */

.hero{

position:relative;
min-height:100vh;
display:flex;
align-items:center;
justify-content:flex-start;
padding:0;
overflow:hidden;

}

.heroFrame{

position:relative;
width:100%;
min-height:100vh;
border-radius:0;
border:none;
background:#02100a;
overflow:hidden;
box-shadow:none;

}

.heroBg{

position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:1;

}

.heroBgOverlay{

position:absolute;
inset:0;
z-index:2;
background:
linear-gradient(90deg,
rgba(0,0,0,.85) 0%,
rgba(0,0,0,.55) 35%,
rgba(0,0,0,.15) 65%,
transparent 100%),
linear-gradient(180deg,
rgba(0,0,0,.3),
rgba(0,0,0,.55));

}

.heroContent{

position:relative;
z-index:5;
text-align:left;
max-width:640px;
padding:90px 7vw;

}

.eyebrow{

display:inline-block;
color:var(--green);
letter-spacing:.5em;
font-size:12px;
margin-bottom:28px;
opacity:.9;

}

.hero h1{

font-size:clamp(72px,10vw,150px);
line-height:.88;
font-weight:700;
color:var(--green);
text-shadow:0 0 40px rgba(57,255,136,.35);
letter-spacing:-.02em;

}

.hero h2{

font-size:clamp(32px,4vw,58px);
margin:14px 0 24px;
line-height:1;
letter-spacing:-.01em;

}

.hero p{

color:var(--muted);
font-size:16px;
max-width:460px;
margin:0;
line-height:1.7;

}

/* HERO COORDS */

.heroCoords{

position:absolute;
bottom:24px;
z-index:5;
font-family:monospace;
font-size:10px;
letter-spacing:.25em;
color:rgba(57,255,136,.6);
line-height:1.6;

}

.heroCoords.left{
left:7vw;
}

.heroCoords.right{
right:7vw;
text-align:right;
}

/* BUTTONS */

.heroButtons{

margin-top:36px;
display:flex;
justify-content:flex-start;
gap:16px;
flex-wrap:wrap;

}

.primaryBtn,
.secondaryBtn{

padding:14px 26px;
border-radius:999px;
font-weight:700;
font-size:13px;
letter-spacing:.15em;
text-decoration:none;
transition:.35s;

}

.primaryBtn{

background:var(--green);
color:#000;
box-shadow:0 0 35px rgba(57,255,136,.35);

}

.primaryBtn:hover{

transform:translateY(-4px);
box-shadow:0 0 60px rgba(57,255,136,.5);

}

.secondaryBtn{

border:1px solid rgba(57,255,136,.4);
color:var(--green);

}

.secondaryBtn:hover{

background:rgba(57,255,136,.08);

}

.scrollHint{

position:absolute;
bottom:60px;
left:50%;
transform:translateX(-50%);
z-index:5;
letter-spacing:.35em;
font-size:11px;
color:#4EDB8A;
animation:floatArrow 2s infinite;

}

@keyframes floatArrow{

50%{
transform:translateY(8px);
}

}

/* SECTION */

.section{

padding:100px 4vw;
max-width:1400px;
margin:auto;

}

.sectionInner{

padding:60px;
border-radius:24px;
border:1px solid rgba(57,255,136,.14);
background:
radial-gradient(80% 60% at 50% 0%,
rgba(57,255,136,.05),
transparent 60%),
linear-gradient(180deg,
rgba(6,14,10,.5),
rgba(2,6,4,.4));
box-shadow:0 40px 80px rgba(0,0,0,.4);

}

.sectionEyebrow{

color:var(--green);
letter-spacing:.4em;
font-size:11px;
margin-bottom:18px;

}

.sectionTitle{

font-size:clamp(36px,4.5vw,64px);
line-height:1.05;
margin-bottom:20px;
letter-spacing:-.01em;

}

.sectionText{

font-size:17px;
color:var(--muted);
max-width:680px;
line-height:1.75;

}

/* TERMINAL */

.terminalWindow{

margin-top:40px;
background:linear-gradient(
180deg,
#05110B,
#020403
);

border-radius:18px;
border:1px solid var(--border);
padding:28px;
overflow:hidden;

}

.terminalHeader{

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:24px;

}

.lights{

display:flex;
gap:12px;

}

.lights span{

width:10px;
height:10px;
background:var(--green);
border-radius:50%;
box-shadow:0 0 10px var(--green);

}

.terminalLabel{

font-size:12px;
letter-spacing:.28em;
color:var(--green);

}

#terminalOutput{

font-family:monospace;
font-size:14px;
color:var(--green);
white-space:pre-wrap;
line-height:1.8;
min-height:240px;

}

/* RADAR */

.radarContainer{

display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
margin-top:40px;

}

.radar{

position:relative;
width:340px;
height:340px;
margin:auto;
border-radius:50%;
border:1px solid rgba(57,255,136,.15);

}

.radarCircle{

position:absolute;
border-radius:50%;
border:1px solid rgba(57,255,136,.08);

}

.c1{

inset:60px;

}

.c2{

inset:120px;

}

.c3{

inset:180px;

}

.radarSweep{

position:absolute;
inset:0;
border-radius:50%;
background:conic-gradient(
rgba(57,255,136,.35),
transparent 60%
);

animation:spinRadar 5s linear infinite;

}

@keyframes spinRadar{

to{
transform:rotate(360deg);
}

}

.radarDot{

position:absolute;
width:14px;
height:14px;
background:var(--green);
border-radius:50%;
left:50%;
top:50%;
transform:translate(-50%,-50%);
box-shadow:0 0 20px var(--green);

}

.radarData{

display:flex;
flex-direction:column;
gap:24px;

}

.dataRow{

display:flex;
justify-content:space-between;
padding:18px 0;
border-bottom:1px solid rgba(255,255,255,.05);

}

.dataRow span{

letter-spacing:.25em;
font-size:12px;
color:#6E847B;

}

.green{

color:var(--green);

}

/* STATUS */

.statusGrid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:18px;
margin-top:40px;

}

.statusCard{

padding:24px;
background:linear-gradient(180deg,
rgba(57,255,136,.04),
rgba(255,255,255,.02));
border-radius:18px;
border:1px solid var(--border);
transition:.35s;

}

.statusCard:hover{

transform:translateY(-6px);
border-color:rgba(57,255,136,.35);
box-shadow:0 0 40px rgba(57,255,136,.12);

}

.statusCard span{

color:var(--green);
font-size:11px;
letter-spacing:.25em;

}

.statusCard h3{

margin:14px 0 10px;
font-size:24px;
letter-spacing:-.01em;

}

.statusCard p{

color:var(--muted);
font-size:14px;
line-height:1.6;

}

/* TELEMETRY */

.telemetry{

margin-top:40px;
padding:32px;
background:linear-gradient(
90deg,
rgba(57,255,136,.06),
rgba(255,255,255,.02)
);

border-radius:20px;
border:1px solid var(--border);

}

.telemetryTitle{

font-size:20px;
letter-spacing:.2em;
margin-bottom:28px;
color:var(--green);

}

.telemetryGrid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:24px;

}

.telemetryGrid span{

color:#5FD287;
font-size:11px;
letter-spacing:.25em;

}

.telemetryGrid h4{

font-size:24px;
margin-top:10px;
font-family:monospace;
letter-spacing:.02em;

}

/* PLANET */

.planetInner{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.planetText .sectionText{
margin-bottom:32px;
}

.orbitStats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-top:32px;
padding-top:32px;
border-top:1px solid rgba(57,255,136,.12);
}

.orbitStats span{
display:block;
color:var(--green);
font-size:10px;
letter-spacing:.25em;
margin-bottom:8px;
}

.orbitStats strong{
font-size:18px;
font-family:monospace;
letter-spacing:.02em;
}

.planetScene{

height:480px;
display:flex;
justify-content:center;
align-items:center;
position:relative;
overflow:visible;

}

.planet{

width:480px;
height:auto;
animation:planetFloat 8s ease-in-out infinite alternate;
filter:drop-shadow(0 0 60px rgba(57,255,136,.5));
position:relative;
z-index:2;
-webkit-mask-image:radial-gradient(circle at center,
black 38%,
rgba(0,0,0,.6) 50%,
transparent 68%);
mask-image:radial-gradient(circle at center,
black 38%,
rgba(0,0,0,.6) 50%,
transparent 68%);

}

@keyframes planetFloat{

to{
transform:translateY(18px);
}

}

.orbitRing{

position:absolute;
border-radius:50%;
border:1px solid rgba(57,255,136,.08);

}

.orbitRing{
border-color:rgba(57,255,136,.2);
}

.ring1{

width:440px;
height:440px;
animation:spin 22s linear infinite;

}

.ring2{

width:520px;
height:520px;
border-style:dashed !important;
animation:spinReverse 32s linear infinite;

}

@keyframes spin{

to{
transform:rotate(360deg);
}

}

@keyframes spinReverse{

to{
transform:rotate(-360deg);
}

}

.rocket{

position:absolute;
font-size:38px;
top:50%;
left:50%;
transform:translate(-50%,-50%) translateX(260px) rotate(45deg);
filter:drop-shadow(0 0 20px rgba(57,255,136,.6));
z-index:3;

}

/* ALIEN */

.alienSection{

padding:100px 4vw;
max-width:1400px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;

}

.alienImage{

overflow:hidden;
border-radius:32px;
border:1px solid rgba(57,255,136,.1);

}

.alienImage img{

width:100%;
display:block;

}

.glitchText{

display:inline-block;
margin-top:32px;
padding:14px 24px;
border:1px solid rgba(57,255,136,.35);
border-radius:999px;
font-size:14px;
letter-spacing:.25em;
font-weight:700;
color:var(--green);
text-shadow:0 0 18px rgba(57,255,136,.4);
animation:glitch 2.5s infinite;

}

@keyframes glitch{

2%,64%{
transform:translateX(2px);
}

4%,60%{
transform:translateX(-2px);
}

}

/* COUNTDOWN */

.countdownBox{

margin-top:32px;
padding:40px;
text-align:center;
background:radial-gradient(80% 60% at 50% 0%,
rgba(57,255,136,.06),
transparent 60%),
rgba(255,255,255,.02);
border-radius:20px;
border:1px solid var(--border);

}

.countLabel{

letter-spacing:.3em;
font-size:11px;
color:var(--green);

}

#countdownTimer{

margin:22px 0;
font-size:clamp(44px,7vw,80px);
font-weight:700;
color:var(--green);
font-family:monospace;
letter-spacing:.02em;
text-shadow:0 0 30px rgba(57,255,136,.35);

}

.progressBar{

width:100%;
height:6px;
background:#0A1711;
border-radius:999px;
overflow:hidden;

}

#progressFill{

width:94%;
height:100%;
background:linear-gradient(
90deg,
var(--green),
var(--green2)
);

box-shadow:0 0 20px var(--green);

}

/* CTA */

.cta{

position:relative;
padding:100px 4vw;
max-width:1400px;
margin:auto;
overflow:hidden;

}

.ctaGlow{

position:absolute;
width:700px;
height:700px;
background:radial-gradient(circle,
rgba(57,255,136,.18),
transparent 70%);
filter:blur(60px);
left:50%;
top:50%;
transform:translate(-50%,-50%);
z-index:0;

}

.ctaContent{

position:relative;
z-index:5;
padding:70px 60px;
text-align:center;
border-radius:24px;
border:1px solid rgba(57,255,136,.2);
background:
radial-gradient(60% 100% at 50% 100%,
rgba(57,255,136,.1),
transparent 70%),
linear-gradient(180deg,
rgba(6,14,10,.6),
rgba(2,6,4,.5));
box-shadow:0 40px 80px rgba(0,0,0,.4);

}

.cta .heroButtons{
justify-content:center;
}

/* FOOTER */

footer{

padding:90px 30px;
text-align:center;
border-top:1px solid rgba(255,255,255,.04);

}

.footerLogo{

letter-spacing:.35em;
color:var(--green);
font-size:14px;
margin-bottom:18px;

}

footer p{

color:#657870;

}

/* Reveal Animation */

.reveal{

opacity:0;
transform:translateY(60px);
transition:1s;

}

.reveal.active{

opacity:1;
transform:none;

}

/* Mobile */

@media(max-width:900px){

.navLinks{
display:none;
}

.heroFrame{
min-height:100vh;
}

.heroContent{
padding:110px 24px 140px;
max-width:100%;
}

.heroBgOverlay{
background:linear-gradient(180deg,
rgba(0,0,0,.55) 0%,
rgba(0,0,0,.35) 40%,
rgba(0,0,0,.75) 100%);
}

.hero h1{
font-size:68px;
}

.hero h2{
font-size:30px;
margin:10px 0 20px;
}

.hero p{
font-size:14px;
}

.eyebrow{
font-size:10px;
letter-spacing:.35em;
margin-bottom:20px;
}

.heroButtons{
gap:12px;
margin-top:28px;
}

.primaryBtn,
.secondaryBtn{
padding:13px 20px;
font-size:12px;
}

.heroCoords{
font-size:9px;
letter-spacing:.2em;
bottom:16px;
}

.heroCoords.left{
left:24px;
}

.heroCoords.right{
right:24px;
}

.scrollHint{
display:none;
}

.navbar{
padding:18px 24px;
}

.liveStatus{
font-size:9px;
padding:6px 10px;
}

.sectionText{
font-size:18px;
}

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

.radar{
width:280px;
height:280px;
}

.alienSection,
.planetInner{
grid-template-columns:1fr;
}

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

.sectionInner,
.ctaContent{
padding:36px 24px;
}

.planet{
width:240px;
height:240px;
}

.ring1{
width:320px;
height:320px;
}

.ring2{
width:400px;
height:400px;
}

.planetScene{
height:400px;
}

.telemetryTitle{
font-size:16px;
}

}