/* =========================
   GLOBAL RESET
========================= */

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

body{
margin:0;
background:#050505;
color:white;
font-family:'Orbitron',sans-serif;
overflow-x:hidden;
cursor:none; /* for cyber cursor later */
}

/* =========================
   CYBER GRID BACKGROUND
========================= */

body::before{
content:"";
position:fixed;
width:100%;
height:100%;
background:
linear-gradient(rgba(0,255,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,255,255,0.05) 1px, transparent 1px);
background-size:40px 40px;
pointer-events:none;
z-index:-2;
}

/* subtle glow layer */
body::after{
content:"";
position:fixed;
width:100%;
height:100%;
background:radial-gradient(circle at center,
rgba(0,255,255,0.08),
transparent 60%);
z-index:-3;
pointer-events:none;
}

/* =========================
   NAVBAR (FIXED ALIGNMENT)
========================= */

nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 60px;
position:fixed;
top:0;
left:0;
width:100%;
background:rgba(0,0,0,0.65);
backdrop-filter:blur(14px);
z-index:1000;
border-bottom:1px solid rgba(0,255,255,.15);
}

.logo{
color:#00ffff;
font-size:1.2rem;
letter-spacing:4px;
text-shadow:0 0 10px #00ffff;
}

.nav-links{
display:flex;
align-items:center;
gap:40px;
}

nav a{
color:#9ffcff;
text-decoration:none;
letter-spacing:2px;
font-size:.85rem;
transition:.3s;
position:relative;
}

nav a::after{
content:"";
position:absolute;
bottom:-6px;
left:0;
width:0%;
height:2px;
background:#00ffff;
transition:.3s;
}

nav a:hover::after{
width:100%;
}

nav a:hover{
text-shadow:0 0 12px #00ffff;
color:#ffffff;
}

/* =========================
   HERO SECTION
========================= */

.hero{
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:0 20px;
}

.hero h1{
font-size:7rem;
letter-spacing:10px;
color:#00ffff;
text-shadow:
0 0 25px #00ffff,
0 0 60px rgba(0,255,255,.4),
0 0 120px rgba(0,255,255,.15);
}

.glitch{
animation:glitch 2s infinite;
}

@keyframes glitch{
0%{text-shadow:2px 0 red,-2px 0 cyan;}
50%{text-shadow:-2px 0 red,2px 0 cyan;}
100%{text-shadow:2px 0 red,-2px 0 cyan;}
}

.subtitle{
margin-top:20px;
opacity:.85;
font-size:1rem;
letter-spacing:1px;
color:#cfffff;
}

.hero-quote{
margin-top:30px;
max-width:900px;
font-size:1.15rem;
line-height:1.9;
font-style:italic;
color:#eaffff;
text-shadow:0 0 15px rgba(0,255,255,.25);
opacity:.9;
}

/* =========================
   SECTIONS
========================= */

section{
padding:170px 10%;
text-align:center;
position:relative;
}

/* FIXED VISIBILITY BOOST */
section h2{
font-size:3.6rem;
letter-spacing:6px;
color:#ffffff;
margin-bottom:50px;
text-shadow:
0 0 15px #00ffff,
0 0 50px rgba(0,255,255,.45),
0 0 90px rgba(0,255,255,.25);
}

section::before{
content:attr(id);
position:absolute;
top:70px;
left:50%;
transform:translateX(-50%);
font-size:.8rem;
letter-spacing:8px;
color:rgba(0,255,255,.45);
text-transform:uppercase;
}

/* =========================
   ABOUT TEXT
========================= */

#about p{
max-width:900px;
margin:auto;
line-height:2;
color:#dffefe;
font-family:'Sora',sans-serif;
font-size:1.05rem;
}

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

.video-frame{
border:2px solid #00ff88;
padding:22px;
box-shadow:
0 0 30px #00ff88,
0 0 90px rgba(0,255,150,.25);
display:inline-block;
transition:.4s;
}

.video-frame:hover{
transform:scale(1.02);
}

.video-frame iframe{
width:800px;
height:450px;
border:none;
}

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

.links{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:25px;
}

.links a{
border:1px solid #00ffff;
padding:20px 35px;
color:#00ffff;
text-decoration:none;
letter-spacing:2px;
transition:.35s;
position:relative;
overflow:hidden;
}

.links a:hover{
background:#00ffff;
color:black;
box-shadow:0 0 25px #00ffff;
transform:translateY(-5px);
}

/* =========================
   FADE ANIMATION
========================= */

.fade{
opacity:0;
transform:translateY(60px);
transition:1s ease;
}

.fade.show{
opacity:1;
transform:translateY(0);
}

/* =========================
   CYBER CURSOR
========================= */

.cursor{
position:fixed;
width:18px;
height:18px;
border:2px solid #00ffff;
border-radius:50%;
pointer-events:none;
transform:translate(-50%,-50%);
z-index:9999;
box-shadow:
0 0 10px #00ffff,
0 0 25px rgba(0,255,255,.6);
transition:transform .1s ease;
}

.cursor-glow{
position:fixed;
width:40px;
height:40px;
background:radial-gradient(circle,#00ffff55,transparent 70%);
border-radius:50%;
pointer-events:none;
z-index:9998;
transform:translate(-50%,-50%);
}

/* =====================================================
   NEW ADDITIONS (NO ORIGINAL CODE MODIFIED)
===================================================== */

/* PARTICLE CANVAS */

#particles{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-4;
pointer-events:none;
}

/* TERMINAL INTRO */

#terminal-intro{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
display:flex;
justify-content:center;
align-items:center;
z-index:2000;
font-family:monospace;
color:#00ff88;
}

.terminal-box{
border:1px solid #00ff88;
padding:40px;
box-shadow:0 0 20px #00ff88;
}

/* AI ASSISTANT */

#ai-assistant{
position:fixed;
bottom:25px;
right:25px;
z-index:1500;
display:flex;
align-items:center;
gap:12px;
}

.ai-avatar{
width:50px;
height:50px;
border-radius:50%;
background:radial-gradient(circle,#00ffff,#003333);
box-shadow:0 0 20px #00ffff;
}

.ai-message{
background:rgba(0,0,0,.7);
padding:10px 15px;
border:1px solid #00ffff;
font-size:.8rem;
}

/* MUSIC BUTTON */

#music-toggle{
position:fixed;
bottom:25px;
left:25px;
background:black;
border:1px solid #00ffff;
color:#00ffff;
padding:12px 16px;
cursor:pointer;
z-index:1500;
box-shadow:0 0 15px #00ffff;
transition:.3s;
}

#music-toggle:hover{
background:#00ffff;
color:black;
}

/* =========================================
   ZENRAG VIDEO LOOP
========================================= */

.zenrag-visual{
display:flex;
justify-content:center;
align-items:center;
margin-bottom:35px;
position:relative;
z-index:5;
}

.zenrag-visual video{
width:240px;
max-width:65vw;
border-radius:16px;

box-shadow:
0 0 25px #00ffff,
0 0 60px rgba(0,255,255,.35);

animation:floatZenrag 6s ease-in-out infinite;
}

/* floating animation */
@keyframes floatZenrag{
0%{transform:translateY(0px);}
50%{transform:translateY(-14px);}
100%{transform:translateY(0px);}
}

/* HAVFUN BUTTON */

#havfun-button{
position:fixed;
bottom:95px; /* sits above music button */
left:25px;
background:black;
border:1px solid #00ffff;
padding:6px;
cursor:pointer;
z-index:1500;
box-shadow:0 0 15px #00ffff;
transition:.3s;
}

#havfun-button img{
width:45px;
height:45px;
object-fit:contain;
}

#havfun-button:hover{
box-shadow:0 0 25px #00ffff;
transform:scale(1.05);
}