/* Pokemon-cards-css holo effect, adapted for Cyberfrog Cards.
   Source: simey/pokemon-cards-css (MIT, attribution to aschefield101
   for galaxy texture + Vecteezy for backgrounds).

   Differences from upstream:
   - Removed 3D transforms / preserve-3d / backface-visibility
     (our card stays flat; ambient animation only).
   - Removed clip-path masks targeting the Pokemon art window
     (we let the holo run across the whole card surface).
   - Removed mask-image stuff (no card art masks here).
   - Pointer / background / opacity vars set by card.js, either
     from mousemove or a sine-wave ambient driver. */

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

  --grain: url("./holo/img/grain.webp");
  --glitter: url("./holo/img/glitter.png");
  --glittersize: 25%;

  --space: 5%;
  --angle: 133deg;

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

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

/* Shine + glare layers fill the .card surface. The .card is already
   position:relative with overflow:hidden in card.css, so these
   absolute-positioned children stay clipped to the rounded corners. */
.card .card__shine,
.card .card__glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: transparent;
  background-size: cover;
  background-position: center;
  z-index: 5;
}

.card .card__shine {
  filter: brightness(0.85) contrast(2.75) saturate(0.65);
  mix-blend-mode: color-dodge;
  opacity: var(--card-opacity);
}

.card .card__shine::before,
.card .card__shine::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card .card__glare {
  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%
  );
  mix-blend-mode: overlay;
  opacity: var(--card-opacity);
}

.card .card__glare::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* ============================================================ */
/*  SOFT PEARL  -  tier: uncommon                                */
/*  data-rarity="uncommon shimmer"                               */
/*  Whisper-level pearlescent shimmer so uncommon visibly        */
/*  differs from common without competing with rare's pearl.     */
/* ============================================================ */
.card[data-rarity="uncommon shimmer"] .card__shine {
  background-image:
    repeating-linear-gradient(95deg,
      hsla(180, 25%, 92%, 0.18),
      hsla(140, 25%, 92%, 0.18),
      hsla(100, 30%, 92%, 0.18),
      hsla(60,  25%, 92%, 0.18),
      hsla(180, 25%, 92%, 0.18));
  background-position:
    calc(((50% - var(--background-x)) * 1.2) + 50%) calc(((50% - var(--background-y)) * 1.4) + 50%);
  background-size: 220% 220%;
  filter: brightness(1) contrast(0.9) saturate(0.55);
  mix-blend-mode: soft-light;
}

/* ============================================================ */
/*  REGULAR HOLO  -  tier: rare                                  */
/*  data-rarity="rare holo"                                      */
/*  Classic Pokemon prismatic strip - vertical rainbow scanlines */
/*  + dark/light bar overlay + cursor-following radial highlight */
/*  via color-dodge. Filter is dialed for visible-but-restrained */
/*  intensity, not the upstream's screaming vivid default.       */
/* ============================================================ */
.card[data-rarity="rare holo"] .card__shine {
  --scanlines-space: 1px;
  --scanlines-light: #666;
  --scanlines-dark:  black;
  --bars: 3%;
  --bar-color: hsla(0, 0%, 70%, 1);
  --bar-bg:    hsla(0, 0%, 0%,  1);

  background-image:
    repeating-linear-gradient(110deg,
      var(--violet), var(--blue), var(--green), var(--yellow), var(--red),
      var(--violet), var(--blue), var(--green), var(--yellow), var(--red),
      var(--violet), var(--blue), var(--green), var(--yellow), var(--red)),
    repeating-linear-gradient(90deg,
      var(--scanlines-dark) calc(var(--scanlines-space) * 0), var(--scanlines-dark) calc(var(--scanlines-space) * 2),
      var(--scanlines-light) calc(var(--scanlines-space) * 2), var(--scanlines-light) calc(var(--scanlines-space) * 4));
  background-position:
    calc(((50% - var(--background-x)) * 2.6) + 50%) calc(((50% - var(--background-y)) * 3.5) + 50%),
    center center;
  background-size: 400% 400%, cover;
  background-blend-mode: overlay;
  filter: brightness(1) contrast(1.05) saturate(1);
  mix-blend-mode: color-dodge;
}
/* The vertical bar overlay (::before) is the harshest part of the
   regular-holo - explicitly disabled so rare reads as natural prismatic
   stripes alone, without the VHS-bar layer fighting them. */
.card[data-rarity="rare holo"] .card__shine::before {
  content: none;
  display: none;
}
.card[data-rarity="rare holo"] .card__shine::after {
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 90%, 0.8) 0%,
    hsla(0, 0%, 78%, 0.1) 25%,
    hsl(0, 0%, 0%) 90%);
  background-size: cover;
  mix-blend-mode: luminosity;
  filter: brightness(0.6) contrast(4);
}
.card[data-rarity="rare holo"] .card__glare {
  opacity: calc(var(--card-opacity) * 0.8);
  filter: brightness(0.8) contrast(1.5);
}

/* ============================================================ */
/*  COSMOS HOLO  -  tier: epic                                   */
/*  data-rarity="rare holo cosmos"                               */
/* ============================================================ */
.card[data-rarity="rare holo cosmos"] .card__shine {
  --space: 4%;
  background-image:
    url("./holo/img/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:
    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;
}

/* ============================================================ */
/*  TRAINER GALLERY HOLO  -  tier: legendary                     */
/*  data-rarity="trainer gallery rare holo"                      */
/*  Metallic iridescent shine: large color-dodge linear gradient */
/*  + hard-light radial spotlight at the cursor. Subtler than    */
/*  rainbow-alt - matches the demo's Trainer Gallery effect.     */
/* ============================================================ */
.card[data-rarity="trainer gallery rare holo"] .card__shine {
  --space: 5%;
  --angle: -22deg;

  background-image: repeating-linear-gradient(var(--angle),
    hsla(283, 49%, 60%, 0.75) calc(var(--space)*1),
    hsla(2,   74%, 59%, 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));
  background-blend-mode: color-dodge;
  background-size: 300% 400%;
  background-position: 0% calc(var(--background-y) * 1), var(--background-x) var(--background-y);
  filter: brightness(calc((var(--pointer-from-center)*0.3) + 0.5)) contrast(2.3) saturate(1);
}
.card[data-rarity="trainer gallery rare holo"] .card__shine::after {
  background-image: radial-gradient(
    farthest-corner ellipse at calc((var(--pointer-x) * 0.5) + 25%) calc((var(--pointer-y) * 0.5) + 25%),
    hsl(0, 0%, 100%) 5%,
    hsla(300, 100%, 11%, 0.6) 40%,
    hsl(0, 0%, 22%) 120%);
  background-position: center center;
  background-size: 400% 500%;
  filter: brightness(calc((var(--pointer-from-center)*0.2) + 0.4)) contrast(0.85) saturate(1.1);
  mix-blend-mode: hard-light;
}
.card[data-rarity="trainer gallery rare holo"] .card__shine::before {
  content: none;
  display: none;
}
.card[data-rarity="trainer gallery rare holo"] .card__glare {
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 1) 10%,
    hsla(0, 0%, 100%, 0.6) 35%,
    hsla(180, 11%, 35%, 1) 60%);
  mix-blend-mode: soft-light;
}

/* ============================================================ */
/*  RAINBOW HOLO  (kept for reference / future use)              */
/*  data-rarity="rare rainbow"                                   */
/* ============================================================ */
.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);
}
.card[data-rarity="rare rainbow"] .card__shine::after {
  background-image:
    var(--grain),
    radial-gradient(farthest-corner ellipse at calc(((var(--pointer-x)) * 0.5) + 25%) calc(((var(--pointer-y)) * 0.5) + 25%),
      hsl(0, 0%, 100%) 0%,
      hsla(0, 0%, 100%, 0.5) 10%,
      hsla(0, 0%, 0%, 0.85) 70%);
  background-size: 25%, 200% 200%;
  background-position:
    center center,
    calc(((50% - var(--pointer-x)) * 0.5) + 50%) calc(((50% - var(--pointer-y)) * 0.5) + 50%);
  background-blend-mode: overlay;
  filter: brightness(2) contrast(0.75) saturate(1.5);
  mix-blend-mode: hard-light;
}