/* glass-shine.css */
/* Base class applied by JS */
.has-shine {
    position: relative;
    /* overflow: hidden; Removed so the close button on index.html isn't clipped, 
       we'll clip the pseudo-element instead via border-radius */
}

/* The Shine pseudo-element */
.has-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Use the CSS variables set by JS to center the radial gradient */
    background: radial-gradient(600px circle at var(--mouse-x, -500px) var(--mouse-y, -500px),
            rgba(255, 255, 255, 0.07),
            transparent 40%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
    /* Let clicks pass through */
    z-index: 0;
    /* Behind content */
    border-radius: inherit;
    /* Inherit rounded corners from article */
}

.has-shine:hover::before {
    opacity: 1;
}

/* Ensure child elements sit above the shine */
.has-shine>* {
    position: relative;
    z-index: 1;
}

/* Exception for the Dimension close button which handles its own z-index */
.has-shine>.close {
    z-index: 10;
}