.holo-card[data-effect="metal"] {
  --card-edge: hsl(0, 0%, 88%);
  --card-glow: hsl(210, 20%, 88%);
}

.holo-card[data-effect="metal"] .holo-card__shine {
  background-image:
    repeating-linear-gradient(
      calc(var(--angle) - 43deg),
      hsl(0, 0%, 36%) 0%,
      hsl(0, 0%, 74%) 0.2%,
      hsl(0, 0%, 36%) 0.4%
    ),
    linear-gradient(
      calc(105deg + (var(--tilt-x) * 1.2deg)),
      hsla(210, 10%, 26%, 1) 18%,
      hsl(210, 8%, 64%) 40%,
      hsl(0, 0%, 94%) 50%,
      hsl(210, 8%, 64%) 60%,
      hsla(210, 10%, 26%, 1) 82%
    ),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 100%, 0.8) 5%,
      hsla(0, 0%, 58%, 0.5) 45%,
      hsl(0, 0%, 24%) 130%
    );

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

  background-size:
    cover,
    260% 100%,
    cover;

  background-blend-mode: overlay, soft-light;
  filter: brightness(calc(1.05 * var(--hc-brightness))) contrast(calc(1.4 * var(--hc-contrast)))
    saturate(calc(0.3 * var(--hc-saturate)));
  mix-blend-mode: hard-light;
  opacity: calc(var(--card-opacity) * 0.9 * var(--hc-shine-opacity));
}

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

  background-image: linear-gradient(
    calc(75deg - (var(--tilt-y) * 1.2deg)),
    hsla(0, 0%, 0%, 0) 30%,
    hsla(0, 0%, 100%, 0.5) 47%,
    hsla(0, 0%, 100%, 0.7) 50%,
    hsla(0, 0%, 100%, 0.5) 53%,
    hsla(0, 0%, 0%, 0) 70%
  );

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

  filter: brightness(1.1) contrast(1.3);
  mix-blend-mode: overlay;
  opacity: calc(0.4 + var(--pointer-from-center) * 0.5);
}

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

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

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

  mix-blend-mode: luminosity;
  filter: brightness(0.72) contrast(2.4);
  opacity: 0.8;
}

.holo-card[data-effect="metal"] .holo-card__glare {
  background-image: var(
    --glare-image,
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(210, 15%, 96%, 0.7) 8%,
      hsla(210, 8%, 55%, 0.28) 45%,
      hsla(210, 10%, 14%, 0.7) 110%
    )
  );
  filter: brightness(0.9) contrast(1.6) saturate(0.4);
  mix-blend-mode: var(--glare-blend, overlay);
  opacity: calc(var(--card-opacity) * 0.85 * var(--hc-glare-opacity));
}