/*GLASS*/
.glass {
    position: relative;
    z-index: 1;
    overflow: hidden;

    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);

    border: 1px solid rgba(255, 255, 255, 0.25);

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.01);

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass:hover {
    transform: translateY(-4px);
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.35),
        inset 0 2px 3px rgba(255, 255, 255, 0.6);
}

.glass::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -60%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%,
            rgba(255, 255, 255, 0.6),
            transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.glass:hover::before {
    opacity: 0.25;
}