/*

  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(0.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(0.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(0.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(0.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(0.75) contrast(2.5) saturate(2);
  mix-blend-mode: soft-light;
  opacity: calc(1 - var(--pointer-from-top) * 0.75);
}