/*
 * Table of contents
 * 1. Basic styles
 *    1.1 Preloader states
 *    1.2 Fade effects (exit effects)
 *    1.3 No-scripting fallback
 */

/* Basic styles: start */
#the-preloader-element {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease-in-out;
    text-align: center;
}

#the-preloader-element,
#the-preloader-element div {
    line-height: 0;
    font-size: 0;
}

.the-preloader-image {
    display: block;
}

/* Preloader states: start */
html.preloader-premium-cookie-active #the-preloader-element {
    display: none;
    height: 0;
    opacity: 0;
}

/* Added by device-validator.js when the "Device Targeting" option excludes this device. */
html.preloader-premium-device-excluded #the-preloader-element {
    display: none;
}

#the-preloader-element.preloader-premium-fade-out {
    opacity: 0;
}

#the-preloader-element.preloader-premium-hidden {
    display: none;
}
/* Preloader states: end */

/* Fade effects (exit effects): start */
/*
 * "Fade Out" (the default) uses the opacity transition above. The other effects
 * use keyframes because "clip-path" can't transition from "none". Their
 * animation-duration is printed as inline CSS by class-output.php from the
 * "Fade Speed" option, and "forwards" keeps the end state until
 * thePreloader.js adds "preloader-premium-hidden".
 */
#the-preloader-element.preloader-premium-slide-up,
#the-preloader-element.preloader-premium-slide-down,
#the-preloader-element.preloader-premium-zoom-out,
#the-preloader-element.preloader-premium-circle-reveal,
#the-preloader-element.preloader-premium-circle-expand,
#the-preloader-element.preloader-premium-blur-out {
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

#the-preloader-element.preloader-premium-slide-up {
    animation-name: preloader-premium-slide-up;
}

#the-preloader-element.preloader-premium-slide-down {
    animation-name: preloader-premium-slide-down;
}

#the-preloader-element.preloader-premium-zoom-out {
    animation-name: preloader-premium-zoom-out;
}

#the-preloader-element.preloader-premium-circle-reveal {
    animation-name: preloader-premium-circle-reveal;
}

/*
 * Circle Expand is the reverse of Circle Reveal: a transparent hole opens in the
 * center and grows to the corners. clip-path can't cut a hole, so a radial mask
 * is used instead. Its hole size comes from --preloader-premium-hole, which is
 * registered with @property below so the keyframes can animate it. Browsers
 * without @property keep the preloader still, then hide it when the time ends.
 */
#the-preloader-element.preloader-premium-circle-expand {
    animation-name: preloader-premium-circle-expand;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--preloader-premium-hole), #000 var(--preloader-premium-hole));
    mask-image: radial-gradient(circle at 50% 50%, transparent var(--preloader-premium-hole), #000 var(--preloader-premium-hole));
}

#the-preloader-element.preloader-premium-blur-out {
    animation-name: preloader-premium-blur-out;
}

@keyframes preloader-premium-slide-up {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-100%);
    }
}

@keyframes preloader-premium-slide-down {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100%);
    }
}

@keyframes preloader-premium-zoom-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(1.5);
    }
}

/* 75% radius covers the corners: they sit at about 71% of the circle's reference size. */
@keyframes preloader-premium-circle-reveal {
    from {
        clip-path: circle(75% at 50% 50%);
    }
    to {
        clip-path: circle(0% at 50% 50%);
    }
}

/* The gradient's 100% is the distance from the center to the farthest corner. */
@property --preloader-premium-hole {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

@keyframes preloader-premium-circle-expand {
    from {
        --preloader-premium-hole: 0%;
    }
    to {
        --preloader-premium-hole: 100%;
    }
}

@keyframes preloader-premium-blur-out {
    from {
        opacity: 1;
        filter: blur(0);
    }
    to {
        opacity: 0;
        filter: blur(12px);
    }
}

/* Visitors who prefer reduced motion get the default fade (opacity transition) instead. */
@media (prefers-reduced-motion: reduce) {
    #the-preloader-element.preloader-premium-slide-up,
    #the-preloader-element.preloader-premium-slide-down,
    #the-preloader-element.preloader-premium-zoom-out,
    #the-preloader-element.preloader-premium-circle-reveal,
    #the-preloader-element.preloader-premium-circle-expand,
    #the-preloader-element.preloader-premium-blur-out {
        animation: none;
        opacity: 0;
    }
}
/* Fade effects (exit effects): end */

/* No-scripting fallback: start */
@media (scripting: none) {
    /*
     * Why !important: when JavaScript is disabled, thePreloader.js never runs,
     * so nothing removes the preloader and it would cover the page forever.
     * !important guarantees it stays hidden, overriding "display: flex" above
     * and any theme or plugin CSS that targets #the-preloader-element.
     */
    #the-preloader-element {
        display: none !important;
    }
}
/* No-scripting fallback: end */
/* Basic styles: end */