/* =========================================================
   STAFFLAND MINECRAFT MOTION ENGINE V1
   ========================================================= */

html.sl-mc-motion{
    scroll-behavior:smooth;
}

body{
    position:relative;
}


/* =========================================================
   AMBIENT WORLD
   ========================================================= */

#sl-mc-ambient{
    position:fixed;
    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:0;
}

#sl-mc-ambient-layer{
    position:absolute;

    inset:-4%;

    will-change:transform;
}


.sl-mc-pixel{
    position:absolute;

    left:var(--x);
    bottom:-70px;

    width:var(--s);
    height:var(--s);

    opacity:0;

    border:
        1px solid
        rgba(232,179,88,.20);

    background:
        linear-gradient(
            135deg,
            rgba(232,179,88,.24),
            rgba(115,74,22,.08)
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.025),
        0 0 12px
        rgba(232,179,88,.08);

    image-rendering:pixelated;

    animation:
        slMcPixelRise
        var(--duration)
        linear
        var(--delay)
        infinite;

    will-change:transform,opacity;
}


.sl-mc-pixel:nth-child(3n){
    border-color:
        rgba(255,255,255,.09);

    background:
        rgba(255,255,255,.035);
}


.sl-mc-pixel:nth-child(5n){
    background:
        rgba(86,126,74,.08);

    border-color:
        rgba(120,165,104,.12);
}


@keyframes slMcPixelRise{

    0%{
        opacity:0;

        transform:
            translate3d(
                0,
                0,
                0
            )
            rotate(0deg);
    }

    12%{
        opacity:var(--opacity);
    }

    82%{
        opacity:var(--opacity);
    }

    100%{
        opacity:0;

        transform:
            translate3d(
                var(--drift),
                -118vh,
                0
            )
            rotate(180deg);
    }

}


/* =========================================================
   CURSOR LIGHT
   ========================================================= */

#sl-mc-glow{
    position:fixed;

    left:0;
    top:0;

    width:480px;
    height:480px;

    margin:
        -240px
        0
        0
        -240px;

    border-radius:50%;

    pointer-events:none;

    z-index:0;

    opacity:.22;

    background:
        radial-gradient(
            circle,
            rgba(232,179,88,.15) 0%,
            rgba(232,179,88,.055) 28%,
            transparent 70%
        );

    filter:blur(5px);

    will-change:transform;
}


/* Keep site above ambient layer */

main,
footer{
    position:relative;
    z-index:1;
}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.sl-mc-reveal{
    opacity:0;

    filter:blur(5px);

    transform:
        translate3d(
            0,
            28px,
            0
        )
        scale(.985);

    transition:
        opacity .72s
            cubic-bezier(.2,.8,.2,1)
            var(--sl-delay,0ms),

        transform .72s
            cubic-bezier(.2,.8,.2,1)
            var(--sl-delay,0ms),

        filter .72s ease
            var(--sl-delay,0ms);

    will-change:
        transform,
        opacity;
}


.sl-mc-reveal.sl-mc-visible{
    opacity:1;

    filter:none;

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1);
}


/* =========================================================
   CARD 3D
   ========================================================= */

.sl-mc-tilt{
    --sl-rx:0deg;
    --sl-ry:0deg;
    --sl-lift:0px;

    transform:
        perspective(950px)
        rotateX(var(--sl-rx))
        rotateY(var(--sl-ry))
        translateY(var(--sl-lift));

    transform-style:preserve-3d;

    transition:
        transform .18s ease,
        box-shadow .22s ease,
        border-color .22s ease;

    will-change:transform;
}


.sl-mc-tilt:hover{
    --sl-lift:-4px;

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.20),
        0 0 28px
        rgba(232,179,88,.035);
}


/* =========================================================
   BUTTON SHIMMER
   ========================================================= */

.sl-mc-button{
    position:relative;

    overflow:hidden;

    isolation:isolate;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease !important;
}


.sl-mc-button::before{
    content:"";

    position:absolute;

    z-index:4;

    top:-20%;
    bottom:-20%;

    left:-55%;

    width:32%;

    pointer-events:none;

    opacity:.65;

    transform:
        skewX(-22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.24),
            transparent
        );

    transition:
        left .55s
        cubic-bezier(.2,.8,.2,1);
}


.sl-mc-button:hover::before{
    left:125%;
}


.sl-mc-button:hover{
    transform:translateY(-2px);

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.18);
}


.sl-mc-button:active{
    transform:
        translateY(0)
        scale(.985);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

header nav a{
    position:relative;
}


header nav a::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-8px;

    width:0;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #e8b358,
            transparent
        );

    transform:
        translateX(-50%);

    transition:
        width .25s ease;
}


header nav a:hover::after{
    width:100%;
}


/* =========================================================
   STATUS PULSE
   ========================================================= */

.online .sl-live-dot,
.is-online .sl-status-indicator{
    animation:
        slMcServerPulse
        2.2s
        ease-in-out
        infinite;
}


@keyframes slMcServerPulse{

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

    50%{
        transform:scale(1.18);
    }

}


/* =========================================================
   LIGHT THEME
   ========================================================= */

html[data-theme="light"]
#sl-mc-glow{
    opacity:.11;
}


html[data-theme="light"]
.sl-mc-pixel{
    opacity:.35;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

    #sl-mc-glow{
        display:none;
    }

    .sl-mc-tilt{
        transform:none !important;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .sl-mc-pixel{
        display:none;
    }

    #sl-mc-glow{
        display:none;
    }

    .sl-mc-reveal{
        opacity:1 !important;

        filter:none !important;

        transform:none !important;

        transition:none !important;
    }

    .sl-mc-tilt{
        transform:none !important;

        transition:none !important;
    }

    .sl-mc-button::before{
        display:none;
    }

    .online .sl-live-dot,
    .is-online .sl-status-indicator{
        animation:none;
    }

}

/* /STAFFLAND MINECRAFT MOTION ENGINE V1 */


/* =========================================================
   STAFFLAND CLEAN MOTION OVERRIDE
   Убираем старые летающие квадраты
   ========================================================= */

#sl-mc-ambient,
#sl-mc-glow{
    display:none !important;
}

/* /STAFFLAND CLEAN MOTION OVERRIDE */