/* Glare Hover Effect */
/* Based on ReactBits Glare Hover */

.glare-hover {
    position: relative;
    overflow: hidden;
    /* Ensure the container fits the content */
    display: inline-block;
    /* Optional: Rounded corners if the image has them, but customizable */
    border-radius: var(--gh-br, 20px);

    /* Default variables if not set inline */
    --gh-duration: 650ms;
    --gh-bg: transparent;
    /* Changed from black to transparent for universal use */
    --gh-angle: -45deg;
    --gh-rgba: rgba(255, 255, 255, 0.4);
    --gh-size: 250%;
}

.glare-hover::before {
    content: '';
    position: absolute;
    inset: 0;
    /* The glare is a diagonal linear gradient */
    background: linear-gradient(var(--gh-angle),
            hsla(0, 0%, 0%, 0) 60%,
            var(--gh-rgba) 70%,
            hsla(0, 0%, 0%, 0),
            hsla(0, 0%, 0%, 0) 100%);
    transition: transform var(--gh-duration) ease, opacity var(--gh-duration) ease, background-position var(--gh-duration) ease;
    /* Added specific properties for safety */
    background-size: var(--gh-size) var(--gh-size), 100% 100%;
    background-repeat: no-repeat;
    background-position: -100% -100%, 0 0;
    z-index: 2;
    /* Ensure it's above the image */
    pointer-events: none;
    /* Allow clicks to pass through to the image/link */
}

.glare-hover:hover::before {
    /* Moves the gradient across the element on hover */
    background-position: 100% 100%, 0 0;
}

/* Helper to ensure internal image fits */
.glare-hover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
    /* Match container border radius */
}