Hiding header logo on homepage only

Site URL: https://algae-lute-kkft.squarespace.com/
Password: lucid

Hi, I've used the below code as I want to hide my header logo on the homepage (as I'm displaying my logo large over an image and don't want it to be duplicated in the header). However on all other website pages my logo has also disappeared in the header but I want it to display for them. Is it possible to hide only on the homepage but keep as normal on all other pages? Thanks!

.header-title-logo img {
    visibility: hidden;
}
.shrink .header-title-logo img {
    visibility: visible;
}

@tuanphan  you are amazing - thank you! 

@tuanphan Do you know if it's possible on my homepage only, to have the header menu appear after you start scrolling but have it transparent? At the moment if I unselect 'fixed position' in the settings, the header then appears when scrolling but it has a white background. Any help much appreciated!

27 minutes ago, JessicaWare said:

@tuanphan Do you know if it's possible on my homepage only, to have the header menu appear after you start scrolling but have it transparent? At the moment if I unselect 'fixed position' in the settings, the header then appears when scrolling but it has a white background. Any help much appreciated!

You can use this CSS code

body.homepage header#header.shrink {
    background-color: transparent !important;
}