/* Adapted from Pokémon Cards CSS by Simon Goellner (@simeydotme), GPL-3.0.
   https://github.com/simeydotme/pokemon-cards-css/tree/main/public/css/cards
   PongHub, 2026-10-19: rectangular faces, local textures, Oncode color tokens,
   and restrained opacity to keep names, statistics and Info readable. */

.card {
  --foil-colors: repeating-linear-gradient(110deg,
    var(--holo-1),var(--holo-2),var(--holo-3),var(--holo-4),var(--holo-5),var(--holo-1));
  --foil-metal: repeating-linear-gradient(133deg,
    var(--foil-metal-dark) 0%,var(--foil-metal-mid) 3%,
    var(--foil-metal-light) 4.5%,var(--foil-metal-mid) 6%,var(--foil-metal-dark) 12%);
}

.card[data-holo="defense"]{--foil-strength:.3}
.card[data-holo="spin"]{--foil-strength:.7}
.card[data-holo="mind"]{--foil-strength:.4}
.card[data-holo="strategy"]{--foil-strength:.55}

/* DEFENSE / Radiant: two crossed, etched diagonal grids. */
.card[data-holo="defense"] .card__shine {
  background-image:
    radial-gradient(ellipse at var(--pointer-x) var(--pointer-y),var(--holo-2),var(--holo-5) 100%),
    repeating-linear-gradient(45deg,var(--foil-texture-dark) 0 1.2%,var(--foil-texture-light) 1.4% 2.4%,var(--foil-texture-dark) 3.6%),
    repeating-linear-gradient(-45deg,var(--foil-texture-dark) 0 1.2%,var(--foil-texture-light) 1.4% 2.4%,var(--foil-texture-dark) 3.6%);
  background-size:cover,210% 210%,210% 210%;
  background-position:center,var(--background-x) var(--background-y),var(--background-x) var(--background-y);
  background-blend-mode:color,exclusion;
  filter:brightness(.8) contrast(1.8);
  mix-blend-mode:color-dodge;
}
.card[data-holo="defense"] .card__shine:before {
  content:"";
  background-image:var(--foil-colors);
  background-size:400% 400%;
  background-position:var(--background-x) var(--background-y);
  mix-blend-mode:color;
  opacity:.65;
}
.card[data-holo="defense"] .card__shine:after {
  content:"";
  background-image:url("textures/trainerbg.png"),var(--foil-colors);
  background-size:25% auto,400% 100%;
  background-position:center,var(--background-x) var(--background-y);
  background-blend-mode:luminosity;
  mix-blend-mode:soft-light;
  opacity:.35;
}

/* SPIN / VMAX: textured foil and broad, layered diagonal reflections. */
.card[data-holo="spin"] .card__shine {
  background-image:url("textures/vmaxbg.jpg"),
    repeating-linear-gradient(-33deg,var(--holo-1) 0%,var(--holo-4) 6%,var(--holo-2) 12%,var(--holo-3) 18%,var(--holo-5) 24%,var(--holo-1) 30%),
    var(--foil-metal);
  background-size:60% 30%,500% 500%,300% 100%;
  background-position:center,var(--background-x) var(--background-y),var(--background-x) var(--background-y);
  background-blend-mode:luminosity,soft-light;
  filter:brightness(.85) contrast(1.7);
  mix-blend-mode:color-dodge;
}
.card[data-holo="spin"] .card__shine:before {
  content:"";
  background-image:radial-gradient(ellipse at var(--pointer-x) var(--pointer-y),var(--holo-2),transparent 60%);
  mix-blend-mode:soft-light;
}
.card[data-holo="spin"] .card__shine:after {
  content:"";
  background-image:var(--foil-colors),var(--foil-metal);
  background-size:200% 700%,300% 100%;
  background-position:0 var(--background-y),var(--background-x) var(--background-y);
  background-blend-mode:hue;
  mix-blend-mode:lighten;
  opacity:.45;
}

/* MIND / Cosmos: three original texture layers move at different speeds.
   Luminosity blending remaps the textures onto the Oncode gradients. */
.card[data-holo="mind"] .card__shine {
  background-image:url("textures/cosmos-bottom.png"),var(--foil-colors);
  background-size:cover,400% 900%;
  background-position:center,var(--background-x) var(--background-y);
  background-blend-mode:luminosity;
  filter:brightness(1.1) contrast(1.15);
  mix-blend-mode:color-dodge;
}
.card[data-holo="mind"] .card__shine:before {
  content:"";
  background-image:url("textures/cosmos-middle-trans.png"),var(--foil-colors);
  background-size:140% 140%,400% 900%;
  background-position:calc(15% + var(--pointer-from-left)*70%) calc(15% + var(--pointer-from-top)*70%),var(--background-x) var(--background-y);
  background-blend-mode:luminosity;
  mix-blend-mode:lighten;
  filter:brightness(1.2) contrast(1.5);
  opacity:.8;
}
.card[data-holo="mind"] .card__shine:after {
  content:"";
  background-image:url("textures/cosmos-top-trans.png"),var(--foil-colors);
  background-size:125% 125%,400% 900%;
  background-position:calc(20% + var(--pointer-from-left)*60%) calc(20% + var(--pointer-from-top)*60%),var(--background-x) var(--background-y);
  background-blend-mode:luminosity;
  mix-blend-mode:screen;
  opacity:.6;
}

/* STRATEGY / VSTAR: fine engraved foil with directional metallic pillars. */
.card[data-holo="strategy"] .card__shine {
  background-image:url("textures/ancient.png"),
    repeating-linear-gradient(0deg,var(--holo-1) 0%,var(--holo-2) 5%,var(--holo-3) 10%,var(--holo-4) 15%,var(--holo-5) 20%,var(--holo-1) 25%),
    var(--foil-metal);
  background-size:18% 15%,200% 700%,300% 100%;
  background-position:center,0 var(--background-y),var(--background-x) var(--background-y);
  background-blend-mode:luminosity,soft-light;
  filter:brightness(.8) contrast(1.8);
  mix-blend-mode:color-dodge;
}
.card[data-holo="strategy"] .card__shine:before {
  content:"";
  background-image:radial-gradient(circle at var(--pointer-x) var(--pointer-y),var(--holo-highlight),transparent 60%);
  mix-blend-mode:soft-light;
  opacity:.6;
}
.card[data-holo="strategy"] .card__shine:after {
  content:"";
  background-image:var(--foil-metal);
  background-size:195% 100%;
  background-position:calc(100% - var(--background-x)) calc(100% - var(--background-y));
  mix-blend-mode:soft-light;
  opacity:.45;
}