/* ======================================
   NEXUS ALZ
   STYLE V3
   PART 1
====================================== */

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

html,
body{

width:100%;
height:100%;

overflow:hidden;

font-family:Consolas,monospace;

background:#040506;

color:#d8ffff;

}

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

body{

background:

radial-gradient(circle at center,#08141d 0%,#020304 100%);

}

/* GRID */

#grid{

position:fixed;

inset:0;

background:

linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);

background-size:45px 45px;

opacity:.18;

pointer-events:none;

z-index:1;

}

/* ===============================
NOISE
=============================== */

#noise{

position:fixed;

inset:-50%;

pointer-events:none;

opacity:.025;

background-image:

radial-gradient(white 1px,transparent 1px);

background-size:4px 4px;

z-index:999;

}

/* ===============================
SCAN
=============================== */

#scanline{

position:fixed;

top:-120px;

left:0;

width:100%;

height:90px;

background:

linear-gradient(

to bottom,

transparent,

rgba(255,255,255,.22),

transparent

);

mix-blend-mode:screen;

pointer-events:none;

opacity:.45;

z-index:998;

}

/* ===============================
VIGNETTE
=============================== */

body::after{

content:"";

position:fixed;

inset:0;

pointer-events:none;

background:

radial-gradient(

circle,

transparent 58%,

rgba(0,0,0,.55) 100%

);

z-index:997;

}

/* ===============================
FRAME
=============================== */

.frame{

position:absolute;

top:16px;
left:16px;
right:16px;
bottom:16px;

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

box-shadow:

0 0 20px rgba(0,255,255,.08),

inset 0 0 18px rgba(0,255,255,.05);

overflow:hidden;

}

/* Cyber Corner */

.frame::before{

content:"";

position:absolute;

top:0;
left:0;

width:90px;
height:90px;

border-top:3px solid cyan;

border-left:3px solid #8b52ff;

}

.frame::after{

content:"";

position:absolute;

bottom:0;
right:0;

width:90px;
height:90px;

border-bottom:3px solid cyan;

border-right:3px solid #8b52ff;

}

/* ===============================
HUD LEFT
=============================== */

.hud-left{

position:absolute;

left:35px;
top:28px;

font-size:15px;

line-height:2;

letter-spacing:1px;

text-shadow:

0 0 8px cyan;

z-index:50;

}

.rec{

display:flex;

align-items:center;

gap:10px;

color:#ff5050;

font-weight:bold;

}

.dot{

width:11px;
height:11px;

border-radius:50%;

background:red;

box-shadow:

0 0 12px red;

}

/* ===============================
HUD RIGHT
=============================== */

.hud-right{

position:absolute;

top:28px;
right:35px;

text-align:right;

font-size:15px;

line-height:2;

letter-spacing:1px;

text-shadow:

0 0 8px cyan;

z-index:50;

}

/* ======================================
   BOOT LAYOUT
====================================== */

.boot{

position:absolute;

left:50%;
top:50%;

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

width:95%;
max-width:1350px;

display:flex;

flex-direction:column;

align-items:center;

gap:24px;

z-index:100;

}

/* ======================================
LOGO
====================================== */

.logo-box{

display:flex;

flex-direction:column;

align-items:center;

margin-bottom:10px;

}

#logo{

width:180px;

margin-bottom:18px;

filter:

drop-shadow(0 0 15px cyan)

drop-shadow(0 0 35px #7f5cff);

}

.logo-box h1{

font-size:60px;

font-weight:900;

letter-spacing:10px;

background:linear-gradient(90deg,#8b5cff,#00e5ff);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

text-shadow:

0 0 25px cyan;

}

.logo-box h2{

margin-top:8px;

font-size:18px;

letter-spacing:12px;

color:#8fe8ff;

}

/* ======================================
TERMINAL
====================================== */

#terminal{

width:100%;

min-height:240px;

padding:28px;

background:rgba(8,12,18,.45);

backdrop-filter:blur(8px);

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

box-shadow:

0 0 18px rgba(0,255,255,.08),

inset 0 0 10px rgba(255,255,255,.03);

border-radius:10px;

overflow-y:auto;

font-size:19px;

line-height:1.8;

color:#d7ffff;

}

/* ======================================
PROGRESS
====================================== */

.progress{

width:100%;

height:12px;

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

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

border-radius:8px;

overflow:hidden;

}

#bar{

width:0;

height:100%;

background:linear-gradient(

90deg,

#7d5cff,

#00e5ff

);

box-shadow:

0 0 18px cyan;

}

/* ======================================
ACCESS
====================================== */

#access{

display:none;

font-size:30px;

font-weight:bold;

letter-spacing:3px;

color:#00ff9d;

text-shadow:

0 0 15px #00ff9d;

}

#left,
#right{

display:inline-block;

margin:0 8px;

}

/* ======================================
SYSTEM PANEL
====================================== */

.panel{

display:none;

width:100%;

padding:24px;

border-radius:10px;

background:rgba(10,14,20,.45);

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

box-shadow:

0 0 15px rgba(0,255,255,.08);

}

.panel-title{

font-size:18px;

letter-spacing:2px;

color:#00dfff;

margin-bottom:18px;

}

.panel p{

font-size:18px;

line-height:2;

}

/* ======================================
ENTER BUTTON
====================================== */

#enter{

display:none;

padding:18px 70px;

font-size:22px;

font-weight:bold;

letter-spacing:2px;

background:transparent;

border:2px solid cyan;

color:cyan;

cursor:pointer;

border-radius:8px;

transition:.35s;

}

#enter:hover{

background:cyan;

color:#000;

box-shadow:

0 0 25px cyan;

transform:scale(1.04);

}

/* ======================================
FOOTER
====================================== */

.footer{

display:none;

text-align:center;

margin-top:10px;

color:#8dbec8;

font-size:14px;

letter-spacing:2px;

line-height:1.8;

}

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

@keyframes logoGlow{

0%,100%{

filter:
drop-shadow(0 0 12px cyan)
drop-shadow(0 0 25px #7d5cff);

}

50%{

filter:
drop-shadow(0 0 28px cyan)
drop-shadow(0 0 55px #7d5cff);

}

}

#logo{

animation:logoGlow 3s ease-in-out infinite;

}

/* ======================================
REC
====================================== */

@keyframes recBlink{

0%,100%{

opacity:1;

}

50%{

opacity:.2;

}

}

.dot{

animation:recBlink .8s infinite;

}

/* ======================================
BODYCAM FLICKER
====================================== */

@keyframes bodycam{

0%{

filter:brightness(1);

}

48%{

filter:brightness(1);

}

49%{

filter:brightness(.93);

}

50%{

filter:brightness(1.02);

}

100%{

filter:brightness(1);

}

}

body{

animation:bodycam 6s infinite;

}

/* ======================================
NOISE
====================================== */

@keyframes noiseMove{

0%{

transform:translate(0,0);

}

20%{

transform:translate(-2px,2px);

}

40%{

transform:translate(2px,-2px);

}

60%{

transform:translate(-1px,-3px);

}

80%{

transform:translate(2px,1px);

}

100%{

transform:translate(0,0);

}

}

#noise{

animation:noiseMove .18s steps(2) infinite;

}

/* ======================================
SCANLINE
====================================== */

#scanline{

transition:top linear;

}

/* ======================================
ACCESS
====================================== */

@keyframes accessGlow{

0%,100%{

text-shadow:0 0 12px #00ff99;

}

50%{

text-shadow:

0 0 25px #00ff99,

0 0 45px cyan;

}

}

#access{

animation:accessGlow 1.8s infinite;

}

/* ======================================
ARROW
====================================== */

@keyframes arrowLeft{

0%,100%{

transform:translateX(0);

}

50%{

transform:translateX(-8px);

}

}

@keyframes arrowRight{

0%,100%{

transform:translateX(0);

}

50%{

transform:translateX(8px);

}

}

#left{

animation:arrowLeft 1.2s ease-in-out infinite;

}

#right{

animation:arrowRight 1.2s ease-in-out infinite;

}

/* ======================================
PANEL
====================================== */

.panel{

transition:.6s;

}

/* ======================================
BUTTON
====================================== */

#enter{

position:relative;

overflow:hidden;

}

#enter::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:80%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.35),

transparent

);

transition:.8s;

}

#enter:hover::before{

left:140%;

}

/* ======================================
RESPONSIVE
====================================== */

@media(max-width:900px){

.logo-box h1{

font-size:42px;

letter-spacing:5px;

}

.logo-box h2{

font-size:14px;

letter-spacing:7px;

}

#logo{

width:130px;

}

#terminal{

font-size:15px;

padding:18px;

}

.panel p{

font-size:15px;

}

#access{

font-size:22px;

}

#enter{

width:100%;

font-size:18px;

padding:16px;

}

}