.effect-card {
	position: relative;
	overflow: visible;
	isolation: isolate;
}

.effect-card-canvas {
	display: block;
}

.effect-card-canvas.effect-card-electric-border {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 2;
}

.effect-card-canvas.effect-card-webgl {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	border-radius: inherit;
}

.effect-card-content {
	position: relative;
	z-index: 10;
	padding: 24px;
	height: 100%;
}

.effect-card[data-effect-type=electric-border] {
	--electric-border-color: var(--effect-card-color);
}

.effect-card[data-effect-type=electric-border]::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 0;
	border: 2px solid var(--electric-border-color);
	opacity: .6;
	filter: blur(1px);
}

.effect-card[data-effect-type=electric-border]::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 0;
	border: 2px solid var(--electric-border-color);
	filter: blur(4px);
}

.effect-card[data-effect-type=electric-border] .effect-card-glow {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: -1;
	transform: scale(1.1);
	opacity: .3;
	filter: blur(32px);
	background: linear-gradient(-30deg, var(--electric-border-color), transparent, var(--electric-border-color));
}

.effect-card[data-effect-type=lightning] {
	background: #000;
}

.effect-card[data-effect-type=lightning] .effect-card-canvas {
	mix-blend-mode: screen;
}

.effect-card[data-effect-type=light-pillar] {
	background: 0 0;
}

.effect-card[data-effect-type=light-pillar] .effect-card-canvas {
	mix-blend-mode: screen;
}

.effect-card[data-effect-type=floating-lines] {
	background: #000;
}

.effect-card[data-effect-type=floating-lines] .effect-card-canvas {
	mix-blend-mode: screen;
}

.effect-card[data-effect-disabled=true] .effect-card-canvas, .effect-card[data-effect-disabled=true]::after, .effect-card[data-effect-disabled=true]::before {
	display: none;
}

.effect-card:focus-visible {
	outline: 2px solid var(--effect-card-color);
	outline-offset: 2px;
}

@media (prefers-reduced-motion:reduce) {
	.effect-card-canvas {
		animation: none !important;
	}
	
	.effect-card::after, .effect-card::before {
		transition: none;
	}
}

.effect-card-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.effect-card--no-bg {
	background: 0 0;
	border: none;
}

.effect-card--dark {
	--effect-card-bg: rgba(0, 0, 0, .95);
	--effect-card-border: rgba(255, 255, 255, .05);
}

.effect-card--glass {
	--effect-card-bg: rgba(255, 255, 255, .05);
	--effect-card-border: rgba(255, 255, 255, .1);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.effect-card--blend-screen .effect-card-canvas {
	mix-blend-mode: screen;
}

.effect-card--blend-add .effect-card-canvas {
	mix-blend-mode: plus-lighter;
}

.effect-card--blend-overlay .effect-card-canvas {
	mix-blend-mode: overlay;
}

.effect-card--blend-normal .effect-card-canvas {
	mix-blend-mode: normal;
}