.link-button.effect-holo {
    --holo-x: 50%;
    --holo-y: 50%;
    box-shadow: -3px -3px 3px 0 rgba(38, 230, 247, 0.55), 3px 3px 3px 0 rgba(247, 89, 228, 0.55), 0 0 6px 2px rgba(255, 231, 89, 0.5), 0 14px 18px -14px rgba(0, 0, 0, 0.55);
}

.link-button.effect-holo::before,
.link-button.effect-holo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.link-button.effect-holo::before {
    z-index: 1;
    background-image: linear-gradient(115deg, transparent 0%, transparent 18%, rgba(0, 231, 255, 0.7) 35%, rgba(255, 0, 231, 0.7) 52%, rgba(255, 231, 89, 0.55) 66%, transparent 82%, transparent 100%);
    background-position: var(--holo-x) var(--holo-y);
    background-size: 300% 300%;
    mix-blend-mode: normal;
    opacity: 0.42;
    animation: holoGradient 9s ease infinite;
}

.link-button.effect-holo::after {
    z-index: 2;
    background-image: radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.95) 0 1px, transparent 2px), radial-gradient(circle at 72% 30%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2px), radial-gradient(circle at 43% 74%, rgba(255, 255, 255, 0.9) 0 1px, transparent 2px), radial-gradient(circle at 88% 68%, rgba(255, 255, 255, 0.75) 0 1px, transparent 2px), radial-gradient(circle at var(--holo-x) var(--holo-y), rgba(255, 255, 255, 0.6), transparent 24%);
    background-size: 80px 80px, 95px 95px, 110px 110px, 75px 75px, 100% 100%;
    background-position: center;
    mix-blend-mode: normal;
    opacity: 0.38;
    animation: holoSparkle 9s ease infinite;
}

.link-button.effect-holo:hover::before,
.link-button.effect-holo.is-holo-active::before {
    opacity: 0.58;
}

.link-button.effect-holo:hover::after,
.link-button.effect-holo.is-holo-active::after {
    opacity: 0.5;
}

@keyframes holoGradient {
    0%, 100% {
        background-position: 0% 0%;
        opacity: 0.38;
    }

    19% {
        background-position: 100% 100%;
        opacity: 0.88;
    }

    45% {
        background-position: 86% 18%;
        opacity: 0.64;
    }

    65% {
        background-position: 12% 85%;
        opacity: 0.78;
    }

    82% {
        background-position: 0% 0%;
        opacity: 0.44;
    }
}

@keyframes holoSparkle {
    0%, 100% {
        transform: translate3d(0, 0, 0);
        opacity: 0.35;
    }

    20% {
        transform: translate3d(-6px, 4px, 0);
        opacity: 0.82;
    }

    58% {
        transform: translate3d(7px, -5px, 0);
        opacity: 0.58;
    }

    78% {
        transform: translate3d(-3px, 7px, 0);
        opacity: 0.72;
    }
}

@media (prefers-reduced-motion: reduce) {
    .link-button.effect-holo::before,
    .link-button.effect-holo::after {
        animation: none;
    }
}