.mtg-star-button {
	--mtg-star-button-border-spin-angle: 0deg;
}

@property --mtg-star-button-border-spin-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.mtg-star-button-wrapper {
	box-sizing: border-box;
	display: flex;
	width: 100%;
	max-width: 100%;
	justify-content: center;
}

.mtg-star-button-wrapper--stretch .mtg-star-button {
	width: 100%;
}

.mtg-star-button,
.mtg-star-button *,
.mtg-star-button *::before,
.mtg-star-button *::after {
	box-sizing: border-box;
}

.mtg-star-button {
	--mtg-star-button-width: 13rem;
	--mtg-star-button-min-height: 3rem;
	--mtg-star-button-bg: #000000;
	--mtg-star-button-gradient-one: #000000;
	--mtg-star-button-gradient-two: #3d0002;
	--mtg-star-button-gradient-angle: 137deg;
	--mtg-star-button-transition-duration: 0.5s;
	--mtg-star-button-text-color: #ffffff;
	--mtg-star-button-hover-text-color: var(--mtg-star-button-text-color);
	--mtg-star-button-hover-text-glow: rgba(255, 255, 255, 0.85);
	--mtg-star-button-hover-scale: 1.1;
	--mtg-star-button-hover-bg: var(--mtg-star-button-bg);
	--mtg-star-button-hover-border-color: var(--mtg-star-button-gradient-two);
	--mtg-star-button-active-border-color: #fe53bb;
	--mtg-star-button-active-glow-color: #fe53bb;
	--mtg-star-color: #ffffff;
	--mtg-star-size: 1px;
	--mtg-star-spacing: 50px;
	--mtg-star-opacity: 0.5;
	--mtg-star-move-duration: 60s;
	--mtg-star-rotate-duration: 90s;
	--mtg-star-hover-bg: #212121;
	--mtg-star-glow-one: #111111;
	--mtg-star-glow-two: #3d0002;
	--mtg-star-glow-blur: 24px;
	--mtg-star-glow-height: 90%;
	--mtg-star-glow-pulse-duration: 4s;
	--mtg-star-glow-opacity: 0.55;

	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: min(var(--mtg-star-button-width), 100%);
	min-height: var(--mtg-star-button-min-height);
	max-width: 100%;
	padding: 0.85rem 1.4rem;
	overflow: hidden;
	backdrop-filter: blur(1rem);
	border-style: solid;
	border-color: transparent;
	color: var(--mtg-star-button-text-color);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background-image:
		linear-gradient(var(--mtg-star-button-hover-bg), var(--mtg-star-button-hover-bg)),
		linear-gradient(calc(var(--mtg-star-button-gradient-angle) + var(--mtg-star-button-border-spin-angle)), var(--mtg-star-button-gradient-one), var(--mtg-star-button-gradient-two));
	background-origin: border-box;
	background-clip: padding-box, border-box;
	transform: translateZ(0) scale(1);
	animation: mtg-star-button-border-shift 12s linear infinite;
	transition:
		transform var(--mtg-star-button-transition-duration) ease,
		color var(--mtg-star-button-transition-duration) ease,
		box-shadow var(--mtg-star-button-transition-duration) ease,
		background-image var(--mtg-star-button-transition-duration) ease;
	-webkit-tap-highlight-color: transparent;
}

.mtg-star-button:hover {
	color: var(--mtg-star-button-hover-text-color);
	text-decoration: none;
	transform: translateZ(0) scale(var(--mtg-star-hover-scale));
	background-image:
		linear-gradient(var(--mtg-star-button-hover-bg), var(--mtg-star-button-hover-bg)),
		linear-gradient(calc(var(--mtg-star-button-gradient-angle) + var(--mtg-star-button-border-spin-angle)), var(--mtg-star-button-hover-border-color), var(--mtg-star-button-gradient-two));
}

.mtg-star-button:active {
	background-image:
		linear-gradient(var(--mtg-star-button-hover-bg), var(--mtg-star-button-hover-bg)),
		linear-gradient(calc(var(--mtg-star-button-gradient-angle) + var(--mtg-star-button-border-spin-angle)), var(--mtg-star-button-active-border-color), var(--mtg-star-button-gradient-two));
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--mtg-star-button-active-glow-color) 35%, transparent);
}

.mtg-star-button:focus-visible {
	outline: 3px solid var(--mtg-star-button-active-border-color);
	outline-offset: 4px;
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--mtg-star-button-active-glow-color) 22%, transparent);
}

.mtg-star-button__label {
	position: relative;
	z-index: 3;
	color: currentColor;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 5px;
	transition: text-shadow var(--mtg-star-button-transition-duration) ease;
}

.mtg-star-button:hover .mtg-star-button__label,
.mtg-star-button:focus-visible .mtg-star-button__label {
	text-shadow:
		0 0 7px var(--mtg-star-button-hover-text-glow),
		0 0 16px color-mix(in srgb, var(--mtg-star-button-hover-text-glow) 70%, transparent);
}

.mtg-star-button__stars-container,
.mtg-star-button__glow {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.mtg-star-button__stars-container {
	overflow: hidden;
	border-radius: inherit;
	background: transparent;
	opacity: 1;
	backdrop-filter: blur(1rem);
	transition:
		opacity var(--mtg-star-button-transition-duration) ease,
		background-color var(--mtg-star-button-transition-duration) ease;
}

.mtg-star-button:hover .mtg-star-button__stars-container,
.mtg-star-button:focus-visible .mtg-star-button__stars-container {
	background-color: var(--mtg-star-hover-bg);
}

.mtg-star-button__stars {
	position: relative;
	display: block;
	width: 200rem;
	height: 200rem;
	background: transparent;
}

.mtg-star-button__stars::before,
.mtg-star-button__stars::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(var(--mtg-star-color) var(--mtg-star-size), transparent 1%);
	background-size: var(--mtg-star-spacing) var(--mtg-star-spacing);
}

.mtg-star-button__stars::before {
	top: 0;
	left: -50%;
	width: 170%;
	height: 500%;
	opacity: var(--mtg-star-opacity);
	animation: mtg-star-button-stars-move var(--mtg-star-move-duration) linear infinite;
}

.mtg-star-button__stars::after {
	top: -10rem;
	left: -100rem;
	animation: mtg-star-button-stars-rotate var(--mtg-star-rotate-duration) linear infinite;
}

.mtg-star-button__glow {
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12%;
	opacity: var(--mtg-star-glow-opacity);
	filter: blur(var(--mtg-star-glow-blur));
	mix-blend-mode: screen;
}

.mtg-star-button__circle {
	display: block;
	width: 42%;
	height: var(--mtg-star-glow-height);
	border-radius: 999px;
	background: radial-gradient(circle, var(--mtg-star-glow-one) 0%, var(--mtg-star-glow-two) 45%, transparent 72%);
	animation: mtg-star-button-glow-pulse var(--mtg-star-glow-pulse-duration) ease-in-out infinite alternate;
}

.mtg-star-button__circle:nth-child(2) {
	animation-delay: calc(var(--mtg-star-glow-pulse-duration) / -2);
}

.mtg-star-button--no-stars .mtg-star-button__stars-container,
.mtg-star-button--no-glow .mtg-star-button__glow {
	display: none;
}

.mtg-star-button--no-animation,
.mtg-star-button--no-animation .mtg-star-button__label,
.mtg-star-button--no-animation .mtg-star-button__stars-container {
	transition-duration: 0s;
}

.mtg-star-button--no-animation:hover {
	transform: translateZ(0) scale(1);
}

.mtg-star-button--no-animation .mtg-star-button__stars,
.mtg-star-button--no-animation .mtg-star-button__stars::before,
.mtg-star-button--no-animation .mtg-star-button__stars::after,
.mtg-star-button--no-animation .mtg-star-button__circle {
	animation: none;
}

.mtg-star-button--no-animation {
	animation: none;
}

@keyframes mtg-star-button-border-shift {
	from {
		--mtg-star-button-border-spin-angle: 0deg;
	}

	to {
		--mtg-star-button-border-spin-angle: 360deg;
	}
}

@keyframes mtg-star-button-stars-move {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-135rem);
	}
}

@keyframes mtg-star-button-stars-rotate {
	from {
		transform: rotate(360deg);
	}

	to {
		transform: rotate(0);
	}
}

@keyframes mtg-star-button-glow-pulse {
	from {
		transform: scale(0.95);
		opacity: 0.55;
	}

	to {
		transform: scale(1.08);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mtg-star-button,
	.mtg-star-button__label,
	.mtg-star-button__stars-container {
		transition-duration: 0.01ms;
	}

	.mtg-star-button:hover {
		transform: translateZ(0) scale(1.01);
	}

	.mtg-star-button__stars,
	.mtg-star-button__stars::before,
	.mtg-star-button__stars::after,
	.mtg-star-button__circle {
		animation: none;
	}

	.mtg-star-button {
		animation: none;
	}
}
