/*
 * Holo family xy-secret-silver: XY silver secret rare: Dialga-EX 122/119 (Phantom Forces).
 *
 * Cards: the faces js/fam/xy-secret-silver.js claims; it adds `fam-xy-secret-silver` to them, and every rule below is scoped to it.
 * Specificity: body.fx-holo.fx-holo.fx-holo .tcg.era-xy.(x5).fam-xy-secret-silver.(x4) beats the era sheets (this sheet loads
 * after them); keep the era's :not(.lit):not(.settling) when overriding a rest-state rule. Reset every paint property
 * the era recipe and the shared sheets set on each layer you use, pseudo layers and `.glare::after` included.
 * Research, photos and reviews: /mnt/project-files/holo-remaster/xy-secret-silver/.
 *
 * What the real card does (photos in /mnt/project-files/holo-remaster/xy-secret-silver/refs/): a silver mirror, high
 * contrast, in tall VERTICAL bands: dark grey, then a sharp saturated rainbow stripe, then bright white silver, three or
 * four times across the card, the bands and stripes uneven in width and strength, sliding sideways as it turns. Engraved edge to edge (TCG Live's etch: contour lines,
 * octagon rings round the Energy symbols): the flat ridges mirror the band, the grooves between them do not, so a
 * groove reads as a thin dark line across a bright band and a thin light one across a dark band, and the stripes break
 * into coloured strokes. The line art of Dialga is printed in a lighter silver and takes the same foil; the black
 * lettering and the coloured symbols are ink.
 *
 * Layers: `.foil` (hard-light; rest and lit) is the silver: the bands, the rainbow stripe on the same period, a slower
 * broad band the other way and the lamp's pool, and over all of it the grooves held between two greys
 * (`--xss-groove-ceil` darkens, `--xss-groove-floor` lightens), cut to the ink; dark bands darken the scan (metal on a
 * light scan must, SKILL.md), bright ones lighten it. `.foil::before` (lit) the ridges of the bright bands catching the
 * lamp round the pointer; `.glare` (lit) the lamp's soft hot spot in overlay, its far end clear.
 */

/* ---- Shared values ------------------------------------------------------------------------------------- */
body.fx-holo.fx-holo.fx-holo .tcg.era-xy.era-xy.era-xy.era-xy.era-xy.fam-xy-secret-silver.fam-xy-secret-silver.fam-xy-secret-silver.fam-xy-secret-silver {
  /* seven uneven bands over two card widths (one repeat of the 200% background), so three or four show at once, like
     the photos: each a dark core of its own depth, a ramp to bright silver, a bright band of its own width and a soft
     fall into the next core. A rainbow stripe rides every ramp, each its own width and strength, its red on the dark
     band's edge (a red stroke cut off from the dark band by a lighter groove reads as a dark speck) and its blue and
     violet light enough never to darken the scan into specks. scripts/fam/xy-secret-silver/make_bands.py writes
     --xss-bands, --xss-stripe, --xss-lit and --xss-sweep-pos; change them there, not here. */
  --xss-bands: repeating-linear-gradient(90deg,
    hsl(212, 8%, 24%) 0%, hsl(212, 8%, 26%) 1.3%, hsl(212, 8%, 29%) 2.6%, hsl(212, 8%, 32%) 3.38%,
    hsl(220, 10%, 60%) 4.63%, hsl(225, 14%, 82%) 5.46%, hsl(225, 18%, 92%) 5.98%, hsl(0, 0%, 96%) 7.19%,
    hsl(40, 10%, 94%) 8.92%, hsl(210, 6%, 88%) 10.4%, hsl(212, 7%, 74%) 10.61%, hsl(212, 8%, 50%) 10.84%,
    hsl(212, 8%, 36%) 11.13%, hsl(212, 8%, 31%) 11.57%, hsl(212, 8%, 28%) 13%, hsl(212, 8%, 30%) 14.6%,
    hsl(212, 8%, 33%) 16.2%, hsl(212, 8%, 36%) 17.16%, hsl(220, 10%, 60%) 18.02%, hsl(225, 14%, 82%) 18.6%,
    hsl(225, 18%, 91%) 19.24%, hsl(0, 0%, 93%) 21.12%, hsl(40, 10%, 91%) 23.64%, hsl(210, 6%, 88%) 25.8%,
    hsl(212, 7%, 74%) 26.06%, hsl(212, 8%, 50%) 26.34%, hsl(212, 8%, 33%) 26.7%, hsl(212, 8%, 28%) 27.24%,
    hsl(212, 8%, 25%) 29%, hsl(212, 8%, 27%) 30.2%, hsl(212, 8%, 30%) 31.4%, hsl(212, 8%, 33%) 32.12%,
    hsl(220, 10%, 60%) 33.22%, hsl(225, 14%, 82%) 33.96%, hsl(225, 18%, 92%) 34.44%, hsl(0, 0%, 97%) 35.58%,
    hsl(40, 10%, 95%) 37.21%, hsl(210, 6%, 88%) 38.6%, hsl(212, 7%, 74%) 38.79%, hsl(212, 8%, 50%) 39.01%,
    hsl(212, 8%, 31%) 39.27%, hsl(212, 8%, 26%) 39.68%, hsl(212, 8%, 23%) 41%, hsl(212, 8%, 25%) 42.75%,
    hsl(212, 8%, 28%) 44.5%, hsl(212, 8%, 31%) 45.55%, hsl(220, 10%, 60%) 46.99%, hsl(225, 14%, 82%) 47.95%,
    hsl(225, 18%, 92%) 48.65%, hsl(0, 0%, 96%) 50.42%, hsl(40, 10%, 94%) 52.88%, hsl(210, 6%, 88%) 55%,
    hsl(212, 7%, 74%) 55.28%, hsl(212, 8%, 50%) 55.59%, hsl(212, 8%, 35%) 55.98%, hsl(212, 8%, 30%) 56.58%,
    hsl(212, 8%, 27%) 58.5%, hsl(212, 8%, 29%) 59.9%, hsl(212, 8%, 32%) 61.3%, hsl(212, 8%, 35%) 62.14%,
    hsl(220, 10%, 60%) 62.96%, hsl(225, 14%, 82%) 63.5%, hsl(225, 18%, 90%) 64.06%, hsl(0, 0%, 92%) 65.56%,
    hsl(40, 10%, 90%) 67.62%, hsl(210, 6%, 88%) 69.38%, hsl(212, 7%, 74%) 69.63%, hsl(212, 8%, 50%) 69.91%,
    hsl(212, 8%, 33%) 70.25%, hsl(212, 8%, 28%) 70.78%, hsl(212, 8%, 25%) 72.5%, hsl(212, 8%, 27%) 74%,
    hsl(212, 8%, 30%) 75.5%, hsl(212, 8%, 33%) 76.4%, hsl(220, 10%, 60%) 77.55%, hsl(225, 14%, 82%) 78.32%,
    hsl(225, 18%, 92%) 78.92%, hsl(0, 0%, 95%) 80.48%, hsl(40, 10%, 93%) 82.65%, hsl(210, 6%, 88%) 84.5%,
    hsl(212, 7%, 74%) 84.74%, hsl(212, 8%, 50%) 85.01%, hsl(212, 8%, 34%) 85.34%, hsl(212, 8%, 29%) 85.85%,
    hsl(212, 8%, 26%) 87.5%, hsl(212, 8%, 28%) 88.75%, hsl(212, 8%, 31%) 90%, hsl(212, 8%, 34%) 90.75%,
    hsl(220, 10%, 60%) 91.71%, hsl(225, 14%, 82%) 92.35%, hsl(225, 18%, 92%) 92.85%, hsl(0, 0%, 94%) 94.1%,
    hsl(40, 10%, 92%) 95.85%, hsl(210, 6%, 88%) 97.35%, hsl(212, 7%, 74%) 97.56%, hsl(212, 8%, 50%) 97.8%,
    hsl(212, 8%, 32%) 98.09%, hsl(212, 8%, 27%) 98.54%, hsl(212, 8%, 24%) 100%);
  --xss-stripe: repeating-linear-gradient(90deg,
    hsla(0, 88%, 58%, 0) 0%, hsla(0, 88%, 58%, 0) 2.86%, hsla(0, 88%, 58%, 0.85) 3.2%, hsla(24, 95%, 58%, 0.85) 3.5%,
    hsla(50, 98%, 56%, 0.85) 3.81%, hsla(105, 72%, 52%, 0.85) 4.11%, hsla(180, 85%, 50%, 0.85) 4.41%, hsla(215, 92%, 63%, 0.85) 4.72%,
    hsla(262, 75%, 69%, 0.85) 5.02%, hsla(262, 75%, 69%, 0) 5.46%, hsla(0, 88%, 58%, 0) 16.8%, hsla(0, 88%, 58%, 0.6) 17.03%,
    hsla(24, 95%, 58%, 0.6) 17.24%, hsla(50, 98%, 56%, 0.6) 17.46%, hsla(105, 72%, 52%, 0.6) 17.67%, hsla(180, 85%, 50%, 0.6) 17.88%,
    hsla(215, 92%, 63%, 0.6) 18.09%, hsla(262, 75%, 69%, 0.6) 18.3%, hsla(262, 75%, 69%, 0) 18.6%, hsla(0, 88%, 58%, 0) 31.66%,
    hsla(0, 88%, 58%, 0.8) 31.96%, hsla(24, 95%, 58%, 0.8) 32.23%, hsla(50, 98%, 56%, 0.8) 32.5%, hsla(105, 72%, 52%, 0.8) 32.77%,
    hsla(180, 85%, 50%, 0.8) 33.04%, hsla(215, 92%, 63%, 0.8) 33.3%, hsla(262, 75%, 69%, 0.8) 33.57%, hsla(262, 75%, 69%, 0) 33.96%,
    hsla(0, 88%, 58%, 0) 44.95%, hsla(0, 88%, 58%, 0.9) 45.34%, hsla(24, 95%, 58%, 0.9) 45.69%, hsla(50, 98%, 56%, 0.9) 46.04%,
    hsla(105, 72%, 52%, 0.9) 46.39%, hsla(180, 85%, 50%, 0.9) 46.74%, hsla(215, 92%, 63%, 0.9) 47.09%, hsla(262, 75%, 69%, 0.9) 47.45%,
    hsla(262, 75%, 69%, 0) 47.95%, hsla(0, 88%, 58%, 0) 61.8%, hsla(0, 88%, 58%, 0.6) 62.02%, hsla(24, 95%, 58%, 0.6) 62.22%,
    hsla(50, 98%, 56%, 0.6) 62.42%, hsla(105, 72%, 52%, 0.6) 62.62%, hsla(180, 85%, 50%, 0.6) 62.82%, hsla(215, 92%, 63%, 0.6) 63.02%,
    hsla(262, 75%, 69%, 0.6) 63.21%, hsla(262, 75%, 69%, 0) 63.5%, hsla(0, 88%, 58%, 0) 75.92%, hsla(0, 88%, 58%, 0.75) 76.23%,
    hsla(24, 95%, 58%, 0.75) 76.51%, hsla(50, 98%, 56%, 0.75) 76.79%, hsla(105, 72%, 52%, 0.75) 77.07%, hsla(180, 85%, 50%, 0.75) 77.36%,
    hsla(215, 92%, 63%, 0.75) 77.64%, hsla(262, 75%, 69%, 0.75) 77.92%, hsla(262, 75%, 69%, 0) 78.32%, hsla(0, 88%, 58%, 0) 90.35%,
    hsla(0, 88%, 58%, 0.65) 90.61%, hsla(24, 95%, 58%, 0.65) 90.84%, hsla(50, 98%, 56%, 0.65) 91.08%, hsla(105, 72%, 52%, 0.65) 91.31%,
    hsla(180, 85%, 50%, 0.65) 91.55%, hsla(215, 92%, 63%, 0.65) 91.78%, hsla(262, 75%, 69%, 0.65) 92.01%, hsla(262, 75%, 69%, 0) 92.35%,
    hsla(262, 75%, 69%, 0) 100%);
  /* about one stripe passes a point as the pointer crosses the card (rainbow_motion.py: median 1.1, limit 1.5) */
  --xss-sweep-pos: calc(50% + (var(--background-x) - 50%) * 1.1 + (var(--background-y) - 50%) * 0.1) 0;
  /* the broad reflection, most of a card wide, drifting the other way: some bands darker, some brighter */
  --xss-env: repeating-linear-gradient(90deg,
    hsl(0, 0%, 100%) 0%, hsl(0, 0%, 92%) 10%, hsl(0, 0%, 80%) 20%, hsl(0, 0%, 93%) 30%, hsl(0, 0%, 100%) 40%);
  --xss-env-pos: calc(50% - (var(--background-x) - 50%) * 1.2) 0;
  /* where the band is bright (over about half grey): the only place the lamp lights the ridges */
  --xss-lit: repeating-linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5.2%, rgba(0, 0, 0, 1) 5.72%, rgba(0, 0, 0, 1) 10.14%,
    rgba(0, 0, 0, 0) 10.56%, rgba(0, 0, 0, 0) 18.28%, rgba(0, 0, 0, 1) 18.92%, rgba(0, 0, 0, 1) 25.48%,
    rgba(0, 0, 0, 0) 25.99%, rgba(0, 0, 0, 0) 33.72%, rgba(0, 0, 0, 1) 34.2%, rgba(0, 0, 0, 1) 38.36%,
    rgba(0, 0, 0, 0) 38.74%, rgba(0, 0, 0, 0) 47.6%, rgba(0, 0, 0, 1) 48.3%, rgba(0, 0, 0, 1) 54.65%,
    rgba(0, 0, 0, 0) 55.21%, rgba(0, 0, 0, 0) 63.22%, rgba(0, 0, 0, 1) 63.78%, rgba(0, 0, 0, 1) 69.1%,
    rgba(0, 0, 0, 0) 69.55%, rgba(0, 0, 0, 0) 78.02%, rgba(0, 0, 0, 1) 78.62%, rgba(0, 0, 0, 1) 84.2%,
    rgba(0, 0, 0, 0) 84.68%, rgba(0, 0, 0, 0) 92.1%, rgba(0, 0, 0, 1) 92.6%, rgba(0, 0, 0, 1) 97.1%,
    rgba(0, 0, 0, 0) 97.5%, rgba(0, 0, 0, 0) 100%);
  /* the lamp: brightest round the pointer, never under 96% (a thumb on the text box must not grey the art) */
  --xss-near: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(0, 0%, 100%) 0%, hsl(0, 0%, 99%) 30%, hsl(0, 0%, 97%) 70%, hsl(0, 0%, 96%) 100%);
}

/* ---- Reset: what base, maps, rarities, realism, sv-fullart and xy-fullart put on these layers ------------- */
body.fx-holo.fx-holo.fx-holo .tcg.era-xy.era-xy.era-xy.era-xy.era-xy.fam-xy-secret-silver.fam-xy-secret-silver.fam-xy-secret-silver.fam-xy-secret-silver .foil {
  /* the grooves: no darker than the floor, no brighter than the ceiling, whatever the band; between the two they follow
     it, so a groove is always on the same side of dark as the ridges round it and never breaks a band into specks */
  background-image: var(--xss-groove-floor), var(--xss-groove-ceil), var(--xss-near), var(--xss-env), var(--xss-stripe),
    var(--xss-bands);
  background-size: 100% 100%, 100% 100%, 100% 100%, 200% 100%, 200% 100%, 200% 100%;
  background-position: center, center, center, var(--xss-env-pos), var(--xss-sweep-pos), var(--xss-sweep-pos);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, repeat;
  background-blend-mode: lighten, darken, multiply, multiply, normal, normal;
  mix-blend-mode: hard-light;
  filter: saturate(1.1);
  clip-path: none;
  border-radius: 0;
  -webkit-mask-image: var(--art), var(--xss-ink);
  -webkit-mask-composite: source-in, source-over;
  mask-image: var(--art), var(--xss-ink);
  mask-composite: intersect, add;
  mask-mode: 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;
  opacity: calc((0.7 + var(--card-opacity) * 0.25) * var(--foil-strength, 1));
}
/* at rest: the silver and its engraving, the stripes a soft pastel (a scan of the card shows them so) */
body.fx-holo.fx-holo.fx-holo .tcg.era-xy.era-xy.era-xy.era-xy.era-xy.fam-xy-secret-silver.fam-xy-secret-silver.fam-xy-secret-silver.fam-xy-secret-silver:not(.lit):not(.settling) .foil {
  filter: saturate(0.45);
  opacity: calc(0.7 * var(--foil-strength, 1));
}
body.fx-holo.fx-holo.fx-holo .tcg.era-xy.era-xy.era-xy.era-xy.era-xy.fam-xy-secret-silver.fam-xy-secret-silver.fam-xy-secret-silver.fam-xy-secret-silver .foil::before,
body.fx-holo.fx-holo.fx-holo .tcg.era-xy.era-xy.era-xy.era-xy.era-xy.fam-xy-secret-silver.fam-xy-secret-silver.fam-xy-secret-silver.fam-xy-secret-silver .foil::after,
body.fx-holo.fx-holo.fx-holo .tcg.era-xy.era-xy.era-xy.era-xy.era-xy.fam-xy-secret-silver.fam-xy-secret-silver.fam-xy-secret-silver.fam-xy-secret-silver .glare::after {
  background-image: none;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: normal;
  mix-blend-mode: normal;
  filter: none;
  clip-path: none;
  border-radius: 0;
  -webkit-mask-image: none;
  mask-image: none;
  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: 1;
}

/* ---- The engraving catching the lamp: white on the etched lines round the pointer --------------------------- */
body.fx-holo.fx-holo.fx-holo .tcg.era-xy.era-xy.era-xy.era-xy.era-xy.fam-xy-secret-silver.fam-xy-secret-silver.fam-xy-secret-silver.fam-xy-secret-silver .foil::before {
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 0.5) 0%, hsla(0, 0%, 100%, 0.24) 18%, hsla(0, 0%, 100%, 0.06) 40%, hsla(0, 0%, 100%, 0) 60%);
  mix-blend-mode: screen;
  /* the ridges of the bright bands only: a dark band lit on its ridges alone would leave its grooves as dark specks */
  -webkit-mask-image: var(--xss-lit), var(--xss-etch);
  -webkit-mask-composite: source-in, source-over;
  mask-image: var(--xss-lit), var(--xss-etch);
  mask-composite: intersect, add;
  -webkit-mask-size: 200% 100%, 100% 100%;
  mask-size: 200% 100%, 100% 100%;
  -webkit-mask-position: var(--xss-sweep-pos), center;
  mask-position: var(--xss-sweep-pos), center;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  opacity: calc(var(--card-opacity) * (0.6 + var(--pointer-from-center) * 0.4));
}

/* ---- The lamp: a soft hot spot in overlay, its far end clear (never a dark side) ---------------------------- */
body.fx-holo.fx-holo.fx-holo .tcg.era-xy.era-xy.era-xy.era-xy.era-xy.fam-xy-secret-silver.fam-xy-secret-silver.fam-xy-secret-silver.fam-xy-secret-silver .glare {
  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.11) 25%, hsla(0, 0%, 100%, 0) 55%);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: normal;
  mix-blend-mode: overlay;
  filter: none;
  clip-path: none;
  border-radius: 0;
  -webkit-mask-image: var(--art);
  -webkit-mask-composite: source-over;
  mask-image: var(--art);
  mask-composite: add;
  mask-mode: alpha;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: calc(var(--card-opacity) * 0.7 * var(--foil-strength, 1));
}
