/*

  COSMOS HOLO

*/

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

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


/*

  SHINE LAYERS

*/

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

    --space: 4%;

    clip-path: var(--clip);

    background-image: url("/images/effects/cosmos-bottom.png"),
    repeating-linear-gradient(
            82deg,
            hsl(53, 65%, 60%) calc(var(--space) * 1),
            hsl(93, 56%, 50%) calc(var(--space) * 2),
            hsl(176, 54%, 49%) calc(var(--space) * 3),
            hsl(228, 59%, 55%) calc(var(--space) * 4),
            hsl(283, 60%, 55%) calc(var(--space) * 5),
            hsl(326, 59%, 51%) calc(var(--space) * 6),
            hsl(326, 59%, 51%) calc(var(--space) * 7),
            hsl(283, 60%, 55%) calc(var(--space) * 8),
            hsl(228, 59%, 55%) calc(var(--space) * 9),
            hsl(176, 54%, 49%) calc(var(--space) * 10),
            hsl(93, 56%, 50%) calc(var(--space) * 11),
            hsl(53, 65%, 60%) calc(var(--space) * 12)
    ),
    radial-gradient(
            farthest-corner circle at var(--pointer-x) var(--pointer-y),
            hsla(180, 100%, 89%, 0.5) 5%,
            hsla(180, 14%, 57%, 0.3) 40%,
            hsl(0, 0%, 0%) 130%
    );

    background-blend-mode: color-burn,
    multiply;

    background-position: var(--cosmosbg, center center),
    calc(10% + (var(--pointer-from-left) * 80%)) calc(10% + (var(--pointer-from-top) * 80%)),
    center center;

    background-size: cover, 400% 900%, cover;

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

}


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

    content: "";
    z-index: 2;

    background-image: url("/images/effects/cosmos-middle-trans.png"),
    repeating-linear-gradient(
            82deg,
            hsl(53, 65%, 60%) calc(var(--space) * 1),
            hsl(93, 56%, 50%) calc(var(--space) * 2),
            hsl(176, 54%, 49%) calc(var(--space) * 3),
            hsl(228, 59%, 55%) calc(var(--space) * 4),
            hsl(283, 60%, 55%) calc(var(--space) * 5),
            hsl(326, 59%, 51%) calc(var(--space) * 6),
            hsl(326, 59%, 51%) calc(var(--space) * 7),
            hsl(283, 60%, 55%) calc(var(--space) * 8),
            hsl(228, 59%, 55%) calc(var(--space) * 9),
            hsl(176, 54%, 49%) calc(var(--space) * 10),
            hsl(93, 56%, 50%) calc(var(--space) * 11),
            hsl(53, 65%, 60%) calc(var(--space) * 12)
    );

    background-blend-mode: lighten,
    multiply;

    background-position: var(--cosmosbg, center center),
    calc(15% + (var(--pointer-from-left) * 70%)) calc(15% + (var(--pointer-from-top) * 70%)),
    center center;

    background-size: cover, 400% 900%, cover;

    filter: brightness(1.25) contrast(1.75) saturate(.8);
    mix-blend-mode: overlay;

}


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

    content: "";
    z-index: 3;

    background-image: url("/images/effects/cosmos-top-trans.png"),
    repeating-linear-gradient(
            82deg,
            hsl(53, 65%, 60%) calc(var(--space) * 1),
            hsl(93, 56%, 50%) calc(var(--space) * 2),
            hsl(176, 54%, 49%) calc(var(--space) * 3),
            hsl(228, 59%, 55%) calc(var(--space) * 4),
            hsl(283, 60%, 55%) calc(var(--space) * 5),
            hsl(326, 59%, 51%) calc(var(--space) * 6),
            hsl(326, 59%, 51%) calc(var(--space) * 7),
            hsl(283, 60%, 55%) calc(var(--space) * 8),
            hsl(228, 59%, 55%) calc(var(--space) * 9),
            hsl(176, 54%, 49%) calc(var(--space) * 10),
            hsl(93, 56%, 50%) calc(var(--space) * 11),
            hsl(53, 65%, 60%) calc(var(--space) * 12)
    );

    background-blend-mode: multiply,
    multiply;

    background-position: var(--cosmosbg, center center),
    calc(20% + (var(--pointer-from-left) * 60%)) calc(20% + (var(--pointer-from-top) * 60%)),
    center center;

    background-size: cover, 400% 900%, cover;

    filter: brightness(1.25) contrast(1.75) saturate(.8);
    mix-blend-mode: multiply;

}


/*

  GLARE LAYERS

*/

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

    background-image: radial-gradient(
            farthest-corner circle at var(--pointer-x) var(--pointer-y),
            hsla(204, 100%, 95%, 0.8) 5%,
            hsla(250, 15%, 20%, 1) 150%
    );
    filter: brightness(.75) contrast(2) saturate(2);
    mix-blend-mode: overlay;
    opacity: calc(var(--card-opacity) * (0.25 + var(--pointer-from-center)));

}

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

    content: "";

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

    filter: brightness(.75) contrast(2.5) saturate(2);
    mix-blend-mode: soft-light;
    opacity: calc(1 - var(--pointer-from-top) * .75);

}