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

body{
overflow:hidden;
background:black;
font-family:'Orbitron',sans-serif;
color:white;
}

/* CANVAS */

#scene{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}

/* HUD */
#hudParticles{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:5;
pointer-events:none;
}

.hud{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
z-index:10;
pointer-events:none;
padding:20px;
}

/* PANEL */
.panel{
width:100%;
max-width:420px;
padding:40px 30px;
border-radius:24px;

background:linear-gradient(
145deg,
rgba(0,255,255,0.08),
rgba(0,0,0,0.6)
);

backdrop-filter:blur(18px);

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

box-shadow:
0 0 40px rgba(0,255,255,0.15),
inset 0 0 20px rgba(0,255,255,0.08);

text-align:center;

transition:0.4s;
}

.panel:hover{
transform:translateY(-5px) scale(1.02);
box-shadow:
0 0 60px rgba(0,255,255,0.3);
}

/* TAGLINE */
.tagline{
margin-top:15px;
color:#ccc;
font-size:14px;
min-height:20px;
}

.tagline::after{
content:"|";
margin-left:5px;
animation:blink 1s infinite;
}

@keyframes blink{
0%,100%{opacity:1;}
50%{opacity:0;}
}

/* BUTTON */
.actions{
margin-top:30px;
display:flex;
gap:15px;
justify-content:center;
flex-wrap:wrap;
pointer-events:auto;
}

.btn-primary{
padding:14px 26px;
border-radius:14px;

background:linear-gradient(135deg,#00ffff,#00ff88);

color:black;
font-weight:700;
letter-spacing:0.5px;

box-shadow:0 0 15px rgba(0,255,255,0.5);

transition:0.3s;
}

.btn-primary:hover{
transform:scale(1.08);
box-shadow:
0 0 30px #00ffff,
0 0 60px #00ff88;
}

/* GLOW RING */

.glow-ring{
position:absolute;
inset:-2px;
border-radius:24px;
background:linear-gradient(120deg,#00ffff,#00ff88,#00ffff);
filter:blur(25px);
opacity:0.3;
z-index:-1;
}

/* TITLE */

h1{
font-size:clamp(26px,6vw,42px);
font-weight:800;

background:linear-gradient(90deg,#00ffff,#00ff88,#00ffff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

text-shadow:
0 0 10px rgba(0,255,255,0.6),
0 0 30px rgba(0,255,255,0.4);

animation:glowPulse 2s infinite alternate;
}

@keyframes glowPulse{
from{
filter:brightness(1);
}
to{
filter:brightness(1.4);
}
}

/* AI TEXT */

#aiText{
margin-top:20px;
font-size:14px;
color:#aaa;
min-height:20px;
}

/* PROGRESS */

.progressContainer{
margin-top:30px;
height:8px;
background:rgba(255,255,255,0.1);
border-radius:10px;
overflow:hidden;
}

#progressBar{
height:100%;
width:0%;

background:linear-gradient(90deg,#00ffff,#00ff88);

box-shadow:
0 0 10px #00ffff,
0 0 20px #00ffff;

transition:width 0.4s ease;
}

/* STATUS */

.status{
margin-top:20px;
display:flex;
justify-content:center;
align-items:center;
gap:10px;
font-size:12px;
color:#00ff88;
}

.dot{
width:8px;
height:8px;
background:#00ff88;
border-radius:50%;
box-shadow:0 0 10px #00ff88;
animation:pulse 1.5s infinite;
}

@keyframes pulse{
0%{opacity:1;}
50%{opacity:0.3;}
100%{opacity:1;}
}

/* SCANLINES */

.scanlines{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.03) 0px,
rgba(255,255,255,0.03) 2px,
transparent 2px,
transparent 4px
);

animation:scan 6s linear infinite;

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

@keyframes scan{
0%{background-position:0 0;}
100%{background-position:0 200px;}
}

/* MOBILE OPTIMIZATION */

@media (max-width:600px){

.panel{
padding:25px 20px;
border-radius:18px;
}

#aiText{
font-size:12px;
}

.progressContainer{
height:6px;
}

}

body.teleport{
animation:teleportOut 1.2s ease forwards;
}

@keyframes teleportOut{

0%{
transform:scale(1);
filter:blur(0);
opacity:1;
}

50%{
transform:scale(1.2);
filter:blur(10px);
opacity:0.7;
}

100%{
transform:scale(2);
filter:blur(40px);
opacity:0;
}

}

/* OVERLAY */
.transition-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:radial-gradient(circle at center,
rgba(0,255,255,0.2),
black 70%);

opacity:0;
pointer-events:none;
z-index:999;

transition:0.6s;
}

/* ACTIVE STATE */
body.transitioning .transition-overlay{
opacity:1;
animation:warp 1s ease forwards;
}

/* PANEL COLLAPSE */
body.transitioning .panel{
animation:panelCollapse 0.8s ease forwards;
}

/* TEXT DISAPPEAR */
body.transitioning h1,
body.transitioning .tagline,
body.transitioning .actions{
opacity:0;
transform:translateY(-20px);
transition:0.4s;
}

/* WARP EFFECT */
@keyframes warp{

0%{
transform:scale(1);
filter:blur(0);
}

50%{
transform:scale(1.5);
filter:blur(10px);
}

100%{
transform:scale(3);
filter:blur(40px);
opacity:0;
}

}

/* PANEL COLLAPSE */
@keyframes panelCollapse{

0%{
transform:scale(1);
opacity:1;
}

50%{
transform:scale(0.8);
opacity:0.6;
}

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

}