/*

  CUSTOM CARD FOILS
  Character-masked foil effects for custom cards.
  Foil shows in artwork area only where character is transparent.

*/

/* Glare clipped to artwork for all custom cards */
.custom-card .card__glare:after {
  clip-path: var(--clip);
}

/* Non-holo cards: cursor-following lighting over entire card surface */
.custom-card[data-foil="none"] .card__glare {
  z-index: 5; /* above .card__character (4) so light is visible */
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 0.85) 8%,
    hsla(0, 0%, 100%, 0.5) 25%,
    hsla(0, 0%, 0%, 0.35) 100%
  );
  background-size: cover;
  background-position: center;
  opacity: calc(var(--card-opacity) * 0.75);
  filter: brightness(0.7) contrast(1.2);
  mix-blend-mode: overlay;
}

/* No clip on glare for noFoil so light follows cursor everywhere on card */
.custom-card[data-foil="none"] .card__glare:after {
  content: none;
  display: none;
}

.custom-card .card__shine.custom-card__foil {
  /* Hint at foil when idle (0.12), 75% intensity on hover */
  opacity: calc(0.12 + var(--card-opacity) * 0.63);
  /* Restrict foil to artwork area */
  clip-path: var(--clip);
  /* Expand texture ~4% width, ~1.2% height to fill artwork window (499px tall) */
  transform: translateZ(1px) scale(1.04, 1.012);
  transform-origin: center;
  /* Mask: show foil where character is transparent (subtract character from full rect) */
  -webkit-mask-image: linear-gradient(white, white), var(--character-mask);
  mask-image: linear-gradient(white, white), var(--character-mask);
  -webkit-mask-size: cover, calc(100% / 1.04) calc(100% / 1.012);
  mask-size: cover, calc(100% / 1.04) calc(100% / 1.012);
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-composite: subtract;
  mask-composite: subtract;
}

/* Full-art card: foil covers entire card with no mask; 75% max on hover */
.custom-card[data-full-art-foil="true"] .card__shine.custom-card__foil {
  clip-path: none;
  transform: translateZ(1px);
  -webkit-mask-image: none;
  mask-image: none;
  opacity: calc(0.25 + var(--card-opacity) * 0.5);
}

.custom-card[data-full-art-foil="true"] .card__glare:after {
  clip-path: none;
}

/* Keep character/artefacts layer above the foil (same as other custom cards) */
.custom-card .card__character {
  z-index: 4;
}

/* Full-art background fills the entire card container */
.custom-card[data-full-art-foil="true"] .card__base {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ========== REGULAR HOLO ========== */

.custom-card[data-foil="regular"] .card__shine.custom-card__foil {
  --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(1.1) contrast(1.1) saturate(1.2);
  mix-blend-mode: color-dodge;
}

.custom-card[data-foil="regular"] .card__shine.custom-card__foil:before {
  content: "";
  grid-area: 1/1;
  transform: translateZ(1px);
  border-radius: var(--card-radius);

  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;
}

.custom-card[data-foil="regular"] .card__shine.custom-card__foil:after {
  content: "";
  grid-area: 1/1;
  transform: translateZ(1.2px);
  border-radius: var(--card-radius);

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

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

  mix-blend-mode: luminosity;
  filter: brightness(0.5) contrast(3);
}

.custom-card[data-foil="regular"] .card__glare {
  opacity: calc(var(--card-opacity) * 0.375);
  filter: brightness(0.7) contrast(1.2);
  mix-blend-mode: overlay;
}

.custom-card[data-foil="regular"] .card__glare:after {
  content: "";
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(180, 100%, 95%, 0.6) 5%,
    hsla(0, 0%, 39%, 0.15) 55%,
    hsla(0, 0%, 0%, 0.25) 110%
  );
  mix-blend-mode: overlay;
  filter: brightness(0.5) contrast(2);
}

/* ========== COSMOS / GALAXY HOLO ========== */

.custom-card[data-foil="cosmos"] .card__shine.custom-card__foil {
  --space: 4%;
  /* Hint when idle (0.12), full intensity on hover (no reduction) */
  opacity: calc(0.12 + var(--card-opacity) * 0.88);

  background-image:
    url("/img/cosmos-bottom.png"),
    repeating-linear-gradient(
      82deg,
      hsl(53, 65%, 60%) calc(var(--space) * 1),
      hsl(93, 56%, 50%) calc(var(--space) * 2),
      hsl(176, 54%, 49%) calc(var(--space) * 3),
      hsl(228, 59%, 55%) calc(var(--space) * 4),
      hsl(283, 60%, 55%) calc(var(--space) * 5),
      hsl(326, 59%, 51%) calc(var(--space) * 6),
      hsl(326, 59%, 51%) calc(var(--space) * 7),
      hsl(283, 60%, 55%) calc(var(--space) * 8),
      hsl(228, 59%, 55%) calc(var(--space) * 9),
      hsl(176, 54%, 49%) calc(var(--space) * 10),
      hsl(93, 56%, 50%) calc(var(--space) * 11),
      hsl(53, 65%, 60%) calc(var(--space) * 12)
    ),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(180, 100%, 89%, 0.5) 5%,
      hsla(180, 14%, 57%, 0.3) 40%,
      hsl(0, 0%, 0%) 130%
    );

  background-blend-mode: color-burn, multiply;

  background-position:
    var(--cosmosbg, center center),
    calc(10% + (var(--pointer-from-left) * 80%)) calc(10% + (var(--pointer-from-top) * 80%)),
    center center;

  background-size: cover, 400% 900%, cover;

  filter: brightness(1) contrast(1) saturate(0.8);
  mix-blend-mode: color-dodge;
}

.custom-card[data-foil="cosmos"] .card__shine.custom-card__foil:before {
  content: "";
  z-index: 2;
  grid-area: 1/1;
  transform: translateZ(1px);
  border-radius: var(--card-radius);

  background-image:
    url("/img/cosmos-middle-trans.png"),
    repeating-linear-gradient(
      82deg,
      hsl(53, 65%, 60%) calc(var(--space) * 1),
      hsl(93, 56%, 50%) calc(var(--space) * 2),
      hsl(176, 54%, 49%) calc(var(--space) * 3),
      hsl(228, 59%, 55%) calc(var(--space) * 4),
      hsl(283, 60%, 55%) calc(var(--space) * 5),
      hsl(326, 59%, 51%) calc(var(--space) * 6),
      hsl(326, 59%, 51%) calc(var(--space) * 7),
      hsl(283, 60%, 55%) calc(var(--space) * 8),
      hsl(228, 59%, 55%) calc(var(--space) * 9),
      hsl(176, 54%, 49%) calc(var(--space) * 10),
      hsl(93, 56%, 50%) calc(var(--space) * 11),
      hsl(53, 65%, 60%) calc(var(--space) * 12)
    );

  background-blend-mode: lighten, multiply;

  background-position:
    var(--cosmosbg, center center),
    calc(15% + (var(--pointer-from-left) * 70%)) calc(15% + (var(--pointer-from-top) * 70%)),
    center center;

  background-size: cover, 400% 900%, cover;

  filter: brightness(1.25) contrast(1.75) saturate(0.8);
  mix-blend-mode: overlay;
}

.custom-card[data-foil="cosmos"] .card__shine.custom-card__foil:after {
  content: "";
  z-index: 3;
  grid-area: 1/1;
  transform: translateZ(1.2px);
  border-radius: var(--card-radius);

  background-image:
    url("/img/cosmos-top-trans.png"),
    repeating-linear-gradient(
      82deg,
      hsl(53, 65%, 60%) calc(var(--space) * 1),
      hsl(93, 56%, 50%) calc(var(--space) * 2),
      hsl(176, 54%, 49%) calc(var(--space) * 3),
      hsl(228, 59%, 55%) calc(var(--space) * 4),
      hsl(283, 60%, 55%) calc(var(--space) * 5),
      hsl(326, 59%, 51%) calc(var(--space) * 6),
      hsl(326, 59%, 51%) calc(var(--space) * 7),
      hsl(283, 60%, 55%) calc(var(--space) * 8),
      hsl(228, 59%, 55%) calc(var(--space) * 9),
      hsl(176, 54%, 49%) calc(var(--space) * 10),
      hsl(93, 56%, 50%) calc(var(--space) * 11),
      hsl(53, 65%, 60%) calc(var(--space) * 12)
    );

  background-blend-mode: multiply, multiply;

  background-position:
    var(--cosmosbg, center center),
    calc(20% + (var(--pointer-from-left) * 60%)) calc(20% + (var(--pointer-from-top) * 60%)),
    center center;

  background-size: cover, 400% 900%, cover;

  filter: brightness(1.25) contrast(1.75) saturate(0.8);
  mix-blend-mode: multiply;
}

.custom-card[data-foil="cosmos"] .card__glare {
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(204, 100%, 95%, 0.4) 5%,
    hsla(250, 15%, 20%, 1) 150%
  );
  filter: brightness(0.6) contrast(1.5) saturate(1.5);
  mix-blend-mode: overlay;
  opacity: calc(var(--card-opacity) * (0.1125 + var(--pointer-from-center) * 0.375));
}

.custom-card[data-foil="cosmos"] .card__glare:after {
  content: "";
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(280, 100%, 96%, 0.6) 5%,
    hsl(0, 0%, 10%) 60%
  );
  filter: brightness(0.6) contrast(2) saturate(1.5);
  mix-blend-mode: soft-light;
  opacity: calc((0.6 - var(--pointer-from-top) * 0.5));
}

/* ========== RADIANT HOLO ========== */

.custom-card[data-foil="radiant"] .card__shine.custom-card__foil {
  --barwidth: 1.2%;
  --space: 200px;
  opacity: var(--foil-intensity, 1);

  background-image:
    radial-gradient(
      farthest-corner ellipse at calc(((var(--pointer-x)) * 0.5) + 25%) calc(((var(--pointer-y)) * 0.5) + 25%),
      hsl(0, 0%, 95%) 20%,
      var(--card-glow) 130%
    ),
    repeating-linear-gradient(
      45deg,
      hsl(0, 0%, 10%) 0%,
      hsl(0, 0%, 10%) 1%,
      hsl(0, 0%, 10%) var(--barwidth),
      hsl(0, 0%, 20%) calc(var(--barwidth) + 0.01%),
      hsl(0, 0%, 20%) calc(var(--barwidth) * 2),
      hsl(0, 0%, 35%) calc(var(--barwidth) * 2 + 0.01%),
      hsl(0, 0%, 35%) calc(var(--barwidth) * 3),
      hsl(0, 0%, 42.5%) calc(var(--barwidth) * 3 + 0.01%),
      hsl(0, 0%, 42.5%) calc(var(--barwidth) * 4),
      hsl(0, 0%, 50%) calc(var(--barwidth) * 4 + 0.01%),
      hsl(0, 0%, 50%) calc(var(--barwidth) * 5),
      hsl(0, 0%, 42.5%) calc(var(--barwidth) * 5 + 0.01%),
      hsl(0, 0%, 42.5%) calc(var(--barwidth) * 6),
      hsl(0, 0%, 35%) calc(var(--barwidth) * 6 + 0.01%),
      hsl(0, 0%, 35%) calc(var(--barwidth) * 7),
      hsl(0, 0%, 20%) calc(var(--barwidth) * 7 + 0.01%),
      hsl(0, 0%, 20%) calc(var(--barwidth) * 8),
      hsl(0, 0%, 10%) calc(var(--barwidth) * 8 + 0.01%),
      hsl(0, 0%, 10%) calc(var(--barwidth) * 9),
      hsl(0, 0%, 0%) calc(var(--barwidth) * 9 + 0.01%),
      hsl(0, 0%, 0%) calc(var(--barwidth) * 10)
    ),
    repeating-linear-gradient(
      -45deg,
      hsl(0, 0%, 10%) 0%,
      hsl(0, 0%, 10%) 1%,
      hsl(0, 0%, 10%) var(--barwidth),
      hsl(0, 0%, 20%) calc(var(--barwidth) + 0.01%),
      hsl(0, 0%, 20%) calc(var(--barwidth) * 2),
      hsl(0, 0%, 35%) calc(var(--barwidth) * 2 + 0.01%),
      hsl(0, 0%, 35%) calc(var(--barwidth) * 3),
      hsl(0, 0%, 42.5%) calc(var(--barwidth) * 3 + 0.01%),
      hsl(0, 0%, 42.5%) calc(var(--barwidth) * 4),
      hsl(0, 0%, 50%) calc(var(--barwidth) * 4 + 0.01%),
      hsl(0, 0%, 50%) calc(var(--barwidth) * 5),
      hsl(0, 0%, 42.5%) calc(var(--barwidth) * 5 + 0.01%),
      hsl(0, 0%, 42.5%) calc(var(--barwidth) * 6),
      hsl(0, 0%, 35%) calc(var(--barwidth) * 6 + 0.01%),
      hsl(0, 0%, 35%) calc(var(--barwidth) * 7),
      hsl(0, 0%, 20%) calc(var(--barwidth) * 7 + 0.01%),
      hsl(0, 0%, 20%) calc(var(--barwidth) * 8),
      hsl(0, 0%, 10%) calc(var(--barwidth) * 8 + 0.01%),
      hsl(0, 0%, 10%) calc(var(--barwidth) * 9),
      hsl(0, 0%, 0%) calc(var(--barwidth) * 9 + 0.01%),
      hsl(0, 0%, 0%) calc(var(--barwidth) * 10)
    );

  background-size: cover, 210% 210%, 210% 210%;

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

  background-blend-mode: exclusion, darken, color-dodge;

  filter: brightness(0.5) contrast(2) saturate(1.75);
  mix-blend-mode: color-dodge;
}

.custom-card[data-foil="radiant"] .card__shine.custom-card__foil:before {
  content: "";
  z-index: 2;
  grid-area: 1/1;
  transform: translateZ(1px);
  border-radius: var(--card-radius);

  background-image:
    var(--glitter),
    radial-gradient(
      farthest-corner ellipse at calc(((var(--pointer-x)) * 0.5) + 25%) calc(((var(--pointer-y)) * 0.5) + 25%),
      hsla(0, 0%, 58%, 0.8) 10%,
      hsla(0, 0%, 20%, 0.9) 20%,
      hsla(0, 0%, 20%, 0.5) 50%
    );

  background-position: center;
  background-size: 15% 15%, 350% 350%;
  background-blend-mode: color-dodge;

  mix-blend-mode: overlay;
  filter: brightness(0.66) contrast(2) saturate(0.5);
}

.custom-card[data-foil="radiant"] .card__shine.custom-card__foil:after {
  content: "";
  grid-area: 1/1;
  transform: translateZ(1.2px);
  border-radius: var(--card-radius);

  background-image:
    repeating-linear-gradient(
      55deg,
      hsl(3, 95%, 85%) calc(var(--space) * 1),
      hsl(207, 100%, 84%) calc(var(--space) * 2),
      hsl(29, 100%, 85%) calc(var(--space) * 3),
      hsl(160, 100%, 86%) calc(var(--space) * 4),
      hsl(309, 94%, 87%) calc(var(--space) * 5),
      hsl(188, 95%, 85%) calc(var(--space) * 6),
      hsl(3, 95%, 85%) calc(var(--space) * 7)
    );

  background-size: 400% 100%;
  background-position: calc(((var(--background-x) - 50%) * -2.5) + 50%) calc(((var(--background-y) - 50%) * -2.5) + 50%);

  filter: brightness(0.6) contrast(3) saturate(2);
  mix-blend-mode: color-dodge;
  background-blend-mode: hard-light;
}

.custom-card[data-foil="radiant"] .card__glare {
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 0.18) 0%,
    hsl(0, 0%, 25%) 110%
  );
  filter: brightness(0.8) contrast(1.2);
  mix-blend-mode: hard-light;
  opacity: calc(var(--card-opacity) * 0.525 * var(--foil-intensity, 1));
}