/*

  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 );

}