/* ==========================================================
   AXISMER — GLOBAL PAGE TRANSITION
   ========================================================== */

.axismer-transition{
    position:fixed;
    inset:0;

    z-index:999999;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#080909;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .32s cubic-bezier(.4,0,.2,1),
        visibility 0s linear .32s;
}

.axismer-transition.is-active{
    opacity:1;
    visibility:visible;
    pointer-events:all;

    transition:
        opacity .32s cubic-bezier(.4,0,.2,1),
        visibility 0s;
}


.axismer-transition__mark{
    position:relative;

    width:92px;
    height:92px;

    display:flex;
    align-items:center;
    justify-content:center;

    opacity:0;
    transform:scale(.82);

    transition:
        opacity .35s ease .12s,
        transform .65s cubic-bezier(.16,1,.3,1) .08s;
}

.axismer-transition.is-active .axismer-transition__mark{
    opacity:1;
    transform:scale(1);
}


.axismer-transition__mark::before{
    content:"";

    position:absolute;
    inset:-46px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(217,210,201,.14) 0%,
            rgba(217,210,201,.055) 34%,
            rgba(217,210,201,0) 70%
        );

    opacity:0;

    transform:scale(.55);

    animation:
        axismerTransitionHalo 1.25s ease-in-out infinite;
}


.axismer-transition__mark::after{
    content:"";

    position:absolute;
    inset:-17px;

    border:1px solid rgba(217,210,201,.13);
    border-radius:50%;

    opacity:0;

    transform:scale(.72);

    animation:
        axismerTransitionRing 1.25s cubic-bezier(.16,1,.3,1) infinite;
}


.axismer-transition__mark img{
    position:relative;
    z-index:2;

    display:block;

    width:78px;
    height:78px;

    object-fit:contain;

    filter:
        drop-shadow(0 0 12px rgba(255,238,210,.20))
        drop-shadow(0 0 30px rgba(199,169,126,.12));

    animation:
        axismerTransitionMark 1.4s ease-in-out infinite;
}


@keyframes axismerTransitionMark{

    0%,100%{
        transform:scale(1) rotate(0deg);
        filter:
            drop-shadow(0 0 10px rgba(255,238,210,.16))
            drop-shadow(0 0 24px rgba(199,169,126,.10));
    }

    50%{
        transform:scale(1.055) rotate(2deg);
        filter:
            drop-shadow(0 0 18px rgba(255,238,210,.28))
            drop-shadow(0 0 42px rgba(199,169,126,.18));
    }

}


@keyframes axismerTransitionHalo{

    0%,100%{
        opacity:.35;
        transform:scale(.72);
    }

    50%{
        opacity:.85;
        transform:scale(1);
    }

}


@keyframes axismerTransitionRing{

    0%{
        opacity:.45;
        transform:scale(.65);
    }

    75%{
        opacity:0;
        transform:scale(1.45);
    }

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

}


@media(max-width:600px){

    .axismer-transition__mark{
        width:76px;
        height:76px;
    }

    .axismer-transition__mark img{
        width:64px;
        height:64px;
    }

}


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

    .axismer-transition,
    .axismer-transition__mark{
        transition:none;
    }

    .axismer-transition__mark img,
    .axismer-transition__mark::before,
    .axismer-transition__mark::after{
        animation:none;
    }

}

/* END AXISMER GLOBAL PAGE TRANSITION */