.glass-card,
.glass-panel{


position:relative;


background:

linear-gradient(

135deg,

rgba(
255,
255,
255,
0.22
),

rgba(
255,
255,
255,
0.06
)

);



backdrop-filter:

blur(
var(--glass-blur)
)

saturate(
var(--glass-saturation)
);



-webkit-backdrop-filter:

blur(
var(--glass-blur)
)

saturate(
var(--glass-saturation)
);



border:

1px solid

var(--glass-border);



box-shadow:


0 30px 80px

var(--shadow),


inset 0 1px 1px

rgba(
255,
255,
255,
0.35
),


inset 0 -1px 1px

rgba(
0,
0,
0,
0.25
);



overflow:hidden;


}



.glass-card::before,
.glass-panel::before{


content:"";


position:absolute;


inset:0;


background:

linear-gradient(

120deg,

rgba(
255,
255,
255,
0.35
),

transparent 35%

);



opacity:.45;


pointer-events:none;


}



.glass-card::after,
.glass-panel::after{


content:"";


position:absolute;


inset:0;


background:

radial-gradient(

circle at

30% 10%,

rgba(
255,
255,
255,
0.45
),

transparent 40%

);



mix-blend-mode:

screen;


opacity:.35;


pointer-events:none;


}

.glass-card,
.glass-panel{


--light-x:50%;

--light-y:20%;


}



.glass-card::before,
.glass-panel::before{


background:

radial-gradient(

circle at

var(--light-x)

var(--light-y),


rgba(
255,
255,
255,
0.5
),

transparent 35%

);


transition:

background .2s ease;


}



.glass-card{


transform-style:

preserve-3d;


will-change:

transform;


}