/*

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

}

.big_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);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    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;

}

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

.big_card:not( .interactive ) .big_card__translater,
.big_card:not( .interactive ) .big_card__rotator,
.big_card:not( .interactive ) .big_card__shine,
.big_card:not( .interactive ) .big_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;

}

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

}

.big_card.water {
    --card-glow: hsl(192, 97%, 60%);
}

.big_card.fire {
    --card-glow: hsl(9, 81%, 59%);
}

.big_card.grass {
    --card-glow: hsl(96, 81%, 65%);
}

.big_card.lightning {
    --card-glow: hsl(54, 87%, 63%);
}

.big_card.psychic {
    --card-glow: hsl(281, 62%, 58%);
}

.big_card.fighting {
    --card-glow: rgb(145, 90, 39);
}

.big_card.darkness {
    --card-glow: hsl(189, 77%, 27%);
}

.big_card.metal {
    --card-glow: hsl(184, 20%, 70%);
}

.big_card.dragon {
    --card-glow: hsl(51, 60%, 35%);
}

.big_card.fairy {
    --card-glow: hsl(323, 100%, 89%);
}

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

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

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

.big_card__translater,
.big_card__rotator {
    display: grid;
    perspective: 600px;
    will-change: transform, box-shadow;

    transform-origin: center;
    -webkit-transform-origin: center;
}

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

.big_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));
    transform-style: preserve-3d;

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

.big_card__rotator,
.big_card.active .big_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;
}

.big_card.active .big_card__rotator,
.big_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)
}

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

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

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

.big_card__back--showcase {
    display: grid;
    overflow: hidden;
}

.big_card__back--showcase > * {
    grid-area: 1/1;
    width: 100%;
    aspect-ratio: var(--card-aspect);
    border-radius: var(--card-radius);
    image-rendering: optimizeQuality;
    pointer-events: none;
    overflow: hidden;
}

.big_card__back--showcase .big_card__back-shine,
.big_card__back--showcase .big_card__back-glare {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transform: translateZ(1px);
}

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

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

.loading .big_card__front {
    opacity: 0;
}

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


/**
  
Shine & Glare Effects

**/

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

}

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

}

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

}

.big_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

**/

.big_card.masked .big_card__shine,
.big_card.masked .big_card__shine:before,
.big_card.masked .big_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;

}

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

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

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