/*

  REGULAR HOLO

*/





/*

  SHINE LAYERS

*/

.card[data-rarity="rare holo"] .card__shine {
  
  --bars: 5%;
  --bar-color: hsla(0, 0%, 70%, 1);
  --bar-bg: hsla(0, 0%, 0%, 1);
  --bar-rotate: var(--rotate-x);
  
  background-image: 
    repeating-linear-gradient( 10deg,
    var( --holo ),
    var( --holo ),
    var( --holo ),
    var( --holo ),
    var( --holo ),
    var( --holo ),
    var( --holo )
  );
  
  background-position: 
  calc(((50% - var(--background-x))) + 50%) calc(((50% - var(--background-y))) + 50%);
  
  background-size: 
  400% 400%;
  
  background-blend-mode: overlay;
  filter: brightness(1.25) contrast(3) saturate(.75);
  mix-blend-mode: overlay;
  
}

.card[data-rarity="rare holo"] .card__shine:before {
  
  content: "";

  background-image:
    repeating-linear-gradient( calc((var(--rotate-x) - var(--rotate-delta)) * 0.25), 
      var(--bar-bg) calc(var(--bars)*2.5), 
      var(--bar-color) calc(var(--bars)*3.25), 
      hsla(0, 0%, 75%, .5) calc(var(--bars)*3.5), 
      var(--bar-color) calc(var(--bars)*3.75), 
      var(--bar-bg) calc(var(--bars)*4.5), 
      var(--bar-bg) calc(var(--bars)*8)
    ),
    repeating-linear-gradient( calc((var(--rotate-x) - var(--rotate-delta)) * -0.25), 
      var(--bar-bg) calc(var(--bars)*2.5), 
      var(--bar-color) calc(var(--bars)*3.25), 
      hsla(0, 0%, 75%, .5) calc(var(--bars)*3.5), 
      var(--bar-color) calc(var(--bars)*3.75), 
      var(--bar-bg) calc(var(--bars)*4.5), 
      var(--bar-bg) calc(var(--bars)*8)
    );

    background-position:
      50% calc( ( var(--background-y) * 1.2 ) ),
      50% calc( ( var(--background-y) * -1.2 ) );

  background-size: 
    200% 200%,
    200% 200%;

  background-blend-mode: screen;
  filter: brightness( 1 ) contrast( 2 ) saturate(.75);
  mix-blend-mode: multiply;

}

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

  content: "";
    
  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%, 35%) 90% 
      );
    
  background-position: 
    center center;

  background-size:
    cover;

  mix-blend-mode: luminosity; filter: 
  brightness(1) contrast(3);

}

@media screen and (max-width: 900px) {
  .card[data-rarity="rare holo"] .card__shine {
    --scanlines-space: .5px;
  }
}






/*

  GLARE LAYERS

*/

.card[data-rarity="rare holo"] .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%, .5) 120% 
    );

  opacity: calc( var(--card-opacity) * .8 );
  mix-blend-mode: overlay;
  filter: none;

}

.card[data-rarity="rare holo"] .card__glare:after {

  content: "";

  background-image: radial-gradient( 
    farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsl(180, 100%, 95%) 5%, 
      hsla(0, 0%, 39%, 0.25) 55%, 
      hsla(205.6, 50%, 90%, 0.5) 110% 
    );

  mix-blend-mode: overlay;
  filter: brightness(.6) contrast(3);

}










/*

  NO MASK

*/



.card[data-rarity="rare holo"]:not(.masked) .card__shine {

  clip-path: var(--clip);

}

.card[data-rarity="rare holo"][data-subtypes^="stage"]:not(.masked) .card__shine,
.card[data-rarity="rare holo"][data-subtypes^="stage"]:not(.masked) .card__glare:after {
  clip-path: var(--clip-stage);
}
.card[data-rarity="rare holo"][data-subtypes^="supporter"]:not(.masked) .card__shine,
.card[data-rarity="rare holo"][data-subtypes^="supporter"]:not(.masked) .card__glare:after,
.card[data-rarity="rare holo"][data-subtypes^="item"]:not(.masked) .card__shine,
.card[data-rarity="rare holo"][data-subtypes^="item"]:not(.masked) .card__glare:after {
  clip-path: var(--clip-trainer);
}

