/*

  SECRET RARE (GOLDEN)
  Matched to Vue Card.vue implementation

*/




/*

  SHINE LAYERS

*/

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

  --imgsize: 50%;
  --space: 6%;

  background-image:
    var(--glitter),
    repeating-linear-gradient(0deg,
      hsla(40, 70%, 40%, 0.6) calc(var(--space)*1),
      hsla(35, 65%, 50%, 0.6) calc(var(--space)*2),
      hsla(45, 75%, 55%, 0.6) calc(var(--space)*3),
      hsla(50, 70%, 50%, 0.6) calc(var(--space)*4),
      hsla(40, 65%, 45%, 0.6) calc(var(--space)*5),
      hsla(35, 70%, 40%, 0.6) calc(var(--space)*6)
    ),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(40, 60%, 60%, 0.4) 10%,
      hsla(35, 40%, 30%, 0.3) 80%
    );

  background-blend-mode: overlay, soft-light;
  background-size: var(--imgsize), 200% 400%, cover;
  background-position: center, 0% var(--background-y), var(--background-x) var(--background-y);

  filter: brightness(calc((var(--pointer-from-center) * .2) + .85)) contrast(1.3) saturate(0.8);

}

.card[data-rarity="rare secret"] .card__shine:before,
.card-body.card[data-rarity="rare secret"] .card__shine:before {

  content: "";
  z-index: 2;

  background-image:
    var(--glitter),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(45, 80%, 75%, 0.4) 0%,
      hsla(40, 40%, 50%, 0.15) 50%
    );

  background-size: 20% 20%, cover;
  background-blend-mode: color-dodge;

  mix-blend-mode: overlay;
  filter: brightness(0.9) contrast(1.2) saturate(0.8);
  opacity: 0.5;

}

.card[data-rarity="rare secret"] .card__shine:after,
.card-body.card[data-rarity="rare secret"] .card__shine:after {

  content: "";

  background-image:
    repeating-linear-gradient(135deg,
      hsla(45, 80%, 60%, 0.5) 0%,
      hsla(40, 60%, 40%, 0.4) 3%,
      hsla(50, 80%, 65%, 0.5) 6%
    );

  background-size: 150% 150%;
  background-position: var(--background-x) var(--background-y);

  filter: brightness(1) contrast(1.2);
  mix-blend-mode: soft-light;
  opacity: 0.6;

}





/*

  GLARE LAYERS

*/

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

  background-image:
    radial-gradient(
      farthest-corner circle at var(--glare-x) var(--glare-y),
      hsla(45, 80%, 90%, 0.5) 5%,
      hsla(40, 40%, 50%, 0.3) 50%,
      hsla(35, 20%, 25%, 0.25) 100%
    );

  filter: brightness(.95) contrast(1.2) saturate(0.9);
  mix-blend-mode: overlay;
  opacity: calc(var(--card-opacity) * 0.5 * (0.45 + var(--pointer-from-center) * 0.55));

}