
/* Fullscreen overlay */
#preloader {
    position: fixed;
    inset: 0;                /* top:0;right:0;bottom:0;left:0 */
    display: grid;
    place-items: center;
    background: var(--pre-bg);
    z-index: 9999;
    transition: opacity var(--fade-duration) ease, visibility var(--fade-duration) ease;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Container for spinner + label */
.pre-inner{
    text-align: center;
}

/* SVG spinner sizing */
.spinner {
    width: 72px;
    height: 72px;
    display: inline-block;
    margin-bottom: 12px;
}

/* Animated stroke using CSS animation */
.spinner circle {
    stroke: var(--accent);
    stroke-linecap: round;
    stroke-width: 6;
    fill: none;
    stroke-dasharray: 150;
    stroke-dashoffset: 0;
    transform-origin: 50% 50%;
    animation: spin 1.15s cubic-bezier(.4,.0,.2,1) infinite, dash 1.5s ease-in-out infinite;
}

/* Text below spinner */
.pre-text {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 14px;
    color: var(--text-color);
    letter-spacing: 0;
}
