.content-hover-effect {
    position: relative;
    overflow: hidden;
    z-index: 0; /* Establishes a stacking context */
    background-color: var(--primary-light-sand); /* Beige background */
}

.content-hover-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0; /* Behind the parent's content, but on top of its background */
    
    /* Adjusted pattern visibility: a tiny bit darker, blue color */
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L30 30M0 30L30 0' stroke='%23002B54' stroke-width='0.4' stroke-opacity='0.16'/%3E%3C/svg%3E"); /* stroke is --primary-dark-blue, opacity increased */
    background-repeat: repeat;
    background-size: 30px 30px;
    
    mask-image: radial-gradient(
        circle 175px at var(--mouse-x, -1000px) var(--mouse-y, -1000px),
        black 20%,
        transparent 70%
    );
    -webkit-mask-image: radial-gradient( /* For Safari/Chrome */
        circle 175px at var(--mouse-x, -1000px) var(--mouse-y, -1000px),
        black 20%,
        transparent 70%
    );
    
    opacity: 0;
    transition: opacity 0.2s ease-out; /* Faster transition for testing */
    will-change: opacity;
}

.content-hover-effect:hover::before {
    opacity: 1;
}

/* Ensure content within the hover effect area is above the pseudo-element. */
.content-hover-effect > * {
    position: relative; /* Create a stacking context for direct children */
    z-index: 1; /* Ensure direct children are above the ::before pseudo-element */
}