/* the page's layers over the kit's foil (brand/studio/holo.css draws the print's shine and glare; nothing there is changed).
   1. tilt (after spell.sh tilt-card): .tilt is the flat hit area, .tilt-card leans on the pointer or the gyroscope, .spot is the
      spotlight on prints that have no glare of their own.
   2. holo (after simeydotme/pokemon-cards-css): a bar layer and a scanline grating under the shine, a luminosity depth layer
      on the pointer, the glare and shine fading with the distance from the centre (--pfc, pointer from centre).
   3. beam (after border-beam, libraries.dev/beam): a light running round the frame ring of a neon or legendary, gold along the
      jackpot star rim, masked to the kit's own ring mask (--ring). */
@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --pfc { syntax: '<number>'; inherits: true; initial-value: 0; }

.tilt{display:block;touch-action:pan-y;-webkit-user-select:none;user-select:none;--mx:50%;--my:50%;--o:.55}
.tilt-card{position:relative;display:block;transform-style:preserve-3d;will-change:transform;transform:perspective(1200px)}
.tilt-card>svg,.tilt-card>.foil{display:block;width:100%;height:auto}
.tilt-card>.spot{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;border-radius:10%;transition:opacity .2s cubic-bezier(.23,1,.32,1);
  background:radial-gradient(circle 28% at var(--mx) var(--my),rgba(255,255,255,.55),rgba(255,255,255,.08) 52%,rgba(255,255,255,0) 84%),
    radial-gradient(circle 60% at var(--mx) var(--my),rgba(255,255,255,.22),rgba(255,255,255,.04) 58%,rgba(255,255,255,0) 78%)}
.tilt.is-hover .tilt-card>.spot{opacity:.9}

/* pokemon-cards-css layers, inside the kit's masked .shine so they never leave the foil area */
.foil>.shine{transform:translateZ(0)}
.foil>.shine::before,.foil>.shine::after{content:"";position:absolute;inset:0;pointer-events:none}
.foil>.shine::before{mix-blend-mode:hard-light;opacity:calc(.22 + .4 * var(--pfc, 0));filter:brightness(1.15) contrast(1.1);
  --bars:3%;--bar:rgba(255,255,255,.75);--bg:rgba(0,0,0,.0);
  background:
    repeating-linear-gradient(90deg,var(--bg) calc(var(--bars)*2),var(--bar) calc(var(--bars)*3),var(--bg) calc(var(--bars)*3.5),var(--bar) calc(var(--bars)*4),var(--bg) calc(var(--bars)*5),var(--bg) calc(var(--bars)*14)),
    repeating-linear-gradient(90deg,#000 0 1px,#666 1px 2px);
  background-position:calc(((50% - var(--bx)) * 1.65) + 50% + (var(--by) * .5)) var(--bx),center;
  background-size:200% 200%,auto;background-blend-mode:overlay}
.foil>.shine::after{mix-blend-mode:luminosity;opacity:calc(.12 + .3 * var(--pfc, 0));filter:brightness(.85) contrast(1.8);
  background:radial-gradient(farthest-corner circle at var(--mx) var(--my),hsla(0,0%,95%,.9) 0%,hsla(0,0%,78%,.15) 25%,hsl(0,0%,12%) 90%)}
.foil>.glare{opacity:calc(var(--o) * (.55 + .45 * var(--pfc, 0)))}

/* the beam: a bright arc travelling round the ring mask, then a long tail. colorful = the rainbow (neon), mono = a white light
   (legendary's cracked ice), gold = the hot foil glint (jackpot). */
.foil>.beam{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.9;
  -webkit-mask:var(--ring) center/100% 100% no-repeat;mask:var(--ring) center/100% 100% no-repeat;
  background:conic-gradient(from var(--beam) at 50% 50%,transparent 0 62%,rgba(255,255,255,.35) 80%,#fff 92%,transparent 100%);
  animation:beam 5.5s linear infinite}
.foil>.beam.colorful{background:conic-gradient(from var(--beam) at 50% 50%,transparent 0 55%,#ff48b0 66%,#ffe800 74%,#00d27a 82%,#23a6ff 90%,#fff 96%,transparent 100%)}
.foil>.beam.mono{opacity:.75;animation-duration:7s}
.foil>.beam.gold{mix-blend-mode:hard-light;opacity:.85;animation-duration:4.5s;
  background:conic-gradient(from var(--beam) at 50% 52%,transparent 0 60%,#b8862f 72%,#fff6d2 88%,#fff 93%,transparent 100%)}
@keyframes beam{to{--beam:360deg}}

@media (prefers-reduced-motion:reduce){.foil>.beam{animation:none}.tilt-card{transform:none!important}}