/* ============================================================
 * HOLO FOIL — printed cards catch the light like a foil card.
 *
 * Any element with [data-foil] (one <img> of a card inside) gets two
 * light layers that follow the pointer (foil.js sets --mx / --my, the
 * tilt --rx / --ry and --fo = how much foil shows, 0..1):
 *   ::before  rainbow bands, blended as colour-dodge: bright on the art,
 *             invisible on the card's black frame
 *   ::after   a soft glare where the light hits
 * Cheap on purpose (no filter animations): gradients + opacity only.
 * ============================================================ */

[data-foil] {
  --mx: 50%;
  --my: 50%;
  --fo: 0;
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  isolation: isolate;
}
[data-foil] > img { position: relative; z-index: 0; }

[data-foil]::before,
[data-foil]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity 360ms ease-out;
}

[data-foil]::before {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(
      var(--foil-angle, 112deg),
      hsl(0 90% 55%) 0%, hsl(45 90% 52%) 3%, hsl(95 85% 48%) 6%, hsl(175 90% 48%) 9%,
      hsl(215 90% 56%) 12%, hsl(275 85% 58%) 15%, hsl(330 90% 56%) 18%, hsl(0 90% 55%) 21%);
  background-size: 100% 100%, 300% 300%;
  background-position: 0 0, var(--mx) var(--my);
  mix-blend-mode: color-dodge;
  opacity: calc(var(--fo) * var(--foil-strength, .42));
}

[data-foil]::after {
  background: radial-gradient(farthest-corner circle at var(--mx) var(--my),
    rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .35) 18%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .35) 100%);
  mix-blend-mode: overlay;
  opacity: calc(var(--fo) * .75);
}

/* rarities: the mythic card shines hardest, uncommon gets mostly glare */
[data-foil="mythic"] { --foil-strength: .5; }
[data-foil="legendary"] { --foil-strength: .5; }
[data-foil="uncommon"] { --foil-strength: .25; }

@media (prefers-reduced-motion: reduce) {
  [data-foil]::before, [data-foil]::after { transition: none; }
}