.holo-card[data-effect="cosmos"] {
  --space: 4%;
  --angle: 82deg;

  --cosmos-clr-1: hsl(53, 65%, 60%);
  --cosmos-clr-2: hsl(93, 56%, 50%);
  --cosmos-clr-3: hsl(176, 54%, 49%);
  --cosmos-clr-4: hsl(228, 59%, 55%);
  --cosmos-clr-5: hsl(283, 60%, 55%);
  --cosmos-clr-6: hsl(326, 59%, 51%);
}

.holo-card[data-effect="cosmos"] .holo-card__shine {
  background-image:
    var(--hc-cosmos-bottom, none),
    repeating-linear-gradient(
      var(--angle),
      var(--cosmos-clr-1) calc(var(--space) * 1),
      var(--cosmos-clr-2) calc(var(--space) * 2),
      var(--cosmos-clr-3) calc(var(--space) * 3),
      var(--cosmos-clr-4) calc(var(--space) * 4),
      var(--cosmos-clr-5) calc(var(--space) * 5),
      var(--cosmos-clr-6) calc(var(--space) * 6),
      var(--cosmos-clr-6) calc(var(--space) * 7),
      var(--cosmos-clr-5) calc(var(--space) * 8),
      var(--cosmos-clr-4) calc(var(--space) * 9),
      var(--cosmos-clr-3) calc(var(--space) * 10),
      var(--cosmos-clr-2) calc(var(--space) * 11),
      var(--cosmos-clr-1) 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(var(--hc-brightness)) contrast(var(--hc-contrast)) saturate(calc(0.8 * var(--hc-saturate)));
  mix-blend-mode: color-dodge;
}

.holo-card[data-effect="cosmos"] .holo-card__shine::before {
  content: "";
  z-index: 2;

  background-image:
    var(--hc-cosmos-middle, none),
    repeating-linear-gradient(
      var(--angle),
      var(--cosmos-clr-1) calc(var(--space) * 1),
      var(--cosmos-clr-2) calc(var(--space) * 2),
      var(--cosmos-clr-3) calc(var(--space) * 3),
      var(--cosmos-clr-4) calc(var(--space) * 4),
      var(--cosmos-clr-5) calc(var(--space) * 5),
      var(--cosmos-clr-6) calc(var(--space) * 6),
      var(--cosmos-clr-6) calc(var(--space) * 7),
      var(--cosmos-clr-5) calc(var(--space) * 8),
      var(--cosmos-clr-4) calc(var(--space) * 9),
      var(--cosmos-clr-3) calc(var(--space) * 10),
      var(--cosmos-clr-2) calc(var(--space) * 11),
      var(--cosmos-clr-1) 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;
}

.holo-card[data-effect="cosmos"] .holo-card__shine::after {
  content: "";
  z-index: 3;

  background-image:
    var(--hc-cosmos-top, none),
    repeating-linear-gradient(
      var(--angle),
      var(--cosmos-clr-1) calc(var(--space) * 1),
      var(--cosmos-clr-2) calc(var(--space) * 2),
      var(--cosmos-clr-3) calc(var(--space) * 3),
      var(--cosmos-clr-4) calc(var(--space) * 4),
      var(--cosmos-clr-5) calc(var(--space) * 5),
      var(--cosmos-clr-6) calc(var(--space) * 6),
      var(--cosmos-clr-6) calc(var(--space) * 7),
      var(--cosmos-clr-5) calc(var(--space) * 8),
      var(--cosmos-clr-4) calc(var(--space) * 9),
      var(--cosmos-clr-3) calc(var(--space) * 10),
      var(--cosmos-clr-2) calc(var(--space) * 11),
      var(--cosmos-clr-1) 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;
}

.holo-card[data-effect="cosmos"] .holo-card__glare {
  background-image: var(
    --glare-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: var(--glare-blend, overlay);
  opacity: calc(var(--card-opacity) * (0.25 + var(--pointer-from-center)) * var(--hc-glare-opacity));
}

.holo-card[data-effect="cosmos"] .holo-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);
}