/*

  BASE STYLES / VARIABLES
*/

/*

  SHINE LAYERS

*/

:root {
	--card-aspect: 0.718;
	--card-radius: 4.55% / 3.5%;
	--card-edge: hsl(47, 100%, 78%);
	--card-back: hsl(205, 100%, 25%);
	--card-glow: hsl(175, 100%, 90%);

	--sunpillar-1: hsl(2, 100%, 73%);
	--sunpillar-2: hsl(53, 100%, 69%);
	--sunpillar-3: hsl(93, 100%, 69%);
	--sunpillar-4: hsl(176, 100%, 76%);
	--sunpillar-5: hsl(228, 100%, 74%);
	--sunpillar-6: hsl(283, 100%, 73%);

	--sunpillar-clr-1: var(--sunpillar-1);
	--sunpillar-clr-2: var(--sunpillar-2);
	--sunpillar-clr-3: var(--sunpillar-3);
	--sunpillar-clr-4: var(--sunpillar-4);
	--sunpillar-clr-5: var(--sunpillar-5);
	--sunpillar-clr-6: var(--sunpillar-6);
}

/* Override card radius for sleeved cards */
.card__rotator.sleeved,
.card__rotator.sleeved * {
	--card-radius: 0%;
}

.card {
	/* place the card on a new transform layer and
  make sure it has hardward acceleration... we gun'need that! */
	-webkit-transform: translate3d(0px, 0px, 0.01px);
	transform: translate3d(0px, 0px, 0.01px);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	pointer-events: none;

	/* make sure the card is above others if it's scaled up */
	z-index: calc(var(--card-scale) * 2);

	/* every little helps! */
	will-change: transform, visibility, z-index;
}

.card,
.card * {
	/* outline is a little trick to anti-alias */
	outline: 1px solid transparent;
}

.card:not(.interactive) .card__translater,
.card:not(.interactive) .card__rotator,
.card:not(.interactive) .card__shine,
.card:not(.interactive) .card__glare {
	/* if this card is not in a framework, we can add simply
    hover effects when it's not "interactive" */
	transition: all 0.3s ease;
}
.card:not(.interactive):hover {
	--pointer-x: 25% !important;
	--pointer-y: 10% !important;
	--card-scale: 1.1 !important;
	--card-opacity: 1 !important;
	--translate-x: 0px !important;
	--translate-y: -10px !important;
	--rotate-x: 7deg !important;
	--rotate-y: -19deg !important;
	--background-x: 44% !important;
	--background-y: 36% !important;
	--pointer-from-center: 0.9 !important;
	--pointer-from-top: 0.11 !important;
	--pointer-from-left: 0.25 !important;
}

.card.water {
	--card-glow: hsl(192, 97%, 60%);
}
.card.fire {
	--card-glow: hsl(9, 81%, 59%);
}
.card.grass {
	--card-glow: hsl(96, 81%, 65%);
}
.card.lightning {
	--card-glow: hsl(54, 87%, 63%);
}
.card.psychic {
	--card-glow: hsl(281, 62%, 58%);
}
.card.fighting {
	--card-glow: rgb(145, 90, 39);
}
.card.darkness {
	--card-glow: hsl(189, 77%, 27%);
}
.card.metal {
	--card-glow: hsl(184, 20%, 70%);
}
.card.dragon {
	--card-glow: hsl(51, 60%, 35%);
}
.card.fairy {
	--card-glow: hsl(323, 100%, 89%);
}

.card,
.card__rotator {
	aspect-ratio: var(--card-aspect);
	border-radius: var(--card-radius);
}

.card.active .card__translater,
.card.active .card__rotator {
	/* prevent pinch/double-tap zooms on card */
	touch-action: none;
}

.card__translater,
.card__rotator {
	display: grid;
	perspective: 600px;
	will-change: transform, box-shadow;

	transform-origin: center;
	-webkit-transform-origin: center;
}

.card__translater {
	width: auto;
	position: relative;

	-webkit-transform: translate3d(var(--translate-x), var(--translate-y), 0.1px)
		scale(var(--card-scale));
	transform: translate3d(var(--translate-x), var(--translate-y), 0.1px) scale(var(--card-scale));
}

.card__rotator {
	-webkit-transform: rotateY(var(--rotate-x)) rotateX(var(--rotate-y));
	-webkit-transform-style: preserve-3d;
	transform: rotateY(var(--rotate-x)) rotateX(var(--rotate-y));
	transform-style: preserve-3d;

	/* performance */
	pointer-events: auto;
	/* overflow: hidden; <-- this improves perf on mobile, but breaks backface visibility. */
	/* isolation: isolate; <-- this improves perf, but breaks backface visibility on Chrome. */
}

button.card__rotator {
	/* because the card is a button, there's some default
    browser styles which need to be subdued */
	border: none;
	background: transparent;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
}

.card__rotator * {
	width: 100%;
	display: grid;
	grid-area: 1/1;
	aspect-ratio: var(--card-aspect);
	border-radius: var(--card-radius);
	image-rendering: optimizeQuality;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	pointer-events: none;
	overflow: hidden;
}

.card__rotator img {
	height: auto;
	-webkit-transform: translate3d(0px, 0px, 0.01px);
	transform: translate3d(0px, 0px, 0.01px);
}

.card__back {
	background-color: var(--card-back);
	-webkit-transform: rotateY(180deg) translateZ(1px);
	transform: rotateY(180deg) translateZ(1px);
	backface-visibility: visible;
}

.card__front,
.card__front * {
	backface-visibility: hidden;
}

.card__front {
	opacity: 1;
	transition: opacity 0.33s ease-out;
	-webkit-transform: translate3d(0px, 0px, 0.01px);
	transform: translate3d(0px, 0px, 0.01px);
}

.loading .card__front {
	opacity: 0;
}

.loading .card__back {
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

/**
  
Shine & Glare Effects

**/

.card__shine {
	display: grid;
	transform: translateZ(1px);
	overflow: hidden;
	z-index: 3;

	background: transparent;
	background-size: cover;
	background-position: center;

	filter: brightness(0.85) contrast(2.75) saturate(0.65);
	mix-blend-mode: color-dodge;

	opacity: var(--card-opacity);
}

.card__shine:before,
.card__shine:after {
	--sunpillar-clr-1: var(--sunpillar-5);
	--sunpillar-clr-2: var(--sunpillar-6);
	--sunpillar-clr-3: var(--sunpillar-1);
	--sunpillar-clr-4: var(--sunpillar-2);
	--sunpillar-clr-5: var(--sunpillar-3);
	--sunpillar-clr-6: var(--sunpillar-4);

	grid-area: 1/1;
	transform: translateZ(1px);
	border-radius: var(--card-radius);
}

.card__shine:after {
	--sunpillar-clr-1: var(--sunpillar-6);
	--sunpillar-clr-2: var(--sunpillar-1);
	--sunpillar-clr-3: var(--sunpillar-2);
	--sunpillar-clr-4: var(--sunpillar-3);
	--sunpillar-clr-5: var(--sunpillar-4);
	--sunpillar-clr-6: var(--sunpillar-5);

	transform: translateZ(1.2px);
}

.card__glare {
	/* make sure the glare doesn't clip */
	transform: translateZ(1.41px);
	overflow: hidden;

	background-image: radial-gradient(
		farthest-corner circle at var(--pointer-x) var(--pointer-y),
		hsla(0, 0%, 100%, 0.8) 10%,
		hsla(0, 0%, 100%, 0.65) 20%,
		hsla(0, 0%, 0%, 0.5) 90%
	);

	opacity: var(--card-opacity);
	mix-blend-mode: overlay;
}

/**

  Masking Effects

**/

.card.masked .card__shine,
.card.masked .card__shine:before,
.card.masked .card__shine:after {
	/** masking image for cards which are masked **/
	-webkit-mask-image: var(--mask);
	mask-image: var(--mask);
	-webkit-mask-size: cover;
	mask-size: cover;
	-webkit-mask-position: center center;
	mask-position: center center;
}

.card[data-rarity='rare holo'] .card__glare:after,
.card[data-rarity='rare holo cosmos'] .card__glare:after,
.card[data-rarity$='reverse holo'] .card__glare:after {
	clip-path: var(--clip);
}

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

.card[data-rarity='rare holo'][data-supertype='trainer'] .card__glare:after,
.card[data-rarity='rare holo cosmos'][data-supertype='trainer'] .card__glare:after,
.card[data-rarity$='reverse holo'][data-supertype='trainer'] .card__glare:after {
	clip-path: var(--clip-trainer);
}