/* 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; 
}

.stage{
  position: absolute; 
  top: 50%;
  left: 50%;
  width:720px; 
  height:1200px; 
  margin: 0 auto;          
  transform:translate(-50%,-50%) scale(var(--s, 1));
  transform-origin: center;
}

#screen {
  position: relative;
  min-height: 100dvh;             /* real mobile viewport */
  overflow-y: auto;               /* vertical scroll */
  -webkit-overflow-scrolling: touch;
  /* pad by half the stage height above & below, times your scale */
  padding-top: 0;
  padding-bottom: calc(100px * var(--s, 1));
}


.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));
}



@media (max-height: 820px) { .hud { top: 220px; bottom: 100px; } }
@media (max-height: 720px) { .hud { top: 160px; bottom:  80px; } }


/* 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: black;
  z-index:9999;
  transition:opacity 1s;
  opacity: 1;
  pointer-events: none;
}

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



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



/* Container for main HUD */
.hud-wrap {
  position:relative; 
  width:720px; 
  height:1200px;
  --view-w:720; 
  --view-h:1200;
  --unit-x:1px; 
  --unit-y:1px;
}

/* HUD full design */ 
/* HUD size and shape */
.hud {
  position:absolute; 
  left:18px; 
  right:18px; 
  top:300px; 
  bottom:140px;
  background:#000;
  border-radius:16px;
  border:4px solid gray;
  overflow:hidden;
  transition:border-color .3s, box-shadow .3s;
  clip-path:polygon(
    22px 0, 36% 0, 42% 14px, 58% 14px, 64% 0, calc(100% - 22px) 0, 100% 24px,
    100% 32%, 98% 36%, 98% 64%, 100% 68%,
    100% calc(100% - 24px), calc(100% - 24px) 100%, 64% 100%,
    58% calc(100% - 18px), 42% calc(100% - 18px), 36% 100%,
    22px 100%, 0 calc(100% - 24px),
    0 68%, 2% 64%, 2% 36%, 0 32%, 0 24px
  );
}

/* 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;
  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:14px; 
  padding:14px 16px; 
  overflow:auto; 
  color:#cfcfcf;
  opacity:0;                                
  pointer-events:none;  
} 

/* HUD content fades in when boot up and powered */
.hud.on #hud-screen { 
    opacity:1; 
    pointer-events: auto;
    -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
    touch-action: pan-y;               /* let vertical dragging scroll */
}


/* 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: 3; 
  color: #b7b7b7; 
  font-size: clamp(15px, 1.6vw, 20px);
}

/* 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);
}

/* contact 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 h3 {
  margin: 6px 0;
  color: #00ff88;
}

.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: 20;            
}

.mini-hud {
  width:100%;
  height:100%;
  border-radius:8px;
  border:2px solid gray;
  background:#000;
  overflow:hidden;
  isolation: isolate;
  clip-path:polygon(
    22px 0, 36% 0, 42% 10px, 58% 10px, 64% 0, calc(100% - 22px) 0, 100% 24px,
    100% 32%, 98% 36%, 98% 64%, 100% 68%,
    100% calc(100% - 24px), calc(100% - 24px) 100%, 64% 100%,
    58% calc(100% - 10px), 42% calc(100% - 10px), 36% 100%,
    22px 100%, 0 calc(100% - 24px),
    0 68%, 2% 64%, 2% 36%, 0 32%, 0 24px
  );
}

/* 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: 1rem;    
  line-height: 2.5;     
  white-space: normal;  
  opacity: 0; 
}

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

/* Circular profile picture and color when power on */
.mini-hud-wrap.active .profile,
.profile.active {
  border-color: var(--mini-red);
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
}

/* Mini HUD position/size */
.mini-hud-wrap.mobile-pos {
  --x: 360;
  --y: 90;
  --w: 560;
  --h: 170;
}


.profile {
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  width:96px;
  height:96px;
  border-radius:50%;
  border:4px solid gray;
  background:rgba(0,0,0,.65);
  overflow:hidden;
  z-index:3;}

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



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

/* 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:10px 16px;
  font:800 .95rem ui-monospace;
  color:gray;
  background:#000;
  text-decoration:none;
  border:2px solid gray;
  border-radius:10px;
  box-shadow:0 0 6px rgba(255,255,255,.25);
  pointer-events:none;
  transition:opacity .2s, transform .12s, color .2s, border-color .2s;
  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:  80;  --y: 1155; }
.node-projects { --x: 620;  --y: 1155; }
.node-home     { --x: 360;  --y: 1070; }
.node-skills   { --x: 500;  --y: 1155; }
.node-contact  { --x: 200;  --y: 1155; }