/* 產生檔，請勿手改：node scripts/scope-151-css.mjs <151 專案的 public/css>
   來源 simeydotme/pokemon-cards-151 public/css，規則見 docs/PLAN.md §15.2 */

/* ===== cards/base.css ===== */
/*

  BASE STYLES / VARIABLES
*/







/*

  SHINE LAYERS

*/


.era-151 {
  
  --card-aspect: 0.718;
  --card-radius: 4.55% / 3.5%;
  --card-edge: hsl(47, 100%, 78%);
  --card-back: hsl(205, 100%, 25%);
  --card-glow: hsl(175, 100%, 90%);

  --sunpillar-1: hsl(2, 100%, 73%);
  --sunpillar-2: hsl(53, 100%, 69%);
  --sunpillar-3: hsl(93, 100%, 69%);
  --sunpillar-4: hsl(176, 100%, 76%);
  --sunpillar-5: hsl(228, 100%, 74%);
  --sunpillar-6: hsl(283, 100%, 73%);

  --sunpillar-clr-1: var(--sunpillar-1);
  --sunpillar-clr-2: var(--sunpillar-2);
  --sunpillar-clr-3: var(--sunpillar-3);
  --sunpillar-clr-4: var(--sunpillar-4);
  --sunpillar-clr-5: var(--sunpillar-5);
  --sunpillar-clr-6: var(--sunpillar-6);

  --sunpillar: var(--sunpillar-1) 25%, var(--sunpillar-2), var(--sunpillar-3), var(--sunpillar-4), var(--sunpillar-5), var(--sunpillar-6) 75%;
  --holo: var(--sunpillar-1), var(--sunpillar-2), var(--sunpillar-3), var(--sunpillar-4), var(--sunpillar-5), var(--sunpillar-6), var(--sunpillar-1);

}

.era-151 .card {

  /* place the card on a new transform layer and
  make sure it has hardward acceleration... we gun'need that! */
  -webkit-transform: translate3d(0px, 0px, 0.01px);
  transform: translate3d(0px, 0px, 0.01px);
  pointer-events: none;
  
  /* make sure the card is above others if it's scaled up */
  z-index: calc(var(--card-scale) * 2);
  
  /* every little helps! */
  will-change: transform, visibility, z-index;
  
  /* this prevents major problems in firefox, but also causes a bit of
  clipping as the card animates to/from active state. worth it. */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.era-151 .card, .era-151 .card * {
  /* outline is a little trick to anti-alias */
  outline: 1px solid transparent;
}

.era-151 .card:not( .interactive ) .card__translater, .era-151 .card:not( .interactive ) .card__rotator, .era-151 .card:not( .interactive ) .card__shine, .era-151 .card:not( .interactive ) .card__glitter, .era-151 .card:not( .interactive ) .card__glare {

  /* if this card is not in a framework, we can add simply
    hover effects when it's not "interactive" */
  transition: all 0.3s ease;

}
.era-151 .card:not( .interactive ):hover {
  
  --pointer-x: 25% !important;
  --pointer-y: 10% !important;
  --card-scale: 1.1 !important;
  --card-opacity: 1 !important;
  --translate-x: 0px !important;
  --translate-y: -10px !important;
  --rotate-x: 7deg !important;
  --rotate-y: -19deg !important;
  --background-x: 44% !important;
  --background-y: 36% !important;
  --pointer-from-center: .9 !important;
  --pointer-from-top: .11 !important;
  --pointer-from-left: .25 !important;
  
}

.era-151 .card.water { --card-glow: hsl(192, 97%,  60%); }
.era-151 .card.fire { --card-glow: hsl(9,   81%,  59%); }
.era-151 .card.grass { --card-glow: hsl(96,  81%,  65%); }
.era-151 .card.lightning { --card-glow: hsl(54,  87%,  63%); }
.era-151 .card.psychic { --card-glow: hsl(281, 62%,  58%); }
.era-151 .card.fighting { --card-glow: rgb(145, 90, 39); }
.era-151 .card.darkness { --card-glow: hsl(189, 77%,  27%); }
.era-151 .card.metal { --card-glow: hsl(184, 20%,  70%); }
.era-151 .card.dragon { --card-glow: hsl(51, 60%, 35%); }
.era-151 .card.fairy { --card-glow: hsl(323, 100%, 89%); }

.era-151 .card, .era-151 .card__rotator {
  aspect-ratio: var(--card-aspect);
  border-radius: var(--card-radius);
}

.era-151 .card.interacting {
  z-index: calc(var(--card-scale) * 120);
}

.era-151 .card.active .card__translater, .era-151 .card.active .card__rotator {
  /* prevent pinch/double-tap zooms on card */
  touch-action: none;
}

.era-151 .card__translater, .era-151 .card__rotator {
  display: grid;
  perspective: 600px;
  will-change: transform, box-shadow;
  transform-origin: center;
  -webkit-transform-origin: center;
  transform-style: preserve-3d;
}

.era-151 .card__translater {
  width: auto;
  position: relative;
  -webkit-transform: translate3d(var(--translate-x), var(--translate-y), 0.1px) scale(var(--card-scale));
  transform: translate3d(var(--translate-x), var(--translate-y), 0.1px) scale(var(--card-scale));
}

.era-151 .card__rotator {
  -webkit-transform: rotateY(var(--rotate-x)) rotateX(var(--rotate-y));
  -webkit-transform-style: preserve-3d;
  transform: rotateY(var(--rotate-x)) rotateX(var(--rotate-y));
  
  /* performance */
  pointer-events: auto;
  /* overflow: hidden; <-- this improves perf on mobile, but breaks backface visibility. */
  /* isolation: isolate; <-- this improves perf, but breaks backface visibility on Chrome. */
}

.era-151 button.card__rotator {
  /* because the card is a button, there's some default
    browser styles which need to be subdued */
  border: none;
  background: transparent;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

.era-151 .card__rotator, .era-151 .card.active .card__rotator:focus {
  transition: box-shadow 0.4s ease, opacity .33s ease-out;
  box-shadow: 
    0 0 3px -1px transparent, 
    0 0 2px 1px transparent, 
    0 0 5px 0px transparent,
    0px 10px 20px -5px black, 
    0 2px 15px -5px black,
    0 0 20px 0px transparent;
}

.era-151 .card.active .card__rotator, .era-151 .card__rotator:focus {
  box-shadow: 
    0 0 3px -1px white, 
    0 0 3px 1px var(--card-edge), 
    0 0 12px 2px var(--card-glow), 
    0px 10px 20px -5px black, 
    0 0 40px -30px var(--card-glow), 
    0 0 50px -20px var(--card-glow)
}

.era-151 .card__rotator * {
  width: 100%;
  display: grid;
  grid-area: 1/1;
  aspect-ratio: var(--card-aspect);
  border-radius: var(--card-radius);
  image-rendering: optimizeQuality;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  pointer-events: none;
  overflow: hidden;
}

.era-151 .card__rotator img {
  height: auto;
}

.era-151 .card__rotator img:not(.card__back) {
  -webkit-transform: translate3d(0px, 0px, 0.01px);
  transform: translate3d(0px, 0px, 0.01px);
}

.era-151 .card__back {
  background-color: var(--card-back);
  -webkit-transform: rotateY(180deg) translateZ(1px);
  transform: rotateY(180deg) translateZ(1px);
  backface-visibility: visible;
}

.era-151 .card__front, .era-151 .card__front * {
  backface-visibility: hidden;
}

.era-151 .card__front {
  opacity: 1;
  transition: opacity 0.33s ease-out;
  -webkit-transform: translate3d(0px, 0px, 0.01px);
  transform: translate3d(0px, 0px, 0.01px);
}

.era-151 .loading .card__front {
  opacity: 0;
}

.era-151 .loading .card__back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}


/**
  
Shine & Glare Effects

**/

.era-151 .card__shine, .era-151 .card__glitter {

  display: grid;
  transform: translateZ(1px);
  overflow: hidden;
  z-index: 3;

  background: transparent;
  background-size: cover;
  background-position: center;

  border-radius: var(--card-radius);
  filter: brightness(.45) contrast(1.5) saturate(1.2);
  mix-blend-mode: color-dodge;

  opacity: var(--card-opacity);

}

.era-151 .card__glitter {
  display: none;
  z-index: 2;
}

.era-151 .card__shine:before, .era-151 .card__shine:after, .era-151 .card__glitter:before, .era-151 .card__glitter:after {

  --sunpillar-clr-1: var(--sunpillar-5);
  --sunpillar-clr-2: var(--sunpillar-6);
  --sunpillar-clr-3: var(--sunpillar-1);
  --sunpillar-clr-4: var(--sunpillar-2);
  --sunpillar-clr-5: var(--sunpillar-3);
  --sunpillar-clr-6: var(--sunpillar-4);

  grid-area: 1/1;
  transform: translateZ(1px);
  border-radius: var(--card-radius);

}

.era-151 .card__shine:after {

  --sunpillar-clr-1: var( --sunpillar-6 );
  --sunpillar-clr-2: var( --sunpillar-1 ); 
  --sunpillar-clr-3: var( --sunpillar-2 );
  --sunpillar-clr-4: var( --sunpillar-3 );
  --sunpillar-clr-5: var( --sunpillar-4 );
  --sunpillar-clr-6: var( --sunpillar-5 );

  transform: translateZ(1.2px);
  
}

.era-151 .card__glare, .era-151 .card__glare2 {

  /* make sure the glare doesn't clip */
  transform: translateZ(1.41px);
  overflow: hidden;

  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.5) 90%
  );

  opacity: var(--card-opacity);
  mix-blend-mode: overlay;
  
}

.era-151 .card__glare2 {
  display: none;
}




/**

  Masking Effects

**/

.era-151 .card.masked .card__shine, .era-151 .card.masked .card__shine:before, .era-151 .card.masked .card__shine:after {

  /** masking image for cards which are masked **/

  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
	-webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center center;
  mask-position: center center;
  
  -webkit-mask-mode: luminance;
  mask-mode: luminance;

}

.era-151 .card[data-rarity="rare holo 151"]:not(.masked) .card__glare:after, .era-151 .card[data-rarity="rare holo cosmos"]:not(.masked) .card__glare:after, .era-151 .card[data-rarity$="reverse holo"]:not(.masked) .card__glare:after, .era-151 .card[data-rarity$="pokeball holo"]:not(.masked) .card__glare:after {
  clip-path: var(--clip);
}

.era-151 .card[data-rarity="rare holo 151"][data-subtypes^="stage"]:not(.masked) .card__glare:after, .era-151 .card[data-rarity="rare holo cosmos"][data-subtypes^="stage"]:not(.masked) .card__glare:after, .era-151 .card[data-rarity$="reverse holo"][data-subtypes^="stage"]:not(.masked) .card__glare:after, .era-151 .card[data-rarity$="pokeball holo"][data-subtypes^="stage"]:not(.masked) .card__glare:after {
  clip-path: var(--clip-stage);
}

.era-151 .card[data-rarity="rare holo 151"][data-supertype="trainer"]:not(.masked) .card__glare:after, .era-151 .card[data-rarity="rare holo cosmos"][data-supertype="trainer"]:not(.masked) .card__glare:after, .era-151 .card[data-rarity$="reverse holo"][data-supertype="trainer"]:not(.masked) .card__glare:after, .era-151 .card[data-rarity$="pokeball holo"][data-supertype="trainer"]:not(.masked) .card__glare:after {
  clip-path: var(--clip-trainer);
}

/* ===== cards.css ===== */
.era-151 .card {

  --grain: url(/img/grain.webp);
  --glitter: url(/img/glitter.png);
  --noise: url(https://poke-holo.b-cdn.net/foils/151/noise-base.webp);
  --noise-over: url(https://poke-holo.b-cdn.net/foils/151/noise-top.webp);
  --iri1: url(https://poke-holo.b-cdn.net/foils/151/iri-1.webp);
  --iri2: url(https://poke-holo.b-cdn.net/foils/151/iri-2.webp);
  --iri3: url(https://poke-holo.b-cdn.net/foils/151/iri-3.webp);
  --iri4: url(https://poke-holo.b-cdn.net/foils/151/iri-4.webp);
  --iri5: url(https://poke-holo.b-cdn.net/foils/151/iri-5.webp);
  --iri6: url(https://poke-holo.b-cdn.net/foils/151/iri-6.webp);
  --iri7: url(https://poke-holo.b-cdn.net/foils/151/iri-7.webp);
  --iri8: url(https://poke-holo.b-cdn.net/foils/151/iri-8.webp);
  --iri9: url(https://poke-holo.b-cdn.net/foils/151/iri-9.webp);
  --birthday: url(https://poke-holo.b-cdn.net/foils/151/birthday-holo.webp);
  --birthday-dank: url(https://poke-holo.b-cdn.net/foils/151/birthday-holo-dank.webp);
  --birthday-dank2: url(https://poke-holo.b-cdn.net/foils/151/birthday-holo-dank-2.webp);
  --glittersize: 25%;

  --space: 5%;
  --angle: 133deg;
  --imgsize: cover;

  --red: #f80e35;
  --yellow: #eedf10;
  --green: #21e985;
  --blue: #0dbde9;
  --violet: #c929f1;

  --clip: inset(9.85% 8% 52.85% 8%);
  --clip-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 8% 9.85%, 8% 47.15%, 0 50%);

  --clip-stage: polygon(91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 92% 47.15%);
  --clip-stage-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 0 50%);

  --clip-trainer: inset(14.5% 8.5% 48.2% 8.5%);
  --clip-borders: inset(2.8% 4% round 2.55% / 1.5%);
  --clip-borders-invert: polygon(94.8% 2.8%, 95.7% 3.2%, 96.2% 3.8%, 96.2% 96%, 95.9% 96.8%, 94.8% 97.3%, 5% 97.3%, 4.2% 96.9%, 3.8% 96.2%, 3.8% 6.1%, 15% 6.1%, 16% 5%, 17.9% 4%, 19% 2.8%);

  --clip-ex-borders: polygon(0% 0%, 0% 100%, 4% 100%, 4% 18%, 1% 16%, 1% 13%, 3% 10%, 4% 9%, 4% 6%, 9% 6%, 16% 6%, 16% 5%, 18% 4%, 19% 3%, 95% 3%, 97% 4%, 96% 90%, 97% 92%, 97% 94%, 96% 95%, 96% 97%, 95% 97%, 4% 97%, 4% 100%, 100% 100%, 100% 0%);
}

.era-151 .card__shine, .era-151 .card__glare {

  will-change: transform, opacity, background-image, background-size,
    background-position, background-blend-mode, filter;

}

.era-151 .card.offscreen {
  opacity: 0;
  transform: translate3d(0, 0, 0);
  visibility: hidden;
}

/* ===== cards/basic.css ===== */
/*

  BASIC CARDS

*/



/*

  GLARE LAYERS

*/

/* ===== cards/reverse-holo.css ===== */
/*

  REVERSE HOLO

*/







/*

  SHINE LAYERS

*/
.era-151 .card {
  --foil-brightness: 0.55;
}

.era-151 .card[data-rarity$="reverse holo"] .card__shine {
  
  background-image: 
    radial-gradient( 
      circle at var(--pointer-x) var(--pointer-y),
      #fff 5%, 
      #000 50%, 
      #fff 80% 
    ), 
    linear-gradient( 
      -45deg, 
      #000 15%, 
      #fff, 
      #000 85% 
    ), 
    var(--foil);

  background-blend-mode: soft-light, difference;
  background-size: 120% 120%, 200% 200%, cover;
  background-position: center center, calc( (100% * var(--pointer-from-left))) calc( (100% * var(--pointer-from-top))) , center center;
  
  filter: brightness(var(--foil-brightness)) contrast(1.5) saturate(1);
  mix-blend-mode: color-dodge;

  opacity: calc( (1.5 * var(--card-opacity)) - var(--pointer-from-center));
  
}

.era-151 .card.lightning { --foil-brightness: 0.7; }
.era-151 .card.darkness { --foil-brightness: 0.8; }
.era-151 .card.metal { --foil-brightness: 0.6; }









/*

  GLARE LAYERS

*/
	
.era-151 .card[data-rarity$="reverse holo"] .card__glare {

  opacity: var(--card-opacity);
  
  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.5) 20%,
      hsla(0, 0%, 0%, 0.75) 90%
    );

  filter: brightness(.7) contrast(1.5);

}

.era-151 .card[data-rarity$="reverse holo"] .card__glare:after {

  content: "";
  opacity: var(--card-opacity);
  
  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsl(0, 0%, 100%) 10%, 
      hsla(0, 0%, 100%, 0.5) 20%, 
      hsla(0, 0%, 0%, 0.5) 120% 
    );

  filter: brightness(1) contrast(1.5);

}










/*

  NO MASK

*/

.era-151 .card:not(.masked)[data-rarity$="reverse holo"] .card__shine {
  --foil: none;
  clip-path: var(--clip-invert);
}

.era-151 .card:not(.masked)[data-rarity$="reverse holo"][data-subtypes^="stage"] .card__glare:after {
  clip-path: var(--clip-stage-invert);
}

.era-151 .card:not(.masked)[data-rarity$="reverse holo"][data-supertype="trainer"] .card__glare:after {
  clip-path: var(--clip-trainer-invert);
}

/* ===== cards/regular-holo.css ===== */
/*

  REGULAR HOLO

*/





/*

  SHINE LAYERS

*/

.era-151 .card[data-rarity="rare holo 151"] .card__shine {
  
  --bars: 5%;
  --bar-color: hsla(0, 0%, 70%, 1);
  --bar-bg: hsla(0, 0%, 0%, 1);
  --bar-rotate: var(--rotate-x);
  
  background-image: 
    repeating-linear-gradient( 10deg,
    var( --holo ),
    var( --holo ),
    var( --holo ),
    var( --holo ),
    var( --holo ),
    var( --holo ),
    var( --holo )
  );
  
  background-position: 
  calc(((50% - var(--background-x))) + 50%) calc(((50% - var(--background-y))) + 50%);
  
  background-size: 
  400% 400%;
  
  background-blend-mode: overlay;
  filter: brightness(1.25) contrast(3) saturate(.75);
  mix-blend-mode: overlay;
  
}

.era-151 .card[data-rarity="rare holo 151"] .card__shine:before {
  
  content: "";

  background-image:
    repeating-linear-gradient( calc((var(--rotate-x) - var(--rotate-delta)) * 0.25), 
      var(--bar-bg) calc(var(--bars)*2.5), 
      var(--bar-color) calc(var(--bars)*3.25), 
      hsla(0, 0%, 75%, .5) calc(var(--bars)*3.5), 
      var(--bar-color) calc(var(--bars)*3.75), 
      var(--bar-bg) calc(var(--bars)*4.5), 
      var(--bar-bg) calc(var(--bars)*8)
    ),
    repeating-linear-gradient( calc((var(--rotate-x) - var(--rotate-delta)) * -0.25), 
      var(--bar-bg) calc(var(--bars)*2.5), 
      var(--bar-color) calc(var(--bars)*3.25), 
      hsla(0, 0%, 75%, .5) calc(var(--bars)*3.5), 
      var(--bar-color) calc(var(--bars)*3.75), 
      var(--bar-bg) calc(var(--bars)*4.5), 
      var(--bar-bg) calc(var(--bars)*8)
    );

    background-position:
      50% calc( ( var(--background-y) * 1.2 ) ),
      50% calc( ( var(--background-y) * -1.2 ) );

  background-size: 
    200% 200%,
    200% 200%;

  background-blend-mode: screen;
  filter: brightness( 1 ) contrast( 2 ) saturate(.75);
  mix-blend-mode: multiply;

}

.era-151 .card[data-rarity="rare holo 151"] .card__shine:after {

  content: "";
    
  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
        hsla(0, 0%, 90%, 0.8) 0%, 
        hsla(0, 0%, 78%, 0.1) 25%, 
        hsl(0, 0%, 35%) 90% 
      );
    
  background-position: 
    center center;

  background-size:
    cover;

  mix-blend-mode: luminosity; filter: 
  brightness(1) contrast(3);

}

@media screen and (max-width: 900px) {
  .era-151 .card[data-rarity="rare holo 151"] .card__shine {
    --scanlines-space: .5px;
  }
}






/*

  GLARE LAYERS

*/

.era-151 .card[data-rarity="rare holo 151"] .card__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%, .5) 120% 
    );

  opacity: calc( var(--card-opacity) * .8 );
  mix-blend-mode: overlay;
  filter: none;

}

.era-151 .card[data-rarity="rare holo 151"] .card__glare:after {

  content: "";

  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(205.6, 50%, 90%, 0.5) 110% 
    );

  mix-blend-mode: overlay;
  filter: brightness(.6) contrast(3);

}










/*

  NO MASK

*/



.era-151 .card[data-rarity="rare holo 151"]:not(.masked) .card__shine {

  clip-path: var(--clip);

}

.era-151 .card[data-rarity="rare holo 151"][data-subtypes^="stage"]:not(.masked) .card__shine, .era-151 .card[data-rarity="rare holo 151"][data-subtypes^="stage"]:not(.masked) .card__glare:after {
  clip-path: var(--clip-stage);
}
.era-151 .card[data-rarity="rare holo 151"][data-subtypes^="supporter"]:not(.masked) .card__shine, .era-151 .card[data-rarity="rare holo 151"][data-subtypes^="supporter"]:not(.masked) .card__glare:after, .era-151 .card[data-rarity="rare holo 151"][data-subtypes^="item"]:not(.masked) .card__shine, .era-151 .card[data-rarity="rare holo 151"][data-subtypes^="item"]:not(.masked) .card__glare:after {
  clip-path: var(--clip-trainer);
}

/* ===== cards/ex-regular.css ===== */
/*

  EX REGULAR

*/






/*

  SHINE LAYERS

*/

.era-151 .card[data-rarity="double rare"] .card__glitter {

  display: block;

  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsl(295, 100%, 10%) 20%,
      hsla(183, 84%, 85%, 0.15) 100%
      ),
      linear-gradient(
        var(--angle), 
        var(--sunpillar)
      ),
      var(--birthday-dank),
      var(--birthday-dank2);

    -webkit-mask-image: 
      radial-gradient(
        farthest-corner circle at var(--pointer-x) var(--pointer-y), 
        transparent 30%, 
        black 100% 
      ),
      var(--mask);

    mask-image: 
      radial-gradient(
        farthest-corner circle at var(--pointer-x) var(--pointer-y), 
        transparent 30%, 
        black 100% 
      ),
      var(--mask);

    -webkit-mask-mode: alpha, luminance;
    mask-mode: alpha, luminance;
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
    -webkit-mask-size: cover;
    mask-size: cover;

  background-size: cover, 500% 500%, 140% 140%, 120% 120%;
  background-position: center center, var(--pointer-x) var(--pointer-y), center center, center center;
  background-blend-mode: darken, hue, lighten;

  mix-blend-mode: hard-light;
  filter: brightness(2) contrast(.5) saturate(.75);


}

.era-151 .card[data-rarity="double rare"] .card__shine {

  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
	-webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center center;
  mask-position: center center;

}

/* .card[data-rarity="double rare"]:not(.masked) .card__shine  {

  filter: brightness(.7) contrast(2) saturate(.5);

} */

.era-151 .card[data-rarity="double rare"] .card__shine:before, .era-151 .card[data-rarity="double rare"] .card__shine:after {

  content: "";

  --space: 5%;
  --angle: 133deg;
  --imgsize: 200px;

  background-image:
    var(--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), 
      #0e1221 0%, 
      hsl(180, 10%, 60%) 2.8%, 
      hsl(180, 20.9%, 82.2%) 3.5%, 
      hsl(180, 10%, 60%) 4.2%, 
      #0e1221 7% , 
      #0e1221 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: var(--imgsize) var(--imgsize), 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);
  
  filter: brightness(1) contrast(1.5) saturate(2);
  mix-blend-mode: lighten;

}

.era-151 .card[data-rarity="double rare"] .card__shine:after {

  content: "";

  background-position: center, 0% var(--background-y), calc( var(--background-x) * -1) calc( var(--background-y) * -1), var(--background-x) var(--background-y);
  background-size: var(--imgsize) 100%, 200% 400%, 195% 100%, 200% 100%;

  filter: brightness(1.2) contrast(1) saturate(2);
  mix-blend-mode: difference;

}










/*

  GLARE LAYERS

*/

.era-151 .card[data-rarity="double rare"] .card__glare, .era-151 .card[data-rarity="double rare"] .card__glare2 {

  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsl(0, 0%, 40%) 0%, 
      hsla(210, 3%, 54%, .5) 63%, 
      hsla(0, 0%, 30%, 1) 150% 
    );

  filter: brightness(1.5) contrast(2);
  mix-blend-mode: color-burn;

  opacity: calc( var(--card-opacity) * ( var(--pointer-from-center) + 0.2 ) );
  z-index: 4;

}

.era-151 .card[data-rarity="double rare"] .card__glare2 {

  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
        hsl(0, 0%, 90%) 10%, 
        hsla(0, 0%, 20%, 0) 60% 
      );
  filter: brightness(1) contrast(1.4);
  mix-blend-mode: lighten;
  opacity: calc( var(--card-opacity) * ( var(--pointer-from-center) ) * .66 );

}

/* ===== cards/ex-full-art.css ===== */
/*

  V FULL ART (ULTRA RARE)

*/







/*

  SHINE LAYERS

*/

.era-151 .card[data-rarity="ultra rare"][data-supertype="pokémon"] .card__shine, .era-151 .card[data-rarity="ultra rare"][data-supertype="pokémon"] .card__shine:after, .era-151 .card[data-rarity="ultra rare"][data-subtypes*="supporter"] .card__shine, .era-151 .card[data-rarity="ultra rare"][data-subtypes*="supporter"] .card__shine:after {

  --space: 5%;
  --angle: 128.5deg;
  --imgsize: cover;

  background-image:
    var(--mask),
    var(--foil),
    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 14% , 
      #0e152e 16% 
      ),
    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-position: 
  center center, 
  center center, 
    0% var(--background-y), 
    calc( var(--background-x) + (var(--background-y)*0.2) ) var(--background-y), 
    var(--background-x) var(--background-y);

  background-blend-mode: soft-light, soft-light, hue, hard-light;
  background-size: var(--imgsize), var(--imgsize), 200% 700%, 300% 100%, 200% 100%;

  filter: brightness(calc((var(--pointer-from-center)*0.4) + .5)) contrast(2.5) saturate(.66);

}

.era-151 .card[data-supertype="pokémon"][data-rarity="ultra rare"] .card__shine:after, .era-151 .card[data-subtypes*="supporter"][data-rarity="ultra rare"] .card__shine:after {

  content: "";

  background-position: 
    center center, 
    center center, 
    0% var(--background-y), 
    calc( (var(--background-x) + (var(--background-y)*0.2)) * -1) calc( var(--background-y) * -1), 
    var(--background-x) var(--background-y);

  background-size: var(--imgsize), var(--imgsize), 200% 400%, 195% 100%, 200% 100%;

  filter: brightness(calc((var(--pointer-from-center)*.4) + .5)) contrast(1.66) saturate(1);
  mix-blend-mode: exclusion;

}

.era-151 .card[data-subtypes*="supporter"][data-rarity="ultra rare"] .card__shine:before {

  display: none;

}







/*

  GLARE LAYERS

*/

.era-151 .card[data-supertype="pokémon"][data-rarity="ultra rare"] .card__glare, .era-151 .card[data-subtypes*="supporter"][data-rarity="ultra rare"] .card__glare {

  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsl(0, 0%, 75%) 5%, 
      hsl(200, 5%, 35%) 70%, 
      hsl(320, 40%, 10%) 150% 
    );

  background-size: 120% 150%;
  background-position: center center;

  mix-blend-mode: hard-light;
  filter: brightness(.8) contrast(1) saturate(1);
  
  opacity: var(--card-opacity);

}


.era-151 .card[data-subtypes*="supporter"][data-rarity="ultra rare"] .card__glare {
  background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 55%) 5%, hsl(200, 5%, 40%) 40%, hsl(200, 10%, 15%) 110% );
  background-size: cover;
  filter: brightness(1.25) contrast(1.4) saturate(1);
}










/*

  NO MASK

*/


.era-151 .card:not(.masked)[data-supertype="pokémon"][data-rarity="ultra rare"] .card__shine, .era-151 .card:not(.masked)[data-supertype="pokémon"][data-rarity="ultra rare"] .card__shine:after {

  --mask: none;
  --foil: url("/img/illusion.png"); 
  --imgsize: 33%;

  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
	-webkit-mask-size: var(--imgsize);
  mask-size: var(--imgsize);

  background-blend-mode: exclusion, hue, hard-light;
  filter: brightness(calc((var(--pointer-from-center)*.3) + .35)) contrast(2) saturate(1.5);

}

.era-151 .card:not(.masked)[data-supertype="pokémon"][data-rarity="ultra rare"] .card__shine:before {
  content: none;
  display: none;
}

.era-151 .card:not(.masked)[data-supertype="pokémon"][data-rarity="ultra rare"] .card__shine:after {
  filter: brightness(calc((var(--pointer-from-center)*.5) + .8)) contrast(1.6) saturate(1.4);
}

/* ===== cards/illustration-rare.css ===== */
/*

  V REGULAR

*/







/*

  SHINE LAYERS

*/

.era-151 .card[data-rarity="illustration rare"]:not(.masked) .card__shine {

  filter: brightness(.7) contrast(2) saturate(.5);

}

.era-151 .card[data-rarity="illustration rare"] .card__shine, .era-151 .card[data-rarity="illustration rare"] .card__shine:after {

  --space: 5%;
  --angle: 133deg;
  --imgsize: 500px;

  clip-path: var(--clip);

  background-image:
    var(--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: var(--imgsize) 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);
  
  filter: brightness(.8) contrast(2.95) saturate(.65);

}

.era-151 .card[data-rarity="illustration rare"] .card__shine:after {

  content: "";

  background-position: center, 0% var(--background-y), calc( var(--background-x) * -1) calc( var(--background-y) * -1), var(--background-x) var(--background-y);
  background-size: var(--imgsize) 100%, 200% 400%, 195% 100%, 200% 100%;

  filter: brightness(1) contrast(2.5) saturate(1.75);
  mix-blend-mode: soft-light;

}


.era-151 .card[data-rarity="illustration rare"] {
  --clip: polygon(94.8% 2.8%, 95.7% 3.2%, 96.2% 3.8%, 96.2% 96%, 95.9% 96.8%, 94.8% 97.3%, 5% 97.3%, 4.2% 96.9%, 3.8% 96.2%, 3.8% 6.1%, 15% 6.1%, 16% 5%, 17.9% 4%, 19% 2.8%);
}
/* .card[data-rarity="illustration rare"][data-subtypes="stage"] {
  --clip: polygon(94.8% 2.8%, 95.7% 3.2%, 96.2% 3.8%, 96.2% 96%, 95.9% 96.8%, 94.8% 97.3%, 5% 97.3%, 4.2% 96.9%, 3.8% 96.2%, 3.8% 6.1%, 15% 6.1%, 16% 5%, 17.9% 4%, 19% 2.8%);
} */









/*

  GLARE LAYERS

*/

.era-151 .card[data-rarity="illustration rare"] .card__glare {

  clip-path: var(--clip);

  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsl(0, 0%, 100%) 0%, 
      hsl(0, 0%, 0%) 100% 
    );

  opacity: var(--card-opacity);
  mix-blend-mode: overlay;
  filter: brightness(.9) contrast(1.2);

}

.era-151 .card[data-rarity="illustration rare"] .card__glare2 {

  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsl(0, 0%, 100%) 5%, 
      hsl(0, 0%, 0%) 120% 
    );

  opacity: calc( var(--card-opacity) * var(--pointer-from-center) );
  mix-blend-mode: screen;
  filter: brightness(.475) contrast(2);

}

/* ===== cards/poke-ball-holo.css ===== */
/*

  POKEBALL HOLO

*/







/*

  SHINE LAYERS

*/

.era-151 .card[data-rarity$="pokeball holo"], .era-151 .card[data-rarity$="masterball holo"] {
  
  --pokeball: url(https://poke-holo.b-cdn.net/foils/151/pokeball-outer.webp);
  --pokeball-inner: url(https://poke-holo.b-cdn.net/foils/151/pokeball-inner.webp);
  --masterball: url(https://poke-holo.b-cdn.net/foils/151/masterball-outer.webp);
  --masterball-inner: url(https://poke-holo.b-cdn.net/foils/151/masterball-inner.webp);
  
  --viewport-edge-clip: polygon(4% 3%, 96% 3%, 96% 97%, 4% 97%, 4% 10%, 7% 10%, 7% 48%, 92% 48%, 92% 10%, 4% 10%);
  --viewport-clip: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 10%, 7% 10%, 7% 48%, 92% 48%, 92% 10%, 0 10%);

  --inner-brightness: 0.7;
  --outer-brightness: 0.55;
  --shine: .8;
  --glare: .8;
  --glare-contrast: 1;

}


.era-151 .card[data-rarity$="pokeball holo"] .card__shine, .era-151 .card[data-rarity$="masterball holo"] .card__shine {

  background: 
    linear-gradient(45deg,
    hsla(0, 0%, calc( var(--shine) * 50% )) 15%,
    hsla(0, 0%, calc( var(--shine) * 25% )) 45%,
    hsla(0, 0%, calc( var(--shine) * 25% )) 55%,
    hsla(0, 0%, calc( var(--shine) * 50% )) 85%);

  background-position: var(--pointer-x) var(--pointer-y);
  background-size: 200%;

  mask: none;
  mix-blend-mode: color-dodge;
  filter: brightness(.75) contrast(1) saturate(1);

}

.era-151 .card[data-rarity$="pokeball holo"] .card__shine:after, .era-151 .card[data-rarity$="masterball holo"] .card__shine:after {

  content: "";
  --mask: var(--pokeball);

  clip-path: var(--clip-borders-invert);
  
  background-image:
    linear-gradient( 45deg, 
      var(--sunpillar-4),
      var(--sunpillar-5),
      var(--sunpillar-6),
      var(--sunpillar-1),
      var(--sunpillar-2),
      var(--sunpillar-3),
      var(--sunpillar-4),
      var(--sunpillar-5),
      var(--sunpillar-6),
      var(--sunpillar-1),
      var(--sunpillar-2),
      var(--sunpillar-3),
      var(--sunpillar-4)
    );

  background-size: 200% 200%;
  background-position: var(--pointer-x) var(--pointer-y);

  filter: brightness(var(--outer-brightness)) contrast(1.8) saturate(calc( var(--pointer-from-center) * 1.1 ));
  mix-blend-mode: plus-lighter;

  opacity: var(--card-opacity);
  
}

.era-151 .card[data-rarity$="pokeball holo"] .card__shine:before, .era-151 .card[data-rarity$="masterball holo"] .card__shine:before {
  
  content: "";
  --mask: var(--pokeball-inner);
  
  clip-path: var(--clip-borders-invert);
  
  background-image:
  linear-gradient( 225deg, 
    var(--sunpillar-4), 
    var(--sunpillar-5), 
    var(--sunpillar-6), 
    var(--sunpillar-1), 
    var(--sunpillar-2), 
    var(--sunpillar-3), 
    var(--sunpillar-4), 
    var(--sunpillar-5), 
    var(--sunpillar-6),
    var(--sunpillar-1), 
    var(--sunpillar-2), 
    var(--sunpillar-3),  
    var(--sunpillar-4)
  ),
  var(--noise),
  var(--iri1);
      
  background-size: 170% 170%, 300px 300px, 300px 300px;
  background-position: var(--pointer-y) var(--pointer-x), calc(var(--seedx) * 500px) calc(var(--seedy) * 500px), calc(var(--seedx) * 500px) calc(var(--seedy) * 500px);
  background-blend-mode: darken, color-burn;
  
  filter: brightness(.75) contrast(2) saturate(calc( var(--pointer-from-center) ));
  mix-blend-mode: lighten;
  
  opacity: calc( var(--card-opacity) + ( var(--pointer-from-center)) - 0.75 );
      
}

.era-151 .card[data-rarity$="masterball holo"] .card__shine:after {
  --mask: var(--masterball);
}

.era-151 .card[data-rarity$="masterball holo"] .card__shine:before {
  --mask: var(--masterball-inner);
}

.era-151 .card[data-rarity$="pokeball holo"] .card__shine:after, .era-151 .card[data-rarity$="masterball holo"] .card__shine:after, .era-151 .card[data-rarity$="pokeball holo"] .card__shine:before, .era-151 .card[data-rarity$="masterball holo"] .card__shine:before {

  -webkit-mask-image: 
    var(--mask), 
    radial-gradient( 
      farthest-corner at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 100%, 1) 20%, transparent 80%
    );
  mask-image: 
    var(--mask), 
    radial-gradient( 
      farthest-corner at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 100%, 1) 20%, transparent 80%
    );
  -webkit-mask-size: 40% auto, cover;
  mask-size: 40% auto, cover;
  -webkit-mask-position: calc(var(--seedx) * 500px) calc(var(--seedy) * 500px), center center;
  mask-position: calc(var(--seedx) * 500px) calc(var(--seedy) * 500px), center center;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  -webkit-mask-composite: source-out;
  mask-composite: subtract;

}

.era-151 .card[data-rarity$="pokeball holo"] .card__shine:before, .era-151 .card[data-rarity$="masterball holo"] .card__shine:before {

  -webkit-mask-image: 
    var(--mask);
  mask-image: 
    var(--mask);

}
    
.era-151 .card.darkness[data-rarity$="ball holo"] { 
  --inner-brightness: 1;
  --outer-brightness: .6;
  --shine: 1.33;
  --glare: 1.2;
}
.era-151 .card.colorless[data-rarity$="ball holo"], .era-151 .card.metal[data-rarity$="ball holo"] { 
  --inner-brightness: .5;
  --outer-brightness: .45;
}
.era-151 .card.fire[data-rarity$="ball holo"] { 
  --inner-brightness: .65;
  --outer-brightness: .5;
  --shine: 1;
  --glare: 1;
  --glare-contrast: 1.5;
}
.era-151 .card.grass[data-rarity$="ball holo"] { 
  --inner-brightness: .5;
}
.era-151 .card.psychic[data-rarity$="ball holo"] { 
  --inner-brightness: .6;
  --outer-brightness: .5;
  --shine: .7;
  --glare: 1;
}
.era-151 .card.dragon[data-rarity$="ball holo"] { 
  --inner-brightness: .5;
  --outer-brightness: .45;
  --shine: 1.1;
  --glare: 1;
  --glare-contrast: 1.5;
}








/*

  GLARE LAYERS

*/
	
.era-151 .card[data-rarity$="pokeball holo"] .card__glare, .era-151 .card[data-rarity$="masterball holo"] .card__glare {

  opacity: calc( var(--card-opacity) * var(--glare) );
  clip-path: var(--viewport-edge-clip);
  
  background-image: 
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsl(346, 25%, 80%) 10%,
      hsla(207, 30%, 40%, 1) 90%
    );

  mix-blend-mode: overlay;
  filter: brightness(calc(.75 * var(--shine))) contrast(var(--glare-contrast));
  z-index: 5;

}

.era-151 .card[data-rarity$="pokeball holo"] .card__glare2, .era-151 .card[data-rarity$="masterball holo"] .card__glare2 {
  
  mix-blend-mode: multiply;
  display: block;

}










/*

  NO MASK

*/

.era-151 .card:not(.masked)[data-rarity$="pokeball holo"] .card__shine, .era-151 .card:not(.masked)[data-rarity$="masterball holo"] .card__shine {
  --foil: none;
  clip-path: var(--clip-invert);
}

.era-151 .card:not(.masked)[data-rarity$="pokeball holo"][data-subtypes^="stage"] .card__glare:after, .era-151 .card:not(.masked)[data-rarity$="masterball holo"][data-subtypes^="stage"] .card__glare:after {
  clip-path: var(--clip-stage-invert);
}

.era-151 .card:not(.masked)[data-rarity$="pokeball holo"][data-supertype="trainer"] .card__glare:after, .era-151 .card:not(.masked)[data-rarity$="masterball holo"][data-supertype="trainer"] .card__glare:after {
  clip-path: var(--clip-trainer-invert);
}

/* ===== cards/ex-special-illustration-rare.css ===== */
/*

  EX REGULAR

*/






/*

  SHINE LAYERS

*/

.era-151 .card[data-rarity="special illustration rare"] {
  
  --shift: calc( 3px * var(--card-scale) );
  --glitter-size: 150px 150px;

}

.era-151 .card[data-rarity="special illustration rare"] .card__shine {

  filter: brightness(.6) contrast(1.5) saturate(1);

}

.era-151 .card[data-rarity="special illustration rare"] .card__shine:after {
    
  content: "";

  background-image: 
    linear-gradient( calc((var(--rotate-x) - var(--rotate-delta)) * -0.25), 
      black 24%, #797979 30%, black 36%
    ),
    linear-gradient( calc((var(--rotate-x) - var(--rotate-delta)) * 0.25), 
      black 24%, #797979 30%, black 36%
    );
  
  background-position: 
    50% calc( ( var(--background-y) * 1.7 ) ),
    50% calc( ( var(--background-y) * -1.3 ) );
  
  background-size: 
    300% 300%;
  
  background-blend-mode: exclusion;
  filter: brightness(1) contrast(.75) saturate(1);
  mix-blend-mode: hard-light;

  z-index: 3;

}

.era-151 .card[data-rarity="special illustration rare"] .card__shine:before {
    
  content: "";

  background-image: 
    repeating-linear-gradient( 15deg,
      var( --holo ),
      var( --holo ),
      var( --holo )
    );
  
  background-position: 
    center center;
  
  background-size: 
    240% 240%;
  
  filter: brightness(1) contrast(.75) saturate(1);
  mix-blend-mode: overlay;

  z-index: 2;

}

.era-151 .card[data-rarity="special illustration rare"] .card__glitter {

  display: grid;

  background-image: var(--iri9);
  background-size: var(--glitter-size);
  background-position: center center;
  background-repeat: repeat;

  filter: brightness(1) contrast(2) saturate(1.2);
  mix-blend-mode: plus-lighter;

  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;

  opacity: calc( var(--card-opacity) * ( .2 + var(--pointer-from-center) * .5 ) );

}

.era-151 .card[data-rarity="special illustration rare"] .card__glitter:before, .era-151 .card[data-rarity="special illustration rare"] .card__glitter:after {

  content: "";

  background-image: var(--iri8);
  background-size: var(--glitter-size);
  background-position: 
    calc( 50% + (var( --pointer-from-left ) * var(--shift)) ) 
    calc( 50% + (var( --pointer-from-top ) * var(--shift)) );
  background-repeat: repeat;

  filter: brightness(2) contrast(1.2) saturate(2);
  mix-blend-mode: overlay;

  z-index: 2;

  opacity: var(--pointer-from-top);

  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;

}

.era-151 .card[data-rarity="special illustration rare"] .card__glitter:after {

  background-image: var(--iri7);
  background-position: 
    calc( 50% + (var( --pointer-from-left ) * var(--shift) * -1) ) 
    calc( 50% + (var( --pointer-from-top ) * var(--shift) * -1) );
  
  z-index: 3;

  opacity: calc( var(--pointer-from-top) * -1 + 1 );

}










/*

  GLARE LAYERS

*/

.era-151 .card[data-rarity="special illustration rare"] .card__glare {

  background-image: radial-gradient( 
    farthest-corner circle at var(--pointer-x) var(--pointer-y), 
    hsl(0, 0%, 80%) 10%, 
    hsl(0, 0%, 50%) 70% 
    );

    mix-blend-mode: multiply;
    filter: contrast(1.5);

}

.era-151 .card[data-rarity="special illustration rare"] .card__glare2 {

  display: block;
  background: white;
  mask: var(--foil);
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
  mask-size: cover;
  mix-blend-mode: overlay;

  filter: contrast(.8);

}

/* ===== cards/hyper-rare.css ===== */
/*

  EX REGULAR

*/






/*

  SHINE LAYERS

*/

.era-151 .card[data-rarity="hyper rare"] {
  
  --shift: calc( 3px * var(--card-scale) );
  --glitter-size: 150px 150px;

}

.era-151 .card[data-rarity="hyper rare"] .card__shine {

  filter: brightness(.6) contrast(1.5) saturate(1);

}

.era-151 .card[data-rarity="hyper rare"] .card__shine:after {
    
  content: "";

  background-image: 
    linear-gradient( calc((var(--rotate-x) - var(--rotate-delta)) * -0.25), 
      black 24%, #797979 30%, black 36%
    ),
    linear-gradient( calc((var(--rotate-x) - var(--rotate-delta)) * 0.25), 
      black 24%, #797979 30%, black 36%
    );
  
  background-position: 
    50% calc( ( var(--background-y) * 1.7 ) ),
    50% calc( ( var(--background-y) * -1.3 ) );
  
  background-size: 
    300% 300%;
  
  background-blend-mode: exclusion;
  filter: brightness(1) contrast(.75) saturate(1);
  mix-blend-mode: hard-light;

  z-index: 3;

}

.era-151 .card[data-rarity="hyper rare"] .card__shine:before {
    
  content: "";

  background-image: 
    repeating-linear-gradient( 15deg,
      var( --holo ),
      var( --holo ),
      var( --holo )
    );
  
  background-position: 
    center center;
  
  background-size: 
    240% 240%;
  
  filter: brightness(1) contrast(.75) saturate(1);
  mix-blend-mode: overlay;

  z-index: 2;

}

.era-151 .card[data-rarity="hyper rare"] .card__glitter {

  display: grid;

  background-image: var(--iri9);
  background-size: var(--glitter-size);
  background-position: center center;
  background-repeat: repeat;

  filter: brightness(1) contrast(2) saturate(1.2);
  mix-blend-mode: plus-lighter;

  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;

  opacity: calc( var(--card-opacity) * ( .2 + var(--pointer-from-center) * .3 ) );

}

.era-151 .card[data-rarity="hyper rare"] .card__glitter:before, .era-151 .card[data-rarity="hyper rare"] .card__glitter:after {

  content: "";

  background-image: var(--iri8);
  background-size: var(--glitter-size);
  background-position: 
    calc( 50% + (var( --pointer-from-left ) * var(--shift)) ) 
    calc( 50% + (var( --pointer-from-top ) * var(--shift)) );
  background-repeat: repeat;

  filter: brightness(2) contrast(1.2) saturate(2);
  mix-blend-mode: overlay;

  z-index: 2;

  opacity: var(--pointer-from-top);

  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;

}

.era-151 .card[data-rarity="hyper rare"] .card__glitter:after {

  background-image: var(--iri7);
  background-position: 
    calc( 50% + (var( --pointer-from-left ) * var(--shift) * -1) ) 
    calc( 50% + (var( --pointer-from-top ) * var(--shift) * -1) );
  
  z-index: 3;

  opacity: calc( var(--pointer-from-top) * -1 + 1 );

}










/*

  GLARE LAYERS

*/

.era-151 .card[data-rarity="hyper rare"] .card__glare {

  background-image: radial-gradient( 
    farthest-corner circle at var(--pointer-x) var(--pointer-y), 
    hsl(0, 0%, 80%) 10%, 
    hsl(0, 0%, 50%) 70% 
    );

    mix-blend-mode: multiply;
    filter: contrast(1.5);

}

.era-151 .card[data-rarity="hyper rare"] .card__glare2 {

  display: block;
  background: white;
  mask: var(--foil);
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
  mask-size: cover;
  mix-blend-mode: overlay;

  filter: contrast(.8);

}