.holo-card[data-effect="holo"] .holo-card__shine {
  --scanlines-space: 1px;
  --scanlines-light: #666;
  --scanlines-dark: black;

  --bars: 3%;
  --bar-color: hsla(0, 0%, 70%, 1);
  --bar-bg: hsla(0, 0%, 0%, 1);

  background-image:
    repeating-linear-gradient(
      110deg,
      var(--violet),
      var(--blue),
      var(--green),
      var(--yellow),
      var(--red),
      var(--violet),
      var(--blue),
      var(--green),
      var(--yellow),
      var(--red),
      var(--violet),
      var(--blue),
      var(--green),
      var(--yellow),
      var(--red)
    ),
    repeating-linear-gradient(
      90deg,
      var(--scanlines-dark) calc(var(--scanlines-space) * 0),
      var(--scanlines-dark) calc(var(--scanlines-space) * 2),
      var(--scanlines-light) calc(var(--scanlines-space) * 2),
      var(--scanlines-light) calc(var(--scanlines-space) * 4)
    );

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

  background-size:
    400% 400%,
    cover;

  background-blend-mode: overlay;
  filter: brightness(calc(1.1 * var(--hc-brightness))) contrast(calc(1.1 * var(--hc-contrast)))
    saturate(calc(1.2 * var(--hc-saturate)));
  mix-blend-mode: color-dodge;
}

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

  background-image:
    repeating-linear-gradient(
      90deg,
      var(--bar-bg) calc(var(--bars) * 2),
      var(--bar-color) calc(var(--bars) * 3),
      var(--bar-bg) calc(var(--bars) * 3.5),
      var(--bar-color) calc(var(--bars) * 4),
      var(--bar-bg) calc(var(--bars) * 5),
      var(--bar-bg) calc(var(--bars) * 14)
    ),
    repeating-linear-gradient(
      90deg,
      var(--bar-bg) calc(var(--bars) * 2),
      var(--bar-color) calc(var(--bars) * 3),
      var(--bar-bg) calc(var(--bars) * 3.5),
      var(--bar-color) calc(var(--bars) * 4),
      var(--bar-bg) calc(var(--bars) * 5),
      var(--bar-bg) calc(var(--bars) * 10)
    );

  background-position:
    calc((((50% - var(--background-x)) * 1.65) + 50%) + (var(--background-y) * 0.5)) var(--background-x),
    calc((((50% - var(--background-x)) * -0.9) + 50%) - (var(--background-y) * 0.75)) var(--background-y);

  background-size:
    200% 200%,
    200% 200%;

  background-blend-mode: screen;
  filter: brightness(1.15) contrast(1.1);
  mix-blend-mode: hard-light;
}

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

  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 90%, 0.8) 0%,
    hsla(0, 0%, 78%, 0.1) 25%,
    hsl(0, 0%, 0%) 90%
  );

  background-position: center center;
  background-size: cover;

  mix-blend-mode: luminosity;
  filter: brightness(0.6) contrast(4);
}

@media screen and (max-width: 900px) {
  .holo-card[data-effect="holo"] .holo-card__shine {
    --scanlines-space: 0.5px;
  }
}

.holo-card[data-effect="holo"] .holo-card__glare {
  opacity: calc(var(--card-opacity) * 0.8 * var(--hc-glare-opacity));
  filter: brightness(0.8) contrast(1.5);
  mix-blend-mode: var(--glare-blend, overlay);
}

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

  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(180, 100%, 95%) 5%,
    hsla(0, 0%, 39%, 0.25) 55%,
    hsla(0, 0%, 0%, 0.36) 110%
  );

  mix-blend-mode: overlay;
  filter: brightness(0.6) contrast(3);
}