.magick-hub {
    width: min(100%, 820px);
    margin: 0 auto 3rem;
    text-align: center;
}

.magick-hub__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.magick-hub__backdrop {
    fill: rgba(141, 149, 163, .17);
    stroke: rgba(246, 211, 101, .055);
    stroke-width: 1.2px;
    paint-order: stroke fill;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 126px;
    font-weight: 700;
    letter-spacing: .075em;
    filter: drop-shadow(0 0 14px rgba(246, 211, 101, .10));
    opacity: .025;
    transform: scale(.985);
    transform-box: fill-box;
    transform-origin: center;
    pointer-events: none;
    user-select: none;
}

.magick-hub.is-ready .magick-hub__backdrop {
    animation: magick-hub-emerge 4.6s cubic-bezier(.22, .61, .36, 1) .65s both;
}

.magick-hub__star {
    fill: none;
    stroke: #f6d365;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px rgba(246, 211, 101, .24));
}

.magick-hub__hit {
    fill: transparent;
}

.magick-hub__tip,
.magick-hub__card {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .24s ease, filter .24s ease, opacity .24s ease;
}

.magick-hub__tip {
    fill: #ffd27f;
    stroke: #f6d365;
    stroke-width: 3;
    filter: drop-shadow(0 0 4px rgba(255, 210, 127, .45));
}

.magick-hub__card-bg {
    fill: rgba(13, 18, 28, .56);
    stroke: rgba(246, 211, 101, .26);
    stroke-width: 1.5;
    transition: fill .24s ease, stroke .24s ease;
}

.magick-hub__logo {
    opacity: .94;
}

.magick-hub__label {
    fill: #ffd27f;
    font-size: 19px;
    font-weight: 650;
    letter-spacing: .02em;
}

.magick-hub__link:hover .magick-hub__tip,
.magick-hub__link:focus .magick-hub__tip,
.magick-hub__link:focus-visible .magick-hub__tip {
    transform: translate(var(--move-x), var(--move-y)) scale(1.22);
    filter: drop-shadow(0 0 12px rgba(255, 210, 127, .9));
}

.magick-hub__link:hover .magick-hub__card,
.magick-hub__link:focus .magick-hub__card,
.magick-hub__link:focus-visible .magick-hub__card {
    transform: translate(var(--move-x), var(--move-y)) scale(1.045);
    filter: drop-shadow(0 7px 14px rgba(0, 0, 0, .34));
}

.magick-hub__link:hover .magick-hub__card-bg,
.magick-hub__link:focus .magick-hub__card-bg,
.magick-hub__link:focus-visible .magick-hub__card-bg {
    fill: rgba(24, 31, 45, .9);
    stroke: rgba(255, 210, 127, .72);
}

.magick-hub__link:focus {
    outline: none;
}

.magick-hub__link:focus-visible .magick-hub__card-bg {
    stroke-width: 4;
}

.magick-hub.is-ready .magick-hub__link {
    animation: magick-hub-breathe .8s ease-out both;
    animation-delay: calc(var(--item-index, 0) * 120ms);
}

@keyframes magick-hub-breathe {
    0%, 100% { opacity: 1; }
    48% { opacity: .72; filter: drop-shadow(0 0 10px rgba(255, 210, 127, .65)); }
}

@keyframes magick-hub-emerge {
    0% {
        opacity: .025;
        filter: blur(15px) drop-shadow(0 0 2px rgba(246, 211, 101, 0));
        transform: scale(.985);
    }
    38% {
        opacity: .16;
        filter: blur(8px) drop-shadow(0 0 5px rgba(246, 211, 101, .025));
    }
    72% {
        opacity: .54;
        filter: blur(2.5px) drop-shadow(0 0 10px rgba(246, 211, 101, .07));
    }
    100% {
        opacity: 1;
        filter: blur(0) drop-shadow(0 0 14px rgba(246, 211, 101, .10));
        transform: scale(1);
    }
}

@media (max-width: 620px) {
    .magick-hub {
        width: calc(100% + 1rem);
        margin-left: -.5rem;
    }

}

@media (prefers-reduced-motion: reduce) {
    .magick-hub__star,
    .magick-hub__backdrop,
    .magick-hub__link,
    .magick-hub__tip,
    .magick-hub__card {
        animation: none !important;
        transition: none !important;
    }

    .magick-hub__backdrop {
        opacity: 1;
        transform: none;
        filter: drop-shadow(0 0 14px rgba(246, 211, 101, .10));
    }
}