/*
 * The 30th Celebration's finishes (set me55), each drawn from photos of the
 * physical cards and TCG Live's name for its foil. The research behind every
 * number here is in the card-textures skill,
 * .claude/skills/card-textures/reference/30th-celebration.md.
 *
 * Layer ideas follow pokemon-cards-css and pokemon-cards-151 by Simon Goellner
 * (@simeydotme), GPL-3.0; see NOTICE.md. The textures are our own, drawn by
 * scripts/make_celebration_textures.py.
 *
 * Every finish here rides on a second class next to the older pattern class
 * (foilPattern() in js/app.js), so the Classic engine is untouched and the
 * rules below have to set every paint property the older recipes set.
 * Loaded last. Foil maps and the `.cure` layer are wired in maps.css.
 *
 * Rest state (PR 5): a resting card paints `.foil` alone, at about 0.16-0.2
 * x --foil-strength; pseudo layers, `.cure` and `.glare` only exist while a
 * card is held or settling. Nothing here animates on its own.
 */

body.fx-holo.fx-holo.fx-holo .tcg:is(.foil-rainbow, .foil-svholo, .foil-sunpillar, .foil-pikachu, .foil-rgb, .foil-classic),
body.fx-holo.fx-holo.fx-holo .tcg.foil-future.has-etch-bins,
body.fx-holo.fx-holo.fx-holo .tcg.foil-sir.has-foil-map {
  --c30-grain: url("/assets/foil/grain.png");
  --c30-stars: url("/assets/foil/celebration/southern-cross.webp");
  --c30-rings: url("/assets/foil/celebration/stitched-rings.webp");
  --c30-ice: url("/assets/foil/celebration/cracked-ice.webp");
  --c30-confetti: url("/assets/foil/celebration/confetti.webp");
  --c30-classic-stars: url("/assets/foil/celebration/classic-stars.webp");
  --c30-grid: url("/assets/foil/celebration/glitter-grid.webp");
  --spectrum: hsl(2, 100%, 73%), hsl(53, 100%, 69%), hsl(93, 100%, 69%),
    hsl(176, 100%, 76%), hsl(228, 100%, 74%), hsl(283, 100%, 73%), hsl(2, 100%, 73%);
  /* Tiled textures start somewhere different on every card. */
  --seed-pos: calc(var(--seed-x, 0.5) * 100%) calc(var(--seed-y, 0.5) * 100%);
}

/* Shared shape for the finishes' shine layers. */
body.fx-holo.fx-holo.fx-holo .tcg:is(.foil-rainbow, .foil-svholo, .foil-sunpillar, .foil-pikachu, .foil-rgb, .foil-classic) .foil,
body.fx-holo.fx-holo.fx-holo .tcg.foil-future.has-etch-bins .foil,
body.fx-holo.fx-holo.fx-holo .tcg.foil-sir.has-foil-map .foil {
  background-repeat: repeat;
  opacity: calc((0.18 + var(--card-opacity) * 0.82) * var(--foil-strength, 1));
}
body.fx-holo.fx-holo.fx-holo .tcg:is(.foil-rainbow, .foil-svholo, .foil-sunpillar, .foil-pikachu, .foil-rgb, .foil-classic):not(.lit):not(.settling) .foil,
body.fx-holo.fx-holo.fx-holo .tcg.foil-future.has-etch-bins:not(.lit):not(.settling) .foil,
body.fx-holo.fx-holo.fx-holo .tcg.foil-sir.has-foil-map:not(.lit):not(.settling) .foil {
  opacity: calc(0.18 * var(--foil-strength, 1));
}
body.fx-holo.fx-holo.fx-holo .tcg:is(.foil-rainbow, .foil-svholo, .foil-sunpillar, .foil-pikachu, .foil-rgb, .foil-classic) .foil::before,
body.fx-holo.fx-holo.fx-holo .tcg:is(.foil-rainbow, .foil-svholo, .foil-sunpillar, .foil-pikachu, .foil-rgb, .foil-classic) .foil::after,
body.fx-holo.fx-holo.fx-holo .tcg.foil-future.has-etch-bins .foil::before,
body.fx-holo.fx-holo.fx-holo .tcg.foil-future.has-etch-bins .foil::after,
body.fx-holo.fx-holo.fx-holo .tcg.foil-sir.has-foil-map .foil::before,
body.fx-holo.fx-holo.fx-holo .tcg.foil-sir.has-foil-map .foil::after {
  /* Clear what the older recipes put here; each finish sets its own. */
  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;
  opacity: 1;
}
body.fx-holo.fx-holo.fx-holo .tcg:is(.foil-rainbow, .foil-svholo, .foil-sunpillar, .foil-pikachu, .foil-rgb, .foil-classic) .glare::after,
body.fx-holo.fx-holo.fx-holo .tcg.foil-future.has-etch-bins .glare::after,
body.fx-holo.fx-holo.fx-holo .tcg.foil-sir.has-foil-map .glare::after {
  background: none;
  -webkit-mask-image: none;
  mask-image: none;
  mix-blend-mode: normal;
  filter: none;
  opacity: 1;
}

/* ---- Common: RAINBOW / HOLO ----------------------------------------------
   New for this set: ME commons are not foil. One soft, broad rainbow sweep
   (yellow-white, green, blue-violet) across the art background with a fine
   sandy grain, gentler than the Rare's stacked bands; the silver border is
   foil too (the map says so) and turns pastel. The Pokémon and the stamp stay
   plain: the map. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-rainbow .foil {
  background-image:
    var(--c30-grain),
    linear-gradient(112deg,
      #000 8%, hsl(48, 85%, 62%) 26%, hsl(95, 70%, 60%) 36%, hsl(170, 75%, 62%) 45%,
      hsl(215, 80%, 68%) 54%, hsl(270, 65%, 68%) 63%, #000 82%);
  background-size: 110px 110px, 260% 260%;
  background-position:
    center,
    calc(((50% - var(--background-x)) * 3.2) + 50%) calc(((50% - var(--background-y)) * 2.2) + 50%);
  background-blend-mode: soft-light;
  filter: brightness(calc(0.8 + var(--pointer-from-center) * 0.2)) contrast(1.3) saturate(0.95);
  mix-blend-mode: color-dodge;
}
/* A fainter second sweep running the other way: the two never line up, so
   the colour drifts instead of sliding past as one stripe. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-rainbow .foil::before {
  background-image: linear-gradient(68deg,
    transparent 20%, hsla(300, 70%, 70%, 0.5) 38%, hsla(190, 80%, 70%, 0.5) 50%,
    hsla(60, 80%, 70%, 0.5) 62%, transparent 80%);
  background-size: 300% 300%;
  background-position: min(100%, calc(var(--background-x) * 1.8)) calc(100% - (var(--background-y) * 1.2));
  mix-blend-mode: screen;
}
/* The light: foil is brightest under it and falls off towards the edges. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-rainbow .foil::after {
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    #fff 0%, #bdbdbd 32%, #4d4d4d 90%);
  mix-blend-mode: multiply;
}

/* The gloss on the varnish for the two background-only holos: soft, so a
   pale Pokémon is not bleached by it. */
body.fx-holo.fx-holo.fx-holo .tcg:is(.foil-rainbow, .foil-svholo) .glare {
  /* Black end under 0.15 (verify.md): nothing darkens the art away from
     the band (was 0.3, which mottled the far side dark, 2026-09-28). */
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 0.6) 5%, hsla(0, 0%, 100%, 0.22) 28%, hsla(0, 0%, 0%, 0.14) 95%);
  mix-blend-mode: overlay;
  filter: none;
  opacity: calc(var(--card-opacity) * 0.7);
}

/* ---- Rare: SV_HOLO / HOLO --------------------------------------------------
   The Scarlet & Violet and Mega Evolution holo Rare, drawn from photos of
   real cards (Surging Sparks' Togekiss, Gastrodon and Tapu Koko, and the SV
   starter promos): one broad, saturated rainbow band sweeps across the art
   background as the card tilts, its hue running along its length, over a fine
   silver sandpaper glitter that covers the whole foil, border included. The
   Pokemon, frame and text box stay print: the map. Nothing darkens the art
   between bands. Write-up: .claude/skills/card-textures/reference/sv-rare-holo.md.

   Every layer paints into `.foil`, which hard-lights the result onto the card:
   the 50% grey around the band is neutral, the band's colours tint the art
   under it without hiding it, and the glitter only ever lightens. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-svholo .foil {
  background-image:
    linear-gradient(172deg,
      #808080 0%, #808080 45.5%, hsla(0, 0%, 50%, 0) 48.5%, hsla(0, 0%, 50%, 0) 51.5%,
      #808080 54.5%, #808080 100%),
    linear-gradient(95deg,
      hsl(0, 95%, 60%), hsl(28, 95%, 58%), hsl(52, 95%, 56%), hsl(100, 85%, 55%),
      hsl(175, 90%, 55%), hsl(215, 95%, 62%), hsl(270, 90%, 64%), hsl(320, 95%, 62%),
      hsl(360, 95%, 60%), hsl(28, 95%, 58%), hsl(52, 95%, 56%), hsl(100, 85%, 55%),
      hsl(175, 90%, 55%));
  /* The band is about a quarter of the card tall and follows the light down
     the card, leaving the art near the ends of the tilt; the hue under a
     point shifts as the card turns sideways. */
  background-size: 100% 300%, 160% 100%;
  background-position:
    50% calc((0.825 - var(--py, 0.5) * 0.4) * 100%),
    calc((0.1 + var(--px, 0.5) * 0.8) * 100%) 50%;
  background-repeat: no-repeat;
  background-blend-mode: normal;
  filter: none;
  mix-blend-mode: hard-light;
}
/* The glitter: sparse white points over a dense field of pale flecks, sized
   to the card so the grain is as fine on a thumbnail as in the inspector,
   brightest under the light. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-svholo .foil::before {
  background-image: url("/assets/foil/glitter.png"), url("/assets/foil/glitter-flecks.webp");
  background-size: 38% auto, 33% auto;
  background-position: var(--seed-pos), calc(var(--seed-x, 0.5) * -100%) calc(var(--seed-y, 0.5) * 100%);
  background-blend-mode: screen, normal;
  filter: saturate(0.3) brightness(1.45);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    #000 0%, hsla(0, 0%, 0%, 0.75) 40%, hsla(0, 0%, 0%, 0.5) 100%);
  mask-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    #000 0%, hsla(0, 0%, 0%, 0.75) 40%, hsla(0, 0%, 0%, 0.5) 100%);
}
/* A soft hot spot under the light, the foil a little duller away from it. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-svholo .foil::after {
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 0.3) 0%, hsla(0, 0%, 100%, 0) 35%, hsla(0, 0%, 0%, 0.12) 100%);
}

/* ---- Double Rare: SUN_PILLAR / HOLO ----------------------------------------
   Parallel diagonal rainbow bars, each 3-6% of the card wide and holding a
   full spectrum, running lower left to upper right at 60-70 degrees, over
   the frame, art and text box but not the Pokémon or the text (the map).
   The star glints on top are the cast-and-cure coat: `.cure.cure-stars`. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-sunpillar .foil,
body.fx-holo.fx-holo.fx-holo .tcg.foil-sunpillar .foil::after {
  background-image:
    var(--c30-grain),
    repeating-linear-gradient(115deg,
      hsl(2, 100%, 73%) 0%, hsl(53, 100%, 69%) 0.8%, hsl(93, 100%, 69%) 1.6%,
      hsl(176, 100%, 76%) 2.4%, hsl(228, 100%, 74%) 3.2%, hsl(283, 100%, 73%) 4%, hsl(2, 100%, 73%) 4.8%),
    repeating-linear-gradient(115deg,
      #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 70%) 4.5%,
      hsl(180, 10%, 60%) 5.2%, #0e152e 10%, #0e152e 12%),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 100%, 0.35) 0%, hsla(0, 0%, 0%, 0.2) 40%, hsla(0, 0%, 0%, 0.45) 120%);
  background-size: 120px 120px, 200% 200%, 300% 300%, cover;
  /* The rainbow bars drift about one spectrum as the pointer crosses the
     card, as a real one does (Noah, 2026-10-02: "the rainbow affect moves
     way too fast"). They were x 1.6, two and a half spectra a sweep; the
     rest pose is unchanged (80% at the centre). */
  background-position:
    center,
    calc((var(--background-x) - 50%) * 0.6 + 80%) calc(var(--background-y) * 0.8),
    calc(var(--background-x) + (var(--background-y) * 0.2)) var(--background-y),
    center;
  background-blend-mode: soft-light, hard-light, hard-light;
  filter: brightness(calc(0.5 + var(--pointer-from-center) * 0.3)) contrast(1.7) saturate(1.3);
  mix-blend-mode: color-dodge;
}
/* The counter-tracked twin, mirrored, where the colour flips. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-sunpillar .foil::after {
  background-position:
    center,
    calc(40% - (var(--background-x) - 50%) * 0.6) calc(100% - (var(--background-y) * 0.6)),
    calc(100% - (var(--background-x) + (var(--background-y) * 0.2))) calc(100% - var(--background-y)),
    center;
  background-size: 120px 120px, 190% 190%, 280% 280%, cover;
  filter: brightness(calc(0.8 + var(--pointer-from-center) * 0.4)) contrast(1.4) saturate(1.2);
  mix-blend-mode: exclusion;
  opacity: 0.5;
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-sunpillar .foil::before {
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    #fff 0%, #555 45%, #111 100%);
  mix-blend-mode: multiply;
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-sunpillar .glare {
  /* Far end was 20% grey at 0.9: it darkened the side away from the lamp
     and the streaks there read as dark dots (2026-09-28). */
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(0, 0%, 92%) 8%, hsla(0, 0%, 60%, 0.5) 45%, hsla(0, 0%, 36%, 0.7) 120%);
  mix-blend-mode: overlay;
  filter: none;
  opacity: calc(var(--card-opacity) * 0.75);
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-sunpillar .glare::after {
  background: none;
}

/* Southern Cross: four-point sparkles, eight-point stars and crosses, 1.5-5%
   of the card wide, each one flat spectral colour, over the whole card
   including the Pokémon (the coat ignores the foil map). They pop on dark
   art and go pale on light art, which is `screen`. Each star cycles through
   the spectrum on its own phase as the card turns: a rainbow sliding under a
   star-shaped stencil. */
body.fx-holo.fx-holo.fx-holo .tcg.cure-stars .cure {
  background-image: var(--c30-stars);
  background-size: 62% auto;
  background-position: var(--seed-pos);
  mix-blend-mode: screen;
  filter: hue-rotate(calc((var(--pointer-from-left) * 1.3 + var(--pointer-from-top) * 0.9) * 360deg))
    brightness(calc(0.8 + var(--pointer-from-center) * 0.5)) saturate(1.6);
  opacity: calc(var(--card-opacity) * 0.9 * var(--foil-strength, 1));
  -webkit-mask-image: var(--art),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #000 0%, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0.35) 90%);
  -webkit-mask-composite: source-in, source-over;
  mask-image: var(--art),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #000 0%, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0.35) 90%);
  mask-composite: intersect, add;
  -webkit-mask-size: contain, cover;
  mask-size: contain, cover;
}

/* ---- Pikachu Rare: PIKACHU / HOLO + StitchedRings ------------------------
   Three layers, all new for this set.
   1. The foil (the map: art background, the silver border, and the big
      Pikachu head in the text box minus the attack text over it) is a fine
      cracked-ice mosaic: small angular flakes, each flashing its own colour.
      On the head that reads as gold-green glitter; on the border as
      white and light-blue sparkle.
   2. Fireworks: bursts of short radial dashes in rings, over the whole
      face. Vivid gold, green and cyan on the foil (`.foil::before`), a faint
      glossy dash on plain ink (`.cure`). Flat to the touch, cast and cure.
   3. Pikachu itself stays plain: the map. At rest the card looks nearly
      like the scan; the effect lives in the light. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-pikachu .foil {
  background-image:
    var(--c30-ice),
    repeating-linear-gradient(0deg,
      hsl(2, 100%, 73%) 5%, hsl(53, 100%, 69%) 10%, hsl(93, 100%, 69%) 15%,
      hsl(176, 100%, 76%) 20%, hsl(228, 100%, 74%) 25%, hsl(283, 100%, 73%) 30%, hsl(2, 100%, 73%) 35%),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      #fff 0%, #777 35%, #1a1a1a 90%);
  background-size: 18% auto, 200% 700%, cover;
  background-position: var(--seed-pos), 0% var(--background-y), center;
  background-blend-mode: exclusion, multiply;
  filter: brightness(calc(0.6 + var(--pointer-from-center) * 0.25)) contrast(1.9) saturate(1.3);
  mix-blend-mode: color-dodge;
}
/* The same flakes a few pixels apart, counter-shifting: flakes wink on and
   off instead of the whole mosaic sliding. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-pikachu .foil::before {
  background-image: var(--c30-ice);
  background-size: 18% auto;
  background-position:
    calc(var(--seed-x) * 100% + (var(--pointer-from-left) - 0.5) * 6px)
    calc(var(--seed-y) * 100% + (var(--pointer-from-top) - 0.5) * 6px);
  mix-blend-mode: difference;
  filter: brightness(0.8) contrast(1.4);
  opacity: 0.4;
}
/* The fireworks on the foil: vivid, one colour per zone, sliding through
   gold, orange, green and cyan as the card turns. On top of the flakes. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-pikachu .foil::after {
  background-image: linear-gradient(125deg,
    hsl(40, 100%, 62%) 0%, hsl(22, 100%, 64%) 16%, hsl(95, 95%, 66%) 32%,
    hsl(175, 100%, 70%) 48%, hsl(205, 100%, 80%) 62%, hsl(320, 95%, 78%) 78%, hsl(40, 100%, 62%) 100%);
  background-size: 300% 300%;
  background-position: calc(((50% - var(--background-x)) * 3) + 50%) calc(((50% - var(--background-y)) * 3) + 50%);
  -webkit-mask-image: var(--c30-rings);
  mask-image: var(--c30-rings);
  -webkit-mask-size: 70% auto;
  mask-size: 70% auto;
  -webkit-mask-position: var(--seed-pos);
  mask-position: var(--seed-pos);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  mix-blend-mode: normal;
  filter: brightness(1.15) saturate(1.5);
}
/* The rings over plain ink: the same pattern, registered to the foil's copy,
   only a brighter, glossier dash. */
body.fx-holo.fx-holo.fx-holo .tcg.cure-rings .cure {
  background-image: linear-gradient(125deg,
    hsl(52, 100%, 88%) 0%, hsl(38, 100%, 84%) 25%, hsl(80, 90%, 88%) 50%, hsl(190, 100%, 92%) 75%, hsl(52, 100%, 88%) 100%);
  background-size: 300% 300%;
  background-position: calc(((50% - var(--background-x)) * 3) + 50%) calc(((50% - var(--background-y)) * 3) + 50%);
  -webkit-mask-image: var(--art), var(--c30-rings),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #000 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.1) 100%);
  -webkit-mask-composite: source-in, source-in, source-over;
  mask-image: var(--art), var(--c30-rings),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #000 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.1) 100%);
  mask-composite: intersect, intersect, add;
  -webkit-mask-size: contain, 70% auto, cover;
  mask-size: contain, 70% auto, cover;
  -webkit-mask-position: center, var(--seed-pos), center;
  mask-position: center, var(--seed-pos), center;
  -webkit-mask-repeat: no-repeat, repeat, no-repeat;
  mask-repeat: no-repeat, repeat, no-repeat;
  mix-blend-mode: screen;
  opacity: calc(var(--card-opacity) * 0.8 * var(--foil-strength, 1));
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-pikachu .glare {
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(50, 100%, 96%, 0.85) 6%, hsla(0, 0%, 60%, 0.4) 40%, hsla(0, 0%, 32%, 0.6) 110%);
  mix-blend-mode: overlay;
  filter: none;
  opacity: calc(var(--card-opacity) * 0.7);
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-pikachu .glare::after {
  background: none;
}

/* ---- Illustration Rare: SUN_PILLAR / HOLO, with a map ------------------------
   The standard IR, but the map puts the foil on chosen parts of each painting
   (Alolan Exeggutor: the leaves and background shapes). Soft light-pillar
   bands in pale lavender, blue and yellow with a fine paper-tooth grain, from
   pokemon-cards-151's illustration rare. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-ir.has-foil-map .foil,
body.fx-holo.fx-holo.fx-holo .tcg.foil-ir.has-foil-map .foil::after {
  --space: 5%;
  --angle: 133deg;
  background-image:
    var(--holo-grain),
    repeating-linear-gradient(0deg,
      var(--sunpillar-clr-1) calc(var(--space) * 1), var(--sunpillar-clr-2) calc(var(--space) * 2),
      var(--sunpillar-clr-3) calc(var(--space) * 3), var(--sunpillar-clr-4) calc(var(--space) * 4),
      var(--sunpillar-clr-5) calc(var(--space) * 5), var(--sunpillar-clr-6) calc(var(--space) * 6),
      var(--sunpillar-clr-1) calc(var(--space) * 7)),
    repeating-linear-gradient(var(--angle),
      #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%,
      hsl(180, 10%, 60%) 5.2%, #0e152e 10%, #0e152e 12%),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 0%, 0.1) 12%, hsla(0, 0%, 0%, 0.15) 20%, hsla(0, 0%, 0%, 0.25) 120%);
  background-blend-mode: screen, hue, hard-light;
  background-size: 140px 100%, 200% 700%, 300% 100%, 200% 100%;
  background-position: center, 0% var(--background-y), var(--background-x) var(--background-y),
    var(--background-x) var(--background-y);
  background-repeat: repeat;
  filter: brightness(0.8) contrast(2.4) saturate(0.65);
  mix-blend-mode: color-dodge;
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-ir.has-foil-map .foil::after {
  background-position: center, 0% var(--background-y),
    calc(100% - var(--background-x)) calc(var(--background-y) * -1), var(--background-x) var(--background-y);
  background-size: 140px 100%, 200% 400%, 195% 100%, 200% 100%;
  /* Was contrast 2.5 saturate 1.5: the grain came through as a harsh
     green-and-black speckle in the far corner of the card (Noah,
     2026-09-28: black speckles "make it look glitchy"). The real IR is a
     soft sheen with a paper-tooth grain seen second. */
  filter: brightness(1) contrast(1.6) saturate(1.2);
  mix-blend-mode: soft-light;
  opacity: 1;
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-ir.has-foil-map .foil::before {
  background: none;
  opacity: 0;
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-ir.has-foil-map .glare {
  /* The far end was black: overlay with black halves the print, so the
     corner away from the light went dark and its grain read as dots. A
     lamp leaves the far corner plain, not dark; 34% grey keeps the light
     side and only dims the far side a little. */
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(0, 0%, 100%) 0%, hsl(0, 0%, 34%) 100%);
  mix-blend-mode: overlay;
  filter: brightness(0.9) contrast(1.2);
  opacity: calc(var(--card-opacity) * 0.8);
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-ir.has-foil-map .glare::after {
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(0, 0%, 100%) 5%, hsl(0, 0%, 0%) 120%);
  mix-blend-mode: screen;
  filter: brightness(0.475) contrast(2);
  opacity: var(--pointer-from-center);
}

/* ---- Etched cards: the relief catching the light ----------------------------
   SIRs, the Futuristic Rares and the RGB Mews carry an etch map (TCG Live).
   The raised lines light up where the light falls on them, as upstream's
   glare2 does with its --foil map: a white hot spot masked by the etch. */
body.fx-holo.fx-holo.fx-holo .tcg.has-etch-map.has-etch-map .glare::after {
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 0.95) 0%, hsla(0, 0%, 100%, 0.45) 25%, hsla(0, 0%, 100%, 0) 60%);
  -webkit-mask-image: var(--etch-map);
  mask-image: var(--etch-map);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: normal;
  filter: none;
  opacity: calc(0.55 + var(--pointer-from-center) * 0.45);
}

/* ---- Special Illustration Rare: SV_ULTRA / ETCHED, with a map ----------------
   The standard SIR, on every SV, ME and 30th print with a TCG Live map.
   Photos of the real cards (the skill's reference/sv-fullart.md, "Special
   Illustration Rare"): the foil is the whole face, frame and text box
   included; fine engraved lines (the etch) run edge to edge and are what
   catches the light, so under a lamp the card reads as sandy, glittering
   relief with a broad pastel rainbow drifting over it; the Pokémon is matte
   ink over that relief, with the lines still crossing it.

   So the etch is not only the glare's mask here: `.foil` (the rainbow and
   its glitter) is cut to the etched lines, with a floor between them, and
   `.glare::after` lights the lines over the whole card, the Pokémon too.
   Prints without a Live etch (the ME sets, Black Bolt, White Flare, the ME
   promos) carry a drawn engraving tile instead (`has-etch-tile`,
   assets/foil/sir-etch.webp, js/foil-maps.js).
   pokemon-cards-151's SIR gave the 15deg rainbow and the multiply glare; its
   two narrow light bars gated everything else, which left the art flat away
   from them: now one broad pool around the pointer with one sweeping band. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-sir.has-foil-map .foil {
  background-image: repeating-linear-gradient(15deg, var(--spectrum), var(--spectrum), var(--spectrum));
  background-size: 240% 240%;
  background-position: var(--background-x) var(--background-y);
  background-blend-mode: normal;
  filter: brightness(0.68) contrast(1.5) saturate(1);
  mix-blend-mode: color-dodge;
}
/* Resting, the silver frame stays silver rather than taking the rainbow's
   colour at the centre. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-sir.has-foil-map:not(.lit):not(.settling) .foil {
  filter: brightness(0.7) contrast(1.5) saturate(0.4);
}
/* The foil cut to the etched lines: art, Live map, then the etch with a
   floor between the lines (source-over on a 45% grey), so the relief reads
   at rest and under the light alike. Every layer inside `.foil` (the light
   pool and the glitter) is cut the same way. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-sir.has-foil-map:is(.has-etch-map, .has-etch-tile) .foil {
  --sir-floor: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45));
  -webkit-mask-image: var(--art), var(--sir-map), var(--sir-etch), var(--sir-floor);
  -webkit-mask-composite: source-in, source-in, source-over, source-over;
  mask-image: var(--art), var(--sir-map), var(--sir-etch), var(--sir-floor);
  mask-composite: intersect, intersect, add, add;
  -webkit-mask-size: contain, 100% 100%, var(--sir-etch-size), 100% 100%;
  mask-size: contain, 100% 100%, var(--sir-etch-size), 100% 100%;
  -webkit-mask-position: center, center, var(--sir-etch-pos), center;
  mask-position: center, center, var(--sir-etch-pos), center;
  -webkit-mask-repeat: no-repeat, no-repeat, var(--sir-etch-repeat), no-repeat;
  mask-repeat: no-repeat, no-repeat, var(--sir-etch-repeat), no-repeat;
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-sir.has-foil-map.has-etch-map {
  --sir-map: var(--foil-map);
  --sir-etch: var(--etch-map);
  --sir-etch-size: 100% 100%;
  --sir-etch-pos: center;
  --sir-etch-repeat: no-repeat;
}
/* No Live map either (the all-white fallback, js/foil-maps.js): Live's SIR
   maps hold the background at a third to a half and the Pokémon at nothing,
   so a print with a drawn etch (`has-etch-drawn`, its own map from
   scripts/make_card_etch.py) or the old tile takes a flat 45% in the map's
   place. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-sir.has-foil-map.has-etch-map.has-etch-drawn {
  --sir-map: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45));
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-sir.has-foil-map.has-etch-tile {
  --sir-map: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45));
  --sir-etch: var(--etch-tile);
  --sir-etch-size: 100% auto;
  --sir-etch-pos: var(--seed-pos);
  --sir-etch-repeat: repeat;
}
/* Where the light is: a pool around the pointer (hard-light, so the far
   corners dim rather than vanish) with one broad band sweeping through it
   as the card tilts. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-sir.has-foil-map .foil::before {
  background-image:
    linear-gradient(calc(var(--rotate-x) * -0.25 + 100deg), #000 14%, #9c9c9c 32%, #000 50%),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      #8e8e8e 0%, #6c6c6c 45%, #3c3c3c 100%);
  background-size: 300% 300%, 100% 100%;
  background-position: 50% min(100%, calc(var(--background-y) * 1.7)), center;
  background-blend-mode: screen;
  filter: contrast(0.9);
  mix-blend-mode: hard-light;
}
/* The sand: two glitter tiles at different scales, the fine one drifting
   against the coarse one with the tilt. Held back so the etch and the art
   lead: the Mew ex photos show a pinpoint grain under the sheen, not a
   sparkle over it (was brightness 1.5 contrast 2.2 at 0.3 + 0.45
   from-center; Noah, 2026-09-28: "the glitter is a little overpowering"). */
body.fx-holo.fx-holo.fx-holo .tcg.foil-sir.has-foil-map .foil::after {
  --shift: 4px;
  background-image: var(--holo-glitter), var(--holo-glitter);
  background-size: 26% auto, 15% auto;
  background-position:
    calc(50% + var(--pointer-from-left) * var(--shift)) calc(50% + var(--pointer-from-top) * var(--shift)),
    calc(20% - var(--pointer-from-left) * var(--shift)) calc(70% - var(--pointer-from-top) * var(--shift));
  background-blend-mode: screen;
  filter: brightness(1.35) contrast(1.9) saturate(1.1);
  mix-blend-mode: plus-lighter;
  opacity: calc(0.16 + var(--pointer-from-center) * 0.3);
}
/* Hard-light glare, as the Ultra Rares: brighter than mid grey near the
   light, darker far from it, so the lines lit by `::after` below brighten
   the card instead of only escaping a multiply. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-sir.has-foil-map .glare {
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(0, 0%, 62%) 5%, hsl(0, 0%, 47%) 55%, hsl(0, 0%, 34%) 130%);
  background-size: cover;
  background-position: center;
  mix-blend-mode: hard-light;
  filter: contrast(1.1);
  opacity: calc(var(--card-opacity) * 0.85);
}
/* The engraved lines under the light, over the whole card (the Pokémon
   included): white on the etch, strongest at the pointer, never off. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-sir.has-foil-map:is(.has-etch-map, .has-etch-tile) .glare::after {
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 0.7) 0%, hsla(0, 0%, 100%, 0.4) 25%, hsla(0, 0%, 100%, 0.2) 60%, hsla(0, 0%, 100%, 0.12) 100%);
  background-size: 100% 100%;
  -webkit-mask-image: var(--sir-etch);
  mask-image: var(--sir-etch);
  -webkit-mask-size: var(--sir-etch-size);
  mask-size: var(--sir-etch-size);
  -webkit-mask-position: var(--sir-etch-pos);
  mask-position: var(--sir-etch-pos);
  -webkit-mask-repeat: var(--sir-etch-repeat);
  mask-repeat: var(--sir-etch-repeat);
  mix-blend-mode: normal;
  filter: none;
  opacity: 1;
}

/* Scarlet & Violet SIRs only: Live's SV maps hold about 0.7 of the card
   (the Mega Evolution ones about 0.3), so the rainbow above drowned the art
   in a pastel haze under the light and the engraving read faint (Noah,
   2026-10-02: "overuse of the rainbow glare"; Hilda 171). A lower floor
   between the lines lets the etch lead, and a paler, darker dodge keeps the
   painting's own colours. The ME SIRs keep the recipe above (#147). */
body.fx-holo.fx-holo.fx-holo .tcg.foil-sir.has-foil-map.era-sv:is(.has-etch-map, .has-etch-tile) .foil {
  --sir-floor: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12));
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-sir.has-foil-map.era-sv .foil {
  filter: brightness(0.62) contrast(1.5) saturate(0.55);
}

/* ---- Futuristic Rare: SV_ULTRA / ETCHED, the op-art plate --------------------
   Semi-transparent inks over silver, so every colour reads opalescent; dense
   pin-point glitter on an almost regular grid over everything; and the new
   etch plate: concentric rings, chevrons and hatching in hard geometric
   cells, each cell lighting up at its own tilt. The Pokémon is foil at part
   strength (the map) and smooth, no etch. The etch is split by line direction
   (etchMapH / etchMapV): one half follows the pointer across, the other up
   and down, so neighbouring cells flash separately like the real plate. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-future.has-etch-bins .foil {
  --shift: 2px;
  background-image:
    var(--c30-grid),
    linear-gradient(120deg,
      hsl(190, 70%, 72%) 0%, hsl(275, 60%, 76%) 20%, hsl(330, 70%, 78%) 38%,
      hsl(48, 80%, 74%) 56%, hsl(150, 60%, 72%) 74%, hsl(190, 70%, 72%) 100%),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      #fff 0%, #8a8a8a 30%, #1c1c1c 85%);
  background-size: 20% auto, 300% 300%, cover;
  background-position:
    calc(50% + (var(--pointer-from-left) - 0.5) * var(--shift)) calc(50% + (var(--pointer-from-top) - 0.5) * var(--shift)),
    var(--background-x) var(--background-y),
    center;
  background-blend-mode: screen, multiply;
  filter: brightness(calc(0.42 + var(--pointer-from-center) * 0.28)) contrast(1.35) saturate(1.15);
  mix-blend-mode: color-dodge;
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-future.has-etch-bins .foil::before,
body.fx-holo.fx-holo.fx-holo .tcg.foil-future.has-etch-bins .foil::after {
  /* Prismatic bands racing across the relief: orange, magenta, yellow,
     electric blue, with dark gaps so only some cells are lit at a time. */
  --op-bands: #000 0%, hsl(25, 100%, 58%) 5%, hsl(320, 100%, 62%) 9%, hsl(55, 100%, 60%) 13%,
    hsl(195, 100%, 60%) 17%, hsl(255, 100%, 68%) 21%, #000 27%, #000 40%;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: screen;
  filter: brightness(1.3) saturate(1.3);
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-future.has-etch-bins .foil::before {
  background-image: repeating-linear-gradient(100deg, var(--op-bands));
  background-size: 180% 180%;
  background-position: calc(((50% - var(--background-x)) * 3.8) + 50%) calc(var(--background-y) * 0.5);
  -webkit-mask-image: var(--etch-map-h);
  mask-image: var(--etch-map-h);
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-future.has-etch-bins .foil::after {
  background-image: repeating-linear-gradient(10deg, var(--op-bands));
  background-size: 180% 180%;
  background-position: calc(var(--background-x) * 0.5) calc(((var(--background-y) - 50%) * 2.9) + 50%);
  -webkit-mask-image: var(--etch-map-v);
  mask-image: var(--etch-map-v);
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-future.has-etch-bins .glare {
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(0, 0%, 96%) 4%, hsla(210, 15%, 60%, 0.55) 40%, hsla(250, 30%, 12%, 0.9) 110%);
  mix-blend-mode: overlay;
  filter: none;
  opacity: calc(var(--card-opacity) * 0.8);
}

/* ---- RGB Mew: RGB / ETCHED ---------------------------------------------------
   Transparent coloured ink over a mirror foil, a foil type of its own
   (rebuilt 2026-09-29 from the PokeBeach and PayPay photos, at phone size).
   What the photos show: at rest the card is simply its colour, glossy. Tilt
   it and one broad mirror reflection sweeps across the whole card, frame and
   text box included; under it the ink goes luminous (the red turns to
   orange-salmon, the blue Mew to periwinkle) while the bare-silver parts
   blaze white: the sunburst streaks behind Mew (TCG Live's B channel) and
   Mew's belly, eye and tail highlights plus the frame lines (the R channel),
   which are striped chrome. Over everything a fingerprint-like relief field
   catches the light as a satin sheen; Mew and the frame are smooth.
   Not on the card: glitter, and hairline stripes (the 1px ridges the first
   recipe drew aliased into a line screen over Mew on a phone).
   The reflection reaches every part of the card (Noah, 2026-09-29: "have
   the mew holo go around the whole card as it does in the real photos"):
   the band is wide with a lit floor at its ends and the pools fall to a
   grey, never black, so the streaks and relief shimmer edge to edge and
   only blaze under the light. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-rgb .foil {
  /* The mirror: one reflection band that slides with the tilt, and the pool
     under the pointer. Mostly black, so the dodge lights only the band. The
     peak stays under white: a 1.0 channel colour-dodged over dark ink draws
     as blocks in WebKit. */
  background-image:
    linear-gradient(115deg,
      hsl(0, 0%, 14%) 16%, hsl(0, 0%, 26%) 34%, hsl(330, 10%, 46%) 46%, hsl(330, 12%, 54%) 50%,
      hsl(330, 10%, 46%) 54%, hsl(0, 0%, 26%) 66%, hsl(0, 0%, 14%) 84%),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsl(0, 0%, 36%) 0%, hsl(0, 0%, 20%) 25%, hsl(0, 0%, 8%) 60%, #000 100%);
  background-size: 300% 300%, cover;
  background-position:
    calc(((50% - var(--background-x)) * 3) + 50%) calc(((50% - var(--background-y)) * 1.6) + 50%),
    center;
  background-blend-mode: screen;
  filter: brightness(calc(0.6 + var(--pointer-from-center) * 0.3));
  mix-blend-mode: color-dodge;
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-rgb.has-foil-map .foil {
  /* The silver runs under the whole card, so the base ignores the map (its
     G channel dims Mew and the text box) and takes only the card's shape. */
  -webkit-mask-image: var(--art);
  -webkit-mask-composite: source-over;
  mask-image: var(--art);
  mask-composite: add;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* The sunburst streaks: bare silver, so they blaze white wherever the
   reflection reaches, with a faint prism at its edge. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-rgb .foil::before {
  background-image:
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      #fff 0%, hsl(0, 0%, 88%) 10%, hsl(210, 18%, 52%) 32%, hsl(250, 12%, 30%) 65%, hsl(250, 10%, 22%) 100%),
    linear-gradient(115deg,
      hsl(0, 0%, 10%) 18%, hsl(45, 30%, 45%) 42%, hsl(0, 0%, 92%) 50%, hsl(200, 40%, 50%) 58%, hsl(0, 0%, 10%) 82%);
  background-size: cover, 300% 300%;
  background-position:
    center,
    calc(((50% - var(--background-x)) * 3) + 50%) calc(((50% - var(--background-y)) * 1.6) + 50%);
  background-blend-mode: screen;
  -webkit-mask-image: var(--foil-map-b);
  mask-image: var(--foil-map-b);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: screen;
  filter: brightness(calc(0.55 + var(--pointer-from-center) * 0.4));
}
/* Mew's highlights and the frame lines: striped chrome. Soft, wide
   striations (a 7px period at low contrast, never hairlines) over a rainbow
   that slides along the ridges, lit from the pointer. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-rgb .foil::after {
  background-image:
    repeating-linear-gradient(45deg, hsl(0, 0%, 100%) 0px, hsl(0, 0%, 66%) 3.5px, hsl(0, 0%, 100%) 7px),
    linear-gradient(125deg, var(--spectrum)),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      #fff 0%, hsl(0, 0%, 75%) 30%, hsl(0, 0%, 40%) 70%, hsl(0, 0%, 28%) 100%);
  background-size: auto, 300% 300%, cover;
  background-position:
    center,
    calc(((50% - var(--background-x)) * 3) + 50%) calc(((50% - var(--background-y)) * 3) + 50%),
    center;
  background-blend-mode: overlay, soft-light;
  -webkit-mask-image: var(--foil-map-r);
  mask-image: var(--foil-map-r);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: soft-light;
  filter: brightness(calc(0.75 + var(--pointer-from-center) * 0.5)) saturate(1.15);
}
/* The gloss, and the milky sheen that washes over at a glancing angle. The
   far end stays a mid grey so nothing goes black. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-rgb .glare {
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 0.6) 4%, hsla(0, 0%, 85%, 0.25) 30%, hsla(0, 0%, 40%, 0.4) 100%);
  mix-blend-mode: overlay;
  filter: none;
  opacity: calc(var(--card-opacity) * 0.5);
}
/* The relief: the fingerprint field (the etch map blurred to satin,
   --etch-soft) lifts where the light falls; Mew and the frame are cut out
   of it, so they stay smooth against the textured field. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-rgb.has-etch-map .glare::after {
  background: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(0, 0%, 100%) 0%, hsl(0, 0%, 62%) 25%, hsl(0, 0%, 30%) 65%, hsl(0, 0%, 18%) 100%);
  -webkit-mask-image: var(--etch-soft, var(--etch-map));
  mask-image: var(--etch-soft, var(--etch-map));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: screen;
  filter: none;
  opacity: 0.28;
}

/* ---- Classic Collection --------------------------------------------------------
   One new stock for all 30 reprints, not a copy of each original's holo:
   the whole card is foil, the border is gold (printed on the scans; the foil
   makes it glitter), and over everything sit dense round confetti glitter,
   sparse puffy five-point stars in flat colours, and a fine crosshatch
   emboss. Dots and stars twinkle while the colour cycles in broad bands.
   The stamp is flat ink: has-stamp in maps.css cuts it out. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-classic .foil {
  --shift: 3px;
  background-image:
    var(--c30-confetti),
    var(--c30-confetti),
    repeating-linear-gradient(0deg,
      hsl(330, 90%, 72%) 0%, hsl(20, 95%, 66%) 6%, hsl(50, 100%, 66%) 12%,
      hsl(110, 80%, 64%) 18%, hsl(190, 90%, 70%) 24%, hsl(270, 80%, 74%) 30%, hsl(330, 90%, 72%) 36%);
  background-size: 30% auto, 30% auto, 200% 400%;
  background-position:
    calc(var(--seed-x) * 100% + (var(--pointer-from-left) - 0.5) * var(--shift))
      calc(var(--seed-y) * 100% + (var(--pointer-from-top) - 0.5) * var(--shift)),
    calc(var(--seed-x) * 100% + 37% - (var(--pointer-from-left) - 0.5) * var(--shift))
      calc(var(--seed-y) * 100% + 61% - (var(--pointer-from-top) - 0.5) * var(--shift)),
    0% min(100%, calc(var(--background-y) * 2));
  background-blend-mode: lighten, multiply;
  filter: brightness(calc(0.72 + var(--pointer-from-center) * 0.3)) contrast(1.25) saturate(1.3);
  mix-blend-mode: color-dodge;
}
/* The puffy stars, each on its own phase through the spectrum. Kept at mid
   brightness so the colour dodge leaves them coloured, not white. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-classic .foil::before {
  background-image: var(--c30-classic-stars);
  background-size: 60% auto;
  background-position: calc(var(--seed-y) * 100%) calc(var(--seed-x) * 100%);
  mix-blend-mode: normal;
  filter: hue-rotate(calc((var(--pointer-from-left) - var(--pointer-from-top)) * 200deg)) brightness(0.85) saturate(1.8);
}
/* Crosshatch emboss, and the light falling off away from the pointer. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-classic .foil::after {
  background-image:
    repeating-linear-gradient(45deg, hsla(0, 0%, 100%, 0.18) 0px, transparent 1px, transparent 3px),
    repeating-linear-gradient(-45deg, hsla(0, 0%, 100%, 0.18) 0px, transparent 1px, transparent 3px),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      #fff 0%, #8c8c8c 40%, #3a3a3a 100%);
  background-size: auto, auto, cover;
  background-blend-mode: normal, normal;
  mix-blend-mode: multiply;
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-classic .glare {
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(45, 100%, 95%, 0.9) 5%, hsla(40, 30%, 55%, 0.45) 40%, hsla(30, 30%, 12%, 0.85) 110%);
  mix-blend-mode: overlay;
  filter: none;
  opacity: calc(var(--card-opacity) * 0.75);
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-classic .glare::after {
  background: none;
}