/*
 * Holo family wotc-base-set: Base Set (base1) holos.
 *
 * Scope: base1 Rare Holo 1-16 (Starlight) and the CD-ROM Machamp base4-cdrom8 that reuses the base1 scan.
 * Cards: the faces js/fam/wotc-base-set.js claims; it adds `fam-wotc-base-set` to them, and every rule below is scoped to it.
 * Specificity: body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.(x5).fam-wotc-base-set.(x4) beats the era sheets
 * (this sheet loads after them); keep the era's :not(.lit):not(.settling) when overriding a rest-state rule.
 * Part of the older-era holo remaster (2026-10-01): the research, photos and review for this family are in
 * /mnt/project-files/holo-remaster/wotc-base-set/.
 *
 * What the real card does (tilt clips, lit photos and scans of Charizard, Blastoise, Venusaur, Alakazam, Mewtwo, Raichu,
 * Gyarados, Zapdos, Machamp and Chansey; refs/SOURCES.md): the Starlight foil is a mirror under the whole art window's
 * BACKGROUND, embossed with short streaks and thin four-point stars, and the background ink is printed straight on it.
 * The Pokémon sits on a white underlay and stays matte; on most cards so does a ~6 px "glow" band the underlay leaves
 * around it (Mewtwo's maroon, Charizard's lilac), and so do the frame, the name, the text and the evolution badge. Off the
 * lamp the background is a dark, metallic version of the print (the scan). On the lamp it lights up as a whole in its
 * own ink colour (Charizard gold-orange, Blastoise green-gold, Mewtwo violet-blue), a rainbow tint slides over it with
 * the angle, the streaks glitter in every colour and the big stars flare white; brightest at grazing angles.
 *
 * How it is drawn (maps in assets/foil/fam/wotc-base-set/, drawn from each scan by the scripts in
 * .claude/skills/card-textures/scripts/fam/wotc-base-set/; reference/fam-wotc-base-set.md):
 *   `.foil`          one colour-dodge group cut to the card's background mask (`--wbs-bg`). Dodge is a gain on the print, so
 *                    the background glows in its own ink colour and dark ink stays dark, the way a mirror shines through
 *                    translucent ink. At rest a soft diagonal sheen; held, the light is the pointer's pool times a wide
 *                    rainbow sliding against the tilt, stronger at grazing angles. The chain ends in contrast(0.8) (Safari).
 *   `::before/::after` the scan's own starlight, two halves (`--wbs-spark-a/-b`), screened into the group in pale rainbow
 *                    colours, each lit by its own band sliding a different way, so the streaks and stars wink in turn.
 *   `.glare`         the lamp's reflection in the mirror: a white pool at the pointer, screened, cut to the same mask.
 *   `.glare::after`  unused.
 */

body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.fam-wotc-base-set.fam-wotc-base-set.fam-wotc-base-set.fam-wotc-base-set.wbs-mapped {
  /* how far the light slides over the 300% layers: (50% - --background-x) runs -13%..13%, so x3 keeps them inside 0..100% */
  --wbs-slide-x: calc(50% + (var(--background-x) - 50%) * -3);
  --wbs-slide-y: calc(50% + (var(--background-y) - 50%) * -3);
}

/* ---- .foil: the mirror lighting the background ink ------------------------------------------------------------------ */
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.fam-wotc-base-set.fam-wotc-base-set.fam-wotc-base-set.fam-wotc-base-set.wbs-mapped .foil {
  /* rainbow tint (sliding against the tilt) x (flat grey screened with the pointer's pool): the far side of the window
     still glows ~2x in its own ink colour, the pool ~3-4x; the tint is soft so the ink hue leads */
  background-image:
    linear-gradient(118deg,
      hsl(44, 62%, 72%) 0%, hsl(84, 50%, 70%) 10%, hsl(170, 50%, 70%) 20%, hsl(205, 62%, 74%) 30%, hsl(262, 50%, 77%) 40%,
      hsl(318, 50%, 76%) 50%, hsl(30, 62%, 72%) 60%, hsl(60, 56%, 70%) 70%, hsl(150, 50%, 70%) 80%, hsl(210, 62%, 74%) 90%,
      hsl(280, 50%, 77%) 100%),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsl(0, 0%, 92%) 0%, hsl(0, 0%, 62%) 16%, hsl(0, 0%, 28%) 40%, hsl(0, 0%, 0%) 70%),
    linear-gradient(hsl(0, 0%, 62%), hsl(0, 0%, 62%));
  background-size: 300% 300%, 100% 100%, 100% 100%;
  background-position: var(--wbs-slide-x) var(--wbs-slide-y), center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-blend-mode: multiply, screen, normal;
  mix-blend-mode: color-dodge;
  filter: brightness(calc(0.72 + var(--pointer-from-center) * 0.5)) contrast(0.8);
  clip-path: none;
  border-radius: 0;
  -webkit-mask-image: var(--wbs-bg);
  mask-image: var(--wbs-bg);
  -webkit-mask-composite: source-over;
  mask-composite: add;
  mask-mode: alpha;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: calc((0.35 + var(--card-opacity) * 0.65) * var(--foil-strength, 1));
}
/* at rest: a soft diagonal sheen, one silver-gold band across the window, so a binder page still reads as foil */
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.fam-wotc-base-set.fam-wotc-base-set.fam-wotc-base-set.fam-wotc-base-set.wbs-mapped:not(.lit):not(.settling) .foil {
  background-image: linear-gradient(122deg,
    hsl(220, 18%, 18%) 0%, hsl(210, 22%, 26%) 22%, hsl(48, 40%, 56%) 37%, hsl(200, 30%, 44%) 45%, hsl(270, 18%, 26%) 58%,
    hsl(220, 18%, 18%) 76%, hsl(190, 22%, 32%) 90%, hsl(220, 18%, 20%) 100%);
  background-size: 100% 100%;
  background-position: center;
  background-blend-mode: normal;
  filter: contrast(0.8);
  opacity: calc(0.85 * var(--foil-strength, 1));
}

/* ---- the starlight: two halves of the scan's own streaks and stars, each lit by its own sliding band ----------------- */
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.fam-wotc-base-set.fam-wotc-base-set.fam-wotc-base-set.fam-wotc-base-set.wbs-mapped .foil::before,
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.fam-wotc-base-set.fam-wotc-base-set.fam-wotc-base-set.fam-wotc-base-set.wbs-mapped .foil::after {
  background-image: linear-gradient(104deg,
    hsl(50, 100%, 88%) 0%, hsl(160, 90%, 86%) 14%, hsl(200, 100%, 90%) 28%, hsl(280, 90%, 90%) 42%, hsl(330, 90%, 88%) 56%,
    hsl(40, 100%, 88%) 70%, hsl(120, 90%, 86%) 84%, hsl(210, 100%, 90%) 100%);
  background-size: 300% 300%;
  background-position: var(--wbs-slide-x) var(--wbs-slide-y);
  background-repeat: no-repeat;
  background-blend-mode: normal;
  mix-blend-mode: screen;
  filter: none;
  clip-path: none;
  border-radius: 0;
  -webkit-mask-image:
    linear-gradient(108deg, transparent 6%, #000 17%, #000 25%, transparent 36%, transparent 54%, #000 65%, #000 72%, transparent 84%),
    var(--wbs-spark-a);
  mask-image:
    linear-gradient(108deg, transparent 6%, #000 17%, #000 25%, transparent 36%, transparent 54%, #000 65%, #000 72%, transparent 84%),
    var(--wbs-spark-a);
  -webkit-mask-composite: source-in, source-over;
  mask-composite: intersect, add;
  mask-mode: alpha, alpha;
  -webkit-mask-size: 300% 300%, 100% 100%;
  mask-size: 300% 300%, 100% 100%;
  -webkit-mask-position: calc(50% + (var(--background-x) - 50%) * 3.5) calc(50% + (var(--background-y) - 50%) * 3.5), center;
  mask-position: calc(50% + (var(--background-x) - 50%) * 3.5) calc(50% + (var(--background-y) - 50%) * 3.5), center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  opacity: min(1, calc(var(--card-opacity) * max(1, var(--foil-strength, 1))));
}
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.fam-wotc-base-set.fam-wotc-base-set.fam-wotc-base-set.fam-wotc-base-set.wbs-mapped .foil::after {
  background-position: calc(100% - var(--wbs-slide-x)) var(--wbs-slide-y);
  -webkit-mask-image:
    linear-gradient(64deg, transparent 4%, #000 15%, #000 22%, transparent 33%, transparent 52%, #000 63%, #000 70%, transparent 82%),
    var(--wbs-spark-b);
  mask-image:
    linear-gradient(64deg, transparent 4%, #000 15%, #000 22%, transparent 33%, transparent 52%, #000 63%, #000 70%, transparent 82%),
    var(--wbs-spark-b);
  -webkit-mask-position: calc(50% + (var(--background-x) - 50%) * -3.5) calc(50% + (var(--background-y) - 50%) * 3.5), center;
  mask-position: calc(50% + (var(--background-x) - 50%) * -3.5) calc(50% + (var(--background-y) - 50%) * 3.5), center;
}

/* ---- .glare: the lamp in the mirror ----------------------------------------------------------------------------------- */
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.fam-wotc-base-set.fam-wotc-base-set.fam-wotc-base-set.fam-wotc-base-set.wbs-mapped .glare {
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(48, 60%, 96%, 0.6) 0%, hsla(200, 50%, 90%, 0.26) 14%, hsla(240, 40%, 80%, 0.06) 32%, hsla(0, 0%, 0%, 0) 50%);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: normal;
  mix-blend-mode: screen;
  filter: none;
  clip-path: none;
  border-radius: 0;
  -webkit-mask-image: var(--wbs-bg);
  mask-image: var(--wbs-bg);
  -webkit-mask-composite: source-over;
  mask-composite: add;
  mask-mode: alpha;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: min(1, calc(var(--card-opacity) * (0.3 + var(--pointer-from-center) * 0.5) * max(1, var(--foil-strength, 1))));
}
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.fam-wotc-base-set.fam-wotc-base-set.fam-wotc-base-set.fam-wotc-base-set.wbs-mapped .glare::after {
  display: none;
  background-image: none;
  mix-blend-mode: normal;
  filter: none;
  opacity: 0;
  clip-path: none;
  -webkit-mask-image: none;
  mask-image: none;
}