#card-export-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

#card-border-wrapper {
    position: relative;
    line-height: 0;
    border-radius: calc(var(--card-radius) + 2px);
    overflow: hidden;
}

#card-border-wrapper.legendary-border::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: calc(var(--card-radius) + 6px);
    background: conic-gradient(#f5c542, #fff8c0, #f5a623, #ffe06e, #f5c542);
    z-index: -1;
    animation: legendaryBorderSpin 4s linear infinite;
}

@keyframes legendaryBorderSpin {
    to {
        transform: rotate(360deg);
    }
}


#card-border-wrapper.revealing {
    animation: cardReveal .45s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes cardReveal {
    0% {
        transform: scale(.80);
        opacity: 0;
    }

    65% {
        transform: scale(1.03);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#card-border-wrapper.reveal-rare {
    animation: cardRevealRare .55s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes cardRevealRare {
    0% {
        transform: scale(.78) translateY(18px);
        opacity: 0;
        filter: drop-shadow(0 0 0px rgba(77, 166, 255, 0));
    }

    50% {
        filter: drop-shadow(0 0 28px rgba(77, 166, 255, .9));
    }

    70% {
        transform: scale(1.04) translateY(-4px);
        opacity: 1;
    }

    100% {
        transform: scale(1) translateY(0);
        filter: drop-shadow(0 0 8px rgba(77, 166, 255, .2));
    }
}

#card-border-wrapper.reveal-epic {
    animation: cardRevealEpic .65s cubic-bezier(.18, 1.2, .36, 1) forwards;
}

@keyframes cardRevealEpic {
    0% {
        transform: scale(.65) rotateY(-20deg);
        opacity: 0;
        filter: drop-shadow(0 0 0px rgba(176, 106, 255, 0));
    }

    45% {
        filter: drop-shadow(0 0 42px rgba(176, 106, 255, 1));
    }

    72% {
        transform: scale(1.07) rotateY(4deg);
        opacity: 1;
    }

    88% {
        transform: scale(.98) rotateY(-1deg);
    }

    100% {
        transform: scale(1) rotateY(0deg);
        filter: drop-shadow(0 0 12px rgba(176, 106, 255, .25));
    }
}

#card-border-wrapper.reveal-legendary {
    animation: cardRevealLegendary .85s cubic-bezier(.16, 1.1, .3, 1) forwards;
}

@keyframes cardRevealLegendary {
    0% {
        transform: scale(.55) translateY(30px);
        opacity: 0;
        filter: drop-shadow(0 0 0px rgba(245, 197, 66, 0));
    }

    30% {
        opacity: 1;
    }

    55% {
        filter: drop-shadow(0 0 60px rgba(245, 197, 66, 1)) drop-shadow(0 0 24px rgba(255, 255, 200, .8));
    }

    75% {
        transform: scale(1.08) translateY(-6px);
    }

    90% {
        transform: scale(.99) translateY(1px);
    }

    100% {
        transform: scale(1) translateY(0);
        filter: drop-shadow(0 0 16px rgba(245, 197, 66, .35));
    }
}

#card-canvas {
    display: block;
    width: var(--card-w);
    height: auto;
    border-radius: var(--card-radius);
    position: relative;
    z-index: 1;
}

#card-name-area {
    position: absolute;
    left: 0;
    right: 0;
    top: 78%;
    height: 10%;
    z-index: 2;
    cursor: text;
    border-radius: var(--card-radius);
}

#card-name-area:hover {
    background: rgba(255, 255, 255, 0.06);
}

#card-canvas.shadow-common {
    box-shadow: 0 0 20px rgba(139, 150, 168, .22), 0 20px 50px rgba(0, 0, 0, .82);
}

#card-canvas.shadow-rare {
    box-shadow: 0 0 22px rgba(77, 166, 255, .38), 0 20px 50px rgba(0, 0, 0, .82);
}

#card-canvas.shadow-epic {
    box-shadow: 0 0 24px rgba(176, 106, 255, .44), 0 20px 50px rgba(0, 0, 0, .82);
}

#card-canvas.legendary-glow {
    animation: legendaryCanvasGlow 2.8s ease-in-out infinite;
}

@keyframes legendaryCanvasGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 10px rgba(245, 197, 66, .50)) drop-shadow(0 14px 30px rgba(0, 0, 0, .85));
    }

    50% {
        filter: drop-shadow(0 0 28px rgba(245, 197, 66, .88)) drop-shadow(0 0 54px rgba(245, 197, 66, .22)) drop-shadow(0 14px 30px rgba(0, 0, 0, .85));
    }
}


.holo-layer {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    transition: opacity .4s ease;
}

.holo-layer.holo-hidden {
    opacity: 0 !important;
}

.holo-gif {
    background-image: url('../assets/holo.gif');
    background-size: 130%;
    background-position:
        calc(50% + var(--ry, 0) * -0.8%) calc(50% + var(--rx, 0) * 0.8%);
    mix-blend-mode: overlay;

    opacity: calc(0.15 + clamp(0, (abs(var(--rx, 0)) + abs(var(--ry, 0))) / 55, 0.50));
}

.holo-rainbow {
    background: repeating-linear-gradient(calc(110deg + var(--ry, 0) * 2.5deg),
            hsl(calc(310 + var(--ry, 0) * -12) 100% 65% / 0.7) 0%,
            hsl(calc(255 + var(--ry, 0) * -12) 100% 65% / 0.7) 12%,
            hsl(calc(195 + var(--ry, 0) * -12) 100% 65% / 0.7) 25%,
            hsl(calc(155 + var(--ry, 0) * -12) 100% 65% / 0.7) 38%,
            hsl(calc(80 + var(--ry, 0) * -12) 100% 65% / 0.7) 51%,
            hsl(calc(35 + var(--ry, 0) * -12) 100% 65% / 0.7) 64%,
            hsl(calc(310 + var(--ry, 0) * -12) 100% 65% / 0.7) 77%,
            hsl(calc(255 + var(--ry, 0) * -12) 100% 65% / 0.7) 90%);
    background-position:
        calc(50% + var(--ry, 0) * -2%) calc(50% + var(--rx, 0) * 2%);
    mix-blend-mode: color-dodge;
    opacity: clamp(0.03, calc(0.03 + (abs(var(--rx, 0)) + abs(var(--ry, 0))) / 40), 0.88);
    z-index: 3;
}

.holo-sheen {
    background: radial-gradient(ellipse 65% 55% at var(--mx, 50%) var(--my, 50%),
            rgba(255, 255, 255, 0.50) 0%,
            rgba(190, 170, 255, 0.22) 28%,
            rgba(150, 255, 230, 0.12) 52%,
            transparent 72%);
    mix-blend-mode: overlay;
    opacity: clamp(0.08, calc(0.10 + (abs(var(--rx, 0)) + abs(var(--ry, 0))) / 25), 0.95);
    z-index: 4;
}