.planet{
    top: 50px;
    left: -120px;
    right: auto;

    width: 360px;
    height: 360px;

    background:
    radial-gradient(circle at 30% 30%,
        #d8ffd1,
        #98ff9b 30%,
        #49c76a 60%,
        #235a46 85%,
        #0d1f2b 100%);

    box-shadow:
        0 0 150px rgba(120,255,170,.45);

    animation: planetFloat 16s ease-in-out infinite;
}


#stars{
    opacity: 0.9;
}

#aurora{
    filter: brightness(1.2) saturate(1.15);
}

/* ==========================
   ABOUT PAGE
========================== */

.character-container{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.profile-card{
    position: relative;
    overflow: hidden;
    width:95%;
    max-width:1300px;
     width: min(950px, 85%);
    margin: 0 auto;

    opacity: 0;
    transform: translateY(30px);
    animation: profileReveal .8s ease forwards;
    animation-fill-mode: forwards;
}

.profile-card::after{
    content: "";
    position: absolute;
    left: -100%;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(158,255,181,.18),
        transparent
    );
    animation: scanner 5s ease-in-out infinite;
    pointer-events: none;
}

.profile-card::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:40%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(158,255,181,.25),
        transparent
    );
    animation:fileScan 2.5s ease-out;
    pointer-events:none;
}

@keyframes fileScan{
    from{
        left:-100%;
    }
    to{
        left:150%;
    }
}

@keyframes scanner{
    from{
        left: -100%;
    }
    to{
        left: 150%;
    }
}

@keyframes profileReveal{
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-card h1{

    text-align:center;

    font-size: 2.8rem;
    letter-spacing: 2px;

    color:#9effb5;

    margin-bottom:10px;

    text-shadow:
        0 0 12px rgba(120,255,170,.5);

}

.profile-bio{

    text-align:center;

   max-width: 750px;
    font-size: 1.1rem;
    line-height: 1.9;
    margin:0 auto;

    line-height:1.8;

    opacity:.9;

}

.info-panel{
    margin:30px 0;
    padding:20px;
    background:rgba(0,0,0,.35);
    border:1px solid rgba(120,255,170,.25);
    border-radius:18px;
}

.info-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 16px 0;
    font-size: 1.05rem;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.info-row:last-child{
    border-bottom:none;
}

.info-row span:first-child{
    color:#9effb5;
    font-weight:600;
}

.info-row span:last-child{
    color:white;
}

.info-panel{

    box-shadow:0 0 20px rgba(120,255,170,.08);

    backdrop-filter:blur(6px);

}

.terminal-message p{

    line-height:1.8;

    opacity:.9;

}

.terminal-message{
    margin-top:30px;
    padding:20px;
    background:rgba(0,0,0,.4);
    border:1px solid rgba(120,255,170,.2);
    border-radius:18px;
     box-shadow:0 0 20px rgba(120,255,170,.08);

    backdrop-filter:blur(6px);

}


.terminal-message h3{
    margin-bottom:15px;
    color:#9effb5;
}

.social-comms{
    margin-top:30px;
    padding:20px;
    background:rgba(0,0,0,.35);
    border:1px solid rgba(120,255,170,.2);
    border-radius:18px;
     box-shadow:0 0 20px rgba(120,255,170,.08);

    backdrop-filter:blur(6px);

}

.comms-label{
    margin-bottom:15px;
    color:#9effb5;
    font-weight:700;
    letter-spacing:2px;
}

.about-list{
    padding-left:22px;
    line-height:1.8;
}

.about-list li{
    margin:8px 0;
}

.status-badge{
    margin-top:30px;
    text-align:center;
    padding:16px;
    border-radius:999px;
    background:rgba(0,255,150,.12);
    border:1px solid rgba(120,255,170,.25);
    color:#caffd9;
    font-style:italic;
}

.warning-banner{
    margin:20px 0 30px;
    padding:14px;
    text-align:center;

    background:rgba(255,60,60,.12);

    border:1px solid rgba(255,80,80,.35);

    color:#ff8a8a;

    border-radius:14px;

    font-weight:bold;

    letter-spacing:2px;

    text-transform:uppercase;
}

.about-list{

    margin-top:15px;

    padding-left:20px;

}

.about-list li{

    margin:12px 0;

    line-height:1.7;

}

.status-badge{

    margin-top:35px;

    padding:16px 22px;

    text-align:center;

    border-radius:999px;

    background:rgba(120,255,170,.12);

    border:1px solid rgba(120,255,170,.25);

    color:#9effb5;

    font-style:italic;

    box-shadow:0 0 15px rgba(120,255,170,.15);

}

.cursor{
    display:inline-block;
    color:#9effb5;
    animation:blink 1s infinite;
}

@keyframes blink{
    50%{
        opacity:0;
    }
}

.secret-stamp{
    cursor:pointer;
    user-select:none;
    transition:.25s ease;
     position: absolute;
    top: 22px;
    right: 22px;

    padding: 10px 18px;

    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 2px;

    border: 3px solid #ff5555;
    color: #ff5555;

    transform: rotate(15deg);
}

.secret-stamp:hover{
    transform:scale(1.08) rotate(-3deg);
    filter:brightness(1.2);
}

.file-header{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:25px;
    padding-bottom:15px;
    border-bottom:1px solid rgba(158,255,181,.2);
    color:#9effb5;
    font-size:.9rem;
    letter-spacing:2px;
    text-transform:uppercase;
     max-width: 1000px;
    margin: 0 auto 35px;
    padding: 18px 24px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(158,255,181,.2);
    border-radius: 14px;
}

/* ==========================
   SOCIAL LINKS
========================== */

.social-links{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:18px;
}

.social-links a{
    display:block;
    padding:16px 20px;

    background:rgba(0,0,0,.35);
    border:1px solid rgba(120,255,170,.18);
    border-radius:14px;

    color:#fff;
    text-decoration:none;

    transition:.25s ease;
}

.social-links a:hover{
    transform:translateX(8px);
    background:rgba(120,255,170,.12);
    border-color:#9effb5;
    box-shadow:0 0 18px rgba(120,255,170,.18);
}
/* ==========================
   ROBLOX PROFILE BUTTON
========================== */

.roblox-btn{
    display:block;

    width:fit-content;

    margin:0 auto;

    padding:16px 30px;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        #7dff9f,
        #37c76a
    );

    color:#08110d;

    font-weight:bold;

    text-decoration:none;

    transition:.25s ease;
}

.roblox-btn:hover{
    transform:translateY(-3px) scale(1.05);

    box-shadow:
        0 0 22px rgba(120,255,170,.4);
}

/* ==========================
   USER ID
========================== */

.userid{
    margin:30px auto 18px;

    text-align:center;

    color:#9effb5;

    font-size:1rem;

    letter-spacing:2px;

    opacity:.8;
}

/* ==========================
   TRANSMISSION EFFECT
========================== */

#transmission-text{
    min-height:90px;
    line-height:1.8;
    white-space:pre-wrap;
}

.typing{
    border-right:2px solid #9effb5;
    animation:blink .8s infinite;
}

/* ==========================
   THREAT LEVEL
========================== */

#threat-level{
    color:#ff6666;
    font-weight:bold;
    text-shadow:0 0 10px rgba(255,80,80,.45);
    transition:.3s;
}

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

@media (max-width:900px){

    .profile-card{
        padding:25px;
    }

    .info-row{
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }

    .file-header{
        flex-direction:column;
        text-align:center;
    }

    .social-links a{
        text-align:center;
    }

    .roblox-btn{
        display:block;
        text-align:center;
    }
}

/* Smooth section spacing */

.profile-card > *{
    margin-left:auto;
    margin-right:auto;
      margin-bottom: 28px;
}

.profile-card > *:last-child{
    margin-bottom: 0;
}

/* Selection colors */

::selection{
    background:#9effb5;
    color:#081018;
}

/* Smooth hover */

.profile-card,
.info-panel,
.social-comms,
.terminal-message{
    transition: .25s ease;
    padding:30px;
}

.info-panel:hover,
.social-comms:hover,
.terminal-message:hover{
    border-color:rgba(158,255,181,.45);
    transform: translateY(-3px);
    box-shadow: 0 0 28px rgba(158,255,181,.18);
}

.social-comms,
.userid,
.roblox-btn{
    max-width:950px;
    margin-left:auto;
    margin-right:auto;
}

/* ==========================
   ABOUT GRID
========================== */

.about-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:25px;
    margin-top:30px;
    align-items:start;
}

.about-grid .terminal-message{
    margin:0;
    height:100%;
}

@media (max-width:1100px){
    .about-grid{
        grid-template-columns:1fr;
    }
}

.about-grid-two{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    margin-top:30px;
}

.about-grid-two .terminal-message{
    margin:0;
    height:100%;
}

.final-clearance{
    max-width:700px;
    margin:40px auto 0;
    text-align:center;
}

@media (max-width:900px){

    .about-grid-two{
        grid-template-columns:1fr;
    }

}

.clearance-wrapper{
    display:flex;
    justify-content:center;
    margin-top:40px;
}

.final-clearance{
    max-width:700px;
    width:100%;
}

/* ==========================
   PARALLAX STARFIELD
========================== */

#starfield{
    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:-100;
    pointer-events:none;
}

.stars{
    position:absolute;
    inset:0;
    transition:transform .25s ease-out;
}

.star{
    position:absolute;
    border-radius:50%;
    background:white;
    box-shadow:
        0 0 6px white,
        0 0 12px rgba(255,255,255,.5);
    animation:twinkle linear infinite;
}

@keyframes twinkle{

    0%,100%{
        opacity:.25;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.3);
    }

}

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

#nebula{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:-200;
}

.cloud{
    position:absolute;
    width:900px;
    height:900px;
    border-radius:50%;
    filter:blur(120px);
    opacity:.22;
    mix-blend-mode:screen;
    animation:floatNebula linear infinite;
}

.c1{
    background:
    radial-gradient(circle,
    #6d5cff 0%,
    transparent 70%);
    left:-250px;
    top:-150px;
    animation-duration:120s;
}

.c2{
    background:
    radial-gradient(circle,
    #00d8ff 0%,
    transparent 70%);
    right:-300px;
    top:25%;
    animation-duration:150s;
}

.c3{
    background:
    radial-gradient(circle,
    #ff4fd8 0%,
    transparent 70%);
    left:35%;
    bottom:-300px;
    animation-duration:180s;
}

@keyframes floatNebula{

    0%{
        transform:translate(0,0) scale(1);
    }

    25%{
        transform:translate(60px,-40px) scale(1.05);
    }

    50%{
        transform:translate(-40px,30px) scale(.95);
    }

    75%{
        transform:translate(30px,60px) scale(1.08);
    }

    100%{
        transform:translate(0,0) scale(1);
    }

}

/* ==========================
   FLOATING PLANETS
========================== */

#planet-field{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:-150;
}

.planet{
    position:absolute;
    border-radius:50%;
    opacity:.18;
    filter:blur(.4px);
    animation:planetSpin linear infinite;
}

.planet::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
        radial-gradient(circle at 30% 30%,
        rgba(255,255,255,.35),
        transparent 35%);
}

.planet.ring::after{
    content:"";
    position:absolute;
    left:-12%;
    top:42%;
    width:124%;
    height:18%;
    border:2px solid rgba(255,255,255,.25);
    border-radius:50%;
    transform:rotate(-20deg);
}

@keyframes planetSpin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

/* ==========================
   SPACE DUST
========================== */

#space-dust{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:-125;
}

.dust{
    position:absolute;
    width:2px;
    height:2px;
    border-radius:50%;
    background:white;
    opacity:.15;
    box-shadow:
        0 0 6px rgba(255,255,255,.8);
    animation:floatDust linear forwards;
}

@keyframes floatDust{

    from{
        transform:translateY(0) translateX(0);
        opacity:0;
    }

    10%{
        opacity:.2;
    }

    90%{
        opacity:.2;
    }

    to{
        transform:
            translateY(-120vh)
            translateX(var(--drift));
        opacity:0;
    }

}

/* ==========================
   RARE COMET
========================== */

#comet-layer{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:-110;
}

.comet{
    position:absolute;
    width:12px;
    height:12px;
    border-radius:50%;
    background:white;
    box-shadow:
        0 0 15px white,
        0 0 35px #7cfbff;
}

.comet::before{
    content:"";
    position:absolute;
    right:100%;
    top:50%;
    transform:translateY(-50%);
    width:280px;
    height:4px;
    background:linear-gradient(
        to left,
        rgba(124,251,255,.9),
        rgba(124,251,255,.4),
        transparent
    );
    border-radius:50px;
    filter:blur(2px);
}

@keyframes flyComet{

    from{
        transform:
            translate(0,0)
            rotate(-25deg);
    }

    to{
        transform:
            translate(-160vw,120vh)
            rotate(-25deg);
    }

}

/* ==========================
   ALIEN PEEK
========================== */

#alien-peek{
    position:fixed;
    top:45%;
    left:-80px;
    font-size:70px;
    cursor:pointer;
    user-select:none;
    pointer-events:auto;
    z-index:9999;

    transition:left .8s ease;
    filter:
        drop-shadow(0 0 10px #7dff9d)
        drop-shadow(0 0 20px #7dff9d);
}

#alien-peek.show{
    left:-8px;
}

#alien-peek:hover{
    transform:scale(1.12);
}

/* ==========================
   RADIO INTERFERENCE
========================== */

#radio-static{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:9998;
    opacity:0;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.03) 0px,
            rgba(255,255,255,.03) 2px,
            transparent 2px,
            transparent 4px
        );

    mix-blend-mode:screen;
}

#radio-static.active{
    animation:radioStatic .45s linear;
}

@keyframes radioStatic{

    0%{
        opacity:0;
        transform:translateX(0);
    }

    15%{
        opacity:.35;
        transform:translateX(-6px);
    }

    30%{
        opacity:.15;
        transform:translateX(8px);
    }

    45%{
        opacity:.4;
        transform:translateX(-4px);
    }

    60%{
        opacity:.2;
        transform:translateX(5px);
    }

    100%{
        opacity:0;
        transform:translateX(0);
    }

}

/* ==========================
   FLOATING ASTRONAUT
========================== */

#astronaut{
    position:fixed;
    top:20%;
    left:-120px;

    font-size:60px;

    opacity:0;
    pointer-events:none;

    z-index:-90;

    filter:
        drop-shadow(0 0 10px rgba(255,255,255,.6));

    transition:opacity .8s;
}

#astronaut.show{
    opacity:.9;
}

@keyframes astronautFloat{

    from{
        transform:
            translateX(-120px)
            translateY(0)
            rotate(-8deg);
    }

    25%{
        transform:
            translateX(25vw)
            translateY(-20px)
            rotate(4deg);
    }

    50%{
        transform:
            translateX(50vw)
            translateY(15px)
            rotate(-3deg);
    }

    75%{
        transform:
            translateX(75vw)
            translateY(-15px)
            rotate(5deg);
    }

    to{
        transform:
            translateX(calc(100vw + 120px))
            translateY(10px)
            rotate(-6deg);
    }

}

/* ==========================
   BLACK HOLE
========================== */

#black-hole{
    position:fixed;
    width:160px;
    height:160px;
    border-radius:50%;

    background:
        radial-gradient(circle,
        #000 30%,
        rgba(50,0,70,.9) 55%,
        rgba(90,0,130,.4) 70%,
        transparent 100%);

    box-shadow:
        0 0 40px #7d5cff,
        0 0 80px rgba(125,92,255,.5);

    pointer-events:none;
    opacity:0;

    z-index:-95;

    filter:blur(.5px);
}

#black-hole.show{
    animation:
        blackHoleAppear 10s ease forwards,
        blackHoleSpin 8s linear infinite;
}

@keyframes blackHoleAppear{

    0%{
        opacity:0;
        transform:scale(.3);
    }

    15%{
        opacity:.85;
        transform:scale(1);
    }

    85%{
        opacity:.85;
    }

    100%{
        opacity:0;
        transform:scale(.4);
    }

}

@keyframes blackHoleSpin{

    from{
        rotate:0deg;
    }

    to{
        rotate:360deg;
    }

}

/* ==========================
   AURORA
========================== */

#aurora{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:-180;
}

.aurora-wave{
    position:absolute;
    width:180%;
    height:450px;
    left:-40%;
    top:-180px;

    border-radius:50%;

    filter:blur(90px);

    opacity:.18;

    animation:
        auroraFloat linear infinite;
}

.a1{
    background:
    linear-gradient(
        90deg,
        transparent,
        #43ffb3,
        #56d8ff,
        transparent
    );

    animation-duration:80s;
}

.a2{
    background:
    linear-gradient(
        90deg,
        transparent,
        #b64dff,
        #5fffe8,
        transparent
    );

    animation-duration:120s;

    opacity:.14;
}

.a3{
    background:
    linear-gradient(
        90deg,
        transparent,
        #78ff8a,
        #7a5cff,
        transparent
    );

    animation-duration:100s;

    opacity:.12;
}

@keyframes auroraFloat{

    0%{
        transform:
            translateX(-10%)
            rotate(-4deg);
    }

    25%{
        transform:
            translateX(5%)
            rotate(2deg);
    }

    50%{
        transform:
            translateX(-3%)
            rotate(-2deg);
    }

    75%{
        transform:
            translateX(6%)
            rotate(3deg);
    }

    100%{
        transform:
            translateX(-10%)
            rotate(-4deg);
    }

}

/* ==========================
   GALAXY
========================== */

#galaxy{
    position:fixed;
    width:700px;
    height:700px;
    right:-220px;
    bottom:-220px;

    pointer-events:none;
    z-index:-210;

    animation:galaxyRotate 260s linear infinite;
    opacity:.18;
}

.galaxy-core{
    position:absolute;
    left:50%;
    top:50%;

    width:120px;
    height:120px;

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

    border-radius:50%;

    background:
        radial-gradient(circle,
        #ffffff,
        #9fe4ff 40%,
        rgba(159,228,255,.15) 70%,
        transparent);

    filter:blur(4px);

    box-shadow:
        0 0 60px #9fe4ff,
        0 0 140px rgba(159,228,255,.35);
}

.arm{
    position:absolute;
    inset:0;
}

.arm::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;

    width:420px;
    height:120px;

    transform-origin:left center;

    border-radius:100%;

    background:
        radial-gradient(
            ellipse at left,
            rgba(255,255,255,.35),
            rgba(120,170,255,.18),
            transparent 75%
        );

    filter:blur(18px);
}

.arm1::before{ transform:rotate(0deg);}
.arm2::before{ transform:rotate(90deg);}
.arm3::before{ transform:rotate(180deg);}
.arm4::before{ transform:rotate(270deg);}

@keyframes galaxyRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

/* ==========================
   COSMIC LIGHTNING
========================== */

#cosmic-lightning{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-175;
    opacity:0;

    background:
        radial-gradient(circle at 20% 30%,
        rgba(130,90,255,.45),
        transparent 45%),

        radial-gradient(circle at 80% 60%,
        rgba(80,220,255,.35),
        transparent 40%),

        radial-gradient(circle at 50% 15%,
        rgba(180,120,255,.25),
        transparent 50%);
}

#cosmic-lightning.flash{
    animation:cosmicFlash .9s ease;
}

@keyframes cosmicFlash{

    0%{
        opacity:0;
    }

    10%{
        opacity:.65;
    }

    20%{
        opacity:.15;
    }

    35%{
        opacity:.8;
    }

    55%{
        opacity:.25;
    }

    100%{
        opacity:0;
    }

}

/* ==========================
   SPACE WHALES
========================== */

#space-whale-layer{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:-145;
}

.space-whale{
    position:absolute;
    font-size:90px;
    opacity:.12;
    filter:
        drop-shadow(0 0 12px rgba(120,220,255,.5));
    animation:whaleFloat linear forwards;
}

@keyframes whaleFloat{

    from{
        transform:
            translateX(-200px)
            translateY(0)
            rotate(-8deg);
    }

    25%{
        transform:
            translateX(25vw)
            translateY(-15px)
            rotate(-3deg);
    }

    50%{
        transform:
            translateX(50vw)
            translateY(12px)
            rotate(3deg);
    }

    75%{
        transform:
            translateX(75vw)
            translateY(-10px)
            rotate(-2deg);
    }

    to{
        transform:
            translateX(calc(100vw + 250px))
            translateY(15px)
            rotate(6deg);
    }

}