/* Boot loader - crossfade loader out while site (#app) fades in via --arpm-crossfade */

:root {
    --arpm-crossfade: 0;
}

html[data-arpm-boot="loading"] #app {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

html[data-arpm-crossfade-active] #app,
html[data-arpm-boot="complete"] #app {
    visibility: visible;
    pointer-events: auto;
}

html[data-arpm-crossfade-active] #app {
    opacity: var(--arpm-crossfade);
}

html[data-arpm-boot="complete"] #app {
    opacity: 1;
}

#arpm-loader-root {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #fff;
    pointer-events: none;
    opacity: calc(1 - var(--arpm-crossfade));
}

#arpm-loader-root.arpm-loader-root--hide {
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.28s ease;
}

.arpm-loader__stage {
    position: fixed;
    inset: 0;
    margin: 0;
    padding: 0;
}

.arpm-loader__anchor {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--arpm-logo-display-width);
    max-width: var(--arpm-logo-display-max);
    transform: translate(
        calc(var(--arpm-logo-anchor-x-ratio) * -100%),
        calc(var(--arpm-logo-anchor-y-ratio) * -100%)
    );
}

.arpm-loader__canvas-wrap {
    width: 100%;
    line-height: 0;
}

#arpm-logo-canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--arpm-logo-aspect);
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

.arpm-loader__percent {
    position: absolute;
    top: 100%;
    left: calc(var(--arpm-pdanda-left-ratio) * 100%);
    width: calc(var(--arpm-pdanda-width-ratio) * 100%);
    box-sizing: border-box;
    margin: clamp(0.5rem, 1vw, 0.875rem) 0 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: clamp(0.8125rem, 0.9vw, 1.125rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: #1a1a1a;
    min-height: 1.25rem;
    line-height: 1.25;
}

#arpm-reveal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;
    opacity: calc(1 - var(--arpm-crossfade));
    pointer-events: none;
}

#arpm-reveal-overlay.arpm-reveal-overlay--gone {
    display: none;
}

#app .loading-progress,
#app .loading-progress-text {
    position: fixed !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 480px) {
    :root {
        --arpm-logo-display-width: min(calc(94vw * var(--arpm-logo-scale)), calc(20rem * var(--arpm-logo-scale)));
        --arpm-logo-display-max: calc(20rem * var(--arpm-logo-scale));
    }
}