#logo_bg {
    height: 100vh;
    overflow: hidden;
    width: 100%;
    position: fixed;
    z-index: -2;
    top: 40px;
}

#logo_bg1 {
    height: calc(100vh - 40px);
    overflow: hidden;
    width: 100%;
    display: flex;   
    align-items: center;
    justify-content: center;
    position: relative;
    background: transparent;
    top: 40px;
}

svg#Layer_1 {
    width: 100vw;
    height: 120dvh;
    opacity: 1;
}
svg#Layer_2 {
    width: 100vw;
    height: 120dvh;
    opacity: 1;
}

/* The mask covering everything EXCEPT inside the circle */
#mouseMask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle 400px at var(--x) var(--y), rgba(10,10,11,0) 0%, rgba(10,10,11,1) 80%);
    pointer-events: none;
    transition: background 0.2s ease-out, opacity 0.3s ease-out;
    z-index: -1; /* Ensure it appears above everything */
    opacity: 0; /* Initially hidden */
}

/* When the mouse moves, the effect appears */
#mouseMask.reveal {
    opacity: 1;
}

/* When the mouse leaves, fade out */
#mouseMask.hidden {
    opacity: 0;
}
#Layer_1, #Layer_2 {
    display: none; /* Hide by default */
    opacity: 0; /* Ensure it's not visible */
}