/*

  COSMOS HOLO

*/

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






/*

  SHINE LAYERS

*/

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

  --space: 4%;

  clip-path: var(--clip);

  background-image: 
    url("/img/cosmos-bottom.png"), 
    repeating-linear-gradient(
      82deg, 
      hsl(53, 65%, 60%) calc(var(--space)*1), 
      hsl(93, 56%, 50%) calc(var(--space)*2), 
      hsl(176, 54%, 49%) calc(var(--space)*3), 
      hsl(228, 59%, 55%) calc(var(--space)*4), 
      hsl(283, 60%, 55%) calc(var(--space)*5), 
      hsl(326, 59%, 51%) calc(var(--space)*6), 
      hsl(326, 59%, 51%) calc(var(--space)*7), 
      hsl(283, 60%, 55%) calc(var(--space)*8), 
      hsl(228, 59%, 55%) calc(var(--space)*9), 
      hsl(176, 54%, 49%) calc(var(--space)*10), 
      hsl(93, 56%, 50%) calc(var(--space)*11), 
      hsl(53, 65%, 60%) calc(var(--space)*12) 
    ), 
    radial-gradient( 
      farthest-corner circle 
      at var(--pointer-x) var(--pointer-y), 
      hsla(180, 100%, 89%, 0.5) 5%, 
      hsla(180, 14%, 57%, 0.3) 40%, 
      hsl(0, 0%, 0%) 130% 
  );

  background-blend-mode: 
    color-burn, 
    multiply;

  background-position: 
    var(--cosmosbg, center center),
    calc( 10% + ( var(--pointer-from-left) * 80% ) ) calc( 10% + ( var(--pointer-from-top) * 80% ) ), 
    center center;

  background-size: cover, 400% 900%, cover;

  filter: brightness(1) contrast(1) saturate(.8);
  mix-blend-mode: color-dodge;

}



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

  content: "";
  z-index: 2;

  background-image: 
    url("/img/cosmos-middle-trans.png"), 
    repeating-linear-gradient(
      82deg, 
      hsl(53, 65%, 60%) calc(var(--space)*1), 
      hsl(93, 56%, 50%) calc(var(--space)*2), 
      hsl(176, 54%, 49%) calc(var(--space)*3), 
      hsl(228, 59%, 55%) calc(var(--space)*4), 
      hsl(283, 60%, 55%) calc(var(--space)*5), 
      hsl(326, 59%, 51%) calc(var(--space)*6), 
      hsl(326, 59%, 51%) calc(var(--space)*7), 
      hsl(283, 60%, 55%) calc(var(--space)*8), 
      hsl(228, 59%, 55%) calc(var(--space)*9), 
      hsl(176, 54%, 49%) calc(var(--space)*10), 
      hsl(93, 56%, 50%) calc(var(--space)*11), 
      hsl(53, 65%, 60%) calc(var(--space)*12) 
    );

  background-blend-mode: 
    lighten, 
    multiply;

  background-position: 
    var(--cosmosbg, center center), 
    calc( 15% + ( var(--pointer-from-left) * 70% ) ) calc( 15% + ( var(--pointer-from-top) * 70% ) ), 
    center center;

  background-size: cover, 400% 900%, cover;

  filter: brightness(1.25) contrast(1.75) saturate(.8);
  mix-blend-mode: overlay;

}


.card[data-rarity="rare holo cosmos"] .card__shine:after {
  
  content: "";
  z-index: 3;

  background-image: 
    url("/img/cosmos-top-trans.png"), 
    repeating-linear-gradient(
      82deg, 
      hsl(53, 65%, 60%) calc(var(--space)*1), 
      hsl(93, 56%, 50%) calc(var(--space)*2), 
      hsl(176, 54%, 49%) calc(var(--space)*3), 
      hsl(228, 59%, 55%) calc(var(--space)*4), 
      hsl(283, 60%, 55%) calc(var(--space)*5), 
      hsl(326, 59%, 51%) calc(var(--space)*6), 
      hsl(326, 59%, 51%) calc(var(--space)*7), 
      hsl(283, 60%, 55%) calc(var(--space)*8), 
      hsl(228, 59%, 55%) calc(var(--space)*9), 
      hsl(176, 54%, 49%) calc(var(--space)*10), 
      hsl(93, 56%, 50%) calc(var(--space)*11), 
      hsl(53, 65%, 60%) calc(var(--space)*12) 
    );

  background-blend-mode: 
    multiply, 
    multiply;

  background-position: 
    var(--cosmosbg, center center), 
    calc( 20% + ( var(--pointer-from-left) * 60% ) ) calc( 20% + ( var(--pointer-from-top) * 60% ) ), 
    center center;

  background-size: cover, 400% 900%, cover;

  filter: brightness(1.25) contrast(1.75) saturate(.8);
  mix-blend-mode: multiply;

}





/*

  GLARE LAYERS

*/

.card[data-rarity="rare holo cosmos"] .card__glare {
  
  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(204, 100%, 95%, 0.8) 5%, 
      hsla(250, 15%, 20%, 1) 150% 
    );
  filter: brightness(.75) contrast(2) saturate(2);
  mix-blend-mode: overlay;
  opacity: calc( var(--card-opacity) * ( 0.25 + var(--pointer-from-center) ) );
    
}

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

  content: "";

  background-image: 
    radial-gradient( farthest-corner circle at 
      var(--pointer-x) var(--pointer-y), 
      hsl(280, 100%, 96%) 5%, 
      hsl(0, 0%, 10%) 60%
    );

  filter: brightness(.75) contrast(2.5) saturate(2);
  mix-blend-mode: soft-light;
  opacity: calc( 1 - var(--pointer-from-top) * .75 );

}