/*

  V STAR
  Adapted from simeydotme/pokemon-cards-css for HypePull.
  The signature v-star effect is the pointer-following mask: the holo shine
  is only revealed in a smooth radial area around the cursor. Simey composed
  `var(--mask), radial-gradient(...)` but with `--mask` undefined the property
  becomes invalid and no mask applies — so we use the radial alone.
  Foil pre-sized to 33% and dropped `:not(.masked)` overrides.

*/

.card-body.card[data-rarity="rare holo vstar"] .card__shine,
.card-body.card[data-rarity="rare holo vstar"] .card__shine::before,
.card-body.card[data-rarity="rare holo vstar"] .card__shine::after {

  -webkit-mask-image:
    radial-gradient(
      farthest-corner circle
      at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 100%, 0) 0%,
      hsla(0, 0%, 100%, .5) 120%
    );
  mask-image:
    radial-gradient(
      farthest-corner circle
      at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 100%, 0) 0%,
      hsla(0, 0%, 100%, .5) 120%
    );

}

/*

  SHINE LAYERS

*/

.card-body.card[data-rarity="rare holo vstar"] .card__shine,
.card-body.card[data-rarity="rare holo vstar"] .card__shine:after {

  --imgsize: 33%;

  background-image:
    var(--foil),
    repeating-linear-gradient( 0deg,
      var(--sunpillar-clr-1) calc(var(--space)*1),
      var(--sunpillar-clr-2) calc(var(--space)*2),
      var(--sunpillar-clr-3) calc(var(--space)*3),
      var(--sunpillar-clr-4) calc(var(--space)*4),
      var(--sunpillar-clr-5) calc(var(--space)*5),
      var(--sunpillar-clr-6) calc(var(--space)*6),
      var(--sunpillar-clr-1) calc(var(--space)*7)
    ),
    repeating-linear-gradient(
      var(--angle),
      #0e152e 0%,
      hsl(180, 10%, 60%) 3.8%,
      hsl(180, 29%, 66%) 4.5%,
      hsl(180, 10%, 60%) 5.2%,
      #0e152e 10%,
      #0e152e 12%
    ),
    radial-gradient(
      farthest-corner circle
      at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 0%, 0.1) 12%,
      hsla(0, 0%, 0%, 0.15) 20%,
      hsla(0, 0%, 0%, 0.25) 120%
    );

  background-blend-mode: soft-light, hue, hard-light;
  background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;
  background-position: center center, 0% var(--background-y), var(--background-x) var(--background-y), var(--background-x) var(--background-y);

  filter: brightness(calc((var(--pointer-from-center) * .3) + .75)) contrast(1.5) saturate(1.1);

}

.card-body.card[data-rarity="rare holo vstar"] .card__shine:after {

  background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
  background-position: center center, 0% var(--background-y), calc( var(--background-x) * -1) calc( var(--background-y) * -1), var(--background-x) var(--background-y);

  filter: brightness(calc((var(--pointer-from-center) * .3) + .7)) contrast(1.2) saturate(1.2);
  mix-blend-mode: exclusion;

}

.card-body.card[data-rarity="rare holo vstar"] .card__shine::before {

  background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(190, 7%, 80%, 0.5) 0%, hsla(260, 7%, 50%, 0.15) 45%, hsla(310, 7%, 50%, 0.5) 120% );
  mix-blend-mode: hard-light;
  z-index: 2;
  opacity: 0.5;

}

/*

  GLARE LAYERS

*/

.card-body.card[data-rarity="rare holo vstar"] .card__glare {

  filter: brightness(.85) contrast(1.3);

  background-image:
    radial-gradient(
      farthest-corner circle at var(--glare-x) var(--glare-y),
      hsla(195, 90%, 95%, 0.5) 5%,
      hsla(300, 3%, 70%, 0.35) 60%,
      hsla(350, 0%, 20%, 0.2) 150%
    );

  mix-blend-mode: hard-light;
  opacity: calc(var(--card-opacity) * 0.55 * (0.4 + var(--pointer-from-center) * 0.6));

}