/*

  COSMOS HOLO
  Matched to Vue Card.vue implementation

*/




/*

  SHINE LAYERS

*/

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

  --space: 4%;

  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:
    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,
.card-body.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:
    center center,
    calc(15% + (var(--pointer-from-left) * 70%)) calc(15% + (var(--pointer-from-top) * 70%));

  background-size: cover, 400% 900%;

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

}


.card[data-rarity="rare holo cosmos"] .card__shine:after,
.card-body.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:
    center center,
    calc(20% + (var(--pointer-from-left) * 60%)) calc(20% + (var(--pointer-from-top) * 60%));

  background-size: cover, 400% 900%;

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

}





/*

  GLARE LAYERS

*/

.card[data-rarity="rare holo cosmos"] .card__glare,
.card-body.card[data-rarity="rare holo cosmos"] .card__glare {

  background-image:
    radial-gradient(
      farthest-corner circle at var(--glare-x) var(--glare-y),
      hsla(204, 100%, 95%, 0.5) 5%,
      hsla(250, 15%, 20%, 0.4) 150%
    );

  filter: brightness(.85) contrast(1.3) saturate(1.3);
  mix-blend-mode: overlay;
  opacity: calc(var(--card-opacity) * 0.45 * (0.4 + var(--pointer-from-center) * 0.6));

}