.poke-card__frame.holo {
    --mx: 50%;
    --my: 50%;
    --hyp: 0;
    padding: 0;
    border: 0;
    background: #8e959e;
    border-radius: 4.5% / 3.2%;
    box-shadow: 0 0 calc(var(--hyp) * 28px) rgba(160,190,255,.45);
    transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
    transition: none;
}

.poke-card {
    border-radius: 4.5% / 3.2%;
}

.poke-card:focus:not(:focus-visible) {
    outline: none;
}

.holo__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.holo__shine,
.holo__glitter,
.holo__glare {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.holo__shine {
    background:
        repeating-linear-gradient(110deg,
            hsl(2, 100%, 73%) 0%, hsl(53, 100%, 69%) 5%, hsl(93, 100%, 69%) 10%,
            hsl(176, 100%, 76%) 15%, hsl(228, 100%, 74%) 20%, hsl(283, 100%, 73%) 25%,
            hsl(2, 100%, 73%) 30%),
        repeating-linear-gradient(133deg,
            #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%,
            hsl(180, 10%, 60%) 5.2%, #0e152e 10%, #0e152e 12%);
    background-size: 400% 400%, 300% 300%;
    background-position: calc(var(--mx) * 1.5) calc(var(--my) * 1.5), var(--mx) var(--my);
    background-blend-mode: hue;
    mix-blend-mode: color-dodge;
    filter: brightness(.55) contrast(1.4) saturate(1.1);
    opacity: calc(.2 + var(--hyp) * .6);
}

.holo__glitter {
    background-image:
        radial-gradient(circle at 20% 30%, #fff 0 .6px, transparent 1.2px),
        radial-gradient(circle at 70% 60%, #fff 0 .5px, transparent 1px),
        radial-gradient(circle at 40% 80%, #cfe3ff 0 .6px, transparent 1.2px),
        radial-gradient(circle at 85% 15%, #ffe6f3 0 .5px, transparent 1px);
    background-size: 23px 29px, 31px 37px, 41px 43px, 53px 47px;
    background-position:
        calc(var(--mx) * .3) calc(var(--my) * .3),
        calc(var(--mx) * -.2) calc(var(--my) * .4),
        calc(var(--mx) * .5) calc(var(--my) * -.3),
        calc(var(--mx) * -.4) calc(var(--my) * -.2);
    mix-blend-mode: color-dodge;
    opacity: calc(.15 + var(--hyp) * .85);
    -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.35) 45%, transparent 75%);
    mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.35) 45%, transparent 75%);
}

.holo__glare {
    background: radial-gradient(farthest-corner circle at var(--mx) var(--my),
        rgba(255,255,255,.85) 0%, rgba(255,255,255,.35) 18%, rgba(0,0,0,.45) 95%);
    mix-blend-mode: overlay;
    opacity: calc(var(--hyp) * .85);
}

@media (prefers-reduced-motion: reduce) {
    .holo__shine,
    .holo__glitter,
    .holo__glare {
        opacity: .25;
    }
}
