/**
 * Fichier  : /features/loader/assets/css/style.css
 * Fonction : style du loader
 */


/* ==================================================
   PAGE
================================================== */

/*
 * Lors de la première arrivée, le contenu de la page
 * est masqué avant même le premier rendu.
 */

html.loader-active body {
    overflow: hidden;
}

html.loader-active body > *:not(.site-loader) {
    visibility: hidden;
}


/*
 * Lorsque le loader commence à disparaître,
 * la page peut être rendue derrière lui.
 */

html.loader-ready body > *:not(.site-loader) {
    visibility: visible;
}


/* ==================================================
   LOADER
================================================== */

.site-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
}

.site-loader {
    display: none;
    align-items: center;
    justify-content: center;
}

.site-loader {
    background: var(--main-background);
}

.site-loader {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* ==================================================
   ACTIVE
================================================== */

html.loader-active .site-loader {
    display: flex;
}


/* ==================================================
   HIDDEN
================================================== */

.site-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.site-loader.is-hidden {
    transition:
        opacity .7s ease,
        visibility .7s ease;
}


/* ==================================================
   INNER
================================================== */

.site-loader__inner {
    position: relative;
}

.site-loader__inner {
    width: clamp(
        70px,
        7vw,
        100px
    );

    aspect-ratio: 538.56988 / 792.29143;
}

.site-loader__inner {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ==================================================
   ICON
================================================== */

.site-loader__icon {
    position: relative;
    z-index: 2;
}

.site-loader__icon {
    display: block;
}

.site-loader__icon {
    width: 100%;
    height: 100%;
}

.site-loader__icon {
    overflow: visible;
}

.site-loader__icon {
    animation:
        loader-breathe 2.2s
        ease-in-out
        infinite;
}


/* ==================================================
   PATH
================================================== */

.site-loader__path {
    fill: none;
}

.site-loader__path {
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==================================================
   HALO
================================================== */

.site-loader__path--halo {
    stroke: var(--color-primary);
    stroke-width: 14px;
}

.site-loader__path--halo {
    opacity: .18;
}

.site-loader__path--halo {
    filter: blur(12px);
}

.site-loader__path--halo {
    animation:
        loader-halo-pulse 2s
        ease-in-out
        infinite;
}


/* ==================================================
   BASE
================================================== */

.site-loader__path--base {
    stroke: url(#loader-stroke-gradient);
    stroke-width: 5px;
}

.site-loader__path--base {
    opacity: .65;
}

.site-loader__path--base {
    filter:
        drop-shadow(
            0 0 4px
            rgba(233, 64, 27, .45)
        )
        drop-shadow(
            0 0 10px
            rgba(233, 64, 27, .32)
        );
}


/* ==================================================
   RUNNER
================================================== */

.site-loader__path--runner {
    stroke: rgba(255, 255, 255, .95);
    stroke-width: 7px;
}

.site-loader__path--runner {
    stroke-dasharray:
        12
        88;

    stroke-dashoffset: 0;
}

.site-loader__path--runner {
    opacity: 1;
}

.site-loader__path--runner {
    filter:
        url(#loader-neon)
        drop-shadow(
            0 0 5px
            rgba(255, 255, 255, .8)
        )
        drop-shadow(
            0 0 12px
            rgba(255, 123, 0, .9)
        )
        drop-shadow(
            0 0 24px
            rgba(233, 64, 27, .75)
        );
}

.site-loader__path--runner {
    animation:
        loader-runner 1.45s
        linear
        infinite;
}


/* ==================================================
   AURA
================================================== */

.site-loader__aura {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
}

.site-loader__aura {
    width: 170%;
    height: 130%;
}

.site-loader__aura {
    transform:
        translate(-50%, -50%)
        scale(.85);
}

.site-loader__aura {
    background:
        radial-gradient(
            ellipse,
            rgba(233, 64, 27, .22) 0%,
            rgba(201, 31, 22, .09) 38%,
            transparent 72%
        );
}

.site-loader__aura {
    opacity: .5;
}

.site-loader__aura {
    filter: blur(28px);
    pointer-events: none;
}

.site-loader__aura {
    animation:
        loader-aura 2s
        ease-in-out
        infinite;
}


/* ==================================================
   ANIMATIONS
================================================== */

@keyframes loader-runner {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -100;
    }

}

@keyframes loader-halo-pulse {

    0%,
    100% {
        opacity: .12;
    }

    50% {
        opacity: .34;
    }

}

@keyframes loader-aura {

    0%,
    100% {
        opacity: .28;

        transform:
            translate(-50%, -50%)
            scale(.82);
    }

    50% {
        opacity: .65;

        transform:
            translate(-50%, -50%)
            scale(1.08);
    }

}

@keyframes loader-breathe {

    0%,
    100% {
        transform: scale(.98);
    }

    50% {
        transform: scale(1.025);
    }

}


/* ==================================================
   EXIT
================================================== */

.site-loader.is-leaving .site-loader__icon {
    animation:
        loader-exit .55s
        cubic-bezier(.4, 0, .2, 1)
        forwards;
}

.site-loader.is-leaving .site-loader__aura {
    opacity: 0;
}

.site-loader.is-leaving .site-loader__aura {
    transition:
        opacity .45s ease;
}

@keyframes loader-exit {

    0% {
        opacity: 1;
        transform: scale(1);
    }

    35% {
        opacity: 1;
        transform: scale(1.06);
    }

    100% {
        opacity: 0;
        transform: scale(.88);
    }

}


/* ==================================================
   ACCESSIBILITÉ
================================================== */

@media (prefers-reduced-motion: reduce) {

    .site-loader__icon,
    .site-loader__aura,
    .site-loader__path {
        animation: none;
    }

}