/* HEHEMETAL Loading Experience — all styles scoped to plugin classes */
html.hhm-lx-boot::before,
html.hhm-lx-leaving::before {
    content: '';
    position: fixed;
    z-index: 2147483647;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    pointer-events: none;
    background: #ed4446;
    transform: scaleX(0.035);
    transform-origin: left center;
    box-shadow: 0 0 10px rgb(237 68 70 / 36%);
    animation: hhm-lx-progress 1.65s cubic-bezier(.11,.64,.24,.97) forwards;
}

@keyframes hhm-lx-progress {
    0% {transform: scaleX(.035);}
    25% {transform: scaleX(.35);}
    75% {transform: scaleX(.78);}
    100% {transform: scaleX(.91);}
}

img.hhm-lx-image-waiting {opacity: .28 !important;}
img.hhm-lx-image-entered {
    animation: hhm-lx-image-in 420ms ease-out both;
}
@keyframes hhm-lx-image-in {
    from {opacity: .28;}
    to {opacity: 1;}
}

@media (prefers-reduced-motion: reduce) {
    html.hhm-lx-boot::before,
    html.hhm-lx-leaving::before { animation: none; transform: scaleX(1); }
    img.hhm-lx-image-waiting {opacity: 1 !important;}
    img.hhm-lx-image-entered {animation: none;}
}