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

/* HEADER */

#header{
position:relative;
z-index:1;
overflow:visible;
}

/* FONDO FRACTAL */

#header::after{

content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:

radial-gradient(circle at 20% 30%, rgba(255,230,120,.35) 0px, transparent 6px),
radial-gradient(circle at 70% 40%, rgba(255,215,0,.25) 0px, transparent 5px),
radial-gradient(circle at 50% 80%, rgba(255,230,150,.30) 0px, transparent 7px),
radial-gradient(circle at 80% 20%, rgba(255,220,120,.25) 0px, transparent 5px),

repeating-radial-gradient(
circle at 50% 50%,
rgba(255,215,0,0.08) 0px,
rgba(255,215,0,0.08) 2px,
transparent 3px,
transparent 18px
),

repeating-linear-gradient(
60deg,
rgba(255,215,0,0.05),
rgba(255,215,0,0.05) 2px,
transparent 3px,
transparent 20px
),

radial-gradient(
circle at 40% 60%,
rgba(255,230,120,0.18),
transparent 60%
),

radial-gradient(
circle at 70% 40%,
rgba(255,210,90,0.15),
transparent 65%
),

url('../images/loc.jpg') center/cover no-repeat;

animation:
fractalField 40s linear infinite,
consciousPulse 12s ease-in-out infinite alternate;

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

}

/* MENÚ */

.nav{

list-style:none;

margin-left:0;

width:170px;

background:#000;

position:relative;

z-index:9000;

box-shadow:
0 0 20px rgba(255,215,0,0.15),
inset 0 0 10px rgba(255,215,0,0.05);

}

/* barra neural */

.nav::before{

content:"";
position:absolute;
left:-3px;
top:0;
width:3px;
height:100%;

background:linear-gradient(
to bottom,
transparent,
rgba(255,215,0,0.8),
transparent
);

animation:neuralBar 6s linear infinite;

}

/* ITEMS */

.nav > li{
position:relative;
width:100%;
}

.nav li a{

display:block;
color:white;
text-decoration:none;
padding:9px 12px;
background:#000;
width:100%;

transition:.25s;

}

/* hover */

.nav li a:hover{

background:#434343;

box-shadow:
0 0 10px rgba(255,215,0,0.7),
0 0 20px rgba(255,215,0,0.6),
inset 0 0 8px rgba(255,215,0,0.5);

}

/* SUBMENÚ HOLOGRÁFICO */

.nav ul{

position:absolute;
top:0;
left:100%;

width:190px;

background:rgba(10,10,10,0.75);

backdrop-filter:blur(8px);

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

box-shadow:

0 0 20px rgba(255,215,0,0.35),
0 0 40px rgba(255,215,0,0.15),

inset 0 0 15px rgba(255,215,0,0.08);

border-radius:6px;

list-style:none;

opacity:0;
visibility:hidden;

transform:translateX(-6px);

transition:
opacity .25s ease,
transform .25s ease;

z-index:9500;

}

/* EFECTO HOLOGRÁFICO */

.nav ul::before{

content:"";

position:absolute;
inset:0;

background:linear-gradient(
120deg,
transparent,
rgba(255,215,0,.15),
transparent
);

opacity:.35;

pointer-events:none;

}

/* LÍNEA NEURONAL */

.nav ul::after{

content:"";

position:absolute;

left:-22px;
top:20px;

width:22px;
height:2px;

background:linear-gradient(
to right,
rgba(255,215,0,0),
rgba(255,215,0,.9)
);

box-shadow:
0 0 6px rgba(255,215,0,.8),
0 0 12px rgba(255,215,0,.6);

opacity:0;

transform:scaleX(0);
transform-origin:right;

}

/* mostrar submenú */

.nav li:hover > ul{

opacity:1;
visibility:visible;
transform:translateX(0);

}

/* activar conexión neuronal */

.nav li:hover > ul::after{

animation:neuralLink .35s ease forwards;

}

/* NIVEL 3 */

.nav ul li{
position:relative;
}

.nav ul li ul{

position:absolute;
top:0;
left:100%;

width:190px;

opacity:0;
visibility:hidden;

transform:translateX(-6px);

transition:.25s;

z-index:9800;

}

.nav ul li:hover > ul{

opacity:1;
visibility:visible;
transform:translateX(0);

}

/* ANIMACIONES */

@keyframes neuralBar{

0%{opacity:.2;}
50%{opacity:1;}
100%{opacity:.2;}

}

@keyframes neuralLink{

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

100%{
opacity:1;
transform:scaleX(1);
}

}

@keyframes fractalField{

0%{
background-position:
20% 30%,
70% 40%,
50% 80%,
80% 20%,
50% 50%,
50% 50%,
40% 60%,
70% 40%,
center;
}

50%{
background-position:
25% 35%,
65% 45%,
55% 75%,
75% 25%,
52% 48%,
48% 52%,
45% 55%,
65% 45%,
center;
}

100%{
background-position:
20% 30%,
70% 40%,
50% 80%,
80% 20%,
48% 52%,
52% 48%,
42% 58%,
68% 42%,
center;
}

}

@keyframes consciousPulse{

0%{
opacity:.85;
filter:contrast(1.35) brightness(1.0);
}

100%{
opacity:1;
filter:contrast(1.45) brightness(1.08);
}

}