/* This div holds the VHS effect and stays in the background.
    It's hidden by default and shown by main.js on link hover.
*/
#vhs-background-effect {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* This is key: it places the div behind content but ON TOP of other backgrounds */
    z-index: -1; 
    pointer-events: none;
}

/* Fix VHS effect for zoom scaling */
@media (max-height: 1200px) {
    #vhs-background-effect {
        width: 100vw;
        height: 100vh;
        transform: scale(1.111); /* 1 / 0.9 */
        transform-origin: top left;
    }
}

@media (max-height: 1000px) {
    #vhs-background-effect {
        width: 100vw;
        height: 100vh;
        transform: scale(1.25); /* 1 / 0.8 */
        transform-origin: top left;
    }
}

@media (max-height: 800px) {
    #vhs-background-effect {
        width: 100vw;
        height: 100vh;
        transform: scale(1.429); /* 1 / 0.7 */
        transform-origin: top left;
    }
}

@media (max-height: 600px) {
    #vhs-background-effect {
        width: 100vw;
        height: 100vh;
        transform: scale(1.667); /* 1 / 0.6 */
        transform-origin: top left;
    }
}

/* The pseudo-elements create the actual visual layers for the effect */
#vhs-background-effect::after,
#vhs-background-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* The animated texture GIF layer */
#vhs-background-effect::before {
    background: url('vhs-images/texture.gif');
    /* Increased from 0.07 to make the rolling lines more visible */
    background-size: cover;
    opacity: 0.3; 
}

/* The static noise PNG layer */
#vhs-background-effect::after {
    background: url('vhs-images/noise.png');
     /* Increased from 0.05 to make the static stronger */
    opacity: 0.1;
    /* Sped up the animation slightly for more flicker */
    animation: vhs-noise-anim 0.05s steps(9, end) infinite;
}

/* A more aggressive animation to make the noise jump more */
@keyframes vhs-noise-anim {
    0% { transform: translate(2%, -3%); }
    25% { transform: translate(-5%, 7%); }
    50% { transform: translate(8%, -1%); }
    75% { transform: translate(-1%, 4%); }
    100% { transform: translate(3%, -6%); }
}