/*
 * Sun & Moon era: window holo, plain-card glare and the reverse holo.
 *
 * Draws: sm-holo (`foil-holo sm-holo`, plus `sm-late` from Lost Thunder on),
 * the era-wide variables, the plain Rare's glare, and the reverse holo
 * (`rev-sv rev-sm rev-<type>`, tiles in assets/foil/sm-reverse/).
 * Classes come from smPattern() / foilExtras() (js/sm-foil.js, js/foil-maps.js);
 * `era-sm` marks every Sun & Moon print. Research and photos live in
 * .claude/skills/card-textures/reference/sun-moon-holo-reverse.md and
 * /mnt/project-files/sun-moon/texture-refs/f1-holo-reverse.
 *
 * Specificity: repeat `era-sm` five times in every selector, like swsh.css,
 * 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-sm.era-sm.era-sm.era-sm.era-sm {
  --sm-ice: url("/assets/foil/celebration/cracked-ice.webp");
  --sm-flecks: url("/assets/foil/glitter-fine.webp");
  --sm-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%);
  --seed-pos: calc(var(--seed-x, 0.5) * 100%) calc(var(--seed-y, 0.5) * 100%);
}

/* ---- Shared shape of the window holo -----------------------------------------
   Clear what the older recipes paint on the pseudo layers; each variant sets
   its own. */
body.fx-holo.fx-holo.fx-holo .tcg.era-sm.era-sm.era-sm.era-sm.era-sm.sm-holo .foil {
  background-repeat: repeat;
  opacity: calc((0.42 + var(--card-opacity) * 0.58) * var(--foil-strength, 1));
}
body.fx-holo.fx-holo.fx-holo .tcg.era-sm.era-sm.era-sm.era-sm.era-sm.sm-holo:not(.lit):not(.settling) .foil {
  opacity: calc(0.2 * var(--foil-strength, 1));
}
body.fx-holo.fx-holo.fx-holo .tcg.era-sm.era-sm.era-sm.era-sm.era-sm.sm-holo .foil::before,
body.fx-holo.fx-holo.fx-holo .tcg.era-sm.era-sm.era-sm.era-sm.era-sm.sm-holo .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;
}
body.fx-holo.fx-holo.fx-holo .tcg.era-sm.era-sm.era-sm.era-sm.era-sm.sm-holo .glare::after {
  background: none;
  -webkit-mask-image: none;
  mask-image: none;
  mix-blend-mode: normal;
  filter: none;
  opacity: 1;
}

/* ---- Rare Holo, Sun & Moon to Celestial Storm: shattered rainbow ----------------
   Photos (Gigalith sm1 71, Zygarde sm3 100, Raichu sm3 41, Heatran sm7 98):
   the art background is foil and the Pokémon is print (the map). The window
   goes saturated rainbow, blue-violet one side and yellow-green the other,
   broken into crystalline facets that each catch the light on their own,
   with a fine white sparkle under it. No brushed lines, no bars.
   Facets are two copies of the cracked-ice tile sliding against each other
   under a wide rainbow, colour-dodged onto the print. */
body.fx-holo.fx-holo.fx-holo .tcg.era-sm.era-sm.era-sm.era-sm.era-sm.sm-holo .foil {
  background-image:
    var(--sm-ice),
    var(--sm-ice),
    linear-gradient(115deg, var(--sm-spectrum), var(--sm-spectrum));
  background-position:
    calc(var(--background-x) * 0.6) calc(var(--background-y) * 0.6),
    calc(100% - var(--background-x) * 0.8) calc(100% - var(--background-y) * 0.5),
    clamp(0%, calc(((50% - var(--background-x)) * 1.4) + 50%), 100%) clamp(0%, calc(((50% - var(--background-y)) * 0.9) + 50%), 100%);
  background-size: 210% auto, 150% auto, 300% 300%;
  background-blend-mode: multiply, screen, normal;
  filter: brightness(0.58) contrast(1.5) saturate(1.8) contrast(0.8);
  mix-blend-mode: color-dodge;
}
body.fx-holo.fx-holo.fx-holo .tcg.era-sm.era-sm.era-sm.era-sm.era-sm.sm-holo:not(.lit):not(.settling) .foil {
  filter: brightness(0.85) contrast(1.2) saturate(0.7) contrast(0.8);
}
/* Sparkle: pinpoint flecks, screened, so they only ever add light. */
body.fx-holo.fx-holo.fx-holo .tcg.era-sm.era-sm.era-sm.era-sm.era-sm.sm-holo .foil::before {
  background-image: var(--sm-flecks);
  background-size: 70% auto;
  background-position: var(--seed-pos);
  mix-blend-mode: screen;
  filter: brightness(1.3) contrast(1.6);
  opacity: calc(0.25 + var(--pointer-from-center) * 0.3);
}
/* A soft pool of light under the pointer; the far side stays grey, never dark. */
body.fx-holo.fx-holo.fx-holo .tcg.era-sm.era-sm.era-sm.era-sm.era-sm.sm-holo .foil::after {
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 62%, 0.8) 0%, hsla(0, 0%, 54%, 0.6) 40%, hsla(0, 0%, 50%, 0.9) 100%);
  background-size: cover;
  mix-blend-mode: luminosity;
  filter: brightness(0.8) contrast(1.3);
}
body.fx-holo.fx-holo.fx-holo .tcg.era-sm.era-sm.era-sm.era-sm.era-sm.sm-holo .glare {
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(180, 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.5);
  opacity: calc(var(--card-opacity) * 0.45);
}

/* ---- Rare Holo, Lost Thunder to Cosmic Eclipse: satin ---------------------------
   Photos (Naganadel sm8 108, Zeraora sm9 52, Chandelure sm11 30): the window
   is nearly the print; tilted, a soft pastel pool (pink, pale green) drifts
   over it and a little sheen rides the highlights. No shards. */
body.fx-holo.fx-holo.fx-holo .tcg.era-sm.era-sm.era-sm.era-sm.era-sm.sm-holo.sm-late .foil {
  background-image:
    radial-gradient(ellipse 60% 45% at calc(var(--pointer-x) * 0.8 + 10%) calc(var(--pointer-y) * 0.6 + 15%),
      hsl(330, 55%, 15%) 0%, hsla(330, 55%, 15%, 0) 75%),
    linear-gradient(115deg, #000 30%, hsl(150, 50%, 24%) 50%, #000 70%),
    linear-gradient(115deg, #000, #000);
  background-position: center, clamp(0%, calc(100% - var(--background-x)), 100%) 50%, center;
  background-size: 100% 100%, 260% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-blend-mode: screen, screen, normal;
  filter: saturate(1.1);
  mix-blend-mode: screen;
}
body.fx-holo.fx-holo.fx-holo .tcg.era-sm.era-sm.era-sm.era-sm.era-sm.sm-holo.sm-late:not(.lit):not(.settling) .foil {
  filter: saturate(0.6);
}
body.fx-holo.fx-holo.fx-holo .tcg.era-sm.era-sm.era-sm.era-sm.era-sm.sm-holo.sm-late .foil::before {
  opacity: calc(0.05 + var(--pointer-from-center) * 0.08);
}
/* No luminosity pool here: it would pull dark art up to mid grey. */
body.fx-holo.fx-holo.fx-holo .tcg.era-sm.era-sm.era-sm.era-sm.era-sm.sm-holo.sm-late .foil::after {
  background-image: none;
}
body.fx-holo.fx-holo.fx-holo .tcg.era-sm.era-sm.era-sm.era-sm.era-sm.sm-holo.sm-late .glare {
  opacity: calc(var(--card-opacity) * 0.35);
}

/* ---- Plain cards: a glare that reads ---------------------------------------------
   Not foil. The standard overlay glare, its dark end kept at 0.3 so the
   thumb pose does not shade the card (same call as swsh.css). */
body.fx-holo.fx-holo.fx-holo .tcg.foil-none.era-sm .glare {
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 0.8) 10%,
    hsla(0, 0%, 100%, 0.65) 20%,
    hsla(0, 0%, 0%, 0.3) 90%
  );
}

/* ---- Reverse holo: the type-symbol mirror -----------------------------------------
   TCG Live's reverse maps and the photos (Crabominable sm1 43, Trumbeak sm1
   107, Pangoro sm2 82, Wailord sm2 30): everything but the art window, the
   name bar and the attack text is one smooth mirror, the type's small symbol
   tiled over the right of the body and the borders and a giant one lower
   left, lighter than the print between them; a broad rainbow band (pink,
   yellow, green, cyan) sweeps across it as the card turns. The pattern and
   mask are sv-reverse.css's (`rev-sv`, --rev-pattern, one tile per type in
   assets/foil/sm-reverse/); this sheet sets the light: the band is a
   spectrum, not sv-reverse's white streak. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-reverse.rev-sm.rev-sm.rev-sm.rev-sm.rev-sm .foil {
  background-image:
    var(--foil-tex),
    linear-gradient(-52deg, #000 30%, hsl(330, 80%, 70%) 37%, hsl(50, 90%, 65%) 43%,
      hsl(140, 80%, 62%) 49%, hsl(190, 90%, 66%) 55%, hsl(260, 80%, 70%) 61%, #000 68%),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      #fff 0%, hsl(0, 0%, 55%) 35%, hsl(0, 0%, 30%) 100%);
  background-blend-mode: multiply, screen, normal;
  background-size: contain, 190% 190%, 100% 100%;
  background-position:
    center center,
    calc(100% * var(--pointer-from-left)) calc(100% * var(--pointer-from-top)),
    center center;
  filter: brightness(0.6) contrast(1.25) saturate(1.1) contrast(0.8);
}
/* On a white or pale card colour-dodge has nothing to lift (Trumbeak's text
   box is white, and the photo shows the band there in pastel): the same band
   again, pale, multiplied, so it tints light print and barely touches dark. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-reverse.rev-sm.rev-sm.rev-sm.rev-sm.rev-sm .foil::before {
  background-image: linear-gradient(-52deg, transparent 30%, hsla(330, 85%, 82%, 1) 37%, hsla(50, 95%, 80%, 1) 43%,
    hsla(140, 80%, 80%, 1) 49%, hsla(190, 90%, 82%, 1) 55%, hsla(260, 80%, 84%, 1) 61%, transparent 68%);
  background-size: 190% 190%;
  background-position: calc(100% * var(--pointer-from-left)) calc(100% * var(--pointer-from-top));
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  opacity: calc(0.55 + var(--pointer-from-center) * 0.35);
}

/* Trainers: the text box is brushed silver, which colour-dodge flattens to
   white (Big Malasada, Crushing Hammer). Overlay keeps the silver, shows the
   Poké Ball tiling as lighter and darker balls on it and lets the band tint it
   in pastel; the pale multiplied band is nearly off so it does not colour the text. */
body.fx-holo.fx-holo.fx-holo .tcg.foil-reverse.rev-sm.rev-sm.rev-sm.rev-sm.rev-sm.rev-trainer .foil {
  mix-blend-mode: overlay;
  filter: contrast(1.1) saturate(0.6);
}
body.fx-holo.fx-holo.fx-holo .tcg.foil-reverse.rev-sm.rev-sm.rev-sm.rev-sm.rev-sm.rev-trainer .foil::before {
  opacity: 0.1;
}

/* Basic Energy reverse (Shining Legends' pack Energy; `rev-energy`). The card is
   a coloured field with one big orb; the foil covers everything but the orb and
   the title and footer bars, so it needs its own mask, not a Pokémon's tile.
   The type's symbols are the field of that type's Pokémon tile, repeated (make_sm_energy_reverse.py). */
body.fx-holo.fx-holo.fx-holo .tcg.foil-reverse.rev-sm.rev-sm.rev-sm.rev-sm.rev-sm.rev-energy .foil {
  -webkit-mask-image: var(--art),
    radial-gradient(ellipse 25.5% 18.5% at 50% 50%, transparent 97%, #000 100%),
    linear-gradient(180deg, transparent 0 6.8%, #000 6.8% 94.2%, transparent 94.2% 100%);
  mask-image: var(--art),
    radial-gradient(ellipse 25.5% 18.5% at 50% 50%, transparent 97%, #000 100%),
    linear-gradient(180deg, transparent 0 6.8%, #000 6.8% 94.2%, transparent 94.2% 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-composite: intersect, intersect;
  -webkit-mask-size: contain, 100% 100%, 100% 100%;
  mask-size: contain, 100% 100%, 100% 100%;
  -webkit-mask-position: center, center, center;
  mask-position: center, center, center;
  --foil-tex: var(--energy-tile);
  background-size: calc(100% * 45 / 367) auto, 190% 190%, 100% 100%;
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: 0 0, calc(100% * var(--pointer-from-left)) calc(100% * var(--pointer-from-top)), center center;
}