.card[data-set="Shiny"] .card_shine {
  --shift: 1px;
  --imgSize: cover;

  background-image: var(--glitter), var(--glitter),
    conic-gradient(
      var(--sunpillar-clr-4),
      var(--sunpillar-clr-5),
      var(--sunpillar-clr-6),
      var(--sunpillar-clr-1),
      var(--sunpillar-clr-4)
    ),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(150, 00%, 0%, 0.98) 10%,
      hsla(0, 0%, 95%, 0.15) 90%
    );

  background-size: var(--glittersize) var(--glittersize),
    var(--glittersize) var(--glittersize), cover, cover;
  background-position: 45% 45%, 55% 55%, center center, center center;
  background-blend-mode: soft-light, hard-light, overlay;
  mix-blend-mode: color-dodge;
  filter: brightness(calc(0.4 + (var(--pointer-from-center) * 0.2))) contrast(1)
    saturate(2.7);
}

.card[data-set="Shiny"] .card_shine::after {
  content: "";

  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image: var(--glitter);
  background-size: var(--glittersize) var(--glittersize);
  background-position: calc(
      50% - ((var(--shift) * 2) * var(--pointer-from-left)) + var(--shift)
    )
    calc(50% - ((var(--shift) * 2) * var(--pointer-from-top)) + var(--shift));

  filter: brightness(calc((var(--pointer-from-center) * 0.6) + 0.6))
    contrast(1.5);
  mix-blend-mode: overlay;
}

.card[data-set="Shiny"] .card_shine::before {
  content: "";
  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image: var(--foil),
    linear-gradient(45deg, hsl(46, 95%, 50%), hsl(52, 100%, 69%)),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(10, 20%, 90%, 0.95) 10%,
      hsl(0, 0%, 0%) 70%
    );

  background-size: var(--imgsize), cover, cover;
  background-position: center center, center center, center center;
  background-blend-mode: hard-light, multiply;

  mix-blend-mode: lighten;
  filter: brightness(1.25) contrast(1.25) saturate(0.35);
  opacity: 0.8;
}

.card[data-set="Shiny"] .card_shine {
  --r-clr-1: hsl(0, 57%, 37%);
  --r-clr-2: hsl(40, 53%, 39%);
  --r-clr-3: hsl(90, 60%, 35%);
  --r-clr-4: hsl(180, 60%, 35%);
  --r-clr-5: hsl(180, 60%, 35%);
  --r-clr-6: hsl(210, 57%, 39%);
  --r-clr-7: hsl(280, 55%, 31%);

  background-image: linear-gradient(-45deg, var(--r-clr-1), var(--r-clr-5)),
    var(--glitter),
    linear-gradient(
      -30deg,
      var(--r-clr-1),
      var(--r-clr-2),
      var(--r-clr-3),
      var(--r-clr-4),
      var(--r-clr-5),
      var(--r-clr-6),
      var(--r-clr-7),
      var(--r-clr-1),
      var(--r-clr-2),
      var(--r-clr-3),
      var(--r-clr-4),
      var(--r-clr-5),
      var(--r-clr-6),
      var(--r-clr-7),
      var(--r-clr-1),
      var(--r-clr-2),
      var(--r-clr-3),
      var(--r-clr-4),
      var(--r-clr-5),
      var(--r-clr-6),
      var(--r-clr-7),
      var(--r-clr-1)
    );

  background-blend-mode: luminosity, soft-light;

  background-size: 200% 200%, var(--glittersize) var(--glittersize), 400% 400%;

  background-position: calc(25% + (50% * var(--pointer-from-left)))
      calc(25% + (50% * var(--pointer-from-top))),
    calc(50% - ((var(--shift) * 2) * var(--pointer-from-left)) + var(--shift))
      calc(50% - ((var(--shift) * 2) * var(--pointer-from-top)) + var(--shift)),
    calc(25% + (var(--pointer-x) / 2)) calc(25% + (var(--pointer-y) / 2));

  filter: brightness(calc((var(--pointer-from-center) * 0.5) + 0.75))
    contrast(2) saturate(1);
}

.card[data-set="Shiny"] .card_shine::after {
  content: "";

  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image: var(--glitter),
    linear-gradient(
      -60deg,
      var(--r-clr-1),
      var(--r-clr-2),
      var(--r-clr-3),
      var(--r-clr-4),
      var(--r-clr-5),
      var(--r-clr-6),
      var(--r-clr-7),
      var(--r-clr-1),
      var(--r-clr-2),
      var(--r-clr-3),
      var(--r-clr-4),
      var(--r-clr-5),
      var(--r-clr-6),
      var(--r-clr-7),
      var(--r-clr-1),
      var(--r-clr-2),
      var(--r-clr-3),
      var(--r-clr-4),
      var(--r-clr-5),
      var(--r-clr-6),
      var(--r-clr-7),
      var(--r-clr-1)
    );

  background-blend-mode: soft-light;

  background-size: var(--glittersize) var(--glittersize), 400% 400%;

  background-position: calc(
        50% - ((var(--shift) * 2) * var(--pointer-from-left)) - var(--shift)
      )
      calc(50% - ((var(--shift) * 2) * var(--pointer-from-top)) - var(--shift)),
    var(--pointer-x) var(--pointer-y);

  filter: brightness(calc((var(--pointer-from-center) * 0.35) + 0.35))
    contrast(2) saturate(1);
  mix-blend-mode: exclusion;
}

.card[data-set="Shiny"] .card_shine:before {
  content: "";

  background-image: var(--foil);
  background-size: var(--imgsize);
  background-position: center center;
  filter: brightness(2.5) contrast(1);

  opacity: calc((var(--pointer-from-center) + 0.4) * 0.6);
  mix-blend-mode: multiply;
}

.card[data-set="Shiny"] .card_glare {
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(0, 0%, 80%),
    hsla(0, 0%, 74.9%, 0.25) 30%,
    hsl(0, 0%, 21.6%) 130%
  );

  filter: brightness(0.9) contrast(2);
  opacity: calc(var(--pointer-from-center) * 0.9);
  mix-blend-mode: hard-light;
}

.card:not(.masked)[data-set="Shiny"] .card_shine {
    --foil: ulr("/assets/img/illusion-mask.png");
    --imgsize: 33%;
}