/*
 * Finishes only promo cards use. Most promos borrow a rarity's recipe through
 * `foilAs` (foilLook() in js/app.js): a full-art promo is foiled like an
 * Illustration Rare, an ex promo like a Double Rare. What is left lives here.
 *
 * Cosmos, the galaxy foil of collection-box and blister promos. TCG Live
 * files them as COSMOS / HOLO. Two prints exist (the card-textures skill,
 * reference/promos.md, from photos in the project's texture-refs):
 *
 * - Smooth cosmos (SVP 001 to 139, 2023 to mid-2024): round soft planets and
 *   fine round dots, the odd thin swirl. Drawn with the two galaxy layers
 *   from pokemon-cards-css by Simon Goellner (@simeydotme), GPL-3.0
 *   (assets/foil/promo/cosmos-middle-trans.webp and cosmos-top-trans.webp,
 *   copied from upstream's public/img; NOTICE.md).
 * - Pixel cosmos (`.cosmos-pixel`; every English cosmos promo since
 *   Tinkaton SVP 140, September 2024, and all Mega Evolution-era ones):
 *   a square grid of specks, stair-stepped blocky planets, "+" crosses and
 *   8-point stars, sometimes a dotted swirl. Drawn with
 *   assets/foil/promo/pixel-cosmos.webp, made by the skill's
 *   scripts/make_pixel_cosmos.py.
 *
 * On the card: the foil sits under the art-window background and the whole
 * outer silver border; the Pokémon, header, text box and any stamp are ink
 * on top. Off the light it is dark grey with pale specks, which the scans
 * already show, so the foil layers only add light. Held to the light each
 * patch of foil lights in one saturated colour, and the colour sweeps across
 * the card as it tips; the specks flash brighter than the ground.
 *
 * The per-card foil map (js/foil-maps.js) keeps the shine off the Pokémon
 * and on the border; a promo without one falls back to the art window
 * (windows.css, via foil-holo).
 *
 * Same contract as celebration.css: it rides on a second class, sets every
 * paint property the older foil-holo recipe set, paints `.foil` alone at rest
 * and never animates on its own. `.foil` is the colour sweep and the mirror
 * sheen; `::before` is the specks lit in the sweep's colour, masked by the
 * galaxy texture; `::after` is a stripe of glints running over the specks;
 * `.glare` is the gloss.
 */

body.fx-holo.fx-holo.fx-holo .tcg.foil-cosmos {
  --cosmos-middle: url("/assets/foil/promo/cosmos-middle-trans.webp");
  --cosmos-top: url("/assets/foil/promo/cosmos-top-trans.webp");
  --cosmos-pixel: url("/assets/foil/promo/pixel-cosmos.webp");
  --space: 4%;
  --cosmos-a: 0.75;
  --cosmos-rainbow: repeating-linear-gradient(82deg,
    hsla(53, 95%, 62%, var(--cosmos-a)) calc(var(--space) * 1), hsla(93, 85%, 54%, var(--cosmos-a)) calc(var(--space) * 2),
    hsla(176, 90%, 50%, var(--cosmos-a)) calc(var(--space) * 3), hsla(228, 95%, 62%, var(--cosmos-a)) calc(var(--space) * 4),
    hsla(283, 90%, 62%, var(--cosmos-a)) calc(var(--space) * 5), hsla(326, 90%, 58%, var(--cosmos-a)) calc(var(--space) * 6),
    hsla(326, 90%, 58%, var(--cosmos-a)) calc(var(--space) * 7), hsla(283, 90%, 62%, var(--cosmos-a)) calc(var(--space) * 8),
    hsla(228, 95%, 62%, var(--cosmos-a)) calc(var(--space) * 9), hsla(176, 90%, 50%, var(--cosmos-a)) calc(var(--space) * 10),
    hsla(93, 85%, 54%, var(--cosmos-a)) calc(var(--space) * 11), hsla(53, 95%, 62%, var(--cosmos-a)) calc(var(--space) * 12));
  /* Upstream's --cosmosbg: every card shows a different patch of sky. */
  --cosmos-pos: calc(var(--seed-x, 0.5) * 100%) calc(var(--seed-y, 0.5) * 100%);
  /* Where the sweep sits: it crosses the card as the pointer crosses it. */
  --cosmos-drift: calc(10% + var(--pointer-from-left, 0.5) * 80%) calc(10% + var(--pointer-from-top, 0.5) * 80%);
  /* The map paints an inked art background at about half, the bare border at
     full, so the layers run at full strength and the map sets the ratio. */
  --cosmos-ground: 1;
  --cosmos-specks: 1;
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-cosmos.cosmos-pixel {
  /* Pixel foil is darker between its shapes and the shapes carry the colour. */
  --cosmos-ground: 0.8;
  --cosmos-a: 0.65;
}

/* The ground: the sweep, screened on, with the mirror's sheen under the lamp. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-cosmos .foil {
  background-image:
    var(--cosmos-rainbow),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 100%, 0.7) 0%, hsla(0, 0%, 100%, 0.25) 30%, hsla(0, 0%, 100%, 0) 70%);
  background-size: 400% 900%, cover;
  background-position: var(--cosmos-drift), center;
  background-repeat: repeat;
  background-blend-mode: normal, normal;
  filter: saturate(1.1);
  mix-blend-mode: screen;
  opacity: calc((0.3 + var(--card-opacity) * 0.7) * var(--cosmos-ground) * var(--foil-strength, 1));
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-cosmos:not(.lit):not(.settling) .foil {
  filter: saturate(0.8);
  opacity: calc(0.3 * var(--cosmos-ground) * var(--foil-strength, 1));
}

/* Clear what the older holo recipes put on the pseudo layers first. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-cosmos .foil::before,
body.fx-holo.fx-holo.fx-holo .tcg.foil-cosmos .foil::after {
  background-image: none;
  background-size: auto;
  background-position: center;
  background-repeat: repeat;
  background-blend-mode: normal;
  filter: none;
  clip-path: none;
  opacity: 1;
}
/* The specks, lit in the sweep's colour: the galaxy texture is the mask, and
   the sweep behind it sits a little off the ground's, so a speck is never
   quite the colour of the foil round it. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-cosmos .foil::before {
  background-image:
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 100%, 0.9) 0%, hsla(0, 0%, 100%, 0.3) 25%, hsla(0, 0%, 100%, 0) 60%),
    var(--cosmos-rainbow);
  background-size: cover, 400% 900%;
  background-position: center,
    calc(18% + var(--pointer-from-left, 0.5) * 64%) calc(18% + var(--pointer-from-top, 0.5) * 64%);
  background-repeat: no-repeat, repeat;
  background-blend-mode: normal, normal;
  filter: brightness(1.3) saturate(1.2);
  -webkit-mask-image: var(--cosmos-middle), var(--cosmos-top);
  mask-image: var(--cosmos-middle), var(--cosmos-top);
  -webkit-mask-size: 200% 200%, 200% 200%;
  mask-size: 200% 200%, 200% 200%;
  -webkit-mask-position: var(--cosmos-pos), var(--cosmos-pos);
  mask-position: var(--cosmos-pos), var(--cosmos-pos);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-composite: source-over;
  mask-composite: add;
  mix-blend-mode: screen;
  opacity: calc(var(--card-opacity) * var(--cosmos-specks));
}
/* With a foil map, the specks and the glints stay where the foil is: the
   galaxy textures alone let them cover the Pokémon and the text box, which
   read as a green wash over the whole card (Hop's Dubwool 136/159, Noah
   2026-09-28). The map is the first mask layer, intersected with the union
   of the textures beneath it. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-cosmos.has-foil-map .foil::before,
body.fx-holo.fx-holo.fx-holo .tcg.foil-cosmos.has-foil-map .foil::after {
  -webkit-mask-image: var(--foil-map), var(--cosmos-middle), var(--cosmos-top);
  mask-image: var(--foil-map), var(--cosmos-middle), var(--cosmos-top);
  -webkit-mask-size: 100% 100%, 200% 200%, 200% 200%;
  mask-size: 100% 100%, 200% 200%, 200% 200%;
  -webkit-mask-position: center, var(--cosmos-pos), var(--cosmos-pos);
  mask-position: center, var(--cosmos-pos), var(--cosmos-pos);
  -webkit-mask-repeat: no-repeat, repeat, repeat;
  mask-repeat: no-repeat, repeat, repeat;
  -webkit-mask-composite: source-in, source-over, source-over;
  mask-composite: intersect, add, add;
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-cosmos.cosmos-pixel.has-foil-map .foil::before,
body.fx-holo.fx-holo.fx-holo .tcg.foil-cosmos.cosmos-pixel.has-foil-map .foil::after {
  -webkit-mask-image: var(--foil-map), var(--cosmos-pixel);
  mask-image: var(--foil-map), var(--cosmos-pixel);
  -webkit-mask-size: 100% 100%, 125% auto;
  mask-size: 100% 100%, 125% auto;
  -webkit-mask-position: center, var(--cosmos-pos);
  mask-position: center, var(--cosmos-pos);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in, source-over;
  mask-composite: intersect, add;
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-cosmos.cosmos-pixel .foil::before {
  -webkit-mask-image: var(--cosmos-pixel);
  mask-image: var(--cosmos-pixel);
  -webkit-mask-size: 125% auto;
  mask-size: 125% auto;
  -webkit-mask-position: var(--cosmos-pos);
  mask-position: var(--cosmos-pos);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* Glints: a few narrow white stripes run over the specks, three times as
   fast as the pointer, so specks wink on and off as the card turns. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-cosmos .foil::after {
  background-image: repeating-linear-gradient(-38deg,
    hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 5%,
    hsla(0, 0%, 100%, 0.95) 6.5%, hsla(0, 0%, 100%, 0.95) 8%,
    hsla(0, 0%, 100%, 0) 9.5%, hsla(0, 0%, 100%, 0) 17%);
  background-size: 300% 300%;
  background-position: calc((var(--background-x, 50%) - 50%) * 3 + 50%) calc((var(--background-y, 50%) - 50%) * 3 + 50%);
  background-repeat: repeat;
  -webkit-mask-image: var(--cosmos-middle), var(--cosmos-top);
  mask-image: var(--cosmos-middle), var(--cosmos-top);
  -webkit-mask-size: 200% 200%, 200% 200%;
  mask-size: 200% 200%, 200% 200%;
  -webkit-mask-position: var(--cosmos-pos), var(--cosmos-pos);
  mask-position: var(--cosmos-pos), var(--cosmos-pos);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-composite: source-over;
  mask-composite: add;
  mix-blend-mode: screen;
  opacity: calc(var(--card-opacity) * 0.9);
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-cosmos.cosmos-pixel .foil::after {
  -webkit-mask-image: var(--cosmos-pixel);
  mask-image: var(--cosmos-pixel);
  -webkit-mask-size: 125% auto;
  mask-size: 125% auto;
  -webkit-mask-position: var(--cosmos-pos);
  mask-position: var(--cosmos-pos);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Gloss on the varnish: a soft highlight under the lamp, a shade darker away. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-cosmos .glare {
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 0.65) 5%, hsla(0, 0%, 100%, 0.15) 30%, hsla(0, 0%, 0%, 0.25) 90%);
  background-size: cover;
  background-position: center;
  filter: none;
  mix-blend-mode: overlay;
  opacity: calc(var(--card-opacity) * 0.7);
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-cosmos .glare::after {
  background: none;
  -webkit-mask-image: none;
  mask-image: none;
  filter: none;
  mix-blend-mode: normal;
  opacity: 0;
}