/* EGGPOP foil. Technique after simeydotme/pokemon-cards-css (pointer -> custom properties -> layered
   gradients with blend modes), written from scratch for stickers: the foil is masked to the printed
   ink (legendary) or to the die-cut border (neon). Four foils, one per direction. */
.foil{position:relative;display:block;--mx:50%;--my:50%;--bx:50%;--by:50%;--o:.85;--rx:0deg;--ry:0deg;--d:0;
  transform:perspective(800px) rotateY(var(--rx)) rotateX(var(--ry));will-change:transform}
.foil>svg{display:block;width:100%;height:auto}
.foil>i{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:var(--mask) center/100% 100% no-repeat;mask:var(--mask) center/100% 100% no-repeat}
.foil>.glare{mix-blend-mode:overlay;opacity:calc(var(--o) * .9);
  background:radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(255,255,255,.9) 6%,rgba(255,255,255,.55) 22%,rgba(0,0,0,.4) 88%)}

/* A · dot foil: the rainbow only shows through a halftone grid, like foil under riso dots */
.foil.dots>.shine{mix-blend-mode:color-dodge;opacity:var(--o);filter:brightness(.72) contrast(1.5) saturate(1.5);
  background:repeating-linear-gradient(118deg,#ff48b0 0%,#ffe800 6%,#00a95c 12%,#0078bf 18%,#9b6bff 24%,#ff48b0 30%) var(--bx) var(--by)/320% 320%;
  -webkit-mask:var(--mask) center/100% 100% no-repeat,radial-gradient(circle,#000 40%,transparent 47%) 0 0/3.2% 3.2%;
  -webkit-mask-composite:source-in;
  mask:var(--mask) center/100% 100% no-repeat,radial-gradient(circle,#000 40%,transparent 47%) 0 0/3.2% 3.2%;
  mask-composite:intersect}

/* B · prism: crossed shards that swing with the pointer, the candy-seal chase */
.foil.prism>.shine{mix-blend-mode:color-dodge;opacity:var(--o);filter:brightness(.7) contrast(1.6) saturate(1.4);
  background:
    repeating-linear-gradient(60deg,hsl(330 100% 70%) 0 3%,hsl(45 100% 65%) 6%,hsl(160 90% 55%) 9%,hsl(200 100% 65%) 12%,hsl(270 90% 72%) 15%,hsl(330 100% 70%) 18%) var(--bx) var(--by)/260% 260%,
    repeating-linear-gradient(-60deg,hsl(200 100% 65%) 0 4%,hsl(330 100% 70%) 8%,hsl(45 100% 65%) 12%,hsl(200 100% 65%) 16%) calc(100% - var(--bx)) var(--by)/260% 260%;
  background-blend-mode:difference}

/* C · sheen: wide soft bands, the classic holo, kept pale so the silhouette still reads */
.foil.sheen>.shine{mix-blend-mode:color-dodge;opacity:var(--o);filter:brightness(.8) contrast(1.25) saturate(1.2);
  background:repeating-linear-gradient(105deg,transparent 0%,hsl(10 100% 72%) 5%,hsl(50 100% 66%) 10%,hsl(150 70% 62%) 15%,hsl(215 100% 72%) 20%,transparent 26%) var(--bx) var(--by)/280% 280%}

/* D · hot foil: stamped gold with a travelling highlight and grit */
.foil.gold>.shine{mix-blend-mode:hard-light;opacity:calc(var(--o) * .8);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .8 0 0 0 3 -1.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/60px 60px,
    linear-gradient(115deg,#6f5220 0%,#e9d08a 22%,#fff6d2 34%,#b58a3c 48%,#f3dfa0 62%,#7d5d22 80%,#e2c77f 100%) var(--bx) var(--by)/300% 300%}

@media (prefers-reduced-motion:reduce){.foil{transform:none}}

/* AB grounds, one foil per rarity */
/* rare · silver fan prism (after the bikkuriman kaku prism): a white band and a faint rainbow slide across the scales */
.foil.fan>.shine{mix-blend-mode:screen;opacity:var(--o);
  background:repeating-linear-gradient(102deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 7%,rgba(255,255,255,.95) 9.5%,rgba(255,255,255,0) 12%) var(--bx) var(--by)/260% 260%,
    linear-gradient(115deg,rgba(210,225,255,.0) 30%,rgba(255,220,240,.35) 50%,rgba(210,255,240,.0) 70%) var(--bx) 50%/300% 100%}
/* legendary · cracked-ice prism: every shard catches a different colour as the rainbow moves over it */
.foil.crackle>.shine{mix-blend-mode:color-dodge;opacity:var(--o);filter:brightness(.75) contrast(1.5) saturate(1.6);
  background:repeating-linear-gradient(128deg,#ff48b0 0%,#ffe800 5%,#00a95c 10%,#0078bf 15%,#9b6bff 20%,#ff48b0 25%) var(--bx) var(--by)/280% 280%,
    repeating-linear-gradient(38deg,rgba(255,255,255,.0) 0 4%,rgba(255,255,255,.5) 5%,rgba(255,255,255,0) 6%) calc(100% - var(--bx)) var(--by)/240% 240%}
/* neon · rainbow edge: a hard rainbow running round the frame */
.foil.rainbow>.shine{mix-blend-mode:hard-light;opacity:calc(var(--o) * .85);
  background:linear-gradient(90deg,#ff48b0,#ffe800,#00d27a,#23a6ff,#a86bff,#ff48b0) var(--bx) 50%/300% 100%}