/*
 * Wizards of the Coast (1999-2003): the cosmos / starlight window holo, and the plain Rare.
 *
 * Draws: wotc-cosmos (`foil-holo wotc-cosmos`: every Rare Holo of Base Set to Neo Destiny, Legendary Collection and Team Rocket's Dark
 * Raichu: the foil sits in the ART WINDOW only, frame and text flat; `wotc-starlight` joins it on base1, base2 and base3, whose
 * starbursts ("different sizes, slightly blurry", Bulbapedia Holofoil) are not Base Set 2's dots and circles), the era-wide
 * variables, and the plain Rare (`foil-none`: the non-holo twin of a holo is not foil at all).
 *
 * Classes come from wotcPattern() and wotcReverseFinish() in js/wotc-foil.js; `era-wotc` marks every Wizards of the Coast print
 * (js/foil-maps.js): base1-base6, gym1-gym2, neo1-neo4, si1, ecard1-ecard3 and the promo sets basep and bp. ENGLISH UNLIMITED prints
 * only (1st Edition and Shadowless are not separate cards here). Finish owners: the WotC finish agents. The rarity words, the foil
 * vocabulary and what each set printed are in js/wotc-foil.js and /mnt/project-files/every-era/wotc/SCAFFOLD-NOTES.md (research:
 * /mnt/project-files/every-era/wotc/research/, "Foil types in plain words" in wotc-pack-structure.md).
 * TCG Live has NO per-card foil maps for this generation (probed 2026-10-01, see the WOTC block of fetch_foil_maps.py), so the masks
 * are drawn: hook wotcMap() in js/wotc-foil.js. Follow SKILL.md: realism first, no outline or box-shadow on `.tcg`, cap any colour
 * dodge with a closing contrast(0.8), no black speckle, no hairline gratings, no foil over text or stamps, and run foil_coverage.mjs
 * plus a WebKit render at phone size before merging.
 *
 * Specificity: repeat `era-wotc` five times in every selector, like sm.css
 * (body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.wotc-cosmos .foil),
 * so the rule beats the shared sheets; a resting card paints `.foil` alone.
 * Bump this sheet's ?v= tag in index.html on every change.
 *
 */

body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc {
  /* the cosmos spectrum: every fleck lights in one saturated colour, neighbours differ (Dark Dragonite, Lugia, Steelix and Dark
     Raichu tilt clips: cyan and teal lead, then blue-violet, magenta, a little gold and green) */
  --wotc-spectrum: hsl(176, 100%, 64%), hsl(198, 100%, 64%), hsl(232, 95%, 74%), hsl(292, 90%, 72%), hsl(334, 95%, 70%),
    hsl(44, 100%, 64%), hsl(112, 90%, 62%), hsl(176, 100%, 64%);
  /* starlight stays paler and cooler: silver-white stars on a blue-violet shimmer, a green and a red facet now and then */
  --wotc-silver: hsl(196, 70%, 82%), hsl(226, 80%, 84%), hsl(296, 60%, 84%), hsl(46, 85%, 80%), hsl(150, 70%, 78%), hsl(196, 70%, 82%);
  /* where the per-card foil map sits: its crop of the frame's art window (scripts/make_wotc_spark_maps.py) */
  --wotc-map-size: 79.667% 40.095%;
  --wotc-map-pos: 50% 18.725%;
}
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.foil-trainer {
  --wotc-map-size: 83.167% 32.936%;
  --wotc-map-pos: 51.485% 34.342%;
}
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.foil-energy {
  --wotc-map-size: 94.167% 59.308%;
  --wotc-map-pos: 51.43% 34.604%;
}

/* ---- Rare Holo: cosmos and starlight ------------------------------------------------------------------------------
   What the real cards do (Collexy's WOTC-era holofoil overview, deep dives and card photos; Pokemon Holo's tilt clips;
   reference/wotc-j1.md and /mnt/project-files/every-era/wotc/texture-refs/j1/SOURCES.txt): the foil is the picture's
   BACKGROUND only, the Pokemon is ink over it and stays matte; frame, name, text flat. The scans of the holos carry the
   real foil printed into them, so the foil layer is cut to the sparkle the scan shows: each card's own map
   (`--foil-map`, assets/foil/wotc-spark/<set>/<n>-v1.webp, a crop of the art window) is full alpha on the stars, flecks,
   discs and brushed dashes and a faint floor over the sky between them, zero on the Pokemon.
   `.foil` is the group, screened onto the print (light only: dark sky gains the colour, ink stays ink): a pointer pool and a
   slow colour wash; `::before` the spectrum (saturated and narrow for cosmos, pale for starlight) sliding with the tilt, so
   neighbouring flecks light in different colours; `::after` white glints gated by a moving band, so flecks wink one after
   another. Nothing here is colour-dodged, so the closing contrast(0.8) rule has nothing to cap. */
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.wotc-cosmos .foil {
  background-image:
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(190, 100%, 88%, 0.34) 0%, hsla(210, 95%, 72%, 0.18) 34%, hsla(230, 80%, 60%, 0) 70%),
    linear-gradient(115deg, hsla(176, 100%, 62%, 0.2), hsla(232, 95%, 70%, 0.17) 28%, hsla(318, 95%, 68%, 0.2) 54%,
      hsla(46, 100%, 62%, 0.16) 78%, hsla(176, 100%, 62%, 0.2));
  background-size: 100% 100%, 260% 260%;
  background-position:
    center,
    clamp(0%, calc(((50% - var(--background-x)) * 1.2) + 50%), 100%) clamp(0%, calc(((50% - var(--background-y)) * 1.2) + 50%), 100%);
  background-repeat: no-repeat, repeat;
  background-blend-mode: normal;
  filter: none;
  mix-blend-mode: screen;
  clip-path: none;
  opacity: calc((0.45 + var(--card-opacity) * 0.35) * var(--foil-strength, 1));
}
/* the map is the mask: the scan's own alpha (the card's corners) times the card's sparkle map, placed on the window */
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.wotc-cosmos.has-foil-map .foil,
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.wotc-starlight.has-foil-map .foil {
  -webkit-mask-image: var(--art), var(--foil-map);
  mask-image: var(--art), var(--foil-map);
  -webkit-mask-composite: source-in, source-over;
  mask-composite: intersect, add;
  mask-mode: alpha, alpha;
  -webkit-mask-size: contain, var(--wotc-map-size);
  mask-size: contain, var(--wotc-map-size);
  -webkit-mask-position: center, var(--wotc-map-pos);
  mask-position: center, var(--wotc-map-pos);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
}
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.wotc-cosmos:not(.lit):not(.settling) .foil {
  background-image: linear-gradient(115deg, hsla(200, 90%, 70%, 0.34), hsla(300, 80%, 70%, 0.26) 50%, hsla(168, 100%, 62%, 0.34));
  background-size: 100% 100%;
  background-position: center;
  opacity: calc(0.7 * var(--foil-strength, 1));
}
/* clear what the older recipes paint on the pseudo layers */
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.wotc-cosmos .foil::before,
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.wotc-cosmos .foil::after,
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.wotc-starlight .foil::before,
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.wotc-starlight .foil::after {
  background-image: none;
  background-size: auto;
  background-position: center;
  background-repeat: repeat;
  background-blend-mode: normal;
  mix-blend-mode: normal;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  clip-path: none;
  border-radius: 0;
  opacity: 1;
}
/* the spectrum on the flecks: 300% wide so the colours slide a long way over a short tilt */
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.wotc-cosmos .foil::before {
  background-image:
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 100%) 0%, hsl(0, 0%, 80%) 42%, hsl(0, 0%, 52%) 100%),
    linear-gradient(112deg, var(--wotc-spectrum));
  background-size: 100% 100%, 240% 240%;
  background-position:
    center,
    clamp(0%, calc(((50% - var(--background-x)) * 1.6) + 50%), 100%) clamp(0%, calc(((50% - var(--background-y)) * 1.6) + 50%), 100%);
  background-repeat: no-repeat, repeat;
  background-blend-mode: multiply;
  filter: brightness(1.25) saturate(1.2);
  opacity: calc(0.4 + var(--card-opacity) * 0.6);
}
/* white glints in a moving band: the flecks inside the band flare to white */
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.wotc-cosmos .foil::after {
  background-image: linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 100%));
  -webkit-mask-image: repeating-linear-gradient(118deg, transparent 0%, transparent 16%, #000 22%, #000 26%, transparent 32%, transparent 52%);
  mask-image: repeating-linear-gradient(118deg, transparent 0%, transparent 16%, #000 22%, #000 26%, transparent 32%, transparent 52%);
  -webkit-mask-size: 300% 300%;
  mask-size: 300% 300%;
  -webkit-mask-position: clamp(0%, calc(((50% - var(--background-x)) * 2) + 50%), 100%) clamp(0%, calc(((50% - var(--background-y)) * 2) + 50%), 100%);
  mask-position: clamp(0%, calc(((50% - var(--background-x)) * 2) + 50%), 100%) clamp(0%, calc(((50% - var(--background-y)) * 2) + 50%), 100%);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  opacity: calc(0.45 + var(--pointer-from-center) * 0.45);
}
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.wotc-cosmos .glare {
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(190, 100%, 95%) 5%, hsla(0, 0%, 39%, 0.25) 55%, hsla(0, 0%, 0%, 0.3) 110%);
  mix-blend-mode: overlay;
  filter: brightness(0.8) contrast(1.3);
  opacity: calc(var(--card-opacity) * 0.3);
}

/* ---- Starlight (Base Set, Jungle, Fossil, Legendary Collection) ------------------------------------------------------
   Collexy's WOTC-era holofoil overview and Bulbapedia's Holofoil page: thin four-point stars of different sizes, slightly
   blurry, on a pale shimmer that runs over the whole picture; no dots or discs. Same map and masks as the cosmos, but the
   light is paler and cooler (silver, ice blue, a lavender and a gold facet) and the stars are softer. Doubled class so it
   beats the cosmos rules above whatever the order. */
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.wotc-cosmos.wotc-starlight .foil {
  background-image:
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(210, 80%, 94%, 0.4) 0%, hsla(220, 70%, 80%, 0.2) 36%, hsla(230, 60%, 70%, 0) 72%),
    linear-gradient(125deg, hsla(196, 70%, 82%, 0.2), hsla(296, 55%, 84%, 0.16) 30%, hsla(46, 85%, 80%, 0.18) 56%,
      hsla(150, 65%, 78%, 0.16) 80%, hsla(196, 70%, 82%, 0.2));
  background-size: 100% 100%, 300% 300%;
  opacity: calc((0.4 + var(--card-opacity) * 0.3) * var(--foil-strength, 1));
}
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.wotc-cosmos.wotc-starlight:not(.lit):not(.settling) .foil {
  background-image: linear-gradient(125deg, hsla(200, 70%, 84%, 0.3), hsla(290, 55%, 84%, 0.22) 50%, hsla(46, 80%, 80%, 0.28));
  opacity: calc(0.72 * var(--foil-strength, 1));
}
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.wotc-cosmos.wotc-starlight .foil::before {
  background-image:
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 100%) 0%, hsl(0, 0%, 84%) 44%, hsl(0, 0%, 60%) 100%),
    linear-gradient(112deg, var(--wotc-silver));
  background-size: 100% 100%, 320% 320%;
  filter: brightness(1.2) saturate(0.9);
  opacity: calc(0.45 + var(--card-opacity) * 0.5);
}
/* a Special Energy's art fills the whole box and its foil is dense: ease it so the Rainbow starburst does not blow out */
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.foil-energy.wotc-cosmos .foil {
  opacity: calc((0.3 + var(--card-opacity) * 0.3) * var(--foil-strength, 1));
}

/* ---- Legendary Collection reverse holo: the fireworks (light only) --------------------------------------------------
   Real card (Collexy's WOTC-era holofoil overview, Bulbapedia Holofoil "fireworks pattern", PSA 9581; the reverse Charizard,
   Gengar, Pikachu and Ivysaur scans in texture-refs/j1): high-key silver-white paper over the whole card, the name bar, the attacks,
   the text box and the border included, carrying a dense scatter of small starbursts, each a hub of thin white rays; the picture
   window stays matte. It is the card's look at REST; tipped, the lift slides (aqua, lilac, a gold edge), a pool of light follows
   the pointer and a band flares the rays.
   It only ever ADDS light (reviews rv-j1 and rv-j1b: a veil painted over the print, or a multiply, read as a grimy film). `.foil` is
   one group blended onto the print with `mix-blend-mode: overlay`; overlay with a source of 0.5 or more per channel never darkens
   (p < 0.5 gives 2pc, p >= 0.5 gives 1 - 2(1-p)(1-c)), a source of 0.5 changes nothing, and the dark ink (p near 0.1) goes no
   higher than 2p, so the text stays dark while the pale paper takes the light. The group is assets/foil/wotc-rev/fireworks-lift-v4.webp
   (`--wotc-lift`: opaque grey, 0.58 in the gaps, rays up to white) screened with a slow aqua/lilac/gold tint (so every channel stays
   at or above the sheet), cut to the card's own alpha less the layout's window (`--wotc-win`). `::before` (tipped only) is the rays
   alone (`--wotc-rays`: white, alpha = rays) in a band sliding with the tilt. Proof instead of the dark_specks count: the foiled render is never
   darker than the bare print (reference/wotc-j1.md, scripts in the review notes). */
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.foil-reverse.wotc-rev.wotc-rev-legendary .foil {
  background-image:
    linear-gradient(112deg, hsl(190, 70%, 22%), hsl(222, 60%, 26%) 22%, hsl(284, 40%, 28%) 40%, hsl(46, 60%, 24%) 60%,
      hsl(150, 50%, 22%) 80%, hsl(190, 70%, 22%)),
    var(--wotc-lift);
  background-size: 260% 260%, 100% 100%;
  background-position:
    clamp(0%, calc(((50% - var(--background-x)) * 1.5) + 50%), 100%) clamp(0%, calc(((50% - var(--background-y)) * 1.5) + 50%), 100%),
    center;
  background-repeat: repeat, no-repeat;
  background-blend-mode: screen, normal;
  filter: none;
  mix-blend-mode: overlay;
  opacity: min(1, calc(0.95 * var(--foil-strength, 1)));
  -webkit-mask-image: var(--art), var(--wotc-win);
  mask-image: var(--art), var(--wotc-win);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  mask-mode: alpha, alpha;
  -webkit-mask-size: contain, 100% 100%;
  mask-size: contain, 100% 100%;
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  clip-path: none;
}
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.foil-reverse.wotc-rev.wotc-rev-legendary:not(.lit):not(.settling) .foil {
  background-position: 8% 12%, center;
}
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.foil-reverse.wotc-rev.wotc-rev-legendary .foil::before {
  display: none;
  content: "";
  background-color: transparent;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  border-radius: 0;
  clip-path: none;
  mix-blend-mode: normal;
}
/* tipped: a band slides over the card and flares the rays inside it to full white */
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.foil-reverse.wotc-rev.wotc-rev-legendary.lit .foil::before,
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.foil-reverse.wotc-rev.wotc-rev-legendary.settling .foil::before {
  display: block;
  background-image: var(--wotc-rays);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-mask-image: repeating-linear-gradient(118deg, transparent 0%, transparent 16%, #000 22%, #000 26%, transparent 32%, transparent 52%);
  mask-image: repeating-linear-gradient(118deg, transparent 0%, transparent 16%, #000 22%, #000 26%, transparent 32%, transparent 52%);
  mask-mode: alpha;
  -webkit-mask-size: 300% 300%;
  mask-size: 300% 300%;
  -webkit-mask-position: clamp(0%, calc(((50% - var(--background-x)) * 2) + 50%), 100%) clamp(0%, calc(((50% - var(--background-y)) * 2) + 50%), 100%);
  mask-position: clamp(0%, calc(((50% - var(--background-x)) * 2) + 50%), 100%) clamp(0%, calc(((50% - var(--background-y)) * 2) + 50%), 100%);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  opacity: calc((0.5 + var(--pointer-from-center) * 0.5) * var(--foil-strength, 1));
}
/* `.glare` is the silver-teal lift of the paper (screened, so it can only add light) with the pointer's soft pool of light on it when
   tipped; it is what silvers the yellow border and the cream paper, which the overlay group above cannot lift (a near-white paper has no
   headroom). Its tint is dark on purpose: screen adds it, and the dark ink only rises to a teal-grey, never to paper. Kept off the window. */
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.foil-reverse.wotc-rev.wotc-rev-legendary .glare {
  display: block;
  background-image:
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(190, 60%, 62%, 0.5) 0%, hsla(190, 60%, 50%, 0.2) 36%, hsla(190, 60%, 40%, 0) 74%),
    linear-gradient(112deg, hsl(190, 90%, 15%), hsl(215, 80%, 17%) 22%, hsl(280, 55%, 17%) 40%, hsl(45, 90%, 14%) 60%,
      hsl(160, 70%, 14%) 80%, hsl(190, 90%, 15%));
  background-size: 100% 100%, 260% 260%;
  background-position:
    center,
    clamp(0%, calc(((50% - var(--background-x)) * 1.5) + 50%), 100%) clamp(0%, calc(((50% - var(--background-y)) * 1.5) + 50%), 100%);
  background-repeat: no-repeat, repeat;
  mix-blend-mode: screen;
  filter: none;
  opacity: calc(0.9 * var(--foil-strength, 1));
  -webkit-mask-image: var(--art), var(--wotc-win);
  mask-image: var(--art), var(--wotc-win);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  mask-mode: alpha, alpha;
  -webkit-mask-size: contain, 100% 100%;
  mask-size: contain, 100% 100%;
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
}
body.fx-holo.fx-holo.fx-holo .tcg.era-wotc.era-wotc.era-wotc.era-wotc.era-wotc.foil-reverse.wotc-rev.wotc-rev-legendary:not(.lit):not(.settling) .glare {
  background-position: center, 8% 12%;
  background-image:
    linear-gradient(hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0)),
    linear-gradient(112deg, hsl(190, 90%, 15%), hsl(215, 80%, 17%) 22%, hsl(280, 55%, 17%) 40%, hsl(45, 90%, 14%) 60%,
      hsl(160, 70%, 14%) 80%, hsl(190, 90%, 15%));
}