/**
 * 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--gray-2, #f5f5f5);
    color: var(--wp--preset--color--accent-darker, #111);
    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;
    /* All paths: parallel stroke draw, then parallel fill */
    --okd-pl-fill: #360d16;
    --okd-pl-draw: 5s;
    --okd-pl-fill-dur: 1s;
}

.logo-loader svg {
    display: block;
}

/* pathLength="1" on each path → dash units = full contour */
.logo-loader .loader-mark path,
.logo-loader .loader-text path {
    fill: transparent;
    stroke: var(--okd-pl-fill);
    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: cubic-bezier(0.45, 0, 0.2, 1);
    animation-name: okd-preloader-draw, okd-preloader-fill;
    animation-duration: var(--okd-pl-draw), var(--okd-pl-fill-dur);
    animation-delay: 0s, 4s;
}

@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;
    background: url('/wp-content/themes/okd/static/img/pattern-transparent.svg') bottom center repeat-x;
    padding:0 24px 89px 24px;
    display:flex;
    justify-content: space-between;
    font-size:14px;
    text-transform: uppercase;
}

html.is-reduced-motion .okd-preloader {
    transition: none;
}

html.is-reduced-motion .logo-loader .loader-mark path,
html.is-reduced-motion .logo-loader .loader-text path {
    animation: none;
    stroke-dashoffset: 0;
    fill: var(--okd-pl-fill, #360d16);
    stroke-opacity: 0;
    stroke-width: 0;
}