/*

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

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

  /* Performance : réserve les couches GPU uniquement pendant
     l'interaction au lieu de le faire pour toutes les cartes. */
  will-change: transform, visibility, z-index;
}

.card.interacting .card__translater,
.card.interacting .card__rotator {
  will-change: transform, box-shadow;
}


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

/* Performance : les couches coûteuses restent dans le DOM, mais
   le navigateur ne les peint pas tant que la carte n'est pas manipulée.
   Cela préserve la structure et les sélecteurs de rareté existants. */
.card.interactive:not(.interacting) .card__shine,
.card.interactive:not(.interacting) .card__glare {
  visibility: hidden;
}

.card.interactive.interacting .card__shine,
.card.interactive.interacting .card__glare {
  visibility: visible;
}





/**

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