/* ═══ PokéDebut — card light & tilt (css/holo.css) ═══════════════════════════
   Adapted from "pokemon-cards-css" by Simon Goellner (@simeydotme)
   https://github.com/simeydotme/pokemon-cards-css — Copyright (C) 2022 Simon Goellner.
   That project is licensed under the GNU General Public License v3.0, so this
   stylesheet and js/holo.js (which drives it) are distributed under the same license:
   https://www.gnu.org/licenses/gpl-3.0.html — provided WITHOUT ANY WARRANTY.
   What remains of it here is the moving light (the glare gradient) and the pointer →
   tilt mapping. The foil recipes were removed on 2026-09-17 at Chad's request ("light
   only"); git history (848bdc4) has them should a foil ever be wanted back.

   js/holo.js writes these variables on the wrapper every frame:
     --px / --py  pointer position in the card (%)   --o      light opacity 0–1
     --rx / --ry  tilt (deg)                          --scale  hover scale */

[data-holo] { --px: 50%; --py: 50%; --o: 0; --rx: 0deg; --ry: 0deg; --scale: 1; }

/* ── Grid card: the wrapper tilts as one piece; the image itself never moves ────── */
.card-image .pd-holo {
  position: relative;
  display: inline-flex;
  height: 100%;
  border-radius: 4.6% / 3.3%;
  transform: translate3d(0, 0, .01px) rotateY(var(--rx)) rotateX(var(--ry)) scale(var(--scale));
  transform-style: preserve-3d;
  will-change: transform;
  outline: 1px solid transparent;   /* anti-aliases the tilted edges */
}
.card-image .pd-holo.is-holo-lit { z-index: 5; }
.card-image .pd-holo img.carousel-image {
  display: block;
  position: relative; z-index: 1;
  width: auto !important;
  height: 100% !important;
  max-width: 100%;
  aspect-ratio: auto 600 / 825;   /* each card's own ratio; 600/825 is the pre-load fallback */
  object-fit: contain;
  border-radius: 4.6% / 3.3%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .30);
  /* Only the wrapper rotates. A second rotation on the image puts it on a different
     plane from the light layer, and where the two planes cross the browser draws a
     hard seam across the card. */
  transform: none !important;
  transition: none !important;
}

/* ── The light (grid and lightbox alike): a soft highlight that follows the pointer,
   blended over the print. holo.js injects it on first hover. ─────────────────── */
[data-holo] > .pd-glare {
  position: absolute; inset: 0;
  border-radius: inherit; overflow: hidden;
  pointer-events: none;
  z-index: 3; opacity: var(--o); mix-blend-mode: overlay; transform: translateZ(1px);
  background-size: cover; background-position: center;
  backface-visibility: hidden;
  background-image: radial-gradient(farthest-corner circle at var(--px) var(--py),
    hsl(0 0% 100% / .8) 10%, hsl(0 0% 100% / .65) 20%, hsl(0 0% 0% / .5) 90%);
}

/* ── Lightbox card ─────────────────────────────────────────────────────────────────
   Same light layer (holo.js injects it). Its pose is a sum: the pointer tilt from holo.js
   (--rx/--ry/--scale) plus the drag-to-spin / flip from ui.js or lucario.js (--spin in
   degrees, --drag-x) — written as variables, not an inline transform, precisely so both
   can contribute. The perspective lives in the transform so the tilt reads as 3D. No
   filter on the wrapper: that would flatten preserve-3d and hide the card back. */
#lightbox .lightbox-image-wrapper {
  transform: perspective(1200px)
             rotateX(calc(var(--drag-x, 0deg) + var(--ry, 0deg)))
             rotateY(calc(var(--spin, 0) * 1deg + var(--rx, 0deg)))
             scale(var(--scale, 1));
  outline: 1px solid transparent;
}
/* The faces sit on the wrapper's plane (the back a hair behind); only the wrapper
   moves — an extra transform on a face would cross the light layer (see above). */
#lightbox .lightbox-image { transform: translateZ(.01px) !important; }
#lightbox .lightbox-card-back { transform: rotateY(180deg) translateZ(1px) !important; }
#lightbox .lightbox-image-wrapper > .pd-glare { border-radius: 4.6% / 3.3%; }