.holo-card[data-effect="aurora"] {
  --aurora-1: hsl(158, 90%, 62%);
  --aurora-2: hsl(186, 95%, 64%);
  --aurora-3: hsl(258, 92%, 72%);
  --aurora-4: hsl(316, 84%, 68%);
}

.holo-card[data-effect="aurora"] .holo-card__shine {
  background-image:
    repeating-linear-gradient(
      calc(var(--angle) - 55deg),
      var(--aurora-1) calc(var(--space) * 1),
      var(--aurora-2) calc(var(--space) * 4),
      var(--aurora-3) calc(var(--space) * 7),
      var(--aurora-4) calc(var(--space) * 10),
      var(--aurora-1) calc(var(--space) * 13)
    ),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(180, 100%, 90%, 0.55) 5%,
      hsla(200, 40%, 50%, 0.3) 45%,
      hsl(240, 30%, 5%) 130%
    );

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

  background-size:
    340% 720%,
    cover;

  background-blend-mode: soft-light;
  filter: brightness(calc(0.85 * var(--hc-brightness))) contrast(calc(1.5 * var(--hc-contrast)))
    saturate(calc(1.2 * var(--hc-saturate)));
  mix-blend-mode: color-dodge;
  opacity: calc(var(--card-opacity) * 0.9 * var(--hc-shine-opacity));
}

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

  background-image: repeating-linear-gradient(
    calc(var(--angle) + 22deg),
    var(--aurora-3) calc(var(--space) * 1),
    var(--aurora-1) calc(var(--space) * 5),
    var(--aurora-4) calc(var(--space) * 9),
    var(--aurora-2) calc(var(--space) * 13),
    var(--aurora-3) calc(var(--space) * 17)
  );

  background-position: calc(((50% - var(--background-x)) * -1.6) + 50%) calc(((50% - var(--background-y)) * 2.2) + 50%);
  background-size: 420% 640%;

  filter: brightness(1.2) contrast(1.3) saturate(1.1);
  mix-blend-mode: overlay;
  opacity: 0.8;
}

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

  background-image: radial-gradient(
    farthest-corner ellipse at var(--pointer-x) var(--pointer-y),
    hsla(160, 100%, 92%, 0.45) 0%,
    hsla(200, 60%, 60%, 0.12) 40%,
    hsla(240, 40%, 6%, 0.9) 120%
  );

  filter: brightness(0.75) contrast(2.2);
  mix-blend-mode: luminosity;
  opacity: calc(0.2 + var(--pointer-from-center) * 0.35);
}

.holo-card[data-effect="aurora"] .holo-card__glare {
  background-image: var(
    --glare-image,
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(170, 100%, 94%, 0.55) 8%,
      hsla(210, 60%, 55%, 0.25) 45%,
      hsla(250, 40%, 5%, 0.7) 110%
    )
  );
  filter: brightness(0.8) contrast(1.8);
  mix-blend-mode: var(--glare-blend, overlay);
  opacity: calc(var(--card-opacity) * 0.8 * var(--hc-glare-opacity));
}