/* === Preloader Overlay (black) === */
#preloader {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 9999;
    background: #000;
    opacity: 1;
    transition: opacity .5s ease;
}

#preloader.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Preloader spinner (scoped, conflict-safe) */
#preloader .pl {
    display: block;
    isolation: isolate;
    width: 10em;
    height: auto;
}

#preloader .pl__blend {
    mix-blend-mode: multiply;
}

#preloader .pl__curve {
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
    animation-iteration-count: infinite;
}

#preloader .pl__curve--cyan {
    stroke: hsl(198 92% 59%);
}

#preloader .pl__curve--magenta {
    stroke: hsl(325 97% 54%);
}

#preloader .pl__curve--yellow {
    stroke: hsl(49 98% 50%);
}

#preloader .pl__curve--rotate1 {
    animation-name: pl-rotate1;
}

#preloader .pl__curve--rotate2 {
    animation-name: pl-rotate2;
}

#preloader .pl__curve--rotate3 {
    animation-name: pl-rotate3;
}

#preloader .pl__curve--rotate4 {
    animation-name: pl-rotate4;
}

#preloader .pl__curve--rotate5 {
    animation-name: pl-rotate5;
}

#preloader .pl__curve--rotate6 {
    animation-name: pl-rotate6;
}

#preloader .pl__curve--rotate7 {
    animation-name: pl-rotate7;
}

#preloader .pl__curve--rotate8 {
    animation-name: pl-rotate8;
}

@keyframes pl-rotate1 {
    from {
        transform: rotate(0)
    }

    17% {
        transform: rotate(0.525turn) translate(4px, 0)
    }

    34% {
        transform: rotate(1.05turn)
    }

    46%,
    to {
        transform: rotate(1turn)
    }
}

@keyframes pl-rotate2 {

    from,
    8% {
        transform: rotate(0)
    }

    36% {
        transform: rotate(-1.05turn)
    }

    48%,
    to {
        transform: rotate(-1turn)
    }
}

@keyframes pl-rotate3 {

    from,
    3% {
        transform: rotate(0)
    }

    22.5% {
        transform: rotate(0.525turn) translate(3px, 0)
    }

    42% {
        transform: rotate(1.05turn)
    }

    54%,
    to {
        transform: rotate(1turn)
    }
}

@keyframes pl-rotate4 {
    from {
        transform: rotate(0)
    }

    34% {
        transform: rotate(-1.08turn)
    }

    46%,
    to {
        transform: rotate(-1turn)
    }
}

@keyframes pl-rotate5 {

    from,
    12% {
        transform: rotate(0)
    }

    31% {
        transform: rotate(0.525turn) translate(5px, 0)
    }

    50% {
        transform: rotate(1.05turn)
    }

    62%,
    to {
        transform: rotate(1turn)
    }
}

@keyframes pl-rotate6 {
    from {
        transform: rotate(0)
    }

    34% {
        transform: rotate(-1.05turn)
    }

    46%,
    to {
        transform: rotate(-1turn)
    }
}

@keyframes pl-rotate7 {

    from,
    18% {
        transform: rotate(0)
    }

    34% {
        transform: rotate(0.53turn) translate(4px, 0)
    }

    50% {
        transform: rotate(1.06turn)
    }

    62%,
    to {
        transform: rotate(1turn)
    }
}

@keyframes pl-rotate8 {

    from,
    10% {
        transform: rotate(0)
    }

    29% {
        transform: rotate(-0.54turn) translate(-4px, 0)
    }

    48% {
        transform: rotate(-1.08turn)
    }

    60%,
    to {
        transform: rotate(-1turn)
    }
}

/* === Hide header until preloader has finished === */
header,
.site-header,
#header {
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease;
}

body.preloader-done header,
body.preloader-done .site-header,
body.preloader-done #header {
    opacity: 1;
    visibility: visible;
}