/* =================================
PORTAL BACKGROUND
================================= */

body{
    margin:0;
    padding:0;
    min-height:100vh;

    background:
    linear-gradient(
        rgba(0,0,0,0.65),
        rgba(0,0,0,0.75)
    ),
    url("../assets/images/ai-room.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;

    overflow-x:hidden;

    color:white;
}
/* =================================
GALAXY OVERLAY
================================= */

body::before{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(
    rgba(255,255,255,.3) 1px,
    transparent 1px
);

background-size:
80px 80px;

opacity:.08;

pointer-events:none;

z-index:-5;

}

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

.welcome-screen{

    min-height:100vh;

    display:flex;

    justify-content:flex-start;

    align-items:center;

    padding-top:80px;

    padding-bottom:250px;

}
/* =================================
PORTAL TAG
================================= */

.portal-tag{

display:inline-block;

padding:10px 22px;

border-radius:50px;

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

color:#00ffff;

letter-spacing:3px;

font-size:12px;

margin-bottom:20px;

backdrop-filter:blur(10px);

}

/* =================================
TITLE
================================= */

.welcome-title{

    font-size:clamp(4rem,10vw,8rem);

    line-height:1;

    margin-bottom:25px;

}

.welcome-subtitle{

font-size:1.2rem;

color:#94a3b8;

margin-bottom:25px;

}

#hologramText{

color:#00ffff;

font-size:1.1rem;

min-height:40px;

margin-bottom:40px;

}


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

.welcome-buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:18px;

}

.welcome-buttons a{

padding:15px 30px;

border-radius:15px;

text-decoration:none;

color:white;

background:
rgba(255,255,255,.05);

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

backdrop-filter:blur(15px);

transition:.35s;

}

.welcome-buttons a:hover{

transform:
translateY(-6px);

border-color:#00ffff;

box-shadow:
0 0 25px #00ffff;

}

/* =================================
ROBOT 3D
================================= */

#robot-container{

    width:500px;

    height:500px;

    margin:0 auto 10px;

    position:relative;

    z-index:2;

    filter:
    drop-shadow(0 0 30px #00ffff)
    drop-shadow(0 0 60px rgba(0,255,255,.5));

}

#robot-container canvas{

    width:100% !important;

    height:100% !important;

}

/* =================================
FLOATING AI
================================= */

.hologram{

position:fixed;

right:30px;

bottom:30px;

width:300px;

z-index:999;

}

.hologram-avatar{

width:80px;

height:80px;

margin-left:auto;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:40px;

border:2px solid #00ffff;

background:
rgba(0,255,255,.08);

box-shadow:
0 0 25px #00ffff;

}

.hologram-box{

margin-top:15px;

padding:20px;

border-radius:20px;

background:
rgba(255,255,255,.05);

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

backdrop-filter:blur(20px);

}

.scan-line{

position:absolute;

left:0;

width:100%;

height:2px;

background:#00ffff;

box-shadow:
0 0 15px #00ffff;

animation:
scanMove 4s linear infinite;

}

/* =================================
ANIMATIONS
================================= */

@keyframes rotateRing{

from{

    transform:rotate(0deg);

}

to{

    transform:rotate(360deg);

}

}

@keyframes floatCore{

0%,100%{

    transform:translateY(0);

}

50%{

    transform:translateY(-15px);

}

}

@keyframes scanMove{

0%{

    top:0;

}

100%{

    top:100%;

}

}

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

@media(max-width:768px){

.welcome-title{

    font-size:2.8rem;

}

.welcome-hologram{

    width:160px;

    height:160px;

}

.hologram-core{

    width:160px;

    height:160px;

    font-size:65px;

}

.hologram{

    position:fixed;

    right:30px;

    bottom:10px;

}

}

@media(max-width:768px){

    .welcome-hologram{

        width:260px;

        height:260px;

    }

    .hologram-core{

        width:260px;

        height:260px;

        font-size:110px;

    }

}

body::after{

    content:"";

    position:fixed;

    inset:0;

    background:
    radial-gradient(
        circle at center,
        rgba(0,255,255,.08),
        transparent 70%
    );

    pointer-events:none;

    z-index:0;

}

@media(max-width:768px){

    #robot-container{

        width:300px;

        height:300px;

    }

}

.welcome-content{

    max-width:1000px;

    width:100%;

    transform:translateY(-120px);

}