/**
 * Rare Rainbow Etched Holo
 * ------------------------
 * Extracted from pokemon-cards-css (simeydotme / PokeRender).
 * Covers ONLY the "Rare Rainbow" / etched-swsecret family, in BOTH variants:
 *
 *   data-rarity="rare rainbow"      → standard rainbow secrets
 *                                     (e.g. rainbow Charizard VMAX)
 *   data-rarity="rare rainbow alt"  → alternate-art VMAX rainbow secrets
 *                                     (e.g. Espeon VMAX #270 — the demo card;
 *                                      this is what the original site shows
 *                                      for that card)
 *
 * Both: rainbow spectral shine + glitter + etched foil layer + glare.
 *
 * REQUIRED DOM (minimal):
 *
 *   <div class="card masked interactive"
 *        data-rarity="rare rainbow"
 *        style="--pointer-x:50%; --pointer-y:50%; --pointer-from-center:0;
 *               --pointer-from-top:.5; --pointer-from-left:.5;
 *               --card-opacity:0; --background-x:50%; --background-y:50%;
 *               --rotate-x:0deg; --rotate-y:0deg; --card-scale:1;
 *               --translate-x:0px; --translate-y:0px;">
 *     <div class="card__translater">
 *       <div class="card__rotator">          <!-- or <button> -->
 *         <div class="card__front"
 *              style="--foil:url(...foil...); --mask:url(...mask...);">
 *           <img class="card__art" src="card.png" alt="" />
 *           <div class="card__shine"></div>
 *           <div class="card__glare"></div>
 *         </div>
 *       </div>
 *     </div>
 *   </div>
 *
 * ASSETS (paths relative to this CSS file by default → ../img/):
 *   - glitter.png          (sparkle sheet used by --glitter)
 *   - illusion-mask.png    (fallback etch when .masked is absent)
 *   - per-card foil + mask (etched swsecret scan textures)
 *
 * POINTER VARS (set from JS on pointermove / deviceorientation):
 *   --pointer-x / --pointer-y          % position of light on card
 *   --pointer-from-center              0..1 distance of pointer from center
 *   --pointer-from-top / -left         0..1
 *   --card-opacity                     0..1 overall shine/glare strength
 *   --background-x / --background-y    % (mild parallax for some layers)
 *   --rotate-x / --rotate-y            deg (3D tilt of .card__rotator)
 *   --card-scale, --translate-x/y      optional popover polish
 *
 * Without a mask: omit class "masked" and --mask; fallback uses illusion-mask.png.
 * With a mask: add class "masked" and set --mask + --foil on .card__front.
 */


/* ==========================================================================
   1. POINTER / MOTION DEFAULTS
   ========================================================================== */

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

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


/* ==========================================================================
   2. CARD SHELL (structure + 3D tilt)
   ========================================================================== */

.card {
  /* asset paths — override these if your asset root differs */
  --glitter: url("../img/glitter.png");
  --glittersize: 25%;
  --imgsize: cover;

  /* used by the "rare rainbow alt" stripe pattern */
  --space: 5%;
  --angle: 133deg;

  -webkit-transform: translate3d(0px, 0px, 0.01px);
  transform: translate3d(0px, 0px, 0.01px);
  pointer-events: none;
  z-index: calc(var(--card-scale) * 2);
  will-change: transform, visibility, z-index;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  aspect-ratio: var(--card-aspect);
  border-radius: var(--card-radius);
}

.card,
.card * {
  outline: 1px solid transparent;
}

.card.interacting {
  z-index: calc(var(--card-scale) * 120);
}

.card__translater,
.card__rotator {
  display: grid;
  perspective: 600px;
  will-change: transform, box-shadow;
  transform-origin: center;
  -webkit-transform-origin: center;
  transform-style: preserve-3d;
}

.card__translater {
  width: auto;
  position: relative;
  --translate-z: calc(var(--card-scale) * 150px + 0.01px);
  -webkit-transform: translate3d(var(--translate-x), var(--translate-y), var(--translate-z)) scale(var(--card-scale));
  transform: translate3d(var(--translate-x), var(--translate-y), var(--translate-z)) scale(var(--card-scale));
}

.card__rotator {
  aspect-ratio: var(--card-aspect);
  border-radius: var(--card-radius);
  -webkit-transform: rotateY(var(--rotate-x)) rotateX(var(--rotate-y));
  transform: rotateY(var(--rotate-x)) rotateX(var(--rotate-y));
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  pointer-events: auto;
  border: none;
  background: transparent;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  transition: box-shadow 0.4s ease, opacity 0.33s ease-out;
  box-shadow:
    0 0 3px -1px transparent,
    0 0 2px 1px transparent,
    0 0 5px 0px transparent,
    0px 10px 20px -5px black,
    0 2px 15px -5px black,
    0 0 20px 0px transparent;
}

.card.active .card__rotator,
.card__rotator:focus {
  box-shadow:
    0 0 3px -1px white,
    0 0 3px 1px var(--card-edge),
    0 0 12px 2px var(--card-glow),
    0px 10px 20px -5px black,
    0 0 40px -30px var(--card-glow),
    0 0 50px -20px var(--card-glow);
}

/* Stack every layer of the rotator face on top of each other (matches original) */
.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__front {
  opacity: 1;
  -webkit-transform: translate3d(0px, 0px, 0.01px);
  transform: translate3d(0px, 0px, 0.01px);
  backface-visibility: hidden;
  position: relative;
}

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

.card__art,
.card__front > img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-transform: translate3d(0px, 0px, 0.01px);
  transform: translate3d(0px, 0px, 0.01px);
  border-radius: var(--card-radius);
  grid-area: 1 / 1;
}


/* ==========================================================================
   3. SHINE / GLARE BASE LAYERS
   ========================================================================== */

.card__shine,
.card__glare {
  will-change: transform, opacity, background-image, background-size,
    background-position, background-blend-mode, filter;
  /* fill the card face even if parent height is content-driven */
  width: 100%;
  height: 100%;
  min-height: 100%;
  place-self: stretch;
}

.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);
  border-radius: var(--card-radius);
  grid-area: 1 / 1;
}

.card__shine:before,
.card__shine:after {
  content: "";
  grid-area: 1 / 1;
  transform: translateZ(1px);
  border-radius: var(--card-radius);
  /* pseudo-elements need an explicit box to paint gradients */
  width: 100%;
  height: 100%;
  display: block;
}

.card__shine:after {
  transform: translateZ(1.2px);
}

.card__glare {
  transform: translateZ(1.41px);
  overflow: hidden;
  border-radius: var(--card-radius);
  grid-area: 1 / 1;
  z-index: 4;
  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;
}

/* Etch stencil: foil only where mask is opaque */
.card.masked .card__shine,
.card.masked .card__shine:before,
.card.masked .card__shine:after {
  -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;
}

/* Pure-CSS hover fallback when you skip the JS driver */
.card:not(.interactive) .card__translater,
.card:not(.interactive) .card__rotator,
.card:not(.interactive) .card__shine,
.card:not(.interactive) .card__glare {
  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;
}


/* ==========================================================================
   4. RARE RAINBOW ETCHED — SHINE
   ========================================================================== */

.card[data-rarity="rare rainbow"] .card__shine {
  --r-clr-1: hsl(0, 57%, 37%);
  --r-clr-2: hsl(40, 53%, 39%);
  --r-clr-3: hsl(90, 60%, 35%);
  --r-clr-4: hsl(180, 60%, 35%);
  --r-clr-5: hsl(180, 60%, 35%);
  --r-clr-6: hsl(210, 57%, 39%);
  --r-clr-7: hsl(280, 55%, 31%);

  background-image:
    linear-gradient(-45deg, var(--r-clr-1), var(--r-clr-5)),
    var(--glitter),
    linear-gradient(
      -30deg,
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4),
      var(--r-clr-5), var(--r-clr-6), var(--r-clr-7),
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4),
      var(--r-clr-5), var(--r-clr-6), var(--r-clr-7),
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4),
      var(--r-clr-5), var(--r-clr-6), var(--r-clr-7),
      var(--r-clr-1)
    );

  background-blend-mode: luminosity, soft-light;

  background-size:
    200% 200%,
    var(--glittersize) var(--glittersize),
    400% 400%;

  background-position:
    calc(25% + (50% * var(--pointer-from-left))) calc(25% + (50% * var(--pointer-from-top))),
    center center,
    calc(25% + (var(--pointer-x) / 2)) calc(25% + (var(--pointer-y) / 2));

  filter: brightness(calc((var(--pointer-from-center) * 0.25) + 0.6)) contrast(2.2) saturate(0.75);
}

/* Rainbow band + glitter (unmasked so it sweeps the full face) */
.card[data-rarity="rare rainbow"] .card__shine:after {
  content: "";
  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image:
    var(--glitter),
    linear-gradient(
      -60deg,
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4),
      var(--r-clr-5), var(--r-clr-6), var(--r-clr-7),
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4),
      var(--r-clr-5), var(--r-clr-6), var(--r-clr-7),
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4),
      var(--r-clr-5), var(--r-clr-6), var(--r-clr-7),
      var(--r-clr-1)
    );

  background-blend-mode: soft-light;
  background-size: var(--glittersize) var(--glittersize), 400% 400%;
  background-position: center center, var(--pointer-x) var(--pointer-y);

  filter: brightness(calc((var(--pointer-from-center) * 0.3) + 0.55)) contrast(2) saturate(1);
  mix-blend-mode: color-dodge;
}

/* Etched foil photo layer */
.card[data-rarity="rare rainbow"] .card__shine:before {
  content: "";

  background-image: var(--foil);
  background-size: var(--imgsize);
  background-position: center center;
  filter: brightness(2.5) contrast(1);

  opacity: calc((var(--pointer-from-center) + 0.4) * 0.6);
  background-blend-mode: difference;
  mix-blend-mode: darken;
}


/* ==========================================================================
   5. RARE RAINBOW ETCHED — GLARE
   ========================================================================== */

.card[data-rarity="rare rainbow"] .card__glare {
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(0, 0%, 80%),
    hsla(187, 10%, 85%, 0.25) 30%,
    hsl(197, 6%, 25%) 120%
  );

  filter: brightness(0.9) contrast(1.75);
  opacity: calc(var(--pointer-from-center) * 0.9);
  mix-blend-mode: hard-light;
}


/* ==========================================================================
   6. NO-MASK FALLBACK
   ========================================================================== */

.card:not(.masked)[data-rarity="rare rainbow"] .card__shine {
  --foil: url("../img/illusion-mask.png");
  --imgsize: 33%;
}


/* ==========================================================================
   7. RARE RAINBOW ALT (etched swsecret, alternate-art VMAX) — SHINE

   This is the finish the original site uses for alt-art VMAX rainbow
   secrets (e.g. Espeon VMAX #270/264 — the demo card). Brighter diagonal
   rainbow stripes + glitter + etched foil, deeper vignette glare.
   ========================================================================== */

.card[data-rarity="rare rainbow alt"] .card__shine {
  --imgsize: cover;

  --r-clr-1: hsl(0, 57%, 37%);
  --r-clr-2: hsl(40, 53%, 39%);
  --r-clr-3: hsl(90, 60%, 35%);
  --r-clr-4: hsl(180, 60%, 35%);
  --r-clr-5: hsl(180, 60%, 35%);
  --r-clr-6: hsl(210, 57%, 39%);
  --r-clr-7: hsl(280, 55%, 31%);

  background-image:
    repeating-linear-gradient(
      var(--angle),
      hsla(283, 49%, 60%, 0.75) calc(var(--space) * 1),
      hsla(2, 70%, 58%, 0.75) calc(var(--space) * 2),
      hsla(53, 67%, 53%, 0.75) calc(var(--space) * 3),
      hsla(93, 56%, 52%, 0.75) calc(var(--space) * 4),
      hsla(176, 38%, 50%, 0.75) calc(var(--space) * 5),
      hsla(228, 100%, 77%, 0.75) calc(var(--space) * 6),
      hsla(283, 49%, 61%, 0.75) calc(var(--space) * 7)
    ),
    var(--glitter),
    linear-gradient(
      -30deg,
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4),
      var(--r-clr-5), var(--r-clr-6), var(--r-clr-7),
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4),
      var(--r-clr-5), var(--r-clr-6), var(--r-clr-7),
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4),
      var(--r-clr-5), var(--r-clr-6), var(--r-clr-7),
      var(--r-clr-1)
    );

  background-size: 200% 400%, var(--glittersize) var(--glittersize), 400% 400%;
  background-position:
    0% calc(var(--background-y) * 1),
    center center,
    calc(var(--background-x) * 1.5) calc(var(--background-y) * 1.5);
  background-blend-mode: luminosity, overlay;
  filter: brightness(calc((var(--pointer-from-center) * 0.3) + 0.3)) contrast(3) saturate(1.8);
}

.card[data-rarity="rare rainbow alt"] .card__shine:after {
  content: "";
  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image:
    var(--glitter),
    linear-gradient(
      -60deg,
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4),
      var(--r-clr-5), var(--r-clr-6), var(--r-clr-7),
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4),
      var(--r-clr-5), var(--r-clr-6), var(--r-clr-7),
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4),
      var(--r-clr-5), var(--r-clr-6), var(--r-clr-7),
      var(--r-clr-1)
    );
  background-blend-mode: overlay;
  background-size: var(--glittersize) var(--glittersize), 400% 400%;
  background-position:
    center center,
    calc(var(--background-x) * -1.5) calc(var(--background-y) * -1.5);
  filter: brightness(calc((var(--pointer-from-center) * 0.5) + 0.6)) contrast(3) saturate(1);
  mix-blend-mode: color-dodge;

  opacity: calc(1.2 + (var(--pointer-from-center) / 2) * -1);
}

.card[data-rarity="rare rainbow alt"] .card__shine:before {
  content: "";

  background-image: var(--foil);
  background-size: var(--imgsize);
  background-position: center center;
  filter: brightness(1.5) contrast(1.5);
  opacity: calc((var(--pointer-from-center) + 0.6) * 0.4);
  background-blend-mode: difference;
  mix-blend-mode: color-dodge;
}


/* ==========================================================================
   8. RARE RAINBOW ALT — GLARE
   ========================================================================== */

.card[data-rarity="rare rainbow alt"] .card__glare {
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(50, 20%, 90%, 0.75) 0%,
    hsla(150, 20%, 30%, 0.65) 45%,
    hsla(0, 0%, 0%, 1) 100%
  );

  filter: brightness(0.9) contrast(2);
  opacity: calc(var(--card-opacity) * 0.75);
}


/* ==========================================================================
   9. RARE RAINBOW ALT — NO-MASK FALLBACK
   ========================================================================== */

.card:not(.masked)[data-rarity="rare rainbow alt"] .card__shine {
  --mask: none;
  --foil: none;
  --imgsize: 25% auto;
}