/* =========================================================
   UDLESS CORE
   Blob Hover
   ========================================================= */

.card-blob {
	--blob-size: 250px;

	position: relative;
	overflow: hidden;
}


/* =========================================================
   INNER CONTENT
   ========================================================= */

.card-blob .inner {
	position: relative;
	z-index: 2;

	height: 100%;

	backdrop-filter: blur(80px);

	outline: 2px solid rgba(0, 102, 204, .2);
}


/* =========================================================
   BLOB
   ========================================================= */

.card-blob .blob {
	position: absolute;

	width: var(--blob-size);
	height: 80%;

	left: calc(50% - var(--blob-size) / 2);

	filter: blur(40px);

	background: var(--udless-blob-color, #00ff99);

	opacity: 0;

	z-index: 1;

	transition: opacity .3s;

	pointer-events: none;
}


/* =========================================================
   FAKE BLOB
   ========================================================= */

.card-blob .fakeblob {
	position: absolute;

	height: 100%;

	visibility: hidden;

	z-index: 0;

	pointer-events: none;
}