.mhk-logo-motion,
.mhk-logo-motion * {
    box-sizing: border-box;
}

.mhk-logo-motion {
    --mhk-logo-max-width: 520px;
    --mhk-logo-mobile-width: 350px;
    --mhk-logo-space-compensation: 80px;
    --mhk-logo-ratio: 1;
    --mhk-ring-duration: 38s;
    --mhk-ring-inner: 35%;
    --mhk-ring-outer: 53%;
    position: relative;
    isolation: isolate;
    display: block;
    width: min(100%, var(--mhk-logo-max-width));
    aspect-ratio: var(--mhk-logo-ratio);
    margin-inline: auto;
    margin-bottom: calc(var(--mhk-logo-space-compensation) * -1);
    overflow: visible;
    transform-origin: 50% 50%;
}

.mhk-logo-motion__source,
.mhk-logo-motion__layer {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    user-select: none;
    -webkit-user-drag: none;
}

.mhk-logo-motion__source {
    position: relative;
    z-index: 0;
    opacity: 0 !important;
    pointer-events: none;
}

.mhk-logo-motion__layer {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none;
    will-change: transform, filter, opacity;
}

.mhk-logo-motion__inner {
    z-index: 4;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 var(--mhk-ring-inner), transparent calc(var(--mhk-ring-inner) + 1.2%));
    mask-image: radial-gradient(circle at 50% 50%, #000 0 var(--mhk-ring-inner), transparent calc(var(--mhk-ring-inner) + 1.2%));
    animation: mhkLogoInnerFloat 7.5s ease-in-out infinite;
    filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .34));
}

.mhk-logo-motion__ring-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    transform-origin: 50% 50%;
    animation: mhkLogoRingRotate var(--mhk-ring-duration) linear infinite;
    will-change: transform;
}

.mhk-logo-motion__ring {
    z-index: 2;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 calc(var(--mhk-ring-inner) - 1%), #000 var(--mhk-ring-inner) var(--mhk-ring-outer), transparent calc(var(--mhk-ring-outer) + 1.2%));
    mask-image: radial-gradient(circle at 50% 50%, transparent 0 calc(var(--mhk-ring-inner) - 1%), #000 var(--mhk-ring-inner) var(--mhk-ring-outer), transparent calc(var(--mhk-ring-outer) + 1.2%));
    transform-origin: 50% 50%;
    filter: drop-shadow(0 0 7px rgba(214, 182, 84, .14));
}

.mhk-logo-motion__embers {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .9;
    mix-blend-mode: screen;
}

.mhk-logo-motion.has-intro {
    opacity: 0;
    transform: translateY(14px) scale(.965);
}

.mhk-logo-motion.has-intro.is-ready {
    animation: mhkLogoIntro 1.15s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes mhkLogoRingRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes mhkLogoInnerFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.006); }
}

@keyframes mhkLogoIntro {
    0% { opacity: 0; transform: translateY(14px) scale(.965); filter: blur(2px); }
    65% { opacity: 1; transform: translateY(-2px) scale(1.008); filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@media (hover: hover) and (pointer: fine) {
    .mhk-logo-motion:hover .mhk-logo-motion__inner {
        filter: drop-shadow(0 18px 32px rgba(0, 0, 0, .4));
    }
}

@media (max-width: 767px) {
    .mhk-logo-motion {
        --mhk-logo-space-compensation: 40px;
        width: min(88vw, var(--mhk-logo-mobile-width));
    }

    .mhk-logo-motion__ring-wrap {
        animation-duration: calc(var(--mhk-ring-duration) * 1.25);
    }

    .mhk-logo-motion__ring {
        filter: drop-shadow(0 0 5px rgba(214, 182, 84, .12));
    }

    .mhk-logo-motion__embers {
        opacity: .72;
    }
}

@supports not ((mask-image: radial-gradient(circle, #000, transparent)) or (-webkit-mask-image: radial-gradient(circle, #000, transparent))) {
    .mhk-logo-motion__inner,
    .mhk-logo-motion__ring-wrap,
    .mhk-logo-motion__embers {
        display: none !important;
    }

    .mhk-logo-motion__source {
        opacity: 1 !important;
        animation: mhkLogoInnerFloat 7.5s ease-in-out infinite;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mhk-logo-motion,
    .mhk-logo-motion__ring-wrap,
    .mhk-logo-motion__layer,
    .mhk-logo-motion__source {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }

    .mhk-logo-motion__embers {
        display: none !important;
    }

    .mhk-logo-motion.has-intro {
        opacity: 1 !important;
    }
}