/*
 Holographic card effect - shared mechanics (tilt/lift transforms, shine/glare
 layer positioning, no-JS fallback). Adapted from pokemon-cards-css's
 base.css: https://github.com/simeydotme/pokemon-cards-css

 Load this ALWAYS, then load exactly one effect file (regular-holo.css,
 reverse-holo.css, rainbow-alt.css, ...) to pick the actual shine/glare look.
 Everything is namespaced .holo-card* so it can't collide with the separate,
 pre-existing .card/.cardflipper/.front/.back rules in css/main.css.
*/

:root {
	--pointer-x: 50%;
	--pointer-y: 50%;
	--background-x: 50%;
	--background-y: 50%;
	--pointer-from-center: 0;
	--pointer-from-top: 0.5;
	--pointer-from-left: 0.5;
	--card-opacity: 0;
	--card-scale: 1;
	--rotate-x: 0deg;
	--rotate-y: 0deg;

	--holo-red: #f80e35;
	--holo-yellow: #eedf10;
	--holo-green: #21e985;
	--holo-blue: #0dbde9;
	--holo-violet: #c929f1;

	/* shared defaults used by several effect files (amazing-rare, shiny-vmax,
	   rainbow-alt) - no texture asset unless an effect overrides --foil */
	--glitter: url("../../images/holo/glitter.png");
	--glittersize: 25%;
	--foil: none;
	--imgsize: cover;
	--angle: 133deg;
	--space: 5%;

	--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);
}

.holo-card {
	display: inline-block;
	/* space between cards, moved here (off of #selected_cardback, see below)
	   so it sits outside the glow instead of inside it */
	margin: 5px;
}

/* perspective belongs on the PARENT of the rotated element (.translater),
   not on .rotator itself - the vendor puts it on both because their
   .card__rotator also flips a separate card-back face in its own 3D space
   (a mechanic we don't have here), so a second perspective there was adding
   extra, unwanted distortion on top of the tilt rather than helping it. */
/* NOTE: no "transition: transform" here on purpose - the JS (js/holo-crowley.js)
   already smooths every value toward its target with its own per-frame lerp,
   so a CSS transition on top of that was fighting it (two separate smoothing
   systems stacked), which is what made the tilt feel inconsistent/laggy. The
   :not(.js-interactive) fallback below has its own transition for the no-JS case. */
.holo-card__translater {
	display: inline-block;
	perspective: 600px;
	transform-style: preserve-3d;
	transform: translate3d(0, 0, 0) scale(var(--card-scale));
}

.holo-card__rotator {
	display: inline-block;
	transform-style: preserve-3d;
	transform: rotateY(var(--rotate-x)) rotateX(var(--rotate-y));
	transition: box-shadow 0.3s ease;
	border-radius: 8px;
}

/* #selected_cardback already provides its own spacing/float for the
   original (non-holo) grid layout; both are redundant once wrapped in
   .holo-card, and #selected_cardback's margin was being counted into
   .holo-card__rotator's shrink-to-fit box, pushing any glow away from the
   card's actual border. Neutralize both here, spacing now lives on .holo-card. */
.holo-card__rotator #selected_cardback {
	float: none;
	margin: 0;
}

/* SHINE + GLARE overlays, sized to #selected_cardback's own box (they are
   children of #selected_cardback, which is already position:relative,
   overflow:hidden and border-radius:8px - see css/main.css) */
.holo-card__shine,
.holo-card__glare {
	position: absolute;
	inset: 0;
	border-radius: 8px;
	pointer-events: none;
}

/* base defaults every effect file inherits unless it overrides them - the
   vendor's own .card__shine sets exactly this mix-blend-mode as its default;
   effect files that never re-declare their own (rainbow-alt, amazing-rare,
   shiny-vmax, trainer-gallery-holo) were silently falling back to the
   browser default "normal" blend without this, which just washes a
   translucent layer over the art instead of enhancing it. */
.holo-card__shine,
.holo-card__shine:before,
.holo-card__shine:after {
	mix-blend-mode: color-dodge;
	opacity: var(--card-opacity);
}

/* default - effect files may override with their own (usually lower) value */
.holo-card__glare {
	opacity: var(--card-opacity);
}

.holo-card__shine:before,
.holo-card__shine:after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
}

/* No-JS / JS-not-yet-initialized fallback: a fixed shimmer on hover */
.holo-card:not(.js-interactive):hover {
	--pointer-x: 25%;
	--pointer-y: 10%;
	--background-x: 44%;
	--background-y: 36%;
	--pointer-from-center: 0.6;
	--pointer-from-top: 0.1;
	--pointer-from-left: 0.25;
	--card-opacity: 1;
	--card-scale: 1.05;
	--rotate-x: 7deg;
	--rotate-y: -12deg;
}

.holo-card:not(.js-interactive) .holo-card__translater,
.holo-card:not(.js-interactive) .holo-card__rotator,
.holo-card:not(.js-interactive) .holo-card__shine,
.holo-card:not(.js-interactive) .holo-card__shine:before,
.holo-card:not(.js-interactive) .holo-card__shine:after,
.holo-card:not(.js-interactive) .holo-card__glare {
	transition: all 0.3s ease;
}