/*

  REVERSE HOLO

*/







/*

  SHINE LAYERS

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

.card[data-rarity$="reverse holo"] .card__shine {
  --barwidth: 1.2%;
  --space: 200px;
  --hue: 50;
  --imgsize: 100% 100%;
  --foil: url("../_images/foil/SSR-M2.png?v=20250105holo1");
  --mask: url("../_images/foil/SSR-M2.png?v=20250105holo1");
  --mask-size: 100% 100%;

  background-image: 
    var(--foil),
    radial-gradient( 
      farthest-corner ellipse 
      at calc( ((var(--pointer-x)) * 0.5) + 25% ) calc( ((var(--pointer-y)) * 0.5) + 25% ), 
      hsl(0, 0%, 95%) 20%, 
      var(--card-glow) 130% 
    ),
    repeating-linear-gradient( 
      45deg, 
      hsl(0,0%,10%) 0% ,  
      hsl(0,0%,10%) 1% , 
      hsl(0,0%,10%) var(--barwidth),
      hsl(0,0%,20%) calc( var(--barwidth) + 0.01% ) ,
      hsl(0,0%,20%) calc( var(--barwidth) * 2 ),
      hsl(0,0%,35%) calc( var(--barwidth) * 2 + 0.01% ) ,
      hsl(0,0%,35%) calc( var(--barwidth) * 3 ) ,
      hsl(0,0%,42.5%) calc( var(--barwidth) * 3 + 0.01% ) ,
      hsl(0,0%,42.5%) calc( var(--barwidth) * 4 ) ,
      hsl(0,0%,50%) calc( var(--barwidth) * 4 + 0.01% ) ,
      hsl(0,0%,50%) calc( var(--barwidth) * 5 ) ,
      hsl(0,0%,42.5%) calc( var(--barwidth) * 5 + 0.01% ) ,
      hsl(0,0%,42.5%) calc( var(--barwidth) * 6 ) ,
      hsl(0,0%,35%) calc( var(--barwidth) * 6 + 0.01% ) ,
      hsl(0,0%,35%) calc( var(--barwidth) * 7 ) ,
      hsl(0,0%,20%) calc( var(--barwidth) * 7 + 0.01% ) ,
      hsl(0,0%,20%) calc( var(--barwidth) * 8 )  ,
      hsl(0,0%,10%) calc( var(--barwidth) * 8 + 0.01% ) ,
      hsl(0,0%,10%) calc( var(--barwidth) * 9 )  ,
      hsl(0,0%,0%) calc( var(--barwidth) * 9 + 0.01% ) ,
      hsl(0,0%,0%) calc( var(--barwidth) * 10 ) 
    ),
    repeating-linear-gradient( 
      -45deg, 
      hsl(0,0%,10%) 0% ,  
      hsl(0,0%,10%) 1% , 
      hsl(0,0%,10%) var(--barwidth),
      hsl(0,0%,20%) calc( var(--barwidth) + 0.01% ) ,
      hsl(0,0%,20%) calc( var(--barwidth) * 2 ),
      hsl(0,0%,35%) calc( var(--barwidth) * 2 + 0.01% ) ,
      hsl(0,0%,35%) calc( var(--barwidth) * 3 ) ,
      hsl(0,0%,42.5%) calc( var(--barwidth) * 3 + 0.01% ) ,
      hsl(0,0%,42.5%) calc( var(--barwidth) * 4 ) ,
      hsl(0,0%,50%) calc( var(--barwidth) * 4 + 0.01% ) ,
      hsl(0,0%,50%) calc( var(--barwidth) * 5 ) ,
      hsl(0,0%,42.5%) calc( var(--barwidth) * 5 + 0.01% ) ,
      hsl(0,0%,42.5%) calc( var(--barwidth) * 6 ) ,
      hsl(0,0%,35%) calc( var(--barwidth) * 6 + 0.01% ) ,
      hsl(0,0%,35%) calc( var(--barwidth) * 7 ) ,
      hsl(0,0%,20%) calc( var(--barwidth) * 7 + 0.01% ) ,
      hsl(0,0%,20%) calc( var(--barwidth) * 8 )  ,
      hsl(0,0%,10%) calc( var(--barwidth) * 8 + 0.01% ) ,
      hsl(0,0%,10%) calc( var(--barwidth) * 9 )  ,
      hsl(0,0%,0%) calc( var(--barwidth) * 9 + 0.01% ) ,
      hsl(0,0%,0%) calc( var(--barwidth) * 10 ) 
    );

  background-size: var(--imgsize), 210% 210%, 210% 210%;
  background-position: 
    center, 
    calc( ((var(--background-x) - 50%) * 1.5) + 50% ) calc( ((var(--background-y) - 50%) * 1.5) + 50% ), 
    calc( ((var(--background-x) - 50%) * 1.5) + 50% ) calc( ((var(--background-y) - 50%) * 1.5) + 50% );

  background-blend-mode: exclusion, darken, color-dodge;

  filter: brightness(.5) contrast(2) saturate(1.75);
  mix-blend-mode: color-dodge;

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

.card[data-rarity$="reverse holo"] .card__shine,
.card[data-rarity$="reverse holo"] .card__shine:before,
.card[data-rarity$="reverse holo"] .card__shine:after {
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  -webkit-mask-size: var(--mask-size);
  mask-size: var(--mask-size);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
}

.card[data-rarity$="reverse holo"] .card__shine:before {
  content: "";
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.22) 0px,
    rgba(255, 255, 255, 0.22) 1px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0) 3px
  );
  background-size: 240% 240%;
  background-position: calc(((50% - var(--background-x)) * 1.8) + 50%) calc(((50% - var(--background-y)) * 1.8) + 50%);
  mix-blend-mode: overlay;
  opacity: 0.9;
}

.card[data-rarity$="reverse holo"] .card__shine:after {
  content: "";
  background-image: var(--mask);
  background-size: var(--imgsize);
  background-position: center center;
  mix-blend-mode: soft-light;
  filter: brightness(1.05) contrast(1.1);
  opacity: 0.7;
}

.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: none;
}

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

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

.card[data-rarity$="reverse holo"] .card__glare:after,
.card[data-rarity$="reverse holo"][data-subtypes^="stage"] .card__glare:after,
.card[data-rarity$="reverse holo"][data-supertype="trainer"] .card__glare:after {
  clip-path: none !important;
}