/*

  REVERSE HOLO

*/

/*

  SHINE LAYERS

*/
.card {
  --foil-brightness: 0.55;
}

.card[data-rarity$="reverse holo"] .card__shine {
  background-image:
    radial-gradient(
      circle at var(--pointer-x) var(--pointer-y),
      #fff 5%,
      #000 50%,
      #fff 80%
    ),
    linear-gradient(-45deg, #000 15%, #fff, #000 85%), var(--foil);

  background-blend-mode: soft-light, difference;
  background-size:
    120% 120%,
    200% 200%,
    cover;
  background-position:
    center center,
    calc((100% * var(--pointer-from-left)))
      calc((100% * var(--pointer-from-top))),
    center center;

  filter: brightness(var(--foil-brightness)) contrast(1.5) saturate(1);
  mix-blend-mode: color-dodge;

  opacity: calc((1.5 * var(--card-opacity)) - var(--pointer-from-center));
}

.card.lightning {
  --foil-brightness: 0.7;
}
.card.darkness {
  --foil-brightness: 0.8;
}
.card.metal {
  --foil-brightness: 0.6;
}

/*

  GLARE LAYERS

*/

.card[data-rarity$="reverse holo"] .card__glare {
  opacity: var(--card-opacity);

  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.5) 20%,
    hsla(0, 0%, 0%, 0.75) 90%
  );

  filter: brightness(0.7) contrast(1.5);
}

.card[data-rarity$="reverse holo"] .card__glare:after {
  content: "";
  opacity: var(--card-opacity);

  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(0, 0%, 100%) 10%,
    hsla(0, 0%, 100%, 0.5) 20%,
    hsla(0, 0%, 0%, 0.5) 120%
  );

  filter: brightness(1) contrast(1.5);
}

/*

  NO MASK

*/

.card:not(.masked)[data-rarity$="reverse holo"] .card__shine {
  --foil: none;
  clip-path: var(--clip-invert);
}

.card:not(.masked)[data-rarity$="reverse holo"][data-subtypes^="stage"]
  .card__glare:after {
  clip-path: var(--clip-stage-invert);
}

.card:not(.masked)[data-rarity$="reverse holo"][data-supertype="trainer"]
  .card__glare:after {
  clip-path: var(--clip-trainer-invert);
}
