/* Theme for VARS */
:root {
  --hud-on:  #00ff88;   
  --hud-off: #8a8a8a;   
  --hud-blue: #1900ff; 
  --mini-off: #8a8a8a;
  --mini-green: #00ff88;
  --mini-red: #ff3b3b; 
  --mini-ring:5px;  
}



/* Base sizing for screen */
html, body {
    width: 100%; 
    height: 100%; 
    margin: 0;
    overflow: auto; 
}

#screen {
  width: 100%; 
  height: 100%; 
  overflow: auto;
  z-index: 1; 
  position: relative;  
}

.stage {
  --s:1; 
  transform: scale(var(--s)); 
  transform-origin: center;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.abs {
  position: absolute;
  left: calc(var(--x) * var(--unit-x));
  top:  calc(var(--y) * var(--unit-y));
  transform: translate(-50%, -50%);
}

.abs.pin-tl   { transform: translate(0, 0); }
.abs.use-size {
  width:  calc(var(--w) * var(--unit-x));
  height: calc(var(--h) * var(--unit-y));
}


/* Displaying the loading screen sizing, position, color, and font */
#loading-screen {
    position: fixed; 
    display: grid; 
    width: 100%; 
    height: 100%; 
    top:0; 
    left:0;
    justify-content: center; 
    align-items: center;
    background-color: black; 
    z-index: 9999; 
    transition: opacity 1s;
    opacity: 1; 
    pointer-events: none;
}

 /* loaders text color and size */
.loader-text {
    color: #1Eff88; 
    font-size: 2rem;
    font-family: monospace;
}



/* Matrix background design */
#matrix-background {
    position: fixed; 
    width: 100vw; 
    height: 100vh; 
    inset: 0; 
    z-index: 0; 
    background: #3b3a3a; 
    pointer-events: none;
}



/* Container for main HUD */
.hud-wrap {
    position: relative; 
    width: min(100vw, calc(100vh * (16/9)), 1000px);
    aspect-ratio: 16/9; 
    margin:0 auto; 
    --view-w: 1000;
    --view-h: 600;
    --unit-x: calc(100% / var(--view-w));
    --unit-y: calc(100% / var(--view-h)); 
}

/* HUD full design */ 
/* HUD size and shape */
.hud {    
    aspect-ratio: 16/9; 
    border-radius: 16px; 
    border: 4px solid gray;
    background: #000; 
    position: absolute; 
    overflow: hidden; 
    inset: 0; 
    transition: border-color .3s ease, box-shadow .3s ease;
    overflow: hidden;
    clip-path: polygon(
    /* Top */
    40px 0, 38% 0, 42% 18px, 58% 18px, 62% 0, calc(100% - 40px) 0, 100% 40px,

    /* Right side */
    100% 28%, 98% 32%, 98% 50%, 100% 54%,

    /* Bottom right */
    100% calc(100% - 40px), calc(100% - 40px) 100%, 70% 100%, 66% calc(100% - 28px), 
    34% calc(100% - 28px), 30% 100%, 40px 100%, 0 calc(100% - 40px),

    /* Left */
    0 68%, 2% 64%, 2% 46%, 0 42%,

    /* Top left */
    0 40px);
}

/* inner border layer glow */
.hud::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;          
  background: var(--hud-off);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 4px;                 
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1;
}

/* Transitions from gray to blue border for main HUD */
.hud.on::before {
  background:var(--hud-blue);
  opacity:1;
}

/* Styles main HUD when booted up */
.hud.on {
  --glow: #00ff88;
  border-color: var(--glow);
  box-shadow:
    0 0 15px rgba(0,255,136,.7),
    0 0 30px rgba(0,255,136,.35) inset;
}

/* Boot up text */
.hud .boot {
    position: absolute; 
    inset: 0; 
    display: grid; 
    place-items: center;
    color: #00ff88; 
    font-family: ui-monospace; 
    font-size: 1.2rem; 
    letter-spacing: .06rem;
    opacity: 0; 
    transition: opacity .25s ease;
}

/* fades text in main HUD when turned on */
.hud.on .boot { 
  opacity: 1; 
}



/* HUD content panel */
#hud-screen {
  position:absolute; 
  inset:16px; 
  padding:16px 18px; 
  overflow:auto;
  color:#cfcfcf; 
  font-family: ui-monospace, monospace;
  opacity:0; 
  transition: opacity .25s ease;
}

/* HUD content fades in when boot up and powered */
.hud.on #hud-screen { 
    opacity:1; 
}

/* actual headings/content for main HUD */
#hud-screen h2 {
  margin: 0 0 8px;
  font-size: clamp(16px, 1.8vw, 22px);
  color: #00ff88;
  letter-spacing: .08em;
}

#hud-screen p { 
  margin: .4rem 0 0; 
  line-height: 1.6; 
  color: #b7b7b7; 
  font-size: clamp(13px, 1.4vw, 16px);
}

/* projects information edit */
.projects {
  margin: 20px 0;
  padding: 12px;
  background: rgba(0,0,0,.6);
  border: 2px solid #00ff88;
  border-radius: 8px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.projects img {
  width: 100%;
  max-width: 100px;
  display: block;
  margin: 0;   
  border-radius: 6px;
}

.projects a {
  color: #fff;
  text-decoration: none;
}

.projects h3 {
  margin: 6px 0;
  color: #00ff88;
}

.projects p {
  color: #b7b7b7;
  font-size: clamp(13px, 1.4vw, 16px);
}

.projects:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 12px rgba(0,255,136,.5);
}

/* Contacts Information Edit */
.contact {
  margin: 20px 0;
  padding: 12px;
  background: rgba(0,0,0,.6);
  border: 2px solid #00ff88;
  border-radius: 8px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.contact img {
  width: 100%;
  max-width: 100px;
  display: block;
  margin: 0;   
  border-radius: 6px;
}

.contact a {
  color: #fff;
  text-decoration: none;
}


.contact p {
  color: #b7b7b7;
  font-size: clamp(13px, 1.4vw, 16px);
}

.contact:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 12px rgba(0,255,136,.5);
}

/* Specific page edits */
#home p {
  color: #fff;
  line-height: 3;
}

#about p {
  color: #fff;
  line-height: 3;
}

/* List with bullet-points inside main HUD */
#hud-screen ul {
  list-style: square;
  color: #fff;
  padding-left: 1.2rem; /* keeps bullets inside the frame nicely */
}

#hud-screen h3 {
  margin-top: 12px;
  font-size: clamp(14px, 1.5vw, 18px);
  color: #00ff88;
  letter-spacing: .05em;
}



/* Mini HUD full design */
/* Container for mini HUD */
.mini-hud-wrap{ 
  z-index: 5; 
}

/* Mini HUD */
.mini-hud{
  width: 100%; 
  height: 100%;
  border-radius: 8px;
  border: 2px solid gray;
  background: #000;
  overflow: hidden;
  isolation: isolate;
  clip-path: polygon(
    /* Top */
    40px 0, 38% 0, 42% 10px, 58% 8px, 62% 0, calc(100% - 40px) 0, 100% 40px,
    /* Right */
    100% 28%, 98% 32%, 98% 50%, 100% 54%,
    /* Bottom  */
    100% calc(100% - 40px), calc(100% - 40px) 100%, 70% 100%,
    66% calc(100% - 10px), 34% calc(100% - 10px), 30% 100%,
    40px 100%, 0 calc(100% - 40px),
    /* Left */
    0 68%, 2% 64%, 2% 46%, 0 42%,
    /* Top left */
    0 40px
  );
}

/* When power is off for mini HUD and makes sure colors are off until power is on */
.mini-hud::before {
  content:""; 
  position:absolute; 
  inset:0; 
  clip-path:inherit;
  background: var(--mini-off);
  padding: var(--mini-ring); 
  box-sizing: border-box;
  mask: 
  linear-gradient(#000 0 0) content-box, 
  linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; 
  mask-composite: exclude;
  opacity: 1; 
  pointer-events:none; 
  z-index:1;
}

.mini-hud::after {
  content:""; 
  position:absolute; 
  inset:0; 
  clip-path:inherit;
  background: var(--mini-off);
  padding: var(--mini-ring);
  box-sizing: border-box;
  mask: linear-gradient(#000 0 0) content-box, 
  linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; 
  mask-composite: exclude;
  filter:none; opacity:.9; 
  pointer-events:none; 
  z-index:2;
}

/* Power on for mini HUD */
.mini-hud-wrap.active .mini-hud{
  border-color: var(--mini-green);
  box-shadow:
    0 0 15px rgba(0,255,136,.7),
    0 0 30px rgba(0,255,136,.35) inset;
}

/* activates colors in borders for mini HUD */
.mini-hud-wrap.active .mini-hud::before {
  background: var(--mini-red);
  opacity:1;
}

.mini-hud-wrap.active .mini-hud::after{
  background: var(--mini-red);
  opacity:1;
}

/* Boot text for mini HUD */
.mini-hud .boot {
  position: absolute;
  top: 50%;
  right: 20px;           
  left: 140px;           
  transform: translateY(-50%);
  text-align: left;     
  font-size: 0.75rem;    
  line-height: 2.5;     
  white-space: normal;   
}

/* Color text when power is booted for mini HUD */
.mini-hud-wrap.active .mini-hud .boot{ 
  color:#ff0000; 
  opacity:1; 
}

/* Mini HUD profile design */ 
.mini-hud .profile {
  position: absolute;
  left: 22px;   
  top: 43%;
  transform: translateY(-50%);  
  width: 100px;   
  height: 100px;  
  margin: 12px auto;  
  display: block;
}


/* Mini HUD position/size */
.mini-hud-wrap.desktop-pos {
  --x: -50;
  --y: -200;
  --w: 400;
  --h: 180;
}

/* Circular profile picture and color when power on */
.profile{
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(160,160,160,.6);
  border: 4px solid gray;
  background: rgba(0,0,0,.65);
  z-index: 5; 
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, transform .12s ease;
  pointer-events: none;
}

.profile img{ 
  width:100%; 
  height:100%; 
  object-fit: cover; 
}

.profile.active{
  border-color: #ff0000; 
  box-shadow: 0 0 6px rgba(0,255,136,.4);
  pointer-events: none;
}



/* Circuit path design */
/* Circuit container */
.circuit
{ position:absolute; 
  width:100%; 
  height:100%; 
  pointer-events:none; 
  overflow: visible; 
  z-index: 9;
}

/* Styles circuit path lines */
.circuit path {
    fill: none; 
    stroke: #00ff88; 
    stroke-width: 2; 
    stroke-linecap: butt; 
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(0,255,136,.6)); 
    stroke-dasharray: 1200; stroke-dashoffset: 1200;
    transition: stroke-dashoffset 10s ease;
    vector-effect: non-scaling-stroke; 
}

/* Making lines for mini HUD red */
.circuit path.mini-link{
  stroke: #ff0000;
  filter: drop-shadow(0 0 6px rgba(255,0,0,.6));
}


/* Circuit animation */
.hud-wrap.on .circuit path{ stroke-dashoffset:0; }
.hud-wrap.on .circuit path:nth-of-type(2){ transition-delay:.1s }
.hud-wrap.on .circuit path:nth-of-type(3){ transition-delay:.18s }
.hud-wrap.on .circuit path:nth-of-type(4){ transition-delay:.26s }
.hud-wrap.on .circuit path:nth-of-type(5){ transition-delay:.34s }
.hud-wrap.on .circuit path.mini-link { transition-delay: .42s; }




/* Node function and design */
/* Clickable node design and function */
.node{
  padding: clamp(8px, 1.2vw, 16px) clamp(16px, 3vw, 48px); 
  font: 800 clamp(14px, 2vw, 24px) ui-monospace;
  color: gray;
  text-decoration: none;
  background: black;
  border: 2px solid gray;
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(255,255,255,.4);
  opacity: 1;               
  pointer-events: none;
  transition: opacity .25s ease, transform .12s ease, color .2s ease, border-color .2s ease;
  overflow: hidden;
  isolation: isolate;
  z-index: 20;
}

/* Re-renables node when power is on */
.hud-wrap.on .node{ 
  pointer-events: auto; 
}

/* When a node is hovered over it */
.node:hover{ 
  transform: translate(-50%, calc(-50% - 1px)); 
}

/* Visual design when nodes are powered on */
.node.active { 
  color: #00ff88; 
  border-color: #00ff88; 
  box-shadow: 0 0 6px rgba(0,255,136,.4); 
}

/* Node positions */
.node-about    { --x: -150;  --y: 150; }
.node-contact  { --x: -200;  --y: 500; }
.node-projects { --x: 1150;  --y: 140; }
.node-skills   { --x: 1200;  --y: 490; }
.node-home     { --x: 500;   --y: 610; }