/**
 * OKD site preloader — basic shell; customize colors/markup in `parts/preloader.php`.
 * Stacks above `#okd-page-transition` (see `page-transition-gsap.css` z-index).
 */

html.is-loading {
    overflow: hidden;
}

html.has-loaded {
    overflow: visible;
}

.okd-preloader {
    align-items: center;
    background: var(--wp--preset--color--accent-darker, #360d16);
    color: var(--wp--preset--color--gray-1, #FAFAF6);
    display: flex;
    inset: 0;
    justify-content: center;
    pointer-events: auto;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 2147483640;
}

.okd-preloader.is-hidden {
    pointer-events: none;
}

.logo-loader {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /*
     * The logo is one dense path that doubles back, so it LOOKS fully drawn
     * before stroke-dashoffset actually reaches 0. Start the fill before the
     * draw's math ends (fill-delay < draw) so it overlaps that invisible tail —
     * no perceived pause. Fill eases in over its own (longer) duration.
     */
    --okd-pl-fill: #FAFAF6;
    --okd-pl-draw: 2.5s;
    --okd-pl-fill-delay: 1.6s;
    --okd-pl-fill-dur: 1.8s;
}

.logo-loader svg {
    display: block;
    width: min(90vw, 320px);
    height: auto;
}

/* pathLength="1" on each path → dash units = full contour */
.logo-loader path {
    fill: transparent;
    stroke: #f5f5f5;
    stroke-width: 0.42;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    paint-order: stroke fill;
    vector-effect: non-scaling-stroke;
    animation-fill-mode: forwards;
    animation-timing-function: linear, ease-in-out;
    animation-name: okd-preloader-draw, okd-preloader-fill;
    animation-duration: var(--okd-pl-draw), var(--okd-pl-fill-dur);
    animation-delay: 0s, var(--okd-pl-fill-delay);
}

@keyframes okd-preloader-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes okd-preloader-fill {
    from {
        fill: transparent;
        stroke-opacity: 1;
    }
    to {
        fill: var(--okd-pl-fill);
        stroke-opacity: 0;
    }
}

.okd-preloader__label {
    font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    margin: 0;
    text-transform: uppercase;
}

.bottom-pattern {
    position:absolute;
    inset:auto 0 0 0;
    padding:var(--wp--preset--spacing--space-10);
    display:flex;
    justify-content: center;
    font-size:14px;
    text-transform: uppercase;
    text-align: center;
}

@media (max-width: 800px) {
    .bottom-pattern {
        font-size:12px;
    }
}