.logo-link {
    margin: 0 auto;
    width: 26rem;
    display: block;
    text-decoration: none;
    color: inherit;
}

.logo {
    display: block;
    position: relative;
    height: 10rem;
    width: 26rem;
}

.logo-fill {
    width: 100%;
    height: 100%;
    background-color: white; /* Default color */
    /* Add a transition for the filter as well */
    transition: background-color 0.6s ease-out;

    mask-image: url("/assets/i/logo-core.svg");
    -webkit-mask-image: url("/assets/i/logo-core.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* This is the new and updated hover effect */
.logo-link:hover .logo-fill {
    background-color: red;
}

/* --- GLITCH EFFECT STYLES --- */

.logo-glitch-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.logo-noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Use your external SVG file for the noise */
    background-image: url("/assets/i/logo-noise.svg");
}¨Ï