.holo-card[data-effect="rainbow"] .holo-card__shine {
  background-image:
    repeating-linear-gradient(
      calc(var(--angle) - 88deg),
      var(--red) calc(var(--space) * 1),
      var(--yellow) calc(var(--space) * 3),
      var(--green) calc(var(--space) * 5),
      var(--blue) calc(var(--space) * 7),
      var(--violet) calc(var(--space) * 9),
      var(--red) calc(var(--space) * 11)
    ),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 100%, 0.45) 10%,
      hsla(0, 0%, 70%, 0.25) 50%,
      hsla(0, 0%, 28%, 0.75) 120%
    );

  background-position:
    calc(((50% - var(--background-x)) * 2.2) + 50%) calc(((50% - var(--background-y)) * 1.4) + 50%),
    center center;

  background-size:
    250% 250%,
    cover;

  background-blend-mode: screen;
  filter: brightness(calc(1.05 * var(--hc-brightness))) contrast(calc(0.95 * var(--hc-contrast)))
    saturate(calc(0.85 * var(--hc-saturate)));
  mix-blend-mode: hard-light;
  opacity: calc(var(--card-opacity) * 0.8 * var(--hc-shine-opacity));
}

.holo-card[data-effect="rainbow"] .holo-card__shine::before {
  content: "";

  background-image:
    var(--glitter),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 100%, 0.55) 5%,
      hsla(0, 0%, 60%, 0.25) 45%,
      hsl(0, 0%, 0%) 100%
    );

  background-size:
    var(--glittersize) var(--glittersize),
    cover;
  background-position:
    calc(50% + (var(--pointer-from-left) * 6%)) calc(50% + (var(--pointer-from-top) * 6%)),
    center center;
  background-blend-mode: color-burn;

  filter: brightness(1.1) contrast(1.4);
  mix-blend-mode: color-dodge;
  opacity: calc(0.35 + var(--pointer-from-center) * 0.5);
}

.holo-card[data-effect="rainbow"] .holo-card__shine::after {
  content: "";

  background-image: linear-gradient(
    calc(115deg + (var(--tilt-x) * 1deg)),
    hsla(0, 0%, 100%, 0) 30%,
    hsla(0, 0%, 100%, 0.65) 48%,
    hsla(0, 0%, 100%, 0.9) 50%,
    hsla(0, 0%, 100%, 0.65) 52%,
    hsla(0, 0%, 100%, 0) 70%
  );

  background-size: 300% 300%;
  background-position: calc(((50% - var(--background-x)) * -3) + 50%) center;

  mix-blend-mode: soft-light;
  opacity: calc(0.3 + var(--pointer-from-center) * 0.45);
}

.holo-card[data-effect="rainbow"] .holo-card__glare {
  background-image: var(
    --glare-image,
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 100%, 0.6) 8%,
      hsla(0, 0%, 100%, 0.3) 30%,
      hsla(0, 0%, 0%, 0.5) 100%
    )
  );
  filter: brightness(0.9) contrast(1.3);
  mix-blend-mode: var(--glare-blend, soft-light);
  opacity: calc(var(--card-opacity) * 0.85 * var(--hc-glare-opacity));
}