Animation background code block - layers, parallax & cover page

Site URL: https://www.lightbulb.com.au/home

I am using a code block to embed an animation for the title page and am having a few issues: 

1. Layers: I need the text "connecting people to purpose" and "and strategy to execution" to sit neatly when switching to mobile. Currently the "strategy to execution" part drops off under the animation background. I think that's because the code block is currently inline with the text so pushes the text when re-sizing, but not sure how to fix. In my mind if the animation background sat on z-index:1 and the text sat on z-index:2 it would work, but the column of text still gets pushed 
2. Parallax: I have done some research into parallax for images but am unable to replicate that with this animated effect because it isn't able to be coded in as 'background-attachment: fixed' 
3. Cover page: The main goal is to have the entire screen taken up by this animation and the words on load. Then as you start to scroll the header menu appears. Currently I can't get the menu to appear only on scroll. I also can't get the animation background to appear as the exact same size of screen (especially when moving between ipad and phone size) even though I'm using 'height: 100vh;' 

Any help would be much appreciated! 

Here is my current code; 

<!-- particles.js container --> <div id="particles-js"></div> 
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js --> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 

<style>
  h1{color:white;
  z-index:99!important;}
  #block-de839e242497a7829823 {z-index:101!important;}
  
  #block-yui_3_17_2_1_1618818769687_39082 {
    height: 100vh;
    width: 110vw;
    margin-top: -20vh!important;
    margin: 0rem -60vw;
    position: relative;
    left: 50%;
    right: 50%;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: center !important;
    background-repeat: no-repeat;
    z-index:0;}
/* ---- reset ---- */ body{ margin:0; } canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; background-color: #262626; background-repeat: no-repeat; background-size: cover; background-position: 0% 0%; }
</style>

<script>

particlesJS("particles-js", {"particles":{"number":{"value":30,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.7,"random":true,"anim":{"enable":true,"speed":0.1,"opacity_min":0.3,"sync":false}},"size":{"value":30,"random":true,"anim":{"enable":true,"speed":1,"size_min":0.3,"sync":false}},"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":1.5,"direction":"none","random":true,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":600}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"grab"},"onclick":{"enable":false,"mode":"remove"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":250,"size":0,"duration":2,"opacity":0,"speed":3},"repulse":{"distance":400,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});;
</script>