/*

  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(.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);
}