/* Card holo effects from simeydotme/pokemon-cards-css (https://github.com/simeydotme/pokemon-cards-css), GPL-3.0 — see /holo/LICENSE. Adapted: image paths, art-window clip. */

.card {

  --grain: url("/holo/img/grain.webp");
  --glitter: url("/holo/img/glitter.png");
  --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%);

}

.card__shine,
.card__glare {
  
  will-change: transform, opacity, background-image, background-size,
    background-position, background-blend-mode, filter;
 
}/*

  BASE STYLES / VARIABLES
*/







/*

  SHINE LAYERS

*/


:root {
  
  --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);

}

.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;
}

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

.card:not( .interactive ) .card__translater,
.card:not( .interactive ) .card__rotator,
.card:not( .interactive ) .card__shine,
.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;

}
.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;
  
}

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

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

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


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

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

.card__translater {
  width: auto;
  position: relative;

  --translate-z: calc(var(--card-scale) * 150px + 0.01px); /* add 150px to the z-axis to ensure the card is always in front of the others */
  -webkit-transform: translate3d(var(--translate-x), var(--translate-y), var(--translate-z)) scale(var(--card-scale));
  transform: translate3d(var(--translate-x), var(--translate-y), var(--translate-z)) scale(var(--card-scale));
}

.card__rotator {
  -webkit-transform: rotateY(var(--rotate-x)) rotateX(var(--rotate-y));
  -webkit-transform-style: preserve-3d;
  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. */
}

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;
}

.card__rotator,
.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;
}

.card.active .card__rotator,
.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)
}

.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;
}

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

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

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

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

.loading .card__front {
  opacity: 0;
}

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


/**
  
Shine & Glare Effects

**/

.card__shine {

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

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

  filter: brightness(.85) contrast(2.75) saturate(.65);
  mix-blend-mode: color-dodge;

  opacity: var(--card-opacity);

}

.card__shine:before,
.card__shine: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);

}

.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);
  
}

.card__glare {

  /* 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;
  
}






/**

  Masking Effects

**/

.card.masked .card__shine,
.card.masked .card__shine:before,
.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;

}

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

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

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

  REGULAR HOLO

*/

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






/*

  SHINE LAYERS

*/

.card[data-rarity="rare holo"] .card__shine {

  --scanlines-space: 1px;
  --scanlines-light: #666;
  --scanlines-dark: black;

  --bars: 3%;
  --bar-color: hsla(0, 0%, 70%, 1);
  --bar-bg: hsla(0, 0%, 0%, 1);

  clip-path: var(--clip);

  background-image: 
    repeating-linear-gradient( 110deg, 
      var(--violet), var(--blue), var(--green), var(--yellow), var(--red), 
      var(--violet), var(--blue), var(--green), var(--yellow), var(--red),
      var(--violet), var(--blue), var(--green), var(--yellow), var(--red)
    ),
    repeating-linear-gradient( 90deg, 
      var(--scanlines-dark) calc(var(--scanlines-space) * 0), var(--scanlines-dark) calc(var(--scanlines-space) * 2),
      var(--scanlines-light) calc(var(--scanlines-space) * 2), var(--scanlines-light) calc(var(--scanlines-space) * 4)
    );

  background-position: 
    calc(((50% - var(--background-x)) * 2.6) + 50%) calc(((50% - var(--background-y)) * 3.5) + 50%),
    center center;

  background-size: 
    400% 400%, 
    cover;

  background-blend-mode: overlay;
  filter: brightness(1.1) contrast(1.1) saturate(1.2);
  mix-blend-mode: color-dodge;

}

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

  background-image:
    repeating-linear-gradient( 90deg, 
      var(--bar-bg) calc(var(--bars)*2), 
      var(--bar-color) calc(var(--bars)*3), 
      var(--bar-bg) calc(var(--bars)*3.5), 
      var(--bar-color) calc(var(--bars)*4), 
      var(--bar-bg) calc(var(--bars)*5), 
      var(--bar-bg) calc(var(--bars)*14)
    ),
    repeating-linear-gradient( 90deg, 
      var(--bar-bg) calc(var(--bars)*2), 
      var(--bar-color) calc(var(--bars)*3), 
      var(--bar-bg) calc(var(--bars)*3.5), 
      var(--bar-color) calc(var(--bars)*4), 
      var(--bar-bg) calc(var(--bars)*5), 
      var(--bar-bg) calc(var(--bars)*10)
    );

  background-position: 
    calc((((50% - var(--background-x)) * 1.65) + 50% ) + (var(--background-y) * 0.5)) var(--background-x), 
    calc((((50% - var(--background-x)) * -0.9) + 50%) - (var(--background-y) * 0.75) ) var(--background-y);

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

  background-blend-mode: screen;
  filter: brightness( 1.15 ) contrast( 1.1 );
  mix-blend-mode: hard-light;

}

.card[data-rarity="rare holo"] .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%, 0%) 90% 
    );
    
  background-position: 
    center center;

  background-size:
    cover;

  mix-blend-mode: luminosity; 
  filter: brightness(0.6) contrast(4);

}

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






/*

  GLARE LAYERS

*/

.card[data-rarity="rare holo"] .card__glare {

  opacity: calc( var(--card-opacity) * .8 );
  filter: brightness(0.8) contrast(1.5);
  mix-blend-mode: overlay;

}

.card[data-rarity="rare holo"] .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(0, 0%, 0%, 0.36) 110% 
    );

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

}










/*

  NO MASK

*/


/*

  RAINBOW (SECRET) HOLO

*/







/*

  SHINE LAYERS

*/

.card[data-rarity="rare rainbow"] .card__shine {

  --r-clr-1: hsl(0, 57%, 37%);
  --r-clr-2: hsl(40, 53%, 39%);
  --r-clr-3: hsl(90, 60%, 35%);
  --r-clr-4: hsl(180, 60%, 35%);
  --r-clr-5: hsl(180, 60%, 35%);
  --r-clr-6: hsl(210, 57%, 39%);
  --r-clr-7: hsl(280, 55%, 31%);

  background-image: 
    linear-gradient(-45deg, var(--r-clr-1), var(--r-clr-5)),
    var(--glitter),
    linear-gradient( -30deg, 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1)
    );

  background-blend-mode: luminosity, soft-light;

  background-size: 
    200% 200%, 
    var(--glittersize) var(--glittersize), 
    400% 400%;
  
  background-position: 
    calc( 25% + (50% * var(--pointer-from-left) )) calc( 25% + (50% * var(--pointer-from-top) )), 
    center center, 
    calc( 25% + (var(--pointer-x) / 2 ) ) calc( 25% + (var(--pointer-y) / 2 ) );
  
  filter: brightness(calc((var(--pointer-from-center)*0.25) + 0.6))  contrast(2.2) saturate(0.75);

}

.card[data-rarity="rare rainbow"] .card__shine:after {

  content: "";

  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image: 
    var(--glitter),
    linear-gradient( -60deg, 
        var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
        var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
        var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
        var(--r-clr-1)
    );

    background-blend-mode: soft-light;
    background-size: var(--glittersize) var(--glittersize), 400% 400%;
    background-position: center center, var(--pointer-x) var(--pointer-y);

    filter: brightness(calc((var(--pointer-from-center)*0.3) + 0.55)) contrast(2) saturate(1);
    mix-blend-mode: color-dodge;

}

.card[data-rarity="rare rainbow"] .card__shine:before {

  content: "";

  background-image: var(--foil);
  background-size: var(--imgsize);
  background-position: center center;
  filter: brightness(2.5) contrast(1);

  opacity: calc((var(--pointer-from-center) + 0.4 ) * 0.6 );
  background-blend-mode: difference;
  mix-blend-mode: darken;

}






/*

  GLARE LAYERS

*/

.card[data-rarity="rare rainbow"] .card__glare {
	
	background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsl(0,0%,80%), 
      hsla(187, 10%, 85%, 0.25) 30%, 
      hsl(197, 6%, 25%) 120% 
    );

	filter: brightness(.9) contrast(1.75);
	opacity: calc( var(--pointer-from-center) * 0.9 );
  mix-blend-mode: hard-light;

}










/*

  NO MASK

*/


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

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

}/*

  SECRET RARE (GOLD)

*/




/*

  SHINE LAYERS

*/

.card[data-rarity="rare secret"] .card__shine,
.card[data-set="swshp"][data-number="swsh145"] .card__shine {

  --shift: 1px;
  --imgsize: cover;

  background-image:
    var(--glitter), 
    var(--glitter), 
    conic-gradient( 
      var(--sunpillar-clr-4), 
      var(--sunpillar-clr-5),
      var(--sunpillar-clr-6), 
      var(--sunpillar-clr-1), 
      var(--sunpillar-clr-4) 
    ), 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(150, 00%, 0%, .98) 10%, 
      hsla(0, 0%, 95%, .15) 90% 
    );

  background-size: var(--glittersize) var(--glittersize), var(--glittersize) var(--glittersize), cover, cover;
  background-position: 45% 45%, 55% 55%, center center, center center;
  background-blend-mode: soft-light, hard-light, overlay;
  mix-blend-mode: color-dodge;
  filter: brightness(calc( 0.4 + (var(--pointer-from-center) * 0.2) )) contrast(1) saturate(2.7);

}

.card[data-rarity="rare secret"] .card__shine:before,
.card[data-set="swshp"][data-number="swsh145"] .card__shine:before {
  
  content: "";
  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image:
    var(--foil), 
    linear-gradient( 45deg, hsl(46, 95%, 50%), hsl(52, 100%, 69%) ), 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(10, 20%, 90%, 0.95) 10%, 
      hsl(0, 0%, 0%) 70% 
    );

  background-size: var(--imgsize), cover, cover;
  background-position: center center, center center, center center;
  background-blend-mode: hard-light, multiply;

  mix-blend-mode: lighten;
  filter: brightness(1.25) contrast(1.25) saturate(0.35);
  opacity: .8;

}

.card[data-rarity="rare secret"] .card__shine:after,
.card[data-set="swshp"][data-number="swsh145"] .card__shine:after {

  content: "";

  -webkit-mask-image: none !important;
  mask-image: none !important;

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

  filter: brightness(calc((var(--pointer-from-center)*0.6) + 0.6)) contrast(1.5);
  mix-blend-mode: overlay;

}






/*

  GLARE LAYERS

*/

.card[data-rarity="rare secret"] .card__glare,
.card[data-set="swshp"][data-number="swsh145"] .card__glare {
	
	background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(45, 8%, 80%, 0.3) 0%, 
      hsl(22, 15%, 12%) 180%
    );

	filter: brightness(1.3) contrast(1.5);
  mix-blend-mode: hard-light;

}










/*

  NO MASK

*/


.card:not(.masked)[data-rarity="rare secret"] .card__shine,
.card:not(.masked)[data-set="swshp"][data-number="swsh145"] .card__shine {

  --foil: url("/holo/img/geometric.png"); 
  --imgsize: 33%;
  
  filter: brightness( calc( ( var( --pointer-from-center ) * 0.3 ) + 0.2 ) ) contrast(2) saturate(0.75);

}