/*

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

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

}

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

.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.normal {
    --card-glow: hsl(4, 0%, 70%);
}

.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.electric {
    --card-glow: hsl(54, 87%, 63%);
}

.card.fly {
    --card-glow: hsl(192, 38%, 86%);
}

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

.card.poison {
    --card-glow: hsl(147, 72%, 83%);
}

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

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

.card.ghost {
    --card-glow: hsl(240, 44%, 32%);
}

.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 {
    aspect-ratio: var(--card-aspect);
    border-radius: var(--card-radius);
}

.card[data-subtypes~="big"] {
    aspect-ratio: auto;
}

.card__glow {
    inset: 0;
    position: absolute;
    border-radius: var(--card-radius);
    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.interacting {
    z-index: calc(var(--card-scale) * 120);
}


/**
  
Shine & Glare Effects

**/

.card__shine {

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

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

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    grid-area: 1/1;
    border-radius: var(--card-radius);
    transform: translateZ(1px);
}

.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;
    inset: 0;
    position: absolute;

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

.card__glare:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: var(--clip);
}


/**

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