/*

  COSMOS HOLO

*/

.card[data-rarity='rare holo cosmos'][data-subtypes^='stage'] .card__shine,
.card[data-rarity='rare holo cosmos'][data-subtypes^='stage'] .card__glare:after {
	clip-path: var(--clip-stage);
}
.card[data-rarity='rare holo cosmos'][data-subtypes^='supporter'] .card__shine,
.card[data-rarity='rare holo cosmos'][data-subtypes^='supporter'] .card__glare:after {
	clip-path: var(--clip-trainer);
}

/*

  SHINE LAYERS

*/

.card[data-rarity='rare holo cosmos'] .card__shine {
	--space: 4%;

	clip-path: var(--clip);

	background-image:
		url("cosmos-bottom.png"),
		repeating-linear-gradient(
			82deg,
			hsl(53, 65%, 60%) calc(var(--space) * 1),
			hsl(93, 56%, 50%) calc(var(--space) * 2),
			hsl(176, 54%, 49%) calc(var(--space) * 3),
			hsl(228, 59%, 55%) calc(var(--space) * 4),
			hsl(283, 60%, 55%) calc(var(--space) * 5),
			hsl(326, 59%, 51%) calc(var(--space) * 6),
			hsl(326, 59%, 51%) calc(var(--space) * 7),
			hsl(283, 60%, 55%) calc(var(--space) * 8),
			hsl(228, 59%, 55%) calc(var(--space) * 9),
			hsl(176, 54%, 49%) calc(var(--space) * 10),
			hsl(93, 56%, 50%) calc(var(--space) * 11),
			hsl(53, 65%, 60%) calc(var(--space) * 12)
		),
		radial-gradient(
			farthest-corner circle at var(--pointer-x) var(--pointer-y),
			hsla(180, 100%, 89%, 0.5) 5%,
			hsla(180, 14%, 57%, 0.3) 40%,
			hsl(0, 0%, 0%) 130%
		);

	background-blend-mode: color-burn, multiply;

	background-position:
		var(--cosmosbg, center center),
		calc(10% + (var(--pointer-from-left) * 80%)) calc(10% + (var(--pointer-from-top) * 80%)),
		center center;

	background-size:
		cover,
		400% 900%,
		cover;

	filter: brightness(1) contrast(1) saturate(0.8);
	mix-blend-mode: color-dodge;
}

.card[data-rarity='rare holo cosmos'] .card__shine:before {
	content: '';
	z-index: 2;

	background-image:
		url("cosmos-middle-trans.png"),
		repeating-linear-gradient(
			82deg,
			hsl(53, 65%, 60%) calc(var(--space) * 1),
			hsl(93, 56%, 50%) calc(var(--space) * 2),
			hsl(176, 54%, 49%) calc(var(--space) * 3),
			hsl(228, 59%, 55%) calc(var(--space) * 4),
			hsl(283, 60%, 55%) calc(var(--space) * 5),
			hsl(326, 59%, 51%) calc(var(--space) * 6),
			hsl(326, 59%, 51%) calc(var(--space) * 7),
			hsl(283, 60%, 55%) calc(var(--space) * 8),
			hsl(228, 59%, 55%) calc(var(--space) * 9),
			hsl(176, 54%, 49%) calc(var(--space) * 10),
			hsl(93, 56%, 50%) calc(var(--space) * 11),
			hsl(53, 65%, 60%) calc(var(--space) * 12)
		);

	background-blend-mode: lighten, multiply;

	background-position:
		var(--cosmosbg, center center),
		calc(15% + (var(--pointer-from-left) * 70%)) calc(15% + (var(--pointer-from-top) * 70%)),
		center center;

	background-size:
		cover,
		400% 900%,
		cover;

	filter: brightness(1.25) contrast(1.75) saturate(0.8);
	mix-blend-mode: overlay;
}

.card[data-rarity='rare holo cosmos'] .card__shine:after {
	content: '';
	z-index: 3;

	background-image:
		url("cosmos-top-trans.png"),
		repeating-linear-gradient(
			82deg,
			hsl(53, 65%, 60%) calc(var(--space) * 1),
			hsl(93, 56%, 50%) calc(var(--space) * 2),
			hsl(176, 54%, 49%) calc(var(--space) * 3),
			hsl(228, 59%, 55%) calc(var(--space) * 4),
			hsl(283, 60%, 55%) calc(var(--space) * 5),
			hsl(326, 59%, 51%) calc(var(--space) * 6),
			hsl(326, 59%, 51%) calc(var(--space) * 7),
			hsl(283, 60%, 55%) calc(var(--space) * 8),
			hsl(228, 59%, 55%) calc(var(--space) * 9),
			hsl(176, 54%, 49%) calc(var(--space) * 10),
			hsl(93, 56%, 50%) calc(var(--space) * 11),
			hsl(53, 65%, 60%) calc(var(--space) * 12)
		);

	background-blend-mode: multiply, multiply;

	background-position:
		var(--cosmosbg, center center),
		calc(20% + (var(--pointer-from-left) * 60%)) calc(20% + (var(--pointer-from-top) * 60%)),
		center center;

	background-size:
		cover,
		400% 900%,
		cover;

	filter: brightness(1.25) contrast(1.75) saturate(0.8);
	mix-blend-mode: multiply;
}

/*

  GLARE LAYERS

*/

.card[data-rarity='rare holo cosmos'] .card__glare {
	background-image: radial-gradient(
		farthest-corner circle at var(--pointer-x) var(--pointer-y),
		hsla(204, 100%, 95%, 0.8) 5%,
		hsla(250, 15%, 20%, 1) 150%
	);
	filter: brightness(0.75) contrast(2) saturate(2);
	mix-blend-mode: overlay;
	opacity: calc(var(--card-opacity) * (0.25 + var(--pointer-from-center)));
}

.card[data-rarity='rare holo cosmos'] .card__glare:after {
	content: '';

	background-image: radial-gradient(
		farthest-corner circle at var(--pointer-x) var(--pointer-y),
		hsl(280, 100%, 96%) 5%,
		hsl(0, 0%, 10%) 60%
	);

	filter: brightness(0.75) contrast(2.5) saturate(2);
	mix-blend-mode: soft-light;
	opacity: calc(1 - var(--pointer-from-top) * 0.75);
}